ColumnState

State for a single column. Captures user-driven changes at runtime. Plugins can extend this interface via module augmentation to add their own state.

Used with grid.getColumnState() and grid.columnState for persisting user customizations (column widths, order, visibility, sort).

Example

// Save column state to localStorage
const state = grid.getColumnState();
localStorage.setItem('gridState', JSON.stringify(state));

// Restore on page load
const saved = localStorage.getItem('gridState');
if (saved) {
  grid.columnState = JSON.parse(saved);
}

// Example column state structure
const state: GridColumnState = {
  columns: [
    { field: 'name', order: 0, width: 200, hidden: false },
    { field: 'email', order: 1, width: 300, hidden: false },
    { field: 'phone', order: 2, hidden: true }, // Hidden column
  ],
  sort: { field: 'name', direction: 1 },
};

Properties

Property	Type	Description
field	string	Column field identifier
order	number	Position index after reordering (0-based)
width?	number	Width in pixels (undefined = use default)
visible	boolean	Visibility state
sort?	ColumnSortState	Sort state (undefined = not sorted).
filter?	object	Filter state for this column (only present when FilteringPlugin is used). Stores the essential filter properties without the redundant ‘field’.

See Also

• GridColumnState for the full state object