Tableview

A data table: rows and columns with click-to-sort headings, live filtering, and pagination — built on the themed treeview, striped and keyboard-navigable. Give it data, it does the rest. For trees (nested items) or fully manual control, use Treeview instead.

Live preview

Type into the filter, click a column heading — and try the Theme switcher:

Live preview. In the Player's built-in docs viewer (scriptweaver --help), this renders Tableview as a live, theme-aware widget you can interact with.

Example

const tv = app.Tableview({
  columns: ['Name', { text: 'Age', width: 60, anchor: 'e' }, 'City'],
  rows: [
    ['Alice', 31, 'Vienna'],
    ['Bob', 22, 'Prague'],
    ['Carla', 45, 'Madrid'],
  ],
  searchable: true, // a filter bar above the table
  pageSize: 25, // a pagination bar below it (0 = off)
  onSelect: () => console.log(tv.selection),
});
tv.pack.configure({ fill: 'both', expand: true });

Columns and rows

columns takes strings or per-column specs:

tv.columns = ['Name', { text: 'Size', width: 80, anchor: 'e', stretch: false }];

rows (or tv.load(rows)) replaces the data; tv.append(row) adds one; tv.clear() empties; tv.rowCount() counts. Any cell content is safe — values round-trip exactly as given. Reading tv.rows returns the full data set (as strings), regardless of the current filter or page.

Sorting, filtering, pages

Users sort by clicking a heading (click again to reverse — the ▲/▼ indicator follows, and the change is announced to screen readers). Programmatically:

tv.sort(1, 'desc'); // by column index; sort(-1) restores load order
tv.sortInfo; // { column: 1, direction: 'desc' }

tv.filter = 'ber'; // case-insensitive substring, any column
tv.pageInfo; // { page, pages, total, filtered }
tv.page = 3; // jump; the bar's buttons do first/prev/next/last

The filter bar (when searchable) stays in sync with the filter option, and Escape clears it.

Selection

tv.selection returns the selected rows as { index, values } objects — index is the position in the loaded data, stable across sorting, filtering and paging. Listen with onSelect (or tv.on('select', …)):

tv.on('select', () => {
  for (const { index, values } of tv.selection) console.log(index, values);
});

selectMode is the treeview's: 'extended' (default, multi-select) or 'browse' (single).

Options

Option	Type	Description
`columns`	array	Column titles or `{ text, width, minWidth, anchor, stretch }` specs.
`rows`	array	The data: an array of row arrays.
`searchable`	boolean	Show the filter bar (default false).
`filter`	string	The active substring filter.
`pageSize`	number	Rows per page; `0` (default) disables pagination.
`page`	number	The current page (1-based).
`selectMode`	string	`'extended'` or `'browse'`.
`striped`	boolean	Alternate-row shading, theme-following (default true).
`height`	number	Visible rows (the table scrolls beyond them).
`state`	string	`'normal'` or `'disabled'` — disabling reaches the table, filter bar and pagination buttons.

Methods

Method	Description
`load(rows)`	Replace the data set.
`append(row)`	Add one row.
`clear()`	Remove all rows.
`sort(column, direction?)`	Sort by column index (`'asc'`/`'desc'`); `sort(-1)` restores load order.
`rowCount()`	Number of loaded rows.

Plus the read-only selection, pageInfo and sortInfo properties above, and the common widget methods (layout, bind(), focus(), destroy()).