React Table

react-table is a lightweight, fast and extendable datagrid built for React

Table of Contents

• Installation
• Example
• Data
• Props
• Columns
• Column Header Groups
• Custom Cell and Header and Footer Rendering
• Styles
• Custom Props
• Pivoting and Aggregation
• Sub Tables and Sub Components
• Server-side Data
• Fully Controlled Component
• Functional Rendering
• Multi-Sort
• Filtering
• Component Overrides
• Contributing
• Scripts
• Used By

Installation

1. Install React Table as a dependency

$ yarn add ant-rc-table

2. Import the ant-rc-table module

// ES6
import ReactTable from 'ant-rc-table'
// ES5

3. Import styles by including react-table.css

// JS (Webpack)

CDN

  <!-- CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/2.12.4/antd.css">

Example

import ReactTable from 'ant-rc-table'

render() {
  const data = [{
    name: 'Tanner Linsley',
    age: 26,
    friend: {
      name: 'Jason Maurer',
      age: 23,
    }
  },{
    ...
  }]

  const columns = [{
    Header: 'Name',
    accessor: 'name' // String-based value accessors!
  }, {
    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'
  }]

  <ReactTable
    tableJSONData={columns}
  />
}

Data

Simply pass the data prop 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!

Props

These are all of the available props (and their default values) for the main <ReactTable /> component.