React Table

In this article, we will learn about React table and all the important features of the React table.

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