Live column API

Use column APIs when your app needs to read the current configuration after users resize or reorder columns. Distinguish column definitions from live column objects.

Integration steps

1. Change a column in the view

   Drag the product header boundary in the table above. Inspect before/after widths in the columnResized result.

2. Query current column state

   Click Read column state above the table to display widths, order, and pinning in the results. Change product width or pinning and query again to compare.

3. Read serializable values separately

   Call getColumnState() to save widths, order, and pinning. Store this state array rather than serializing live column objects.

Read column state calls getColumnState(). For live column objects, use getColumn('product') or getColumns(). A missing name may return null.

Useful terms

field / colId

A name used to find a column, such as product.

Column object / column state

A column object is a live Grid reference; column state is a collection of serializable values.

Key API examples

Application code that references the registered Grid element as grid.

const column = await grid.getColumn('product');
const columns = await grid.getColumns();
const savedColumns = await grid.getColumnState();
console.log(column, columns, savedColumns);