@optimum-intelligence/opti-ui 0.2.0 → 0.3.0

package/README.md

@@ -72,9 +72,40 @@ Dates are displayed the same way in every locale, on a 24-hour clock: `2026-03-0
 (`formatDate`) and `2026. March 9. 14:30` where they are written out (`formatDateLong`); the locale only
 translates month and weekday names.
 
-`DataTable` handles search, sorting, pagination and selection for rows held in memory. With
-`mode="server"` it renders the page it is given and reports search, sort and page changes, so the API
-does the work; pass `total`, `loading` and `error` alongside:
+`DataTable` handles search, filters, sorting, pagination, selection, row actions and inline editing for
+rows held in memory. Columns declare what they take part in:
+
+```tsx
+const columns: DataTableColumn<Driver>[] = [
+  { id: 'badge', header: 'Badge', mono: true, searchMode: 'exact' },
+  { id: 'name', header: 'Name', edit: 'text' },
+  { id: 'depot', header: 'Depot', filter: 'select', edit: { type: 'select', options: depots } },
+  { id: 'active', header: 'Active', filter: 'toggle', edit: 'checkbox', cell: (row) => <StatusBadge on={row.active} /> },
+  { id: 'hired', header: 'Hired', filter: 'dateRange' },
+  { id: 'notes', header: 'Notes', hidden: true }, // searched, not shown
+];
+
+<DataTable
+  data={drivers}
+  columns={columns}
+  locale="hu"
+  filters={[{ id: 'new', type: 'toggle', label: 'New this month', match: isNew }]}
+  rowActions={(row) => [{ label: 'Locate', icon: <MapPin />, onClick: () => locate(row) }]}
+  rowTone={(row) => (row.suspended ? 'danger' : undefined)}
+  onRowSave={(row) => api.saveDriver(row)}
+  onRowDelete={(row) => confirmDelete(row)}
+/>
+```
+
+A `select` filter collects its options from the rows unless you pass `options`; a `toggle` keeps truthy
+values, or the rows passing its `match`; a `dateRange` includes both of its days. `onRowSave` adds the
+edit action and receives the edited row: return a promise to keep the row open while it saves, and reject
+it to leave the row open for another try.
+
+Every piece of state (`search`, `filterValues`, `sort`, `page`, `pageSize`, `selection`) works
+uncontrolled, or controlled with its `on…Change` callback. With `mode="server"` the table renders the page
+it is given and reports those changes, so the API does the work; typing in the search box is debounced
+by 300 ms (`searchDebounce`). Pass `total`, `loading` and `error` alongside:
 
 ```tsx
 <DataTable
@@ -89,9 +120,61 @@ does the work; pass `total`, `loading` and `error` alongside:
   onPageChange={setPage}
   onSortChange={setSort}
   onSearchChange={setSearch}
