PublicGrid

Public API interface for DataGrid component.

Property Getters vs Setters:

Property getters return the EFFECTIVE (resolved) value after merging all config sources. This is the “current situation” - what consumers and plugins need to know.

Property setters accept input values which are merged into the effective config. Multiple sources can contribute (gridConfig, columns prop, light DOM, individual props).

For example:

• grid.fitMode returns the resolved fitMode (e.g., ‘stretch’ even if you set undefined)
• grid.columns returns the effective columns after merging
• grid.gridConfig returns the full effective config

Properties

Property	Type	Description
gridConfig?	GridConfig<T>	Full config object. Setter merges with other inputs per precedence rules. Getter returns the effective (resolved) config.
columns?	ColumnConfig<T>[]	Column definitions. Getter returns effective columns (after merging config, light DOM, inference).
rows?	T[]	Current row data (after plugin processing like grouping, filtering).
ready?	() => Promise<void>	Resolves once the component has finished initial work (layout, inference).
forceLayout?	() => Promise<void>	Force a layout / measurement pass (e.g. after container resize).
getConfig?	() => Promise<Readonly<GridConfig<T>>>	Return effective resolved config (after inference & precedence).
toggleGroup?	(key: string) => Promise<void>	Toggle expansion state of a group row by its generated key.
registerStyles?	(id: string, css: string) => void	Register custom CSS styles to be injected into the grid. Use this to style custom cell renderers, editors, or detail panels.
unregisterStyles?	(id: string) => void	Remove previously registered custom styles.
getRegisteredStyles?	() => string[]	Get list of registered custom style IDs.
columnState?	GridColumnState	Set/restore the column state. Can be set before or after grid initialization.
loading?	boolean	Whether the grid is currently in a loading state. When true, displays a loading overlay with spinner.
focusedCell?	object | unknown	The currently focused cell position, or null if no rows are loaded.

Property Details

columnState

const saved = localStorage.getItem('gridState');
if (saved) {
  grid.columnState = JSON.parse(saved);
}

---

loading

Whether the grid is currently in a loading state. When true, displays a loading overlay with spinner.

Can also be set via the loading HTML attribute.

// Show loading overlay
grid.loading = true;
const data = await fetchData();
grid.rows = data;
grid.loading = false;

---