Shared record presentation

Set presentation at the root of TableConfig to control view, create, edit, and catalogue bulk edit together in React and Vue. The default is a right-side drawer on desktop and mobile. Below 768px, the drawer fills the viewport width.

const tableConfig = defineTableConfig({
  ...productConfig,
  presentation: { desktop: "drawer", mobile: "modal" },
});

Use presentation: "drawer", "modal", or "inline" for the same choice on every viewport. With the object form, omitting mobile inherits desktop. inline embeds the record in the page; it is separate from editing a table cell. Drawers default to 40rem on desktop and modals to 48rem, constrained by the viewport. Existing explicit widths remain supported.

The shared surface uses the host's Shadcn tokens, a consistent header, a scrolling content area, and visible form actions. Editing from a record view keeps the current surface open. Cancel discards the draft and returns to consultation; a successful save refreshes the record and returns to consultation. The draft and field state survive presentation changes, including mobile overrides. Pending submissions prevent closing the editor.

Migrating presentation options

The root TableConfig.presentation takes precedence over details.presentation, FormConfig.presentation, form.presentation, and form.layout.mode. These older settings remain fallback options when the root setting is absent; move the desired choice to the root to align all built-in record surfaces. Standalone RecordDetails and form configurations accept the same responsive presentation shape. The catalogue bulk editor now defaults to a drawer instead of the previous desktop modal and mobile bottom panel. Application-owned onBulkEdit callbacks and nested confirmation or collection dialogs keep their own presentation.

A focused configuration

The following complete example builds on the quick start and shared recipe files. The reference below explains individual options and integration fragments.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const layoutConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    layoutPreset: "admin",
    density: "small",
    actionsAsIcons: false,
    enableViews: true,
    allowViewSave: true,
    enableColumnDnd: true,
    enableColumnDragDropByDefault: false,
    enableColumnResizing: true,
    enableColumnPinning: true,
    emptyState: {
      title: "No products match",
      description: "Clear filters or try another name.",
    },
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const layoutConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    layoutPreset: "admin",
    density: "small",
    actionsAsIcons: false,
    enableViews: true,
    allowViewSave: true,
    enableColumnDnd: true,
    enableColumnDragDropByDefault: false,
    enableColumnResizing: true,
    enableColumnPinning: true,
    emptyState: {
      title: "No products match",
      description: "Clear filters or try another name.",
    },
  },
});

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,
  showClearFilters: false,
  showResetFilters: false,
  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,
  enableAdvancedFilters: false,
  enableSorting: true,
  enableGrouping: true,
  enableCalculations: false,
  enableColumnDnd: true,
  enableColumnDragDropByDefault: false,
  enableColumnResizing: false,
  enableColumnPinning: true,
  enableMultiRowSelection: true,
  enablePagination: true,
  defaultPageSize: 10,
  pageSizeOptions: [10, 20, 50, 100, 200, 500],
  preserveSelectionOnQuery: false,
  searchDebounceMs: 300,
  syncUrl: true,
  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

showClearFilters and showResetFilters

Show the filter-only clear action inside the view menu’s Filters screen. showClearFilters is preferred; showResetFilters remains an alias. The action remains labelled and accessible on compact layouts.

A click clears column filters, advanced filters, and global search, then returns to the first page. Sorting, grouping, column layout, page size, and saved views are preserved. Pending search/filter edits cannot reapply a filter after reset. Requires showToolbar: true.

Type: boolean | Default: false

table: {
  showClearFilters: true,
}

Reset view is a separate action in the view menu in both frameworks: it restores the saved snapshot, or the initial application settings for a temporary view.

export

Show Export in the Data menu, alongside Connect and Share. Export opens a screen offering format (CSV, PDF, and Excel when actions.exportFile is provided), records (all matching rows, or the selection when rows are selected), columns and values. See Export screen.

Type: boolean | Default: true

exportFormats

Limit the formats offered on the Export screen. Excel ("xlsx") is only usable with actions.exportFile.

Type: ("csv" | "xlsx" | "pdf")[] | Default: ["csv", "pdf"] (plus "xlsx" when actions.exportFile is provided)

share

