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 searching, filtering, sorting, selecting, nesting tree tables, and pagination 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 prop 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 tree structures.
Moreover, the Table component uses a function as a child 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 composition over configuration. 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 rendering lists in React by rendering Row components with a key 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.
