Easy React Table

#react #npm #javascript #webdev

What?

A simple batteries included table component for React projects.

Say hello to ez-react-table!

⚡️ Try the Demo! ⚡️

Why?

I build a lot of admin related dashboards and wanted a table that just works. A table with almost no setup and a nice user experience.

How?

Out of the box you get a search bar for filtering, sorting, virtualized rows, infinite scrolling ability, effective styling (including dark mode), and sweet cell overflow handling with tooltips. Additionally, it is arbitrary to add custom components to row cells.

Setup

npm i ez-react-table

Example

import * as React from "react";
import EzReactTable from "ez-react-table";

// fake data
const data = Array.from(Array(20))
  .map((i) => [
    { first: "Michael", last: "Myers" },
    { first: "Laurie", last: "Strode" },
    { first: "Samuel", last: "Loomis" },
  ])
  .reduce((a, c) => [...a, ...c], []);

// define columns
const cols = [
  {
    title: "First",
    width: 200,
    key: "first",
  },
  {
    title: "Last",
    width: 200,
    key: "last",
  },
  {
    title: "Actions",
    width: 100,
    key: "action",
    center: true,
    render: (value, object) => (
      <button onClick={() => alert(JSON.stringify(object))}>View</button>
    ),
  },
];

function App() {
  return (
    <div className="App">
      <EzReactTable cols={cols} data={data} />
    </div>
  );
}