+  onFilterValuesChange={setFilters}
 />
 ```
 
+The table measures its columns once, with the longest values of all rows, and then holds their widths:
+paging, sorting, filtering and editing a row move nothing, and a short last page stays as tall as a full
+one. The widths are measured again when the table is resized. A column's `width` is a starting point and
+`minWidth` a floor; `truncate` cuts long text with an ellipsis instead of wrapping it. `layout="auto"`
+hands the widths back to the browser.
+
+For thousands of rows, `virtualized` renders only the ones in view inside `maxHeight` (default `32rem`)
+and turns pagination off. Rows are then one line high and every column fits its longest value, so mark
+long-text columns `truncate`. `onEndReached` loads more rows as the end is scrolled into view:
+
+```tsx
+<DataTable data={shipments} columns={columns} virtualized maxHeight={480} />
+
+<DataTable
+  mode="server"
+  data={rows}
+  total={total}
+  columns={columns}
+  loading={isFetchingNextPage}
+  paginated={false}
+  maxHeight={480}
+  onEndReached={fetchNextPage}
+/>
+```
+
+Rows of another height take `virtualized={{ rowHeight: 56 }}`. A row scrolled far out of view is
+unmounted, so focus inside it is lost; an edit in progress is kept and shows again when the row returns.
+
+For another layout, `useDataTable` takes the same options and returns the state and the processed rows,
+and the parts render it wherever you place them inside `DataTable.Root`:
+
+```tsx
+const table = useDataTable({ data, columns });
+
+<DataTable.Root table={table}>
+  <DataTable.Toolbar>
+    <DataTable.Search />
+    <DataTable.Filter id="depot" />
+    <DataTable.Actions>
+      <DataTable.Summary />
+      <Button onClick={() => exportCsv(table.rows.map(({ row }) => row))}>Export</Button>
+    </DataTable.Actions>
+  </DataTable.Toolbar>
+  <DataTable.Content density="compact" maxHeight={480} />
+  <DataTable.Pagination />
+</DataTable.Root>
+```
+
+`DataTable.Filters` renders every filter with a clear button, and `useDataTableContext()` gives your own
+components the same table.
+
 `FileUpload` collects `File` objects and leaves the upload to you; report its progress per file through
 `fileState`. Components with built-in text (`DataTable`, `Pagination`, `DatePicker`, `DateRangePicker`,
 `Calendar`, `FileUpload`, `Stepper`) take a `labels` prop for translation, and the date components take a

package/dist/components/card/Card.d.ts

@@ -11,7 +11,7 @@ export interface CardProps extends useRender.ComponentProps<'div', CardState> {
     variant?: CardVariant;
     /** Inner spacing. Override with `--oui-card-padding`. */
     padding?: CardPadding;
-    /** Adds hover lift — use with `render={<a href=… />}` or a click handler. */
+    /** Adds hover and focus states — use with `render={<a href=… />}` or a click handler. */
     interactive?: boolean;
 }
 export declare function Card({ variant, padding, interactive, render, ref, ...props }: CardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["useRender","mergeProps","createPrimitive","CardVariant","CardPadding","CardState","variant","padding","interactive","CardProps","ComponentProps","Card","t0","$","_c","t1","t2","t3","t4","t5","t6","t7","t8","t9","render","ref","props","undefined","t10","state","className","defaultTagName","CardHeader","CardTitle","CardDescription","CardActions","CardContent","CardFooter","_c"],"sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { createPrimitive } from '../../utils/primitive';\n\nexport type CardVariant = 'outlined' | 'elevated' | 'filled' | 'ghost';\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg';\n\nexport type CardState = {\n  variant: CardVariant;\n  padding: CardPadding;\n  interactive: boolean;\n};\n\nexport interface CardProps extends useRender.ComponentProps<'div', CardState> {\n  /** `outlined` (default) uses the card border, `elevated` a soft shadow. */\n  variant?: CardVariant;\n  /** Inner spacing. Override with `--oui-card-padding`. */\n  padding?: CardPadding;\n  /** Adds hover lift — use with `render={<a href=… />}` or a click handler. */\n  interactive?: boolean;\n}\n\nexport function Card({ variant = 'outlined', padding = 'md', interactive = false, render, ref, ...props }: CardProps) {\n  const state: CardState = { variant, padding, interactive };\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref,\n    state,\n    props: mergeProps<'div'>({ className: 'oui-card' }, props),\n  });\n}\n\nexport const CardHeader = createPrimitive('div', 'oui-card__header', 'CardHeader');\nexport const CardTitle = createPrimitive('h3', 'oui-card__title', 'CardTitle');\nexport const CardDescription = createPrimitive('p', 'oui-card__description', 'CardDescription');\n/** Right-aligned slot inside CardHeader for icon buttons or menus. */\nexport const CardActions = createPrimitive('div', 'oui-card__actions', 'CardActions');\nexport const CardContent = createPrimitive('div', 'oui-card__content', 'CardContent');\nexport const CardFooter = createPrimitive('div', 'oui-card__footer', 'CardFooter');\n"],"mappings":";;;;;;AAsBA,SAAOW,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAN,SAAAe,IAAAd,SAAAe,IAAAd,aAAAe,IAAAC,QAAAC,KAAA,GAAAC,UAAAd;EAAE,MAAAN,UAAAe,OAAAM,KAAAA,IAAA,aAAAN;EAAsB,MAAAd,UAAAe,OAAAK,KAAAA,IAAA,OAAAL;EAAgB,MAAAd,cAAAe,OAAAI,KAAAA,IAAA,QAAAJ;EAAmB,IAAAK;EAAA,IAAAf,EAAA,OAAAL,eAAAK,EAAA,OAAAN,WAAAM,EAAA,OAAAP,SAAA;GACrDsB,MAAA;IAAAtB;IAAAC;IAAAC;GAAgC;GAACK,EAAA,KAAAL;GAAAK,EAAA,KAAAN;GAAAM,EAAA,KAAAP;GAAAO,EAAA,MAAAe;EAAA,OAAAA,MAAAf,EAAA;EAA1D,MAAAgB,QAAyBD;EAClB5B,KAAAA;EACWe,KAAA;EAChBS,KAAAA;EACAC,KAAAA;EACAI,KAAAA;EACOV,KAAAlB,WAAkB,EAAA6B,WAAa,WAAW,GAAGJ,KAAK;EAACb,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAL3CE,KAAA;GAAAU,gBACChB;GAAKS,QACrBA;GAAMC,KACNA;GAAGI,OACHA;GAAKH,OACEP;EACT;EAACN,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OANMb,GAAUqB,EAMhB;AAAC;AAGJ,IAAaW,aAAa9B,gBAAgB,OAAO,oBAAoB,YAAY;AACjF,IAAa+B,YAAY/B,gBAAgB,MAAM,mBAAmB,WAAW;AAC7E,IAAagC,kBAAkBhC,gBAAgB,KAAK,yBAAyB,iBAAiB;;AAE9F,IAAaiC,cAAcjC,gBAAgB,OAAO,qBAAqB,aAAa;AACpF,IAAakC,cAAclC,gBAAgB,OAAO,qBAAqB,aAAa;AACpF,IAAamC,aAAanC,gBAAgB,OAAO,oBAAoB,YAAY"}
+{"version":3,"file":"Card.js","names":["useRender","mergeProps","createPrimitive","CardVariant","CardPadding","CardState","variant","padding","interactive","CardProps","ComponentProps","Card","t0","$","_c","t1","t2","t3","t4","t5","t6","t7","t8","t9","render","ref","props","undefined","t10","state","className","defaultTagName","CardHeader","CardTitle","CardDescription","CardActions","CardContent","CardFooter","_c"],"sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { createPrimitive } from '../../utils/primitive';\n\nexport type CardVariant = 'outlined' | 'elevated' | 'filled' | 'ghost';\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg';\n\nexport type CardState = {\n  variant: CardVariant;\n  padding: CardPadding;\n  interactive: boolean;\n};\n\nexport interface CardProps extends useRender.ComponentProps<'div', CardState> {\n  /** `outlined` (default) uses the card border, `elevated` a soft shadow. */\n  variant?: CardVariant;\n  /** Inner spacing. Override with `--oui-card-padding`. */\n  padding?: CardPadding;\n  /** Adds hover and focus states — use with `render={<a href=… />}` or a click handler. */\n  interactive?: boolean;\n}\n\nexport function Card({ variant = 'outlined', padding = 'md', interactive = false, render, ref, ...props }: CardProps) {\n  const state: CardState = { variant, padding, interactive };\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref,\n    state,\n    props: mergeProps<'div'>({ className: 'oui-card' }, props),\n  });\n}\n\nexport const CardHeader = createPrimitive('div', 'oui-card__header', 'CardHeader');\nexport const CardTitle = createPrimitive('h3', 'oui-card__title', 'CardTitle');\nexport const CardDescription = createPrimitive('p', 'oui-card__description', 'CardDescription');\n/** Right-aligned slot inside CardHeader for icon buttons or menus. */\nexport const CardActions = createPrimitive('div', 'oui-card__actions', 'CardActions');\nexport const CardContent = createPrimitive('div', 'oui-card__content', 'CardContent');\nexport const CardFooter = createPrimitive('div', 'oui-card__footer', 'CardFooter');\n"],"mappings":";;;;;;AAsBA,SAAOW,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAN,SAAAe,IAAAd,SAAAe,IAAAd,aAAAe,IAAAC,QAAAC,KAAA,GAAAC,UAAAd;EAAE,MAAAN,UAAAe,OAAAM,KAAAA,IAAA,aAAAN;EAAsB,MAAAd,UAAAe,OAAAK,KAAAA,IAAA,OAAAL;EAAgB,MAAAd,cAAAe,OAAAI,KAAAA,IAAA,QAAAJ;EAAmB,IAAAK;EAAA,IAAAf,EAAA,OAAAL,eAAAK,EAAA,OAAAN,WAAAM,EAAA,OAAAP,SAAA;GACrDsB,MAAA;IAAAtB;IAAAC;IAAAC;GAAgC;GAACK,EAAA,KAAAL;GAAAK,EAAA,KAAAN;GAAAM,EAAA,KAAAP;GAAAO,EAAA,MAAAe;EAAA,OAAAA,MAAAf,EAAA;EAA1D,MAAAgB,QAAyBD;EAClB5B,KAAAA;EACWe,KAAA;EAChBS,KAAAA;EACAC,KAAAA;EACAI,KAAAA;EACOV,KAAAlB,WAAkB,EAAA6B,WAAa,WAAW,GAAGJ,KAAK;EAACb,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAL3CE,KAAA;GAAAU,gBACChB;GAAKS,QACrBA;GAAMC,KACNA;GAAGI,OACHA;GAAKH,OACEP;EACT;EAACN,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OANMb,GAAUqB,EAMhB;AAAC;AAGJ,IAAaW,aAAa9B,gBAAgB,OAAO,oBAAoB,YAAY;AACjF,IAAa+B,YAAY/B,gBAAgB,MAAM,mBAAmB,WAAW;AAC7E,IAAagC,kBAAkBhC,gBAAgB,KAAK,yBAAyB,iBAAiB;;AAE9F,IAAaiC,cAAcjC,gBAAgB,OAAO,qBAAqB,aAAa;AACpF,IAAakC,cAAclC,gBAAgB,OAAO,qBAAqB,aAAa;AACpF,IAAamC,aAAanC,gBAAgB,OAAO,oBAAoB,YAAY"}

package/dist/components/data-table/DataTable.d.ts

@@ -1,111 +1,73 @@
 import * as React from 'react';
-import { type PaginationLabels } from '../pagination/Pagination';
-import { type TableProps } from '../table/Table';
-export interface DataTableColumn<T> {
-    /** Unique key. Also the property read from the row when there is no `accessor`. */
-    id: string;
-    header: React.ReactNode;
-    /** Value used for sorting, searching and the default cell. Defaults to `row[id]`. */
-    accessor?: (row: T) => unknown;
-    /** Custom cell content. */
-    cell?: (row: T) => React.ReactNode;
-    /** Defaults to `true`, or `false` for columns that only define `cell` (actions, icons). */
-    sortable?: boolean;
-    /** Include this column in the built-in search. Same default as `sortable`. */
-    searchable?: boolean;
-    /** Custom ascending comparison. */
-    compare?: (a: T, b: T) => number;
-    align?: 'start' | 'center' | 'end';
-    /** Right-align with tabular figures. */
-    numeric?: boolean;
-    width?: number | string;
+import { type PaginationProps } from '../pagination/Pagination';
+import { type SearchInputProps } from '../search-input/SearchInput';
+import { DataTableContent, type DataTableContentProps } from './DataTableContent';
+import { DataTableFilter, DataTableFilters, type DataTableControlSize } from './DataTableFilters';
+import type { DataTableInstance, UseDataTableOptions } from './types';
+export { useDataTableContext } from './context';
+export type { DataTableContentProps, DataTableVirtualOptions } from './DataTableContent';
+export type { DataTableControlSize, DataTableFilterProps, DataTableFiltersProps } from './DataTableFilters';
+export interface DataTableRootProps<T> extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+    /** The table from `useDataTable`. */
+    table: DataTableInstance<T>;
 }
-export interface DataTableSort {
-    id: string;
-    direction: 'asc' | 'desc';
+/** Provides a table to the parts inside it. */
+declare function DataTableRoot<T>({ table, className, ref, ...props }: DataTableRootProps<T>): React.JSX.Element;
+export interface DataTableSearchProps extends Omit<SearchInputProps, 'value' | 'defaultValue' | 'onValueChange' | 'className'> {
+    className?: string;
 }
-export interface DataTableLabels extends PaginationLabels {
-    search: string;
-    clearSearch: string;
-    selectAll: string;
-    selectRow: (label: string) => string;
-    count: (count: number) => React.ReactNode;
-    selected: (count: number) => React.ReactNode;
-    emptyTitle: React.ReactNode;
-    emptyDescription: React.ReactNode;
-    noMatchTitle: React.ReactNode;
-    noMatchDescription: React.ReactNode;
-    loading: string;
-    errorTitle: React.ReactNode;
-    retry: string;
+/** Search box of the table. Typing applies after the table's `searchDebounce`; clearing applies at once. */
+declare function DataTableSearch({ className, ...props }: DataTableSearchProps): React.JSX.Element;
+/** Row count, or the number of selected rows, with a spinner while loading. */
+declare function DataTableSummary({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+export interface DataTablePaginationProps extends Omit<PaginationProps, 'page' | 'pageSize' | 'total' | 'onPageChange' | 'onPageSizeChange'> {
 }
+/** Page navigation of the table. Renders nothing when there are no rows, or the table is not paginated. */
+declare function DataTablePagination({ className, ...props }: DataTablePaginationProps): React.JSX.Element | null;
 export interface DataTableToolbarContext<T> {
-    /** Rows after search and sorting, across all pages. In server mode: the current page. */
+    /** Rows after filters, search and sorting, across all pages. In server mode: the current page. */
     rows: T[];
     /** Ids of the selected rows. */
     selection: string[];
+    /** The whole table: filter values, sort, setters. */
+    table: DataTableInstance<T>;
 }
-export interface DataTableProps<T> extends Pick<TableProps, 'density' | 'striped' | 'stickyHeader'> {
-    /** All rows, or in server mode the rows of the current page. */
-    data: T[];
-    columns: DataTableColumn<T>[];
-    /**
-     * `server` renders `data` as it is: search, sorting and pagination are left to
-     * the API, driven by the `search` / `sort` / `page` / `pageSize` callbacks.
-     */
-    mode?: 'client' | 'server';
-    /** Server mode: number of rows across all pages. */
-    total?: number;
-    /** Shows placeholder rows when there is no data yet, and dims the rows during a refetch. */
-    loading?: boolean;
-    /** Error message shown in place of the rows. */
-    error?: React.ReactNode;
-    /** Adds a retry button to the error message. */
-    onRetry?: () => void;
-    /** Stable id per row, needed for selection. Defaults to `row.id`, then the index. */
-    getRowId?: (row: T, index: number) => string;
-    /** Show the search box (default `true`). */
-    searchable?: boolean;
-    search?: string;
-    defaultSearch?: string;
-    onSearchChange?: (search: string) => void;
-    /** Replaces the built-in search, which matches every term against the searchable columns. */
-    filter?: (row: T, search: string) => boolean;
-    sort?: DataTableSort | null;
-    defaultSort?: DataTableSort | null;
-    onSortChange?: (sort: DataTableSort | null) => void;
-    /** Paginate rows (default `true`). */
-    paginated?: boolean;
-    page?: number;
-    onPageChange?: (page: number) => void;
-    pageSize?: number;
-    defaultPageSize?: number;
-    onPageSizeChange?: (pageSize: number) => void;
+export interface DataTableProps<T> extends UseDataTableOptions<T>, DataTableContentProps {
     pageSizeOptions?: number[];
-    /**
-     * Selected row ids. Passing `onSelectionChange` adds the checkbox column.
-     * Select-all covers every filtered row, or in server mode the current page.
-     */
-    selection?: string[];
-    onSelectionChange?: (selection: string[]) => void;
-    /** Makes rows clickable and keyboard-activatable (Enter). */
-    onRowClick?: (row: T) => void;
-    /** Accessible name of a row, used by row selection and clickable rows. */
-    rowLabel?: (row: T) => string;
-    /** Extra toolbar content (filters, export…). A function receives the processed rows. */
+    /** Size of the search box and the filters. */
+    controlSize?: DataTableControlSize;
+    /** Extra toolbar content (export, add…). A function receives the processed rows. */
     toolbar?: React.ReactNode | ((context: DataTableToolbarContext<T>) => React.ReactNode);
-    /** Replaces the default empty state. */
-    empty?: React.ReactNode;
-    /** Override texts for localisation. */
-    labels?: Partial<DataTableLabels>;
     className?: string;
-    tableProps?: Omit<TableProps, 'children'>;
 }
+declare function DataTableComponent<T>({ density, striped, stickyHeader, layout, maxHeight, virtualized, onEndReached, empty, tableProps, pageSizeOptions, controlSize, toolbar, className, ...options }: DataTableProps<T>): React.JSX.Element;
 /**
- * Table with built-in search, sorting, pagination and row selection. Every
- * piece of state works uncontrolled or controlled (`search` / `sort` / `page` /
- * `selection`), e.g. to persist it in the URL. With `mode="server"` the same
- * state drives an API instead: pass the fetched page as `data`, plus `total`
- * and `loading`. For custom layouts compose `Table` and `Pagination`.
+ * `<DataTable data={…} columns={…} />` renders a complete table with search,
+ * filters, sorting, pagination, row selection, row actions and inline editing;
+ * columns declare what they take part in. Every piece of state works
+ * uncontrolled or controlled (`search` / `filterValues` / `sort` / `page` /
+ * `selection`), and with `mode="server"` the same state drives an API.
+ *
+ * For another layout, create the table with `useDataTable` and compose the
+ * parts: `DataTable.Root`, `DataTable.Toolbar`, `DataTable.Search`,
+ * `DataTable.Filters`, `DataTable.Filter`, `DataTable.Actions`,
+ * `DataTable.Summary`, `DataTable.Content`, `DataTable.Pagination`.
  */
-export declare function DataTable<T>({ data, columns, mode, total, loading, error, onRetry, getRowId, searchable, search: searchProp, defaultSearch, onSearchChange, filter, sort: sortProp, defaultSort, onSortChange, paginated, page: pageProp, onPageChange, pageSize: pageSizeProp, defaultPageSize, onPageSizeChange, pageSizeOptions, selection, onSelectionChange, onRowClick, rowLabel, toolbar, empty, labels, density, striped, stickyHeader, className, tableProps, }: DataTableProps<T>): React.JSX.Element;
+export declare const DataTable: typeof DataTableComponent & {
+    Root: typeof DataTableRoot;
+    Toolbar: {
+        (props: import("../../utils/primitive").PrimitiveProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Search: typeof DataTableSearch;
+    Filters: typeof DataTableFilters;
+    Filter: typeof DataTableFilter;
+    Actions: {
+        (props: import("../../utils/primitive").PrimitiveProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Summary: typeof DataTableSummary;
+    Content: typeof DataTableContent;
+    Pagination: typeof DataTablePagination;
+};