Table

Table is the plain semantic table: a header, rows, a footer and a caption.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/table.tsx

Import from@viliha/vui-react/table

The 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

table-demo.tsx

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from "@viliha/vui-react/table";

Exports

Everything this family exports. They are read from the source, so this list is what the package actually ships.

Prop	Type	Default
Table	component	—
TableHeader	component	—
TableBody	component	—
TableFooter	component	—
TableRow	component	—
TableHead	component	—
TableCell	component	—
TableCaption	component	—

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.