@wasable/react-component-datatable

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 }} />