createViewModel

Table#createViewModel derives the view model that is applied onto markup. It is called on the table instance with Column instances, and returns a TableViewModel.

Usage

Table#createViewModel: (columns, options) => TableViewModel

columns is an array of Column instances returned from Table#createColumns.

options is an optional configuration object to configure the view model.

const table = createTable(data);
const columns = table.createColumns(...);
const viewModel = table.createViewModel(columns);
const {
  headerRows,
  rows,
  tableAttrs,
  tableBodyAttrs,
} = viewModel;

const table = createTable(data);
const columns = table.createColumns(...);
const viewModel = table.createViewModel(columns);
const {
  headerRows,
  rows,
  tableAttrs,
  tableBodyAttrs,
} = viewModel;

options.rowDataId?: (item, index) => string

Defines a custom dataId for each row.

Defaults to the item index.

options.reuseKey?: string

Opts into reusing the previous view model instead of building a new one. Building a view model instantiates every plugin, so a component that rebuilds on each reactive pass — a derived column array with a new identity but the same columns in it — otherwise loses plugin state such as the current page index or sort order.

const columns = $derived(table.createColumns(...));
const viewModel = $derived(table.createViewModel(columns, { reuseKey: 'main' }));

const columns = $derived(table.createColumns(...));
const viewModel = $derived(table.createViewModel(columns, { reuseKey: 'main' }));

The view model is reused when the key, the column ids and rowDataId all match the previous call. A different key, changed columns, or omitting reuseKey builds fresh.

Only the most recently built view model is kept, so the key identifies the current table rather than naming one of several — alternating between two keys rebuilds on every pass. The cache also lives on the Table, so reuse only helps when the createTable call itself is stable and only the columns are derived.