Installation

Usage

Columns

| Property | Type | Required | Example | |------------------|-------------|----------|------------------------------------------------------| | name | string | no | the display name of our Column e.g. 'Name' | | sortField | string | no | If the column is sortable, sortField is required |
| cell | (row) => {} | yes | Render your own custom component | | filter | object | no | (link) | | operatorsOptions | array | no | Add operators options e.g [{value: '', label: ''}] |
| grow | number | no | flex-grow of the column |

Filters

| Property | Type | Required | Example | |------------------|--------------------------------------|----------|---------------------------------------------------------------------------| | render | (column) => {} OR string | yes | Render your own custom filter OR choose one ['text', 'number, 'button] | | field | string | yes | If the column is filterable, field is required | | operator | string | no | Default operator | | label | string | no | Button label | | ...rest | Props | no | It's possible to use defaultProps of inputs e.g placeholder |

Datatable

| Property | Type | Required | Default | Example | |-------------------------|--------------------------|----------|---------|---------------------------------------------------------| | title | string | no | | The Title displayed in the Table Header | | actions | component | no | | The Actions displayed in the Table Header | | columns | array | yes | [] | The column configuration |
| data | array | no | [] | Please, your data should have a unique identifier ! | | keyField | string | no | 'id' | Your data should have a unique identifier. | | dense | bool | no | false | Compact the row height | | striped | bool | no | true | Stripe color the odd rows | | highlightOnHover | bool | no | false | If rows are to be highlighted on hover | | pointerOnHover | bool | no | false | if rows show a point icon on hover | | noDataComponent | component OR string | no | | A custom component to display when there are no records |
| onRowClicked | func | no | | Callback to access the row, event on row click |
| onRowDoubleClicked | func | no | | Callback to access the row, event on row double click |
| noHeader | bool | no | false | Not displayed the Table Header |
| fixedHeader | bool | no | false | Makes the table header fixed |
| fixedHeaderScrollHeight | string | no | 50vh | Fixed the height value to the Table Body |
| showTableHead | bool | no | true | Displayed the Table Head |
| showTableSearch | bool | no | true | Displayed the Table Search |

Default Value

Row Selection

| Property | Type | Required | Default | Example | |-------------------------|--------------------------|----------|---------|----------------------------------------------------------------------------------| | selectableRows | bool | no | false | Whether to show selectable checkboxes | | selectableRowsHighlight | bool | no | false | Highlight a row when it is selected | | showSelectAll | bool | no | true | Whether to show the select all rows checkbox | | selectableRowDisabled | (row) => {} | no | | Disable row select based on a property in your data. e.g. row => row.isDisabled |

Replacing Components

Add property components (object) with a key present below :

• LoadingWrapper
• NoDataWrapper
• Pagination
• ResponsiveWrapper
• Search
• Table
• TableBody
• TableCell
• TableCellCheckbox
• TableColCheckbox
• TableHead
• TableHeader
• TableHeadRow
• TableRow

const CustomTable = ({ children, ...props }) => ( <div> <p> My New Texte </p> { children } </div> )

<DataTable components={{ Table: CustomTable }} />