A highly flexible and reusable React table component built with HeroUI (formerly NextUI) and React Stately.
- Client-side Searching: Instant filtering across all columns.
- Client-side Sorting: Sort data by any column (supports numbers, dates, and strings).
- Pagination: Built-in pagination with configurable rows per page.
- Async Data Loading: Fetch data from a URL or provide it via props.
- Customizable: Override cell rendering and table styling.
- Date Awareness: Smart sorting and searching for date-based columns.
npm install @timadey/generic-table
# or
yarn add @timadey/generic-tableMake sure you have the peer dependencies installed:
npm install @heroui/react @react-stately/data lucide-react react react-dom use-debounce
import { GenericTable } from "@timadey/generic-table"; const columns = [ { name: "Name", uid: "name", sortable: true }, { name: "Role", uid: "role", sortable: true }, { name: "Status", uid: "status", sortable: true }, ]; const data = [ { id: 1, name: "Tony Reichert", role: "CEO", status: "Active" }, { id: 2, name: "Zoey Lang", role: "Technical Lead", status: "Paused" }, // ... ]; export default function App() { return ( <GenericTable title="Users" columns={columns} data={data} /> ); }
import { GenericTable } from "@timadey/generic-table"; import { Chip } from "@heroui/react"; const columns = [ { name: "Amount", uid: "amount", sortable: true }, { name: "Status", uid: "status", sortable: true }, { name: "Date", uid: "created_at", sortable: true }, ]; function renderCell(item, columnKey) { const value = item[columnKey]; switch (columnKey) { case "amount": return `₦${Number(value).toLocaleString()}`; case "status": return ( <Chip color={value === "success" ? "success" : "warning"} variant="flat"> {value.toUpperCase()} </Chip> ); default: return value; } } export default function TransactionsTable() { return ( <GenericTable title="Transactions" columns={columns} fetchUrl="/api/transactions" renderCell={renderCell} rowsPerPageOptions={[10, 25, 50]} topContentPlacement="outside" /> ); }
| Prop | Type | Default | Description |
|---|---|---|---|
columns |
Array |
[] |
Array of column objects { name, uid, sortable, getValue } |
fetchUrl |
string |
null |
URL to fetch JSON data from |
data |
Array |
[] |
Static data to display if fetchUrl is not provided |
title |
string |
"Data Table" |
Title displayed above the table |
rowsPerPageOptions |
Array<number> |
[5, 10, 15] |
Options for the rows per page dropdown |
renderCell |
Function |
null |
Custom cell renderer: (item, columnKey, index) => ReactNode |
topContentPlacement |
string |
outside |
Where to place the contents at the top of the table: inside or outside the table |
...props |
any |
Any other props are passed directly to the HeroUI Table component |
MIT