Hi everybody :)
Creating a table in reactJS with selectable rows has been the biggest challenge for me, So I decided to create a light package that help me.
you can visit its storybook online Here.
Install via NPM
npm install --save react-custable
You only need two variables for configuration, column and data
import { Table } from 'react-custable';
//the fieldName should be as same as data's key
const column = [
{ fieldName: 'name', title: 'Name', width: '180px', sortable: true },
{ fieldName: 'email', title: 'Email', width: '180px', sortable: true },
];
const data = [
{ id: '1', name: 'name one', email: 'mailone@mail.com' },
{ id: '2', name: 'name two', email: 'mailtwo@mail.com' },
];
<div className="App">
<Table columns={columns} data={data} />
</div>;
what's column props?
the 'fieldName' is the key name of your data and 'title' is the table header for that data and these are mandatory.
Optional column configuration
- width: you can assign certain width to each column
- sortable: this table can sort columns data if these are string
- sortFunc: if the column's data isn't string you can pass a function that knows how to sort your data.
- fixed: if you want to fixed the column for horizontal scroll (only work for first column or last column)
- render: if you want to render custom component, you should pass a function that get row (data of current row) and index (index of current row) and your function should return a Cell object
{
value: React.ReactNode,
props: { [key: string]: string }, //props will be applied to td elemenet like colspan
}
| Option | Type | Description |
|---|---|---|
| fieldName* | string | data key |
| title* | string | column header title |
| width | string(px) | column width (Default is auto) |
| fixed | string ('left' or 'right') | to fix column |
| sortable | boolean | Default is false |
| sortFunc | ( a , b ) => number | sort function should return -1 when a < b , 1 when a > b , 0 when a = b |
| render | (row, index) => Cell | for rendering custom component in cell |
As you've seen before 'data' and 'column' are mandatory for the table, let's see what are optional for the table
| Option | Type | Description |
|---|---|---|
| column* | Column[] | array of columns |
| data* | { id:string, ... }[] | array of data |
| isSelectable | boolean | to enable checkboxes for rows |
| selectRowHandler | (selectedRowIds) => void | the callback function will receiver selected row IDs |
| selectedRowKeys | string[] | default value for selected rows |
| pagination | { currentPage: number; totalCount: number; pageLimit: number; } | values for table pagination |
| pageChangeHandler | (pageNumner: number) => void | the callback for handle page changes |
| rowClickHandler | (row: Row) => void | the callback for handle row click |
| showLoading | boolean | show spinner over table |
Contribute
this is the first version of my package, so feel free to contribute
https://github.com/barzin144/react-custable
Top comments (0)