Tables

Basic tables

Not every list is a record screen. This is the smaller thing, and when it is the right one.

Two tables, and the choice is not close

	Table	DataTable	RecordView
Markup you write	All of it	A columns array	A fields array
Search and sort	No	Yes	Yes
Filters	No	No	Per column
Create and edit	No	No	Yes
Import and export	No	No	Yes
Tier	Free	Free	Pro

Use the plain table when the data is not records

A pricing comparison, a specification, a summary beside a chart. Content that happens to be tabular, where search and pagination would be furniture nobody uses.

a plain table

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

<Table>
  <TableHeader>
    <TableRow><TableHead>Plan</TableHead><TableHead>Seats</TableHead></TableRow>
  </TableHeader>
  <TableBody>
    {PLANS.map((p) => (
      <TableRow key={p.name}>
        <TableCell>{p.name}</TableCell>
        <TableCell>{p.seats}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

⚠️ A wide table must scroll inside itself

Put it in a container with overflow-x-auto. Without one the page scrolls sideways, which moves the sidebar and the header with it.

When it did not work

You are reimplementing search

Cause: this is a record list after all. Fix: move to DataTable, or RecordView if it also needs editing. Every hour spent adding controls to the plain table is an hour spent rebuilding one of the other two, worse.