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
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|