Data Management
DataTable
Feature-rich table with sorting, pagination, and search.
import { DataTable } from "lambchop";
Live Demo
Title↑↓ | Author↑↓ | Site↑↓ | Revenue↑↓ | Pageviews↑↓ |
|---|---|---|---|---|
| New Album Review: Converge - Bloodmoon | Alex H. | noecho.net | $142.50 | 8,200 |
| Meshuggah Announce Farewell Tour | Jordan P. | melodicmag.com | $218.30 | 12,400 |
| Deftones Studio Update | Casey M. | theneedledrop.com | $95.20 | 5,600 |
| Top 10 Metalcore Albums of January | Taylor R. | metalinsider.net | $310.80 | 18,900 |
| Between the Buried and Me Interview | Alex H. | ghostcultmag.com | $78.90 | 4,200 |
Page 1 of 2
Usage
import { DataTable, type ColumnDef } from "lambchop";
import { createColumnHelper } from "@tanstack/react-table";
interface Row {
title: string;
revenue: number;
}
const columnHelper = createColumnHelper<Row>();
const columns = [
columnHelper.accessor("title", { header: "Title" }),
columnHelper.accessor("revenue", {
header: "Revenue",
cell: (info) => `$${info.getValue().toFixed(2)}`,
}),
];
<DataTable columns={columns} data={rows} searchable pageSize={10} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | ColumnDef<TData, any>[] | — | TanStack React Table column definitions |
data | TData[] | — | Array of row data objects |
pageSize | number | 20 | Rows per page |
searchable | boolean | false | Enable global search input |
searchPlaceholder | string | "Search..." | Placeholder text for search |
className | string | — | Additional CSS classes |
Features
- Sorting — Click column headers to sort ascending/descending
- Pagination — Automatic page controls when data exceeds pageSize
- Global Search — Filter rows across all columns
- Custom Cells — Full control over cell rendering via TanStack column definitions
- Tabular Numbers — Fixed-width numerals for aligned columns