React-Table: useTable

Contents

Intro

React-Table is an awesome headless data table component for React with a ton of great features. The API is well documented but the code samples leave a bit to be desired. In some instances they demonstrate multiple different hooks in one example, which can be confusing for beginners. A Simplest Possible Implementation (SPI) is always preferable in documentation.

In other instances the code samples imply things that may not necessarily be true. Like if you use useBlockLayout you must also use Styled Components. And other implications that we will explore.

This post is intended to provide several SPI examples of common hooks and also dispel some misconceptions that the documentation examples may create.

Example Notes

I am going to provide all of my examples as nested components. There will be one primary component called <DataTable> which is where the majority of the code for the table will live. This will be wrapped by another component <PeopleDataTable> which will feed the data and columns to the <DataTable> as props.

This is intended to mimic a real world implementation as closely as possible. We want our <DataTable> component to be composable. In the real world there will probably be several different versions of a table for different types or categories of data. We will pretend that we want to show user information with this particular instance, thus <PeopleDataTable>.

This parent component exists simply to pass data, columns and other settings down to the <DataTable> component, as you would do in a real application.

By removing the column definitions, data generation and styles from the DataTable component it is MUCH easier to see what is happening with this library.

useTable

This is the simplest possible implementation of a react-table with no additional features. Just taking data and columns props and generating a table.

Edit ncoughlin/react-table_useTable

In the following posts we will expand on this simple table with sorting, filtering, pagination and more by using the other available hooks.