Easy React Table
Michael Rowlinson
Posted on October 23, 2021
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.
💖 💪 🙅 🚩
Michael Rowlinson
Posted on October 23, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