Show the built-in "Copy link" in the Data menu's Share › row. Set to false to hide the row, for example when the application only offers custom destinations. Without any kind: "share" destinations, Share stays a direct copy-link action instead of opening a screen. Custom kind: "connect" destinations, listed under their own Connect › row, are not affected.

Type: boolean | Default: true

schedule

Offer scheduling on Connect destinations that declare schedule: a clock button next to the destination's name in Data › Connect opens the schedule for the current view. Set to false to hide it; the destinations still send on demand. See Schedule a Connect destination.

Type: boolean | Default: true

connectors

Open the send screen of Connect destinations that declare connector: target, column mapping, key field, mode, records, then the result. Set to false to hide these screens; the row then runs the destination's run, so keep one. See Connector screens.

Type: boolean | Default: true

sync

Offer the pull and two-way directions of connectors that declare directions and sync: the Direction choice (Send to / Import from / Keep both in sync), the preview and Sync now in the connector screen, and the "From …" sources in Data › Import. Set to false to keep push only; push works as before. See Sync from the connector screen.

Type: boolean | Default: true

import

Offer Data › Import (CSV file or pasted text, column mapping, review, then the result) when the table can create rows, update them, or import in bulk with actions.import.importRows. Set to false to hide it; create and update keep working elsewhere. See Import.

Type: boolean | Default: true

bulkExport

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

Type: boolean | Default: true

actionsAsIcons

Render desktop application toolbar actions (toolbarActions) as icons with tooltips. Export and Share are entries in the Data menu and are not affected. Compact menus always retain their readable labels.

Type: boolean | Default: false

density

Set the initial row density for table mode. React and Vue share six sizes based on the standard Tailwind spacing scale:

XS preserves the previous S spacing. Cell padding, inline-edit controls, row actions, and thumbnails scale together without changing font size. Targets use the default 4px spacing unit, before row borders; multiline or custom content can make a row taller.

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

table: {
  density: 'extra-small',
  showToolbar: true,
}

Users change density directly in the view menu in table mode. It is hidden in Kanban and Gallery.

The selection applies to this table without changing its configured default and remains stored in inactive modes. Saving includes density. Reset view restores saved density; temporary and legacy views inherit table.density (medium when omitted).

Create button and custom actions

The Create button stays at the far right of the toolbar and uses the primary variant, in text and icon modes. Built-in secondary actions use outline. toolbarActionsPlacement values (before-create, between-create-export, after-export) remain accepted, but no longer change the position of custom actions, since Export moved into the Data menu. Create follows every group.

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 mode picker above the table. The view menu offers it as a dropdown; compact toolbars and touch drawers keep the wrapping buttons. Add 'form' for the Form view, offered when the table can create records. Add 'chart' for the Chart view, offered once its optional renderer is passed in displayModeRenderers. Add 'feed' for the Feed view, built into the table items. Add 'filetree' for the File tree view, built into the table items and offered when the table has a parent column. Add 'map' for the Map view, offered once its optional renderer is passed in displayModeRenderers.

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 view menu 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 view menu’s Card settings screen 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.

form

Default settings of the Form view (title, description, questions, hiddenValues, submitLabel, successMessage, allowAnotherResponse, redirectUrl), which each Form view can override. Set to false to turn the Form mode off. The mode is offered only when actions.create exists and allowCreate is not false.

Type: boolean | FormViewSettings | Default: true

chart

Default settings of the Chart view (type, xColumn, bucket, weekStartsOn, metric, metricColumn, seriesColumn, stacked, sort, cumulative, hideEmpty, topN, showDataLabels, showLegend, colors), which each Chart view can override and Reset returns to. Set to false to turn the Chart mode off. The mode also needs the optional yayaw-table-chart (React) or yayaw-table-vue-chart (Vue) renderer passed as displayModeRenderers.chart.

Type: boolean | ChartViewSettings | Default: true

feed

Default settings of the Feed view (titleColumn, authorColumn, dateColumn, dateDisplay, bodyColumn, mediaColumn, propertyColumnIds, showPropertyLabels, bodyLines, density, pageSize, infiniteScroll), which each Feed view can override and Reset returns to, plus the runtime renderBody(value, row) hook that renders bodies as markdown or HTML and is never saved in views. Set to false to turn the Feed mode off.

Type: boolean | FeedTableSettings | Default: true

filetree

Default settings of the File tree view (parentColumn, kindColumn, nameColumn, sizeColumn, updatedColumn, columns, showDetails, detailFields, foldersFirst, sort, defaultExpandedDepth, rootLabel, expanded, expandedAll), which each File tree view can override, plus the runtime hooks isFolder, getIcon, renderDetails, onDropFiles, canMove, canCreateFolder and canRename, which are never saved in views. The mode is offered when parentColumn is set or a column named parentId, parent_id, parent, folderId, folder_id or folder exists. Set to false to turn the File tree mode off. newFolderAction: false and folderFilter: false turn off New folder and the folder filter of the other views.

Type: boolean | FileTreeTableConfig | Default: true

facets

A panel of facets beside the records: { columns, position?, defaultOpen?, limit?, showCounts?, showZero?, width? }, a column being an id or { id, label?, limit?, sort?, showEmpty? }. Offered in every display mode but the Form view, with column filters on.

Type: TableFacetsConfig | false | Default: undefined

canManageTags

Shows Manage tags in the column menu of tags columns whose tags actions allow it. A column's tags: { manage: false } hides it for that column.

Type: boolean | Default: true

map

Default settings of the Map view (locationColumn, titleColumn, colorColumn, popupColumns, showPopupLabels, cluster, initialView, center, zoom, searchOnMove), which each Map view can override, plus host options that are never saved in views: style (a MapLibre style URL or object, { light, dark? }, or the id of one of styles), styles ([{ id, label, light, dark?, attribution? }], offered in the view settings), attribution, maxRows (records kept at most, default 2,000) and workerUrl (MapLibre's worker script, loaded from unpkg by default). No tiles or API keys ship with the library: without style or styles the map has no basemap. Set to false to turn the Map mode off. The mode also needs the optional yayaw-table-map (React) or yayaw-table-vue-map (Vue) renderer passed as displayModeRenderers.map.

Type: boolean | MapTableConfig | Default: true

emptyState

Table, Kanban, and Gallery use Shadcn's Empty composition in both React and Vue. The default copy distinguishes an empty dataset from a query with no matches:

• With active search, column filters, or advanced filters: No results found, a description, and Clear filters.

• Without active filters: No data available, with no reset action. Advanced rules with isActive: false and whitespace-only searches do not count as active filters.

Clear filters clears global search, column filters, and advanced filters, then returns to page one. It preserves sorting, grouping, column visibility/order/widths/pinning, display mode, page size, density, and the selected view. The saved snapshot is not overwritten; clearing filters can mark it as modified.

The action appears automatically in a filtered empty state, even with table.showToolbar: false, table.showClearFilters: false, or table.showResetFilters: false. Those flags only control the toolbar shortcut.

table: {
  emptyState: {
    show: true,
    // Optional overrides; omit them to use the translated contextual copy.
    title: "No products to display",
    description: "Add products or adjust the current filters.",
  },
}

table.emptyState.show: false hides the entire empty state, including its action, in all three display modes. Loading and failed queries use their own states. React also accepts the same emptyState shape as a DataTable prop for per-instance overrides. See Translations for the React and Vue keys and Installation for the added empty dependency.

rowClickMode

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

Type: 'default' | 'activate' | 'edit' | 'link' | 'none' | Default: 'default'

Modes:

• default: opens the edit drawer when enableRowClickEdit is set, follows a row-link column, and otherwise opens the record view — the application's onOpenDetails (or onRowActivate) when provided, else the built-in record view described in Record details. This is a behavior change for hosts that previously had no click behavior configured: a plain row click now opens something instead of doing nothing. Pass details={false} (:details="false" in Vue) and omit onOpenDetails/onRowActivate to keep clicks inert, or set rowClickMode: 'none'.

• 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 every display mode — table, Kanban, Gallery, List, and Calendar. Card-level and calendar-event 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. The row actions menu shows the Info entry (see Row actions) whenever the record view is reachable.

enableColumnFilters

Enable per-column filters.

Type: boolean | Default: true

enableAdvancedFilters

Enable the advanced filter builder.

Type: boolean | Default: false

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

Both React and Vue support grouping. Set table.enableGrouping: true and table.showToolbar: true; eligible columns must not set enableGrouping: false. Choose up to two columns in View → Group in table mode, or one in Kanban and Gallery.

Group headings show the configured column label and option labels, including accessor-derived values, 0, and false. They count records across nested groups without summing unrelated category IDs. Groups initially expand; collapsing a group only changes its presentation. Expanded records retain their ordinary cell values. A group checkbox selects permitted leaf records and preserves selections outside that group; it is absent when row selection or multiple selection is disabled. Group headings never open or edit a record.

Grouping applies to the records supplied to the table. If your backend returns a paginated page, groups and counts cover that page only; the library does not infer a server-wide grouping endpoint.

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 and widths, display mode, Kanban/Gallery settings, grouping, pinning, and page size.

Type: boolean | Default: true

viewTabs

Show saved views as tabs in the view switcher on wide toolbars, as soon as the table has at least one saved view. The default view is always the first tab; each tab shows the icon of its layout (display mode) and a dot when the active view has unsaved changes. Clicking a tab applies the view. Views beyond maxVisible (default 4) move under a More menu; the active view always stays visible. Set to false to keep the named trigger (icon, view name and chevron) even on wide screens. With tabs, a View actions chevron next to them holds save, save as, favorite, reset and delete; compact toolbars and touch layouts replace the tabs with an icon-only trigger — no visible label or chevron, so search keeps the room on the row — with an accessible name built from views.current ("Current view" by default) followed by the view name, and a small dot for unsaved changes. Its menu lists the views (scrollable, with a Find a view filter beyond seven) followed by the same actions.

Type: boolean | { maxVisible?: number } | Default: true

table: {
  viewTabs: { maxVisible: 6 },
}

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 view menu.

• Column defaultCalculation values are ignored in the UI.

enableColumnDnd

Expose column reordering controls. Set this to false to remove the controls and prevent reordering regardless of the stored user preference.

Type: boolean | Default: true

enableColumnDragDropByDefault

Set the initial column reordering preference when the user has no stored choice. Users can turn it on or off from a column menu and, in Vue, from View → Properties.

Type: boolean | Default: false

enableColumnResizing

Allow users to resize eligible data columns from the header. Drag the separator with a pointer or touch input; keyboard users can focus it and press Left/Right Arrow in 10-pixel steps, Home for the minimum width, or End for the maximum width. Double-clicking resets the column to its configured size.

Widths are stored in {tableId}-sizing, included in saved views, and restored by both React and Vue. Set enableResizing: false on an individual column to keep it fixed. Selection and actions columns always remain fixed.

Type: boolean | Default: false

enableColumnPinning

Enable pin-left, pin-right, and unpin actions for eligible columns.

Type: boolean | Default: true

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: [10, 20, 50, 100, 200, 500]

enableAutoPageSize

Add an Automatic choice to the rows-per-page selector in React and Vue:

table: {
  enableAutoPageSize: true,
  defaultPageSize: 20,
  pageSizeOptions: [10, 20, 50, 100],
}

Automatic displays the calculated count and fits the table to the available screen or scroll-container height. It reserves room for headers, calculations and pagination, and recalculates after window, density, column-width or content changes. For variable-height rows, the table counts their measured heights in order and estimates unseen rows from the smallest visible row. Capacity can decrease when later pages contain taller rows; it increases again after a viewport or density change. The layout identity uses the available container width, so shorter content narrowing an intrinsic-width table on a later page does not increase capacity or reset the current page. Header wrapping and footer changes also affect the measured fit without raising the capacity ceiling during page navigation. This avoids request oscillation without reserving the tallest row’s height for every record. Very tall rows and expanded groups remain scrollable inside the bounded table area. Capacity is always a positive integer, capped at 500; server list requests continue receiving numeric pageSize and limit values.

When enabled, pagination remains visible for a non-empty table even when there is only one page, so users can switch back to a fixed size. This is an instance-local display choice: selecting a number, switching saved views, or switching to Gallery/Kanban stops automatic sizing. URLs and saved views retain the effective numeric page size; restoring them uses fixed pagination unless defaultAutoPageSize is enabled. Gallery and Kanban keep their numeric selectors in both frameworks. Empty or hidden tables wait for measurable rows.

Translate the choice with React pagination.autoPageSize or Vue autoPageSize (English: “Automatic”, French: “Automatique”).

Type: boolean | Default: false

defaultAutoPageSize

Start each table view in Automatic mode in React and Vue. Requires enableAutoPageSize: true; the library default remains fixed pagination for existing consumers.

table: {
  enableAutoPageSize: true,
  defaultAutoPageSize: true,
  defaultPageSize: 20,
}

The numeric defaultPageSize, URL or restored size is the initial fallback until rows can be measured. A new table, a saved-view switch or a return from Gallery/Kanban starts automatic sizing. Choosing a number stays fixed through page loading and window resizing within that view. Gallery and Kanban still use numeric pagination. No string "auto" is sent to server actions or stored in saved views.

Type: boolean | Default: false

preserveSelectionOnQuery

Keep selected row IDs when search, filters, sorting, or grouping changes. Selection still survives ordinary page and page-size changes in both editions.

Type: boolean | Default: false

searchDebounceMs

Delay global search updates by this number of milliseconds.

Type: number | Default: 300

syncUrl

Store table state in URL parameters. When disabled, both editions keep the state isolated in memory for the table instance; this is the default behavior of nested tablePicker fields.

Type: boolean | Default: true

dateDisplayPreset

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

Type: 'localized-short' | 'localized-medium' | 'localized-long' | 'month-name-long' | 'month-year' | 'dmy-numeric' | 'dmy-short' | 'mdy-numeric' | 'mdy-short' | 'iso-date' | Default: 'localized-short'

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.

See also:

• Provider & Setup

• DataTable

• Columns

• Actions

• Server-side & Server Actions

Clear filters and Vue display behavior

Set table.showClearFilters: true in React or Vue to expose a control that clears search, column filters, advanced filters, and pagination while preserving sorting, grouping, column visibility/order/pinning, page size, display mode, and the selected view. The historical showResetFilters flag is an alias with the same behavior in both editions. Reset view in the view menu restores the saved or initial configuration in both editions.

Vue table, Gallery, and Kanban share pagination state. Pagination is hidden when all results fit on one page (except table mode with enableAutoPageSize), and all three modes render the configured empty state. Local data is filtered/sorted before pagination, and server pages are used directly. Kanban follows the current toolbar grouping; configured lanes apply only to their configured field. Rejected lane changes restore the previous value. Card properties reuse column renderers, including supported image URLs.

Vue advanced filters use staged drafts, typed operators, two inputs for ranges, and primitive-safe multiple choices. Apply commits a valid rule; Escape restores it, and disable preserves its values. Inline editing respects table/column debounceMs, with pending timers cancelled on Escape or unmount. See Vue for opt-in settings.

Optional filter bar

The optional filter bar is included in the current React and Vue registry sources. Refresh older copied installations before using these settings.

Declare table.filterBarColumns as an ordered list of column IDs and enable table.showFilterBar: true to keep these filters visible above the rows. The showFilterBar component prop overrides that default reactively in both React and Vue. It is off by default; applications may connect the prop to an account display preference. Hiding the bar preserves the query and saved views. When visible, the bar sits below the title and above the desktop view, search and data controls. Each section keeps 16 px of vertical spacing in React and Vue. Historical filter buttons use the same height as the saved-view controls, including when the Vue table density changes.

table: {
  filterBarColumns: ['category', 'tags', 'active'],
  showFilterBar: false,
}

The bar reads labels, typed option values and disabled choices from the existing column definitions. It supports static options and boolean columns, including columns hidden in the grid. Unknown IDs, duplicates and columns with enableFiltering: false are ignored. Text, date, range and remotely loaded option filters remain in their existing filtering interfaces.

Each control uses a filter icon, a searchable list and checkboxes for multiple values. Changes immediately update native column filters and return to the first page. Numeric 0, boolean false and their string equivalents stay distinct. In compact layouts, configured quick filters move into View → Filters; native reset and saved-view changes update both surfaces. This is a presentation preference, not a second filter system.

Gantt planning

Add "gantt" to table.displayModes, configure presentation with table.gantt, and enable table.planning with stable scope/source IDs. actions.planning supplies the complete graph and atomic preview/apply transactions. Date, link and hierarchy editing have independent flags that restrict existing permissions. See Gantt planning and dependencies for defaults, calendars, normalized records and the production adapter contract.