Build better Tables with React 🍱

React Table Library

React Table Library -- an almost headless table library -- which prioritizes:

opt-in feature richness
built-in themes and custom theming
server-side operations as first-class citizens
small library size
pleasant developer experience
TypeScript support
SSR support

Requirements

React Table Library requires the following libraries to be installed:

"react": ">=16.8.0"
"react-dom": ">=16.8.0"
"@emotion/react": ">= 11"

Installation

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

yarn add @table-library/react-table-library @emotion/react

Usage

Documentation

import { CompactTable } from '@table-library/react-table-library/compact';

const nodes = [
  {
    id: '0',
    name: 'Shopping List',
    deadline: new Date(2020, 1, 15),
    type: 'TASK',
    isComplete: true,
    nodes: 3,
  },
];

const COLUMNS = [
  { label: 'Task', renderCell: (item) => item.name },
  {
    label: 'Deadline',
    renderCell: (item) =>
      item.deadline.toLocaleDateString('en-US', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
      }),
  },
  { label: 'Type', renderCell: (item) => item.type },
  {
    label: 'Complete',
    renderCell: (item) => item.isComplete.toString(),
  },
  { label: 'Tasks', renderCell: (item) => item.nodes },
];

const Component = () => {
  const data = { nodes };

  return <CompactTable columns={COLUMNS} data={data} />;
};

The Problem

You are looking for a suitable table component to solve your problem, but you cannot find any one solution which comes with all your desired features and is still customizable for a pleasant developer experience. I myself ran into this problem after working with many different React table components -- from UI libraries but also from standalone libraries -- and none of them felt right to me. After working on React tables for three different clients over the past year, I decided to create my own solution for my clients. I came to the conclusion that the React ecosystem needs yet another table library -- which does it better.

The Solution

In 2020, Robin Wieruch created React Table Library in collaboration with Big Ladder Software. After working with different table libraries to fit their needs, they decided to create their own solution with the following objectives in mind ...

composition over configuration
customization and extensibility
server-side operations (e.g. search, pagination) as first-class citizens
pleasant developer experience

How is this different from other React Table Libraries?

There are two kinds of table libraries for React: heavyweight and lightweight.

At one end of the spectrum, there are heavyweight table libraries which are often shipped by UI libraries such as MUI X. These tables have all the bells and whistles included, however, they often fail to use modern concepts such as composition over configuration, customization, extensibility, and server-side operations as first-class citizens. When you have to create one giant configuration object for one giant table component, then you know that you are working with a heavyweight table library.

At the other end of the spectrum, there are lightweight table libraries. The most popular one is React Table which is a great library and at the time was the go-to library in the React community. I very much like this library and used it myself, however, when creating complex tables (read: server-side operations, customizations, feature compositions) from scratch, I felt that I was re-inventing the wheel every time, because I did not receive enough support from the library.

With React Table Library I wanted to create something between heavyweight and lightweight. I wanted to give developers enough support for various built-in features to enable them to perform more complex server-side operations, while still giving them all the flexibility to create their own custom table with a composable approach by using components and hooks. I hope you like this library as well and try it out for your next project! It takes less than ten minutes to test the power of React Table Library.

import { CompactTable } from '@table-library/react-table-library/compact'; const nodes = [ { id: '0', name: 'Shopping List', deadline: new Date(2020, 1, 15), type: 'TASK', isComplete: true, nodes: 3, }, ]; const COLUMNS = [ { label: 'Task', renderCell: (item) => item.name }, { label: 'Deadline', renderCell: (item) => item.deadline.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', }), }, { label: 'Type', renderCell: (item) => item.type }, { label: 'Complete', renderCell: (item) => item.isComplete.toString(), }, { label: 'Tasks', renderCell: (item) => item.nodes }, ]; const Component = () => { const data = { nodes }; return <CompactTable columns={COLUMNS} data={data} />; };