Configuration Options

List of options for table behavior. Configure within your table definition under table.

table: {
  allowCreate: true,
  allowEdit: true,
  allowDuplicate: true,
  allowDelete: true,
  allowBulkEdit: true,
  allowBulkDelete: true,
  allowInlineEdit: true,
  allowViewSave: true,
  allowViewSharing: false,
  showToolbar: true,
  showToolbarHeader: true,
  export: true,
  bulkExport: true,
  actionsAsIcons: false,
  density: 'medium',
  layoutPreset: 'default',
  displayModes: ['table'],
  defaultDisplayMode: 'table',
  kanban: {
    groupBy: 'status',
    titleColumn: 'name',
    cardColumnIds: ['brand', 'category', 'price'],
    groups: [
      { value: 'In Stock' },
      { value: 'Low Stock' },
      { value: 'Out of Stock' },
    ],
    allowDragUpdate: false,
  },
  gallery: {
    imageColumn: 'imageUrl',
    titleColumn: 'name',
    cardColumnIds: ['brand', 'category', 'price', 'status'],
    aspectRatio: 'square',
    imageFit: 'cover',
    cardSize: 'medium',
    showCardLabels: false,
  },
  emptyState: {
    show: true,
    title: 'No rows found',
    description: 'Try changing your search or filters.',
  },
  enableRowSelection: true,
  enableRowClickEdit: false,
  rowClickMode: 'default',
  enableColumnFilters: true,
  enableSorting: true,
  enableGrouping: true,
  enableCalculations: false,
  enableColumnDragDropByDefault: false,
  enableMultiRowSelection: true,
  enablePagination: true,
  defaultPageSize: 10,
  pageSizeOptions: [5, 10, 20, 50],
  dateDisplayPreset: 'localized-short',
  inlineEdit: {
    enabled: false,
    debounceMs: 700,
    trigger: 'doubleClickEnter',
    optimistic: true,
    showDelayIndicator: true,
  },
}

Options

enableRowSelection

Enable row selection checkboxes.

Type: boolean | Default: true

enableRowClickEdit

Open the edit drawer when a non-interactive row area is clicked.

Type: boolean | Default: false

For new tables, prefer rowClickMode: 'edit' when you need explicit row interaction behavior. enableRowClickEdit remains supported as the legacy shortcut.

Constraints:

Works only when allowEdit is enabled.
Incompatible with URL columns using urlDisplayMode: 'row-link'.
Incompatible with inline edit (table-level inlineEdit or column-level inlineEdit).

allowCreate

Show and enable create actions in table UI.

Type: boolean | Default: true

allowEdit

Show and enable the row Edit action (row actions menu).

Type: boolean | Default: true

allowDuplicate

Show and enable row duplicate actions.

Type: boolean | Default: true

allowDelete

Show and enable row delete actions.

Type: boolean | Default: true

allowBulkEdit

Show and enable bulk edit action.

Type: boolean | Default: true

allowBulkDelete

Show and enable bulk delete action.

Type: boolean | Default: true

allowInlineEdit

Allow inline editing interactions in table cells.

Type: boolean | Default: true

allowViewSave

Allow users to create saved views, save changes to an existing view, and delete user-created views. Users can still select existing views when this is disabled.

Type: boolean | Default: true

allowViewSharing

Allow users to save a view as shared with their team. This only controls the UI and the isGlobal flag sent to views.create; your backend should still enforce team/workspace permissions.

Type: boolean | Default: false

showToolbar

Show the whole table toolbar (search and action buttons).

Type: boolean | Default: true

showToolbarHeader

Show the toolbar header block (title and description). Set to false to keep only search/actions.

Type: boolean | Default: true

export

Show the toolbar CSV export button (between search and options). Exports all rows matching the current search/filters/sort state.

Type: boolean | Default: true

bulkExport

Show CSV export in the bulk actions menu. Exports only selected rows.

Type: boolean | Default: true

actionsAsIcons

Render toolbar action buttons (Add, Export, Options) as icon-only buttons with tooltips.

Type: boolean | Default: false

density

Table row density mode.

Type: 'small' | 'medium' | 'large' | Default: 'medium'

layoutPreset

Apply opinionated defaults for common table surfaces while keeping every individual option overrideable.

Type: 'default' | 'admin' | 'catalog' | 'preview' | Default: 'default'

Preset defaults:

default: no additional defaults.
admin: compact density, icon toolbar actions, 20-row pages, and page sizes [10, 20, 50, 100].
catalog: medium density, icon toolbar actions, 20-row pages, and page sizes [10, 20, 50].
preview: compact density, icon toolbar actions, 20-row pages, page sizes [10, 20, 50], and no toolbar header.

Explicit table config values still win over preset defaults.

displayModes

Display modes available to users. Keep the default table-only experience with ['table'], or add 'kanban' and/or 'gallery' to show a display switcher above the table.

Type: Array<'table' | 'kanban' | 'gallery'> | Default: ['table']

defaultDisplayMode

Display mode used when neither the URL nor a saved view selects one.

Type: 'table' | 'kanban' | 'gallery' | Default: 'table'

The configured default must be present in displayModes; otherwise the first available mode is used.

kanban

Configuration for the Kanban display mode.

Type:

{
  groupBy?: string;
  titleColumn?: string;
  cardColumnIds?: string[];
  showCardLabels?: boolean;
  groups?: Array<{ value: string; label?: string }>;
  allowDragUpdate?: boolean;
}

