React Table - The react-table is a lightweight, fast and
extendable data-grid built for React.
Features of React Table –
1. Lightweight
at 11kb (and just 2kb more for styles)
2. Fully
Customizable (JSX, templates, state, styles, callbacks)
3. Client-side
& Server-side pagination
4. Multi-sort
5. Filters
6. Pivoting
and Aggregation
7. Minimal
design and easily
8. Fully
controllable via optional props and callbacks
#Installation
- Install
> npm i react-table
#Import
the react-table module -
// ES6
import ReactTable from 'react-table'
// ES5
var ReactTable = require('react-table').default
#Import
styles by including react-table.css -
// JS (Webpack)
import 'react-table/react-table.css'
// Old-school
<link rel="stylesheet" href="node_modules/react-table/react-table.css">
As
an Example -
import React, { Component } from 'react'
import ReactTable from 'react-table'
import ReactTableDefaults from 'react-table'
export default class User extends Component {
data = [];
columns = [];
constructor(props) {
super(props);
//ReactTableDefaults used for Display Default number of Rows
Object.assign(ReactTableDefaults, {
defaultPageSize: 5,
minRows: 1
});
//Your Grid Data
this.data = [{
id: 10001,
name: 'Anil Singh',
age: 35,
friend: {
name: 'Dilip Singh',
age: 35,
}
}, {
id: 10002,
name: 'Sunil Singh',
age: 25,
friend: {
name: 'Sushil',
age: 26,
}
}, {
id: 10003,
name: 'Sushil Singh',
age: 26,
friend: {
name: 'Anil',
age: 35,
}
}, {
id: 10004,
name: 'Aradhya',
age: 5,
friend: {
name: 'Reena ',
age: 28,
}
}, {
id: 10005,
name: 'Reena Singh',
age: 28,
friend: {
name: 'Aradhay',
age: 5,
}
}, {
id: 10006,
name: 'UP Singh',
age: 35,
friend: {
name: 'Dilip',
age: 35,
}
}];
//Your ReactTable Disply columns
this.columns = [
{
Header: 'ID', // Custom header components!
accessor: 'id',
Cell: props => <span className='number'>{props.value}</span>
}, {
Header: 'Name',
accessor: 'name',
Cell: props => <span className='number'>{props.value}</span>,
filterable: true
}, {
Header: 'Age',
accessor: 'age',
Cell: props => <span className='number'>{props.value}</span> // Custom cell components!,
}, {
id: 'friendName', // Required because our accessor is not a string
Header: 'Friend Name',
accessor: d => d.friend.name // Custom value accessors!
}, {
Header: props => <span>Friend Age</span>, // Custom header components!
accessor: 'friend.age'
}]
}
render() {
return (
<>
<div><h4>User List -</h4></div>
<div>
<ReactTable
data={this.data}
columns={this.columns}
defaultPageSize={5}
minRows={2} />
</div>
</>
)
}
}
Data
-
Simply pass the data prop anything that resembles
an array or object.
<ReactTable
data={[...]}
/>
Props
-
These are all of the available props (and their
default values) for the main <ReactTable
/> component.
{
// General
data: [],
resolveData: data => resolvedData,
loading: false,
showPagination: true,
showPaginationTop: false,
showPaginationBottom: true
showPageSizeOptions: true,
pageSizeOptions: [5, 10, 20, 25, 50, 100],
defaultPageSize: 20,
minRows: undefined, // controls the minimum number of rows to display - default will be `pageSize`
// NOTE: if you set minRows to 0 then you get rid of empty padding rows BUT your table formatting will also look strange when there are ZERO rows in the table
showPageJump: true,
collapseOnSortingChange: true,
collapseOnPageChange: true,
collapseOnDataChange: true,
freezeWhenExpanded: false,
sortable: true,
multiSort: true,
resizable: true,
filterable: false,
defaultSortDesc: false,
defaultSorted: [],
defaultFiltered: [],
defaultResized: [],
defaultExpanded: {},
defaultFilterMethod: (filter, row, column) => {
const id = filter.pivotId || filter.id
return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true
},
defaultSortMethod: (a, b, desc) => {
// force null and undefined to the bottom
a = a === null || a === undefined ? '' : a
b = b === null || b === undefined ? '' : b
// force any string values to lowercase
a = typeof a === 'string' ? a.toLowerCase() : a
b = typeof b === 'string' ? b.toLowerCase() : b
// Return either 1 or -1 to indicate a sort priority
if (a > b) {
return 1
}
if (a < b) {
return -1
}
// returning 0, undefined or any falsey value will use subsequent sorts or
// the index as a tiebreaker
return 0
},
PadRowComponent: () => <span> </span>, // the content rendered inside of a padding row
// Controlled State Overrides (see Fully Controlled Component section)
page: undefined,
pageSize: undefined,
sorted: [],
filtered: [],
resized: [],
expanded: {},
// Controlled State Callbacks
onPageChange: undefined,
onPageSizeChange: undefined,
onSortedChange: undefined,
onFilteredChange: undefined,
onResizedChange: undefined,
onExpandedChange: undefined,
// Pivoting
pivotBy: undefined,
// Key Constants
pivotValKey: '_pivotVal',
pivotIDKey: '_pivotID',
subRowsKey: '_subRows',
aggregatedKey: '_aggregated',
nestingLevelKey: '_nestingLevel',
originalKey: '_original',
indexKey: '_index',
groupedByPivotKey: '_groupedByPivot',
// Server-side callbacks
onFetchData: () => null,
// Classes
className: '',
style: {},
// Component decorators
getProps: () => ({}),
getTableProps: () => ({}),
getTheadGroupProps: () => ({}),
getTheadGroupTrProps: () => ({}),
getTheadGroupThProps: () => ({}),
getTheadProps: () => ({}),
getTheadTrProps: () => ({}),
getTheadThProps: () => ({}),
getTheadFilterProps: () => ({}),
getTheadFilterTrProps: () => ({}),
getTheadFilterThProps: () => ({}),
getTbodyProps: () => ({}),
getTrGroupProps: () => ({}),
getTrProps: () => ({}),
getTdProps: () => ({}),
getTfootProps: () => ({}),
getTfootTrProps: () => ({}),
getTfootTdProps: () => ({}),
getPaginationProps: () => ({}),
getLoadingProps: () => ({}),
getNoDataProps: () => ({}),
getResizerProps: () => ({}),
// Custom pagination rendering
renderPageJump: ({ onChange, value, onBlur, onKeyPress, inputType, pageJumpText }) => component,
renderCurrentPage: page => component,
renderTotalPagesCount: pages => component,
renderPageSizeOptions: ({
pageSize,
pageSizeOptions,
rowsSelectorText,
onPageSizeChange,
rowsText,
}) => component
// Global Column Defaults
// To override only some values, import { ReactTableDefaults } from 'react-table'
// and construct your overrides (e.g. {...ReactTableDefaults.column, className: 'react-table-cell'})
column: {
// Renderers
Cell: undefined,
Header: undefined,
Footer: undefined,
Aggregated: undefined,
Pivot: undefined,
PivotValue: undefined,
Expander: undefined,
Filter: undefined,
// Standard options
sortable: undefined, // use table default
resizable: undefined, // use table default
filterable: undefined, // use table default
show: true,
minWidth: 100,
// Cells only
className: '',
style: {},
getProps: () => ({}),
// Headers only
headerClassName: '',
headerStyle: {},
getHeaderProps: () => ({})
// Footers only
footerClassName: '',
footerStyle: {},
getFooterProps: () => ({}),
filterAll: false,
filterMethod: undefined,
sortMethod: undefined,
defaultSortDesc: undefined,
},
// Global Expander Column Defaults
// To override only some values, import { ReactTableDefaults } from 'react-table'
// and construct your overrides (e.g. {...ReactTableDefaults.expanderDefaults, sortable: true})
expanderDefaults: {
sortable: false,
resizable: false,
filterable: false,
width: 35
},
// Global Pivot Column Defaults
pivotDefaults: {},
// Text
previousText: 'Previous',
nextText: 'Next',
loadingText: 'Loading...',
noDataText: 'No rows found',
pageText: 'Page',
ofText: 'of',
rowsText: 'rows',
// Accessibility Labels
pageJumpText: 'jump to page',
rowsSelectorText: 'rows per page',
}
Override
the core defaults using -
import { ReactTableDefaults } from 'react-table'
Object.assign(ReactTableDefaults, {
defaultPageSize: 5,
minRows: 2
//...
})
Or
Just
define them as props -
<ReactTable
defaultPageSize={5}
minRows={2}
//...
/>
ReactTable
Columns -
<ReactTable /> requires a columns prop,
which is an array of objects containing the following properties
[{
//...
// General
accessor: 'propertyName', // or Accessor eg. (row) => row.propertyName
id: 'myProperty', // Conditional - A unique ID is required if the accessor is not a string or if you would like to override the column name used in server-side calls
sortable: boolean, // Overrides the table option
resizable: boolean, // Overrides the table option
filterable: boolean, // Overrides the table option
show: true, // can be used to hide a column
width: undefined, // A hardcoded width for the column. This overrides both min and max width options
minWidth: 100, // A minimum width for this column. If there is extra room, column will flex to fill available space (up to the max-width, if set)
maxWidth: undefined, // A maximum width for this column.
// Cell Options
className: '', // Set the classname of the `td` element of the column
style: {}, // Set the style of the `td` element of the column
// Header & HeaderGroup Options
headerClassName: '', // Set the classname of the `th` element of the column
headerStyle: {}, // Set the style of the `th` element of the column
getHeaderProps: (state, rowInfo, column, instance) => ({}),
// Header Groups only
columns: [...], // See Header Groups section below
filterAll: false,
//...
}]
Download
source code from Github click...
NPM
Source Link Click... for more
detail