@empd/reactable NPM

React Table It

Data table component with React

Demo

Installation

$ npm i @emp/reactable

$ yarn add @emp/reactable

Usage

import Table from '@empd/reactable';
import '@empd/reactable/lib/styles.css';

Props

Props	Required	Description	Type	Default
`data`	-	Data to load on table	`[]`	`[]`
`columns`	-	Table column settings	`array` of objects Object contains some/ all properties below `name: string or element (required)` `className: string` `attributes: Object of html attributes` `selector: string` `sortable: boolean` `unsearchable: boolean` `cell: element or function` function passes current row data and returns element	`[]`
`emptyPlaceholder`	-	Data to load on table	`[]`	`[]`
`dataLength`	-	Specify length of all data when loading from server. `Note: server props must true`	`[]`	`[]`
`emptyPlaceholder`	-	Placeholder when table is empty.	`string \| element`	'No data found'
`pageOptions`	-	Data to load on table	`array` of numbers	`[10, 30, 50]`
`server`	-	Set if pagination is handled by asynchronously	`boolean`	`false`
`customPagination`	-	Render custom pagination	`boolean`	`false`
`paginationComponent`	-	Custom pagination component	`function`	`undefined`
`paginationPosition`	-	Position of pagination component	One of `['top', 'bottom', 'both', 'none']`	'top'
`onPageChange`	-	Custom page change function	`function` with params `(offset, limit, searchValue)` `Note: server props must true`	-
`onSort`	-	Custom sort function	`function` with params `(selector/key, ascending(boolean))`	`undefined`
`searchPlaceholder`	-	Search box placeholder	`string`	'Search'
`search`	-	Set visibility of search box	`boolean`	`true`
`containerClass`	-	CSS class for package component	`string`	''
`tableClass`	-	CSS class for table	`string`	''
`headerClass`	-	CSS class for table header	`string`	''
`rowClass`	-	CSS class for table row	`string`	''
`header`	-	Custom header component	`element`	`null`
`footer`	-	Custom footer component	`element`	`null`