Data displayGenerated from the public API

FacetFilter

Multi-select filtering derived from the data, with counts that reflect the other facets.

@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"
  enableFiltering
  toolbar={
    <DataTableToolbar>
      <FacetFilter columnId="status" label="Status" />
    </DataTableToolbar>
  }
/>

Usage

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

<DataTable
  columns={columns}
  data={runs}
  ariaLabel="Research runs"
  enableFiltering
  toolbar={
    <DataTableToolbar>
      <FacetFilter columnId="status" label="Status" searchable />
    </DataTableToolbar>
  }
/>

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
`FacetFilter`	6 documented props	`({ columnId, label, formatValue, hideEmpty, searchable, className, }: FacetFilterProps) => import("@types/react").JSX.Element \| null`

FacetFilter props

Type: FacetFilterProps

Values the compiler reads from the declaration.

FacetFilter props
Prop	Type	Default	Notes
`className?`	`string \| undefined`	`—`
`columnId`	`string`	`—`	Column id to filter.
`formatValue?`	`((value: string) => string) \| undefined`	`—`	Render a raw facet value. Defaults to the value itself.
`hideEmpty?`	`boolean \| undefined`	`—`	Hide options that would return zero rows. Default `true`.
`label`	`string`	`—`	Button label, e.g. "Status".
`searchable?`	`boolean \| undefined`	`—`	Show the option search field. Default `true` from 8 options upward.

Guidelines

Name the column it filters through `columnId`, and give the facet the column's own label.
Turn on `searchable` for a facet with more than a dozen values, and `hideEmpty` where a value that matches nothing is noise.

Don't

Keep a facet for a column no other control can sort or read; the filter stays and the reader cannot tell what changed.

Accessibility

The facet is a menu of options bound to the table's column filter; the table's own header and row count report the result, so the filter does not need to announce a second copy of it.

Family

Data display

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

17 documented entries in this family. Open the family index