An Introduction to React Table

A utility belt for lightweight, fast, and extendable data grids

Photo by sergio souza on Unsplash

A table, also called a data grid, is an arrangement of data in rows and columns, or possibly in a more complex structure. It is an essential building block of a user interface. I’ve built tables using Java Swing, ExtJs, Angular, and React. I’ve also used a number of third party tables. As a UI developer, there’s no escape from table components.

Build vs. buy? It is always a choice between cost and control. When there is an open-source with a proven track record, the choice becomes a no-brainer.

I would recommend using React Table, which provides a utility belt for lightweight, fast, and extendable data grids. This project started in October, 2016, with hundreds of contributors and tens of thousands of stars. It presents a custom hook, useTable, which implements row sorting, filtering, searching, pagination, row selection, infinity scrolling, and many more features.

Basic Table

As always, we use Create React App as a starting point. First, install React Table with the command npm i react-table. Then the package becomes part of dependencies in package.json.

"dependencies": {
  "react-table": "^7.1.0"
}

Change src/index.css to this for minimal table styling:

The following is a basic table, with five columns and ten rows.

Similar to any table, a React Table is composed of columns and data:

• columns is an array of columns. Columns can be nested, which act as header groups. In addition, columns can be recursively nested as much as needed.
• data is an array of rows to be displayed on the table.