Data displayGenerated from the public API

DataTableSelectionCount

The row above a table: search, facets, column visibility and the selection count.

@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

<DataTable
  columns={columns}
  data={runs}
  ariaLabel="Research runs"
  toolbar={
    <DataTableToolbar
      search={{ label: "Search runs", placeholder: "Search runs…" }}
      actions={<DataTableSelectionCount label="selected" />}
    />
  }
/>

Usage

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

<DataTable
  columns={columns}
  data={runs}
  ariaLabel="Research runs"
  toolbar={
    <DataTableToolbar
      search={{ label: "Search runs", placeholder: "Search runs…" }}
      actions={<DataTableSelectionCount label="selected" />}
    />
  }
/>

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
`DataTableSelectionCount`	2 documented props	`({ className, label }: DataTableSelectionCountProps) => import("@types/react").JSX.Element \| null`
`DataTableToolbar`	4 documented props	`({ className, children, search, actions }: DataTableToolbarProps) => import("@types/react").JSX.Element`

DataTableSelectionCount props

Type: DataTableSelectionCountProps

Values the compiler reads from the declaration.

DataTableSelectionCount props
Prop	Type	Default	Notes
`className?`	`string \| undefined`	`—`
`label?`	`string \| undefined`	`—`	Noun for the selected rows. Default `"selected"`.

DataTableToolbar props

Type: DataTableToolbarProps

Values the compiler reads from the declaration.

DataTableToolbar props
Prop	Type	Default	Notes
`actions?`	`ReactNode`	`—`	Right-aligned controls: column visibility, export, density, actions.
`children?`	`ReactNode`	`—`	Left-of-search controls (facets, view switches).
`className?`	`string \| undefined`	`—`
`search?`	`boolean \| { placeholder?: string; label?: string; className?: string; } \| undefined`	`—`	Bound global search field. `true` uses the defaults.

Guidelines

Use `search` rather than a separate input, so the table's global filter and the field share one value.
Put the selection count in `actions`: it is feedback about the table, not a command.

Don't

Add a second search field for the same table; two boxes filtering one dataset disagree the moment either is typed in.

Accessibility

The search field is a labelled input (`search.label` is the accessible name), and the selection count is live text inside the toolbar rather than a second control.

Family

Data display

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

17 documented entries in this family. Open the family index