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>
);
}
End
Thanks for reading. In active development as I use across my projects. Stay tuned!
Peace.
Top comments (2)
really beautiful, I have used and recorded video
Thank you Hardeep! I really appreciate that.