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 to create a table component in React. After this part, there are many other parts giving you examples for , , , , nesting , and for your React table by using React Table Library. Let's start with the basics.

First, install React Table Library from the command line:

npm install @table-library/react-table-library @emotion/react

We are going 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,
}
];

Next, the list is wrapped by an object which can be consumed by the Table component. The component itself is 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 a with a nodes property. These nodes are the items in our list, however, the table keeps the naming of nodes more generic, because the Table component has the ability not only to display list structures but also .

Moreover, the Table component uses a giving access to the list within the table as tableList. Internally, the Table component applies many different modifications to the list -- e.g. sorting, pagination, if these plugins are enabled -- and so 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 where each component has its own responsibility. For example, instead of having only one Table component which accepts one large configuration object, there are several composable components, such as Header, HeaderRow, and HeaderCell, which can all receive dedicated props.

Finally, let's display the items in the usual way 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>
);
};

As 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 do rendering. Using React Table Library makes it easy to render Table components in React. Go to the library's documentation to find out more about its features.

Keep reading about 

In this tutorial, I want to show you how to use React Table Library to create a Tree Table or Tree List . In the previous example, you installed React Table Library to create a table component…

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

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.