Introduction

React Table is a lightweight, fast and extendable data grid built for React.

Features of React table

  • Lightweight at 11kb (and just 2kb more for styles)
  • Fully customizable (JSX, templates, state, styles, callbacks)
  • Client-side & Server-side pagination
  • Multi-sort
  • Filters
  • Pivoting & Aggregation
  • Minimal design & easily theme able
  • Fully controllable via optional props and callbacks
Installation
$npm install react-table
Usage
import ReactTable from 'react-table'
import 'react-table/react-table.css'
Different ways to render column data
  1. import ReactTable from 'react-table'
  2. import 'react-table/react-table.css'
  3. render() {
  4. const data = [{
  5. name: 'Tanner Linsley',
  6. age: 26,
  7. friend: {
  8. name: 'Jason Maurer',
  9. age: 23,
  10. }
  11. }, {
  12. ...
  13. }]
  14. const columns = [{
  15. Header: 'Name',
  16. accessor: 'name'
  17. }, {
  18. Header: 'Age',
  19. accessor: 'age',
  20. Cell: props => < span className = 'number' > {
  21. props.value
  22. } < /span> 
  23. }, {
  24. id: 'friendName',
  25. Header: 'Friend Name',
  26. accessor: d => d.friend.name
  27. }, {
  28. Header: props => < span > Friend Age < /span>, 
  29. accessor: 'friend.age'
  30. }]
  31. return <ReactTable
  32. data = {
  33. data
  34. }
  35. columns = {
  36. columns
  37. }
  38. />}
Data
Simply pass the Data prop to anything that resembles an array or object. Client-side sorting and pagination are built in, and your table will update gracefully as you change any props. Server-side data is also supported!
  1. <ReactTable
  2.   data={[...]}
  3. />
Example
  1. const columns = [{
  2.       Header: 'Information',
  3.       accessor: 'information',
  4.       Cell: e =><a href=”” </a>
  5.     },
  6.     {
  7.       Header: 'RelevanceRegion',
  8.      accessor: 'relevance'
  9.     },
  10.     {
  11.       Header: 'Function',
  12.      accessor: 'function' 
  13.     },
  14.     {
  15.       Header: 'SubFunction',
  16.      accessor: 'sbfunction'
  17.     },
  18.     {
  19.       Header: 'Type',
  20.      accessor: 'infotype'
  21.     },
  22.     {
  23.       Header:"Language",
  24.       accessor:'language'
  25.     },
  26.     {
  27.       Header:"Summary",
  28.       accessor:'summary',
  29.       show:false
  30.   }
  31.   ]
  32. <div >
  33.           <span className={styles.resultspan}>Results</span>
  34.           <div style={{display: this.state.resultItems.length==0 ? 'none':'block' }}>
  35.           <ReactTable 
  36.             data={this.state.resultItems}
  37.             columns={columns}
  38.             minRows={1}
  39.             sortable
  40.             defaultSorted={[
  41.               {
  42.                 id: "information",
  43.                 desc: true
  44.               }
  45.             ]}
  46.             className="-highlight"
  47.             SubComponent={row => {
  48.               return (
  49.                 <div style={{'border':'1px solid rgba(0, 0, 0, 0.05)'}}>
  50.                  {row.row.summary}
  51.                 </div>
  52.               )
  53.             }}
  54.            defaultExpanded={defaultExpandedRows}
  55.           />
  56.         </div>
  57.         </div>
image1
Styles
  • React-table ships with a minimal and clean stylesheet to get you on your feet quickly.
  • The stylesheet is located at react-table/react-table.css.
  • There are countless ways to import a stylesheet. If you have questions on how to do so, consult the documentation of your build system.
Classes
  • Adding a -striped className to ReactTable will slightly color odd numbered rows for legibility
  • Adding a -highlight className to ReactTable will highlight any row as you hover over it
Sub Tables and Sub Components
By adding a Sub Component props, you can easily add an expansion level to all root-level rows:
  1. <ReactTable
  2.   data={data}
  3.   columns={columns}
  4.   defaultPageSize={10}
  5.   SubComponent={row => {
  6.     return (
  7.       <div>
  8.         You can put any component you want here, even another React Table! You  even have access to the row-level data if you need! Spark-charts,
  9.         drill-throughs, infographics... the possibilities are endless!
  10.       </div>
  11.     )
  12.   }}
  13. />​
image2