DEV Community

Cover image for Easy React Table
Michael Rowlinson
Michael Rowlinson

Posted on • Updated on

Easy React Table


A simple batteries included table component for React projects.

Say hello to ez-react-table!

⚡️ Try the Demo! ⚡️


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.


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.


npm i ez-react-table
Enter fullscreen mode Exit fullscreen mode


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} />

Enter fullscreen mode Exit fullscreen mode


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


Top comments (2)

hardeepcoder profile image
EasyCode Sardar

really beautiful, I have used and recorded video

rowlinsonmike profile image
Michael Rowlinson

Thank you Hardeep! I really appreciate that.