A light react table package
Tags: javascript, beginners, react, webdev
Published: 2022-08-15 01:57:31

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](https://barzin144.github.io/react-custable/?path=/story/components--table).

## 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