InternalGrid

Internal-only augmented interface for DataGrid component.

Member prefixes indicate accessibility:

• _underscore = protected members - private outside core, accessible to plugins. Marked with @internal.
• __doubleUnderscore = deeply internal members - private outside core, only for internal functions.

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.
id	string	The element’s id attribute. Available because DataGridElement extends HTMLElement.
_hostElement	HTMLElement	The grid’s host HTMLElement (this). Use instead of casting grid as unknown as HTMLElement.
_rows	T[]
_columns	ColumnInternal<T>[]
_visibleColumns	ColumnInternal<T>[]	Visible columns only (excludes hidden). Use for rendering.
_headerRowEl	HTMLElement
_bodyEl	HTMLElement
_rowPool	RowElementInternal[]
_resizeController	ResizeController
_sortState	object | unknown
sourceRows	T[]	Original unfiltered/unprocessed rows.
__frameworkAdapter?	FrameworkAdapter	Framework adapter instance (set by Grid directives).
__originalOrder	T[]
__rowRenderEpoch	number
__didInitialAutoSize?	boolean
__lightDomColumnsCache?	ColumnInternal<any>[]
__originalColumnNodes?	HTMLElement[]
__cellDisplayCache?	Map<number, string[]>	Cell display value cache.
__cellCacheEpoch?	number	Cache epoch for cell display values.
__cachedHeaderRowCount?	number	Cached header row count for virtualization.
__hasSpecialColumns?	boolean	Cached flag for whether grid has special columns (custom renderers, etc.).
__hasRenderRowPlugins?	boolean	Cached flag for whether any plugin has renderRow hooks.
_gridTemplate	string
_virtualization	VirtualState
_focusRow	number
_focusCol	number
_activeEditRows?	number	Currently active edit row index. Injected by EditingPlugin.
_isGridEditMode?	boolean	Whether the grid is in ‘grid’ editing mode (all rows editable). Injected by EditingPlugin.
_rowEditSnapshots?	Map<number, T>	Snapshots of row data before editing. Injected by EditingPlugin.
changedRows?	T[]	Get all changed rows. Injected by EditingPlugin.
changedRowIds?	string[]	Get IDs of all changed rows. Injected by EditingPlugin.
_changedRowIdSet?	ReadonlySet<string>	Internal Set for O(1) lookup in the render hot path. Injected by EditingPlugin.
effectiveConfig?	GridConfig<T>
findHeaderRow?	() => HTMLElement
refreshVirtualWindow	(full: boolean, skipAfterRender: boolean) => boolean
refreshColumns?	() => void	Trigger a COLUMNS-phase re-render.
updateTemplate?	() => void
findRenderedRowElement?	(rowIndex: number) => HTMLElement | unknown
getRow?	(id: string) => T | undefined	Get a row by its ID. Implemented in grid.ts
_getRowEntry	(id: string) => object | undefined	Get a row and its current index by ID. Returns undefined if not found.
getRowId?	(row: T) => string	Get the unique ID for a row. Implemented in grid.ts
updateRow?	(id: string, changes: Partial<T>, source: UpdateSource) => void	Update a row by ID. Implemented in grid.ts
animateRow?	(rowIndex: number, type: RowAnimationType) => Promise<boolean>	Animate a single row. Returns Promise that resolves when animation completes. Implemented in grid.ts
animateRows?	(rowIndices: number[], type: RowAnimationType) => Promise<number>	Animate multiple rows. Returns Promise that resolves when all animations complete. Implemented in grid.ts
animateRowById?	(rowId: string, type: RowAnimationType) => Promise<boolean>	Animate a row by its ID. Returns Promise that resolves when animation completes. Implemented in grid.ts
beginBulkEdit?	(rowIndex: number) => void	Begin bulk edit on a row. Injected by EditingPlugin.
commitActiveRowEdit?	() => void	Commit active row edit. Injected by EditingPlugin.
_dispatchCellClick?	(event: MouseEvent, rowIndex: number, colIndex: number, cellEl: HTMLElement) => boolean	Dispatch cell click to plugin system, returns true if handled
_dispatchRowClick?	(event: MouseEvent, rowIndex: number, row: any, rowEl: HTMLElement) => boolean	Dispatch row click to plugin system, returns true if handled
_dispatchHeaderClick?	(event: MouseEvent | KeyboardEvent, col: ColumnConfig, headerEl: HTMLElement) => boolean	Dispatch header click to plugin system, returns true if handled
_dispatchKeyDown?	(event: KeyboardEvent) => boolean	Dispatch keydown to plugin system, returns true if handled
_dispatchCellMouseDown?	(event: CellMouseEvent) => boolean	Dispatch cell mouse events for drag operations. Returns true if any plugin started a drag.
_dispatchCellMouseMove?	(event: CellMouseEvent) => void	Dispatch cell mouse move during drag.
_dispatchCellMouseUp?	(event: CellMouseEvent) => void	Dispatch cell mouse up to end drag.
_afterCellRender?	(context: AfterCellRenderContext<T>) => void	Call afterCellRender hook on all plugins. Called from rows.ts after each cell is rendered.
_hasAfterCellRenderHook?	() => boolean	Check if any plugin has registered an afterCellRender hook. Used to skip hook call for performance.
_afterRowRender?	(context: AfterRowRenderContext<T>) => void	Call afterRowRender hook on all plugins. Called from rows.ts after each row is rendered.
_hasAfterRowRenderHook?	() => boolean	Check if any plugin has registered an afterRowRender hook. Used to skip hook call for performance.
_getHorizontalScrollOffsets?	(rowEl: HTMLElement, focusedCell: HTMLElement) => object	Get horizontal scroll boundary offsets from plugins
queryPlugins?	(query: PluginQuery) => T[]	Query all plugins with a generic query and collect responses
requestStateChange?	() => void	Request emission of column-state-change event (debounced)
_schedulerIsConnected	boolean
_renderRoot	Element	The render root element for DOM queries.
_accordionIcons	object	Get accordion expand/collapse icons from effective config.
_shellState	ShellState	Shell state for config manager shell merging.
rowClass?	(row: T) => string | string[]	Dynamic CSS class(es) for data rows. Called for each row during rendering. Return class names to add to the row element.
fitMode?	FitMode	Sizing mode for columns. Can also be set via fitMode prop.
sortable?	boolean	Grid-wide sorting toggle. When false, disables sorting for all columns regardless of their individual sortable setting. When true (default), columns with sortable: true can be sorted.
resizable?	boolean	Grid-wide resizing toggle. When false, disables column resizing for all columns regardless of their individual resizable setting. When true (default), columns with resizable: true (or resizable not set, since it defaults to true) can be resized.
rowHeight?	number | (row: T, index: number) => number | undefined	Row height in pixels for virtualization calculations. The virtualization system assumes uniform row heights for performance.
plugins?	GridPlugin[]	Array of plugin instances. Each plugin is instantiated with its configuration and attached to this grid.
features?	Partial<FeatureConfig<T>>	Declarative feature configuration. Alternative to manually creating plugin instances in plugins. Features are resolved using the core feature registry.
shell?	ShellConfig	Shell configuration for header bar and tool panels. When configured, adds an optional wrapper with title, toolbar, and collapsible side panels.
icons?	GridIcons	Grid-wide icon configuration. Provides consistent icons across all plugins (tree, grouping, sorting, etc.). Plugins will use these by default but can override with their own config.
animation?	AnimationConfig	Grid-wide animation configuration. Controls animations for expand/collapse, reordering, and other visual transitions. Individual plugins can override these defaults in their own config.
sortHandler?	SortHandler<T>	Custom sort handler for full control over sorting behavior.
typeDefaults?	Record<string, TypeDefault<T>>	Type-level renderer and editor defaults.
gridAriaLabel?	string	Accessible label for the grid. Sets aria-label on the grid’s internal table element for screen readers.
gridAriaDescribedBy?	string	ID of an element that describes the grid. Sets aria-describedby on the grid’s internal table element.
loadingRenderer?	LoadingRenderer	Custom renderer for the loading overlay.
editOn?	false | click | dblclick | manual	Edit trigger mode. Requires EditingPlugin to be loaded.
filterable?	boolean	Grid-wide filtering toggle. Requires FilteringPlugin to be loaded.
columnGroups?	ColumnGroupDefinition[]	Declarative column group definitions for the GroupingColumnsPlugin. Each group specifies an id, header label, and array of column field names. The plugin will automatically assign the group property to matching columns.
selectable?	boolean	Grid-wide selection toggle. Requires SelectionPlugin to be 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;

