Data displayGenerated from the public API

DataTablePagination

Page controls bound to the table's own state, server-side paging included.

@luc/ui/data-table

Examples

Default

Shown inside a real table, which is the only context the component renders in.

Six prepared research runs with performance and metadata columns.

BTC-USD	Volatility carry	Paused	Range	2.00	41.7%	-29.1%	341	56.7%	Sep 13
AAPL	Cross-sectional momentum	Live	Stress	1.73	-3.8%	-32.4%	394	40.2%	Aug 24
NDX	Volatility carry	Live	Stress	1.55	23.0%	-26.0%	423	45.5%	Sep 9
NVDA	Mean reversion	Paused	Stress	1.32	-2.0%	-15.0%	532	93.3%	Aug 19
NDX	Mean reversion	Failed	Trend	0.48	25.4%	-13.7%	297	59.9%	Sep 9
MSFT	Trend breakout	Failed	Range	0.33	9.4%	-26.8%	223	23.3%	Sep 21

1–6 of 6 runs

Rows per page

1 / 1

<DataTable
  columns={columns}
  data={runs}
  ariaLabel="Research runs"
  footer={<DataTablePagination rowLabel="runs" />}
/>

Usage

import { DataTablePagination } from "@luc/ui/data-table";

<DataTable
  columns={columns}
  data={runs}
  ariaLabel="Research runs"
  footer={<DataTablePagination rowLabel="runs" />}
/>

Package setup — peer requirements, the stylesheet and the provider — is on installation.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

Exported symbols
Export	Kind	Signature
`DataTablePagination`	3 documented props	`({ className, pageSizeOptions, rowLabel, }: DataTablePaginationProps) => import("@types/react").JSX.Element`

DataTablePagination props

Type: DataTablePaginationProps

Values the compiler reads from the declaration.

DataTablePagination props
Prop	Type	Default	Notes
`className?`	`string \| undefined`	`—`
`pageSizeOptions?`	`readonly number[] \| undefined`	`—`
`rowLabel?`	`string \| undefined`	`—`	Noun for the rows being counted. Default `"rows"`.

Guidelines

Pass `rowLabel` so the summary reads “48 runs” rather than “48 rows”.
Set `pageSizeOptions` only where the product has a real density choice; the default is one decision fewer.

Don't

Render it outside the table's `footer`; it binds to the table's own state through that context.

Accessibility

The pager reads the row count and page from the table it belongs to and reports the visible range as text beside its controls, so the number is not moved by a page change without being announced.

Family

Data display

Dense, sortable, scannable: the surfaces a real product reads numbers from.

17 documented entries in this family. Open the family index