VuiAdmin

Tables

Filtering and sorting

One property per field turns a column into a filter. Sorting is on by default and reads the value, not the markup.

A filter is one property

filterable puts that column in the toolbar. Nothing else is wired, and a column without it stays out of the filter menu on purpose: a filter for every column is a menu nobody reads.

on a field
{
  key: "status",
  label: "Status",
  filterable: { control: "select", options: STATUSES },
},
{
  key: "country",
  label: "Country",
  filterable: { control: "select", options: COUNTRIES },
},
{ key: "email", label: "Email" }   // searchable, not filterable

Sorting reads the value

Sorting and searching use the underlying value, not what render drew. A status rendered as a coloured badge still sorts alphabetically by its string, and a date rendered as “3 days ago” still sorts chronologically. That is deliberate: the alternative sorts by the text a human happens to see.

sortable is how you turn a column's header control off, and nameSortKey is how the identity column sorts by a field other than the one it displays.

Turning the toolbar down

Each control defaults to on. Set one to false to remove it.

a quieter table
<RecordView<Customer>
  fields={CUSTOMER_FIELDS}
  showFilter={false}
  showSort={false}
  showImport={false}
  showExport={false}
  showSelection={false}
  defaultPageSize={25}
  …
/>

Server-side, when the table is too big to hold

manual hands the query back to you instead of filtering in memory, and onFilter is where it arrives. Use it when the row count stops fitting in the browser, and not before: in-memory filtering of a few thousand rows is faster than a round trip.

When it did not work

The filter menu is empty

Cause: no field carries filterable. Fix: add it to the two or three columns worth filtering.

A column sorts in the wrong order

Cause: the value is a string that looks like a number or a date. Fix: store the real type. Sorting reads the value, so give it a value that orders correctly.