---

rowClass

// Highlight inactive rows
rowClass: (row) => row.active ? [] : ['inactive', 'dimmed']

// Status-based row styling
rowClass: (row) => [`priority-${row.priority}`]

// Single class as string
rowClass: (row) => row.isNew ? 'new-row' : ''

---

sortable

Grid-wide sorting toggle. When false, disables sorting for all columns regardless of their individual sortable setting. When true (default), columns with sortable: true can be sorted.

This affects:

• Header click handlers for sorting
• Sort indicator visibility
• Multi-sort plugin behavior (if loaded)

Default: true

// Disable all sorting
gridConfig = { sortable: false };

// Enable sorting (default) - individual columns still need sortable: true
gridConfig = { sortable: true };

---

resizable

Grid-wide resizing toggle. When false, disables column resizing for all columns regardless of their individual resizable setting. When true (default), columns with resizable: true (or resizable not set, since it defaults to true) can be resized.

This affects:

• Resize handle visibility in header cells
• Double-click to auto-size behavior

Default: true

// Disable all column resizing
gridConfig = { resizable: false };

// Enable resizing (default) - individual columns can opt out with resizable: false
gridConfig = { resizable: true };

---

rowHeight

Row height in pixels for virtualization calculations. The virtualization system assumes uniform row heights for performance.

