@table-library/react-table-library

Build better Tables with React 🍱

React Table Library

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

• opt-in feature richness
• built-in themes and custom theming
• server-side operations as first-class citizen
• small library size
• 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
• Demo

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 find yourself looking for a fitting table component which solves your problem, but you cannot find the one solution which comes with all the desired features yet stays customisable for a pleasant developer experience. Personally I ran into this problem myself after working with lots of different React table components -- from UI libraries but also as standalone libraries -- and none of them felt right to me. After working on React tables for three different clients of mine over the past year, I decided to roll my own solution for them. I came to the conclusion that the React ecosystem needs another table library -- which does things right.

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 roll their own solution with the following subjects in mind ...

• composition over configuration
• customization & extensibility
• server-side operations (e.g. search, pagination) as first-class citizen
• developer experience

How is this different from other React Table Libraries?

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

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

On the other side of the spectrum, there are lightweight table libraries. The most popular one is React Table which is a great library and at the time the status quo 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 always felt like re-inventing the wheel all the time, because I didn't receive enough handholding from the library.

With React Table Library I wanted to have something in between heavyweight and lightweight. I wanted to give developers enough handholding for various built-in features, enable them to perform more complex server-side operations, while still keeping them all the flexibility to create their custom table with a composable approach by using components and hooks. I hope you like this library as well and give it a chance for your next project!