DEV Community

Cover image for Easy React Table
Michael Rowlinson
Michael Rowlinson

Posted on • Edited on

Easy React Table

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
Enter fullscreen mode Exit fullscreen mode

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>
  );
}

Enter fullscreen mode Exit fullscreen mode

End

Thanks for reading. In active development as I use across my projects. Stay tuned!

Peace.

Top comments (2)

Collapse
 
hardeepcoder profile image
EasyCode Sardar

really beautiful, I have used and recorded video

Collapse
 
rowlinsonmike profile image
Michael Rowlinson

Thank you Hardeep! I really appreciate that.