Data Table

A generic, sortable, filterable, and paginated data table built on @tanstack/react-table v8. Define typed columns once and pass any data.

When To Use

Use Data Table when information needs to be scanned quickly and compared across multiple rows, cards, or values.
Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.

When Not To Use

Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.

Accessibility Notes

Preserve table semantics for tabular data and avoid flattening structured information into generic divs.
Use clear headings, summaries, and labels so assistive technologies can announce the data in context.
Do not rely on color alone to communicate trend, status, or state in charts and metric cards.

Key Props / API

Props

columns, data, searchKey, searchPlaceholder, pageSize, showPagination

Example Code

import { DataTable, createColumnHelper, type ColumnDef } from "@hilum/ui"
import { Badge } from "@hilum/ui"

type Transaction = {
  id: string; company: string; type: string
  amount: string; date: string; status: "Paid" | "Pending" | "Overdue"
}

const helper = createColumnHelper<Transaction>()

const columns: ColumnDef<Transaction>[] = [
  helper.accessor("id", {
    header: "ID",
    cell: (info) => <span className="font-mono caption text-ground-400">{info.getValue()}</span>,
  }),
  helper.accessor("company", {
    header: "Company",
    cell: (info) => <span className="font-medium text-ground-900">{info.getValue()}</span>,
// ...trimmed for docs

With search

Search and sort

Filter rows by company name, click column headers to sort


TXN-8821	Acme Corp	Invoice	$4,200	Apr 1, 2026	Paid
TXN-8820	Globex Inc.	Invoice	$1,900	Mar 28, 2026	Pending
TXN-8819	Initech LLC	Refund	$320	Mar 22, 2026	Paid
TXN-8818	Umbrella Corp	Invoice	$8,750	Mar 15, 2026	Overdue
TXN-8817	Soylent Corp	Invoice	$2,100	Mar 10, 2026	Paid

12 results

Page 1 of 3

Without search

Sort and paginate

All sorting and pagination controls, without the search input


TXN-8821	Acme Corp	Invoice	$4,200	Apr 1, 2026	Paid
TXN-8820	Globex Inc.	Invoice	$1,900	Mar 28, 2026	Pending
TXN-8819	Initech LLC	Refund	$320	Mar 22, 2026	Paid
TXN-8818	Umbrella Corp	Invoice	$8,750	Mar 15, 2026	Overdue
TXN-8817	Soylent Corp	Invoice	$2,100	Mar 10, 2026	Paid

12 results

Page 1 of 3

Custom columns

Simplified view with actions

Four-column layout with a ghost action button per row


Acme Corp	$4,200	Paid
Globex Inc.	$1,900	Pending
Initech LLC	$320	Paid
Umbrella Corp	$8,750	Overdue
Soylent Corp	$2,100	Paid

12 results

Page 1 of 3