Column Configuration

Each column object supports a rich set of properties to control sorting, filtering, grouping, summaries, visibility, responsive priority, and custom cell rendering.

const columns: Column<Employee>[] = [
  {
    accessor: 'name',
    title: 'Name',
    sortable: true,
    searchable: true,
    width: '200px',        // fixed width
    minWidth: '120px',     // minimum on resize
    priority: 1            // primary; first card column, so it is the card title
  },
  {
    accessor: 'department',
    title: 'Department',
    sortable: true,
    groupable: true,       // enable group-by in SmartFilterBar
    dataType: 'text'
  },
  {
    accessor: 'salary',
    title: 'Salary',
    sortable: true,
    summable: true,        // enable sum/avg/min/max in SmartFilterBar
    dataType: 'number',
    align: 'right',
    formatter: (value) => `$${Number(value).toLocaleString()}` // display only —
                           // sort/search/summary still use the raw accessor value
  },
  {
    accessor: 'status',
    title: 'Status',
    sortable: false,       // disable sorting for this column
    searchable: false      // exclude from search and the filter menu
  },
  {
    accessor: 'notes',
    title: 'Notes',
    priority: 3            // desktop-only — omitted from the mobile card
  },
  {
    id: 'actions',         // synthetic column — no accessor, id is required
    title: '',             // icon-only header stays blank
    menuTitle: 'Actions',  // name shown in the visibility + header menus
    hideable: false,       // pinned — cannot be hidden
    component: RowActions  // your Svelte component, receives { item }
  }
];

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, and the type rejects those flags at compile time.

Cell rendering follows a fixed priority — first match wins: the table-level cell snippet, then column.cell, then column.component, then column.formatter, then the raw accessor value. Whichever path renders, search, sort, group, and summaries always operate on the accessor output — display and derived operations are decoupled by design. See Custom Cells for snippet and component recipes.

Five flags decide what a column can be asked to do. They are not independent, and two of them are off until something turns them on:

dataType is the one to set first: it picks the filter operators the menu offers, the alignment, and whether the column can be summed at all. And priority decides only whether a column reaches the mobile card — which of the ones that do becomes the card's title and subtitle is their order in the array, not their number.

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. The feature is 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 }, // pinned
  { 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} />