React Table

Hooks for building lightweight, fast and extendable datagrids for React

⚠️ Version 7 is under active development and is currently in an alpha state. If you are looking for React Table v6, click here

Features

• Lightweight
• Headless (Fully customizable)
• Client-side & Server-side pagination
• Multi-sort
• Filters
• Pivoting & Aggregation
• Fully controllable
• Extensible
• "Why I wrote React Table and the problems it has solved for Nozzle.io" by Tanner Linsley

Versions

• This documentation is for version 7 of react-table.
• View the Changelog
• Previous versions:
  • 6.x.x Readme
  • 5.x.x Readme

Sponsors

React Table v7 is mostly planned and I (@tannerlinsley) am looking for Patreon support to make it a reality. It will require a decent time commitment on my part to not only implement it, but also help people migrate and continue to maintain it. If you would like to contribute to my Patreon goal for v7 and beyond, visit my Patreon and help me out!.

Issues, Questions and Support

Github issues are temporarily disabled until v7 is out. Most if not all issues that were or will be opened are likely to be resolved or uneccessary after v7 is released (mostly due to the headless approach of the new component). If you have an issue or a question, feel free to use the React Table Spectrum Community/Forum!

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
$ yarn add react-table

# NPM
$ npm install react-table

2. Import the react-table module

import { useReactTable } from "react-table";

Examples

React Table v7 Sandbox

Documentation

Documentation for v7 is coming soon. If you're looking for the v6 documentation, click here

Contributing

To suggest a feature, create an issue if it does not already exist. If you would like to help develop a suggested feature follow these steps:

• Fork this repo
• Install dependencies with $ yarn
• Auto-build files as you edit with $ yarn run watch
• Implement your changes to files in the src/ directory
• Run the React Story locally with $ yarn run docs
• View changes as you edit docs/src
• Submit PR for review

Scripts

• $ yarn run watch Watches files and builds via babel
• $ yarn run docs Runs the storybook server
• $ yarn run test Runs the test suite