Column Configuration

import type { Column } from '@urbicon-ui/table';

const columns: Column<Employee>[] = [
  {
    accessor: 'name',
    title: 'Name',
    sortable: true,
    searchable: true,
    width: '200px',        // any CSS length
    minWidth: '120px',     // floor for that width; takes effect only alongside it
    priority: 1            // 1 or unset: primary, and reaches the mobile card
  },
  {
    accessor: 'role',
    title: 'Role',
    sortable: true,
    searchable: true,
    priority: 2            // secondary, and reaches the card too
  },
  {
    accessor: 'department',
    title: 'Department',
    sortable: true,
    groupable: true,       // offer the column in the grouping tool
    dataType: 'text'       // 'text' | 'number' | 'date' | 'boolean' | 'email' | 'url'
  },
  {
    accessor: 'salary',
    title: 'Salary',
    sortable: true,
    summable: true,        // offer Sum / Avg / Min / Max / Count
    sortDescFirst: true,   // the first header click puts the highest on top
    dataType: 'number',
    align: 'right'         // 'left' (default) | 'center' | 'right'
  },
  {
    accessor: 'status',
    title: 'Status',
    sortable: true
  },
  {
    accessor: 'location',
    title: 'Location',
    sortable: true,
    priority: 3            // desktop-only: dropped from the mobile card
  }
];

A column takes one of three shapes, discriminated by accessor: a string accessor naming a primitive-valued row property (id defaults to the accessor name), a function accessor deriving the value from the row (explicit id required), or a synthetic column without any accessor, typically action buttons. Synthetic columns are structurally excluded from sortable/searchable/groupable/summable/dataType: there is no value to operate on. A literal typed as SyntheticColumn rejects those flags at compile time; against the Column union they pass unnoticed, and the capability predicates answer for an accessor-less column at runtime.

An actions column is the usual synthetic one: { id: 'actions', title: '', menuTitle: 'Actions', hideable: false, component: RowActions }. The empty title keeps the header cell blank, menuTitle gives the column a readable name in the visibility and header menus, and component receives the row as item.

Search, sort, grouping and summaries always operate on the accessor's output, whichever of cell, column.cell, column.component and column.formatter renders the cell (first match wins, in that order). A badge or a currency format therefore never changes what a column sorts by. Custom Cells has the snippet and component recipes.

Six flags decide what a column can be asked to do, and how. They are not independent: two of them, groupable and summable, are off until something turns them on, and sortDescFirst only has an effect while the column sorts at all.

dataType is the one to set first: it picks the filter operators the menu offers (contains for text, after / before for dates), the quick-values list, and, unless summable says otherwise, whether the column offers summaries.

priority decides only whether a column reaches the mobile card: 1 and unset and 2 do, 3 stays behind on the desktop table. Which of the ones that reach it becomes the card's title and subtitle is their order in the array, not their number. The card layout takes over when the table's own container is narrower than cardsBelow (default '48rem'), so a table in a narrow column switches while the window stays wide.

Users can hide and restore columns at runtime, through the eye icon in the SmartFilterBar, which lists every hideable column with a checkbox, or through each column's ⋮ header menu, which offers Hide column plus Show "Column" entries for currently hidden ones. Both are there on a plain <Table>: column visibility and the filter bar are on by default. Visibility choices persist across reloads once the table is given a preferences storage key.

const columns: Column<Employee>[] = [
  { accessor: 'name', title: 'Name', sortable: true, hideable: false }, // always visible
  { accessor: 'role', title: 'Role', sortable: true },
  { accessor: 'department', title: 'Department', sortable: true },
  { accessor: 'salary', title: 'Salary', sortable: true, dataType: 'number', align: 'right' }
];

<Table {items} {columns} />

<!-- disable hiding entirely -->
<Table {items} {columns} enableColumnVisibility={false} />

Hiding a column narrows what the tools offer, not what they do. The sort, filter, grouping and summary tools list the columns the reader can currently see, so a hidden column drops out of them. What is already running does not: a sort, filter, grouping or summary on a hidden column keeps acting on the rows and keeps its row in its tool, still under the column's title and moved to the end of the list. Restore the column and that row returns to its place in the column order.

Hide every column a tool can act on, with nothing of its own running, and the tool has nothing left to offer. Its button in the toolbar then stops opening. It keeps its place in the tab order and says why in its tooltip and to a screen reader: No column can be sorted. In the narrow bar the same sentence sits in that tool's section of the sheet.