groupBy is the default column used to split rows into lanes.
titleColumn is the column rendered as the card title. The first non-system visible column is used when omitted.
cardColumnIds limits the compact properties shown on each card. When omitted, visible non-system columns are shown except the title and grouping columns.
showCardLabels shows property labels on cards. The default is false, so cards render compact values and reuse the column type rendering for tags, booleans, dates, numbers, and URLs.
groups defines the preferred lane order. Row values not listed there are appended after the configured lanes.
allowDragUpdate lets users move cards between lanes when allowEdit is enabled and an update action exists.

Kanban uses Kibo UI primitives on top of the same TanStack table instance as table mode, so sorting, filters, selection, row actions, pagination, and saved views keep working. When Kanban is active, the toolbar lets users choose the lane grouping, title column, card properties, and label visibility. These overrides are stored in {tableId}-kanban and saved views; older {tableId}-kanbanGroupBy links are still read as a legacy fallback. Moving a card calls actions.update(rowId, { [groupBy]: nextValue }); your backend remains responsible for validating permissions and state transitions.

gallery

Configuration for the Gallery display mode.

Type:

{
  imageColumn?: string;
  titleColumn?: string;
  cardColumnIds?: string[];
  aspectRatio?: 'square' | 'video' | 'wide' | 'portrait';
  imageFit?: 'cover' | 'contain';
  cardSize?: 'small' | 'medium' | 'large';
  showCardLabels?: boolean;
}

imageColumn is the column used as the card media source. The first type: 'image' column is used when omitted.
titleColumn is the column rendered as the card title. The first non-image, non-system visible column is used when omitted.
cardColumnIds limits the compact properties shown on each card. When omitted, visible non-system columns are shown except the title and image columns.
aspectRatio controls the media frame. The default is 'wide'.
imageFit controls how images fit inside the media frame. The default is 'cover'.
cardSize controls the responsive card width. The default is 'medium'.
showCardLabels shows property labels on cards. The default is false, so cards render compact type-aware values like Kanban.

Gallery uses the same TanStack table instance as table mode, so sorting, filters, selection, row actions, pagination, row click behavior, and saved views keep working. When Gallery is active, the toolbar shows image, title, property, ratio, fit, size, and label controls and writes overrides to {tableId}-gallery. Gallery cards can show an external-link button for URL columns and an edit button when allowEdit, canEditRow, and edit actions allow it.

emptyState

Customize the row shown when the current table query returns no rows.

Type:

{
  show?: boolean;
  title?: string;
  description?: string;
}

Default:

{
  show: true,
  title: "No results",
  description: "Try adjusting your search or filters.",
}

The same shape can be provided through DataTable props for per-instance copy overrides.

rowClickMode

Control what happens when a user clicks a non-interactive row area.

Modes:

default: keeps backwards-compatible behavior, including enableRowClickEdit.
activate: calls the DataTable onRowActivate(row, event) callback for master-detail or preview layouts.
edit: opens the edit drawer when the row can be edited.
link: uses row link behavior for URL-backed rows and calls onRowClick(url, row, event) when provided.
none: disables row click behavior.

The same row click behavior applies in table, Kanban, and Gallery display modes. Card-level clicks honor allowEdit and canEditRow, while nested controls such as selection checkboxes, links, drag handles, and row action buttons stay interactive without opening the row.

enableColumnFilters

Enable per-column filters.

Type: boolean | Default: true

enableSorting

Enable sorting by clicking column headers.

Type: boolean | Default: true

enableGrouping

Enable grouping UI and grouped row rendering when column types allow it.

Type: boolean | Default: true

enableViews

Show the saved views manager above the table. The manager stores and restores useful URL-backed table state such as search, filters, sorting, visible columns, column order, display mode, Kanban/Gallery settings, grouping, pinning, and page size.

Type: boolean | Default: true

enableCalculations

Enable footer calculations (per-column calculation menus + footer results row).

Type: boolean | Default: false

When set to false:

The calculations footer row is hidden.
The calculations toggle is hidden from the options menu.
Column defaultCalculation values are ignored in the UI.

enableColumnDragDropByDefault

Enable drag-and-drop column reordering by default.

Type: boolean | Default: false

enableMultiRowSelection

Allow selecting multiple rows.

Type: boolean | Default: true

enablePagination

Render pagination controls.

Type: boolean | Default: true

defaultPageSize

Default number of rows per page.

Type: number | Default: 10

pageSizeOptions

Allowed page size values.

Type: number[] | Default: [5, 10, 20, 50]

dateDisplayPreset

Default date display preset for all date columns. A column can override this value with columns.definitions[].dateDisplayPreset.

inlineEdit

Global defaults for column inline edit behavior.

Type:

{
  enabled?: boolean;
  debounceMs?: number;
  trigger?: 'doubleClickEnter';
  optimistic?: boolean;
  showDelayIndicator?: boolean;
}

Default:

{
  enabled: false,
  debounceMs: 700,
  trigger: 'doubleClickEnter',
  optimistic: true,
  showDelayIndicator: true,
}

Column-level columns.definitions[].inlineEdit can override these defaults.

Server-side mode

Filtering, pagination, and sorting are server-side by default and are no longer configurable via manual* flags. The table always sends search, filters, advancedFilters, orderBy, page, and limit to your list action.

For column-level options (e.g. numberFormat for numeric/currency display, dateDisplayPreset, tagColorMap), see Columns.

Configuration Options

On this page