Renders a simple table following bootstrap 3 like styles, capable of making its columns and rows stick while user scrolls. Column widths are resize-able to fit users customized needs.

Installation

1# npm
2npm i cm-react-sticky-table
3

Examples

• Demo

Usage

1import React from 'react';
2import ReactDOM from 'react-dom';
3import ReactStickyTable from 'cm-react-sticky-table';
4
5var sampleData = [
6    ['Row 1, Column 1', 'Row 1, Column 2', 'Row 1, Column 3'],
7    ['Row 2, Column 1', 'Row 2, Column 2', 'Row 2, Column 3'],
8    ['Row 3, Column 1', 'Row 3, Column 2', 'Row 3, Column 3'],
9]
10
11var sampleColumns = ['Column 1', 'Column 2', 'Column 3'];
12
13const Comp = ({ data, columns }) => {
14    return (
15        <ReactStickyTable
16            data={data}
17            columns={columns}
18            />
19    )
20}
21
22var elem = document.createElement('div');
23document.body.appendChild(elem);
24
25ReactDOM.render(<Comp data={[...sampleData]} columns={[...sampleColumns]} />, elem);

Props

1<ReactStickyTable
2    style={{}}
3    className=''
4    data=[[], [], []]
5    columns=[ , , ]
6    total={95}
7    stickyRows={1}
8    stickyColumns={2}
9    pageIndex={0}
10    pageLength={10}
11    colResizable={true}
12    movingScroller={true}
13    information={true}
14    pagination={true}
15    rowHeight={34}
16    onChange={function () {
17    
18    }}
19    />

style?: object

Attaches style to sticky-table container node

className?: string

Attaches class to sticky-table container node

data? Array

data is expected to be an array of arrays, from simple structure to ever more complex.

1// Simple
2var data = [
3	['Row 1, Column 1', 'Row 1, Column 2', 'Row 1, Column 3'],
4    ['Row 2, Column 1', 'Row 2, Column 2', 'Row 2, Column 3'],
5]
6
7// Advanced with variety of application
8var data = [
9	[{ label: 'Row 1, Column 1', style: { color: 'red' }, title: 'Hello World!' }, { label: 'Row 1, Column 2' }],
10	[{ label: <span>I'm a react node</span> }, 'Row 1, Column 2'],
11]
12

columns?: Array

Similar to an element of data

1var columns = [
2	{ label: 'Column 1', style: { color: 'green' }, title: 'I represent column 1 header!' }, 
3	{ label: 'Column 2' }
4]

total?: number

Can be thought of as the number of rows the table has in the remote database. Helpful for pagination. If not provided, library tries to smartly figure out from rest of the given props.

stickyRows?: number

Number of rows to make sticky. Value 1 will scroll header row when window scrolls, whereas value 2 will include the first row of the data props too.

stickyColumns?: number

Number of columns to make sticky.

sortingIndex?: number

Not yet functional.

sortingOrder?: number

Not yet functional.

pageIndex?: number

The page-index that the table reflects from the remote database. Helpful for pagination.

pageLength?: number

Number of rows table is supposed to hold in a single page. Helpful for pagination.

colResizable?: boolean

Setting true allows the user to control (increase / decrease) the width of a column.

movingScroller?: boolean

A horizontal scroller appears at the top when the mouse enters sticky-table container. Sticks to the top of the window / container.

information?: boolean

Shows the range of the partial data displayed by table. Ex - Showing 1 to 10 out of 95 entries.

pagination?: boolean

Renders a pagination component.

rowHeight?: number, string

In case custom components are used to render cells which have the potential to have varying height, set rowHeight (34px, 34 etc.) of the table. Otherwise, table might display a messed-up structure.

onChange?: (key, value) => void

Sends the onChange key which determines the type of change occurred, along with its associated value. Possible keys

• pageIndex
• sortingIndex (Not yet functional)
• sortingOrder (Not yet functional)

Limitations / Gotchas

• Dont wrap the sticky-table with a container that controls overflow / scrolling. Better to leave it to window, else sticky rows wont be triggered to re-position themselves when a scroll event occurs within that container
• colSpan, rowSpan not supported
• Dynamic row height needs to be handled by the user outside of the library (else need to stick to rowHeight usage)

License

ISC