npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@table-library/react-table-library

v4.1.7

Published

react-table-library

Downloads

76,803

Readme

Version Size Types Semantic Release License Code of Conduct Changelog

Tweet Follow Star Sponsor

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

Showreel

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

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.