cm-react-sticky-table
v1.0.3
Published
A table to show data in an organized form, with interactive capabilities of sorting, searching, paginating etc and applied stickiness in columns, rows
Downloads
36
Readme
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
# npm
npm i cm-react-sticky-table
Examples
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import ReactStickyTable from 'cm-react-sticky-table';
var sampleData = [
['Row 1, Column 1', 'Row 1, Column 2', 'Row 1, Column 3'],
['Row 2, Column 1', 'Row 2, Column 2', 'Row 2, Column 3'],
['Row 3, Column 1', 'Row 3, Column 2', 'Row 3, Column 3'],
]
var sampleColumns = ['Column 1', 'Column 2', 'Column 3'];
const Comp = ({ data, columns }) => {
return (
<ReactStickyTable
data={data}
columns={columns}
/>
)
}
var elem = document.createElement('div');
document.body.appendChild(elem);
ReactDOM.render(<Comp data={[...sampleData]} columns={[...sampleColumns]} />, elem);
Props
<ReactStickyTable
style={{}}
className=''
data=[[], [], []]
columns=[ , , ]
total={95}
stickyRows={1}
stickyColumns={2}
pageIndex={0}
pageLength={10}
colResizable={true}
movingScroller={true}
information={true}
pagination={true}
rowHeight={34}
onChange={function () {
}}
/>
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.
// Simple
var data = [
['Row 1, Column 1', 'Row 1, Column 2', 'Row 1, Column 3'],
['Row 2, Column 1', 'Row 2, Column 2', 'Row 2, Column 3'],
]
// Advanced with variety of application
var data = [
[{ label: 'Row 1, Column 1', style: { color: 'red' }, title: 'Hello World!' }, { label: 'Row 1, Column 2' }],
[{ label: <span>I'm a react node</span> }, 'Row 1, Column 2'],
]
columns?: Array
Similar to an element of data
var columns = [
{ label: 'Column 1', style: { color: 'green' }, title: 'I represent column 1 header!' },
{ label: 'Column 2' }
]
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