How to create a React Table Component

 by Robin Wieruch
 - Edit this Post

In this tutorial, I want to show you how to use React Table Library for creating a table component in React. After this tutorial, there will be many other examples which you can continue to build, such as searching, sorting, , or pagination features for your React table by using the library's documentation. But let's start with the basics.

Let's begin by installing React Table Library via your command line:

npm install @table-library/react-table-library styled-components

The task is to present the following list of items in a React table component:

const list = [
{
id: '1',
name: 'VSCode',
deadline: new Date(2020, 1, 17),
type: 'SETUP',
isComplete: true,
},
{
id: '2',
name: 'JavaScript',
deadline: new Date(2020, 2, 28),
type: 'LEARN',
isComplete: true,
},
{
id: '3',
name: 'React',
deadline: new Date(2020, 3, 8),
type: 'LEARN',
isComplete: false,
}
];

We will start with structuring the list in an object which can be consumed by the Table component. The component itself gets imported from the library:

import * as React from 'react';
import { Table } from '@table-library/react-table-library/table';
const list = [ ... ];
const App = () => {
const data = { nodes: list };
return <Table data={data}>{(tableList) => null}</Table>;
};

The Table component accepts a data object as with a nodes property. These nodes are the items in our lists, however, the table keeps it more generic to the naming of nodes, because the table can not only display list structures but also .

Moreover, the Table component uses a which gives us access to our list within the table as tableList. Internally the Table component applies all sorts of modifications onto our list -- e.g. sorting, pagination and so on, if these plugins are enabled -- and thus the tableList (and not data or list) should be used to render the items within the table.

React Table Library uses . Therefore, you get all the necessary building blocks as components from the library itself. Let's begin with the header of our table:

import * as React from 'react';
import {
Table,
Header,
HeaderRow,
HeaderCell,
} from '@table-library/react-table-library/table';
const list = [ ... ];
const App = () => {
const data = { nodes: list };
return (
<Table data={data}>
{(tableList) => (
<Header>
<HeaderRow>
<HeaderCell>Task</HeaderCell>
<HeaderCell>Deadline</HeaderCell>
<HeaderCell>Type</HeaderCell>
<HeaderCell>Complete</HeaderCell>
</HeaderRow>
</Header>
)}
</Table>
);
};

By using these components, you can create a table as a composition from components whereas each component has its own responsibility. For example, instead of having only one Table component which accepts one large configuration object, we have composable components -- such as Header, HeaderRow, and HeaderCell, which can receive dedicated props.

Next, let's display our items like we are used to when by rendering Row components with a for each item within a Body component:

import * as React from 'react';
import {
Table,
Header,
HeaderRow,
HeaderCell,
Body,
Row,
Cell,
} from '@table-library/react-table-library/table';
const list = [ ... ];
const App = () => {
const data = { nodes: list };
return (
<Table data={data}>
{(tableList) => (
<>
<Header>
...
</Header>
<Body>
{tableList.map((item) => (
<Row key={item.id} item={item}>
<Cell>{item.name}</Cell>
<Cell>
{item.deadline.toLocaleDateString(
'en-US',
{
year: 'numeric',
month: '2-digit',
day: '2-digit',
}
)}
</Cell>
<Cell>{item.type}</Cell>
<Cell>{item.isComplete.toString()}</Cell>
</Row>
))}
</Body>
</>
)}
</Table>
);
};

Since you have full control over what to render in the Cell components, you can format the data as you need to. A boolean can be translated into a string and a date can be formatted to a readable version. There are no special props for the Cell components to get the rendering done.


Using React Table Library makes it straightforward to render table components in React. Head over to the library's documentation to find out more about it and its features.

Keep reading about 

In this tutorial, I want to show you how to use React Table Library with a filter feature. In the previous example, you have already installed React Table Library to create a table component. Now…

In this tutorial, I want to show you how to use React Table Library with a search feature. In the previous example, you have already installed React Table Library to create a table component. Now…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.