import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from 'react'; import { ColumnDef, Row, RowData, Table } from '@tanstack/react-table'; import { DataTableDensity } from '@viasat/beam-shared/components/dataTable'; /** * Column definition for a DataTable, aliased from TanStack Table's `ColumnDef`. * @typeParam TData - Shape of a single row's data. * @typeParam TValue - Type of the value held in the column's cell. */ export type DataTableColumnDef = ColumnDef; interface DataTableBaseProps extends ComponentPropsWithRef<'div'> { /** * Density of the table's rows. * @default 'md' */ 'density'?: DataTableDensity; /** * Adds a border around the table container. * @default true */ 'bordered'?: boolean; /** * Rounds the corners of the table container. * @default true */ 'rounded'?: boolean; /** * Applies zebra striping to body rows in the current row-model order, starting * with the second row. Sorting, filtering, and expansion preserve visual * alternation; pagination restarts it on each page. Manually composed rows * must set `DataTable.Row`'s `striped` prop explicitly, and their `` * must use the `bm-data-table__body` class for zebra and hover styles. * Virtualized rows should derive `striped` from their index in the complete * current row model rather than their mounted DOM position. When enabled, * `rowHover` layers over either background. * @default false */ 'striped'?: boolean; /** * Highlights body rows on hover as a visual aid. Does not make rows selectable * or clickable. A manually composed `` must use the * `bm-data-table__body` class for this styling. * @default false */ 'rowHover'?: boolean; /** * Props forwarded to the inner `` element. The root props on `DataTable` * target the wrapper `
`, which contains both the toolbar and the table. */ 'tableProps'?: ComponentPropsWithoutRef<'table'>; /** * DataTable sub-components (Header, Toolbar, Head, ColumnHeader, Body, Row, Cell, Footer). */ 'children'?: ReactNode; /** * Accessible name for the table. Applied directly to the `
` element, unless * a `DataTable.Toolbar` is present — then it's applied to the container as a * `region` landmark naming the whole widget instead. */ 'aria-label'?: string; /** * ID of the element that labels the table. Alternative to `aria-label` — see its * description for how the label is routed depending on whether a toolbar is present. */ 'aria-labelledby'?: string; } /** * Layer 1 (ADR-000): the opaque `data`/`columns` path. DataTable builds its TanStack * instance internally via `useBeamTable`. Mutually exclusive with `table` — see * {@link DataTableInstanceProps}. */ export interface DataTableDataProps extends DataTableBaseProps { /** * Row data rendered by the table. */ data?: TData[]; /** * Column definitions describing how to render each column. */ columns?: DataTableColumnDef[]; table?: never; } /** * Layer 2/3 (ADR-000): renders a pre-built TanStack `table` instance — from * `useBeamTable` or a raw `useReactTable` escape hatch — directly instead of * building one internally. Mutually exclusive with `data`/`columns` — see * {@link DataTableDataProps}. */ export interface DataTableInstanceProps extends DataTableBaseProps { data?: never; columns?: never; /** * A pre-built TanStack `Table` instance (e.g. from `useBeamTable` or * `useReactTable`). When supplied, DataTable renders it directly instead of * building its own. Mutually exclusive with `data`/`columns`. */ table: Table; } export type DataTableProps = DataTableDataProps | DataTableInstanceProps; export interface DataTableHeaderProps extends ComponentPropsWithRef<'caption'> { children?: ReactNode; } export interface DataTableToolbarProps extends ComponentPropsWithRef<'div'> { children?: ReactNode; } /** * DataTable.Head renders the table instance's header groups; `children` isn't accepted. * * Two ways to customize a header: * - Per header cell (sort button, select-all checkbox): set `columnDef.header` to a * string or render function — resolved via `flexRender`. * - Fully hand-built header: skip `DataTable.Head` and compose your own `` from * `DataTable.Row` / `DataTable.ColumnHeader` as a direct child (the ADR-000 Layer 3 * path); it renders with Beam styling and honors a `scope` override. */ export type DataTableHeadProps = Omit, 'children'>; export interface DataTableColumnHeaderProps extends ComponentPropsWithRef<'th'> { /** * Renders a ``) row so * the column headers form a valid table header row group. */ children?: ReactNode; } /** * DataTable.Body renders one `` per row in the table instance's * `getRowModel()`, sourced from context — `children` isn't accepted. */ export type DataTableBodyProps = Omit, 'children'>; export interface DataTableRowProps extends ComponentPropsWithRef<'tr'> { /** * The table row to render, sourced from the table instance. When supplied * (by `DataTable.Body`), the row renders one `DataTable.Cell` per visible * column via `flexRender`. Ignored when `children` are provided. */ row?: Row; /** * Applies the zebra background to a manually composed row. * @default false */ striped?: boolean; /** * Explicit row content (e.g. `DataTable.Cell` / `DataTable.ColumnHeader` * children). Takes precedence over `row` — used by `DataTable.Head` and by * manual (ADR-000 Layer 3) composition. */ children?: ReactNode; } export interface DataTableCellProps extends ComponentPropsWithRef<'td'> { children?: ReactNode; } export interface DataTableFooterProps extends ComponentPropsWithRef<'tfoot'> { children?: ReactNode; } export {};
`. Nest inside a `DataTable.Head` (`