GenericTable

A highly flexible and reusable React table component built with HeroUI (formerly NextUI) and React Stately.

Features

• 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.

Installation

npm install @timadey/generic-table
# or
yarn add @timadey/generic-table

Make sure you have the peer dependencies installed:

npm install @heroui/react @react-stately/data lucide-react react react-dom use-debounce

Usage

Basic Example

import{GenericTable}from"@timadey/generic-table";constcolumns=[{name: "Name",uid: "name",sortable: true},{name: "Role",uid: "role",sortable: true},{name: "Status",uid: "status",sortable: true},];constdata=[{id: 1,name: "Tony Reichert",role: "CEO",status: "Active"},{id: 2,name: "Zoey Lang",role: "Technical Lead",status: "Paused"},// ...];exportdefaultfunctionApp(){return(<GenericTabletitle="Users"columns={columns}data={data}/>);}

With Async Fetching and Custom Cells

import{GenericTable}from"@timadey/generic-table";import{Chip}from"@heroui/react";constcolumns=[{name: "Amount",uid: "amount",sortable: true},{name: "Status",uid: "status",sortable: true},{name: "Date",uid: "created_at",sortable: true},];functionrenderCell(item,columnKey){constvalue=item[columnKey];switch(columnKey){case"amount":
return`₦${Number(value).toLocaleString()}`;case"status":
return(<Chipcolor={value==="success" ? "success" : "warning"}variant="flat">{value.toUpperCase()}</Chip>);default:
returnvalue;}}exportdefaultfunctionTransactionsTable(){return(<GenericTabletitle="Transactions"columns={columns}fetchUrl="/api/transactions"renderCell={renderCell}rowsPerPageOptions={[10,25,50]}topContentPlacement="outside"/>);}

Props

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

License

MIT