If not specified, the grid measures the first rendered row’s height, which respects the CSS variable --tbw-row-height set by themes.

Set this explicitly when:

• Row content may wrap to multiple lines (also set --tbw-cell-white-space: normal)
• Using custom row templates with variable content
• You want to override theme-defined row height
• Rows have different heights based on content (use function form)

Variable Row Heights: When a function is provided, the grid enables variable height virtualization. Heights are measured on first render and cached by row identity.

Default: Auto-measured from first row (respects --tbw-row-height CSS variable)

// Fixed height for all rows
gridConfig = { rowHeight: 56 };

// Variable height based on content
gridConfig = {
  rowHeight: (row, index) => row.hasDetails ? 80 : 40,
};

// Return undefined to trigger DOM auto-measurement
gridConfig = {
  rowHeight: (row) => row.isExpanded ? undefined : 40,
};

---

plugins

plugins: [
  new SelectionPlugin({ mode: 'range' }),
  new MultiSortPlugin(),
  new FilteringPlugin({ debounceMs: 150 }),
]

---

sortHandler

Custom sort handler for full control over sorting behavior.

When provided, this handler is called instead of the built-in sorting logic. Enables custom sorting algorithms, server-side sorting, or plugin-specific sorting.

The handler receives:

• rows: Current row array to sort
• sortState: Sort field and direction (1 = asc, -1 = desc)
• columns: Column configurations (for accessing sortComparator)

Return the sorted array (sync) or a Promise that resolves to the sorted array (async). For server-side sorting, return a Promise that resolves when data is fetched.

// Custom stable sort
sortHandler: (rows, state, cols) => {
  return stableSort(rows, (a, b) => compare(a[state.field], b[state.field]) * state.direction);
}

// Server-side sorting
sortHandler: async (rows, state) => {
  const response = await fetch(`/api/data?sort=${state.field}&dir=${state.direction}`);
  return response.json();
}

---

typeDefaults

Type-level renderer and editor defaults.

Keys can be:

• Built-in types: 'string', 'number', 'date', 'boolean', 'select'
• Custom types: 'currency', 'country', 'status', etc.

Resolution order (highest priority first):

1. Column-level (column.renderer / column.editor)
2. Grid-level (gridConfig.typeDefaults[column.type])
3. App-level (Angular GridTypeRegistry, React GridTypeProvider)
4. Built-in (checkbox for boolean, select for select, etc.)
5. Fallback (plain text / text input)

typeDefaults: {
  date: { editor: myDatePickerEditor },
  country: {
    renderer: (ctx) => {
      const span = document.createElement('span');
      span.innerHTML = `<img src="/flags/${ctx.value}.svg" /> ${ctx.value}`;
      return span;
    },
    editor: (ctx) => createCountrySelect(ctx)
  }
}

---

gridAriaLabel

Accessible label for the grid. Sets aria-label on the grid’s internal table element for screen readers.

If not provided and shell.header.title is set, the title is used automatically.

gridConfig = { gridAriaLabel: 'Employee data' };

---

gridAriaDescribedBy

<p id="grid-desc">This table shows all active employees.</p>
<tbw-grid></tbw-grid>

gridConfig = { gridAriaDescribedBy: 'grid-desc' };

---

loadingRenderer

Custom renderer for the loading overlay.

When provided, replaces the default spinner with custom content. Receives a context object with the current loading size.

// Simple text loading indicator
loadingRenderer: () => {
  const el = document.createElement('div');
  el.textContent = 'Loading...';
  return el;
}

// Custom spinner component
loadingRenderer: (ctx) => {
  const spinner = document.createElement('my-spinner');
  spinner.size = ctx.size === 'large' ? 48 : 24;
  return spinner;
}

---

filterable

Grid-wide filtering toggle. Requires FilteringPlugin to be loaded.

When false, disables filtering for all columns regardless of their individual filterable setting. When true (default), columns with filterable: true (or not explicitly set to false) can be filtered.

This affects:

• Filter button visibility in headers
• Filter panel accessibility
• Filter keyboard shortcuts

Default: true

// Disable all filtering at runtime
grid.gridConfig = { ...grid.gridConfig, filterable: false };

// Re-enable filtering
grid.gridConfig = { ...grid.gridConfig, filterable: true };

---

columnGroups

columnGroups: [
  { id: 'personal', header: 'Personal Info', children: ['firstName', 'lastName', 'email'] },
  { id: 'work', header: 'Work Info', children: ['department', 'title', 'salary'] },
]

---

selectable

Grid-wide selection toggle. Requires SelectionPlugin to be loaded.

When false, disables all selection interactions while keeping the plugin loaded. When true (default), selection works according to the plugin’s mode configuration.

This affects:

• Click/drag selection
• Keyboard selection (arrows, Shift+arrows, Ctrl+A)
• Checkbox column clicks (if enabled)

Default: true

// Disable all selection at runtime
grid.gridConfig = { ...grid.gridConfig, selectable: false };

// Re-enable selection
grid.gridConfig = { ...grid.gridConfig, selectable: true };

---