Installation
Nothing to add. This component ships as source in your download, so it is already in your project.
src/vui/data-table-panel.tsx@viliha/vui-react/data-table-panelThe exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.
Usage
import { DataTablePanel } from "@viliha/vui-react/data-table-panel";Exports
Everything this family exports. They are read from the source, so this list is what the package actually ships.
| Prop | Type | Default |
|---|---|---|
| DataTablePanel | component | — |
DataTablePanel props
Plus everything DataTableProps<T> accepts, passed straight through to the underlying element.
| Prop | Type | Default | What it does |
|---|---|---|---|
| title? | React.ReactNode | — | The panel's heading, and the header band with it. |
| description? | React.ReactNode | — | The line under it. |
| actions? | React.ReactNode | — | Buttons in the header band, such as Export and Add. |
| pageSizes? | readonly number[] | — | The page sizes a reader can choose between, rendered as "Show [10] entries". Omit for a fixed page size. |
| rowNoun? | string | — | The word after the total, as in "Showing 1 to 10 of 57 entries". The reference says "entries" on the data-tables page and nothing at all on the products list, so it is a prop rather than a constant. |
Customize
Every value this component draws comes from the theme: the colours, the radius, the control height and the type scale. Change a token and this moves with everything else, which is the difference between theming the product and overriding a component. See Theming for the token contract, and Swapping defaults for replacing the markup itself.