React Final Table

A headless UI component libray for managing complex table state in React.

Inspired by react-table but with Typescript support built in and a simpler API.

Features

• Type safe
• Global row filtering
• Row selection
• Custom column rendering
• Column sorting
• Data memoization for performance
• Zero dependencies

Motivation

While there is an abundance of table libraries out there to help with sorting, filtering, pagination, and more, most are opinionated about the user interface. Opinionated UIs can seem nice at first, but they quickly become limiting. To embrace the Unix philosphy of separation of concerns, the interface should be separate from the engine (from The Art of Unix Programming).

This is a minimal, type-safe, headless UI component library that you can plugin to whatever frontend you're using, as long as you're using React 16 and Hooks. You are then free to style your table any way you want while using React Final Table to manage complex state changes.

Install

1npm install react-final-table

CodeSandbox Demo

Material UI Demo

Hooks

useTable

This is the main hook exposed by the library and should be your entrypoint for any table functionality. Only columns and data are required as arguments:

1const {
2  headers,
3  rows,
4  selectRow,
5  selectedRows
6} = useTable(columns, data, {
7  selectable?: boolean,
8  filter?: (rows: RowType<T>[]) => RowType<T>[],
9});

Basic example

1import { useTable } from 'react-final-table';
2
3const columns = [
4  {
5    name: 'firstName',
6    label: 'First Name',
7    render: ({ value }) => <h1>{value}</h1>, // optional
8  },
9  {
10    name: 'lastName',
11    label: 'Last Name',
12  },
13];
14
15const data = [
16  {
17    firstName: 'Frodo',
18    lastName: 'Baggins',
19  },
20  {
21    firstName: 'Samwise',
22    lastName: 'Gamgee',
23  },
24];
25
26const MyTable = () => {
27  const { headers, rows } = useTable(columns, data);
28
29  return (
30    <table>
31      <thead>
32        <tr>
33          {headers.map((header, idx) => (
34            <th key={idx}>{header.label}</th>
35          ))}
36        </tr>
37      </thead>
38      <tbody>
39        {rows.map((row, idx) => (
40          <tr key={idx}>
41            {row.cells.map((cell, idx) => (
42              <td key={idx}>{cell.render()}</td>
43            ))}
44          </tr>
45        ))}
46      </tbody>
47    </table>
48  );
49};

Advanced Example

1import React, { useMemo } from 'react';
2import { useTable } from 'react-final-table';
3
4const columns = [
5  { name: 'id', hidden: true },
6  {
7    name: 'first_name',
8    label: 'First Name',
9    render: ({ value }: { value: string }) => <span>Sir {value}</span>,
10  },
11  {
12    name: 'last_name',
13    label: 'Last Name',
14  },
15];
16
17const data = [
18  {
19    id: 1,
20    first_name: 'Frodo',
21    last_name: 'Baggins',
22  },
23  {
24    id: 2,
25    first_name: 'Samwise',
26    last_name: 'Gamgee',
27  },
28];
29
30function App() {
31  const memoColumns = useMemo(() => columns, []);
32  const memoData = useMemo(() => data, []);
33
34  const { headers, rows, selectRow, selectedRows } = useTable(
35    memoColumns,
36    memoData,
37    {
38      selectable: true,
39    }
40  );
41
42  return (
43    <>
44      <table>
45        <thead>
46          <tr>
47            <th></th>
48            {headers.map((header, idx) => (
49              <th key={idx}>{header.label}</th>
50            ))}
51          </tr>
52        </thead>
53        <tbody>
54          {rows.map((row, idx) => (
55            <tr key={idx}>
56              <td>
57                <input
58                  type="checkbox"
59                  onChange={e => {
60                    selectRow(row.id);
61                  }}
62                />
63              </td>
64              {row.cells.map((cell, idx) => (
65                <td key={idx}>{cell.render()}</td>
66              ))}
67            </tr>
68          ))}
69        </tbody>
70      </table>
71      <pre>
72        <code>{JSON.stringify(selectedRows, null, 2)}</code>
73      </pre>
74    </>
75  );
76}
77
78export default App;

Test

1npm run test

Contributing

Contributing is welcome! Submit pull requests using the git forking workflow.