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";

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

With Async Fetching and Custom Cells

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"
    />
  );
}

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