DataGridElementInterface

The compiled web component interface for DataGrid.

This interface represents the <tbw-grid> custom element, combining the public grid API with standard HTMLElement functionality.

Example

// Query existing grid with type safety
import { queryGrid } from '@toolbox-web/grid';
const grid = queryGrid<Employee>('tbw-grid');
grid.rows = employees;
grid.on('cell-click', (detail) => console.log(detail));

// Create grid programmatically
import { createGrid } from '@toolbox-web/grid';
const grid = createGrid<Employee>({
  columns: [{ field: 'name' }, { field: 'email' }],
});
document.body.appendChild(grid);

Properties

Property	Type	Description
gridConfig?	GridConfig<any>	Full config object. Setter merges with other inputs per precedence rules. Getter returns the effective (resolved) config.
columns?	ColumnConfig<any>[]	Column definitions. Getter returns effective columns (after merging config, light DOM, inference).
rows?	any[]	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<any>>>	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;

---

See Also

• PublicGrid for the public API methods and properties
• createGrid for typed grid creation
• queryGrid for typed grid querying