0.1.1-rc.23 • Published 1 year ago
@wasable/react-component-datatable v0.1.1-rc.23
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 }} />0.1.1-rc.23
1 year ago