Grid

Since v0.1.0

Directive that automatically registers the Angular adapter with tbw-grid elements.

This directive eliminates the need to manually register the adapter in your component constructor. Simply import this directive and it will handle adapter registration.

Usage

import { Component } from '@angular/core';
import { Grid } from '@toolbox-web/grid-angular';

@Component({
  selector: 'app-root',
  imports: [Grid],
  template: `
    <tbw-grid [rows]="rows" [gridConfig]="config" [customStyles]="myStyles">
      <!-- column templates -->
    </tbw-grid>
  `
})
export class AppComponent {
  rows = [...];
  config = {...};
  myStyles = `.my-class { color: red; }`;
}

The directive automatically:

• Creates a GridAdapter instance
• Registers it with the GridElement
• Injects custom styles into the grid
• Handles cleanup on destruction

Multi-version coexistence

In single-version apps the directive matches the bare <tbw-grid> tag. When two different grid versions share a page, the second-loaded bundle registers under a version-suffixed tag (e.g. <tbw-grid-v2-15-0>). Because Angular matches selectors at compile time, a runtime-only tag cannot be matched by tag name. The directive therefore also matches the stable [data-tbw-grid] attribute, so a suffixed grid can opt in by adding it literally:

<tbw-grid-v2-15-0 data-tbw-grid [rows]="rows" [gridConfig]="config"></tbw-grid-v2-15-0>

Read the concrete tag from DataGridElement.activeTag of the bundle you imported. See the multi-version coexistence guide.

Properties

Property	Type	Description
customStyles	InputSignal<string | undefined>	Custom CSS styles to inject into the grid. Use this to style custom cell renderers, editors, or detail panels.
sortable	InputSignal<boolean | undefined>	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.
filterable	InputSignal<boolean | undefined>	Grid-wide filtering toggle. When false, disables filtering for all columns regardless of their individual filterable setting. When true (default), columns with filterable: true can be filtered.
selectable	InputSignal<boolean | undefined>	Grid-wide selection toggle. When false, disables selection for all rows/cells. When true (default), selection is enabled based on plugin mode.
loading	InputSignal<boolean | undefined>	Show a loading overlay on the grid. Use this during initial data fetch or refresh operations.
rows	InputSignal<any[] | undefined>	The data rows to display in the grid.
columns	InputSignal<ColumnShorthand<any>[] | undefined>	Column configuration array.
columnDefaults	InputSignal<Partial<ColumnConfig<any>> | undefined>	Default column properties applied to every column in columns. Individual column properties override these defaults.
fitMode	InputSignal<FitMode | undefined>	Column sizing strategy.
columnInference	InputSignal<ColumnInferenceMode | undefined>	How automatic column inference combines with explicitly provided columns.
gridConfig	InputSignal<GridConfig<any> | undefined>	Grid configuration object with optional Angular-specific extensions.
selection	InputSignal<row | SelectionConfig<any> | cell | range | undefined>	Enable cell/row/range selection.
editing	InputSignal<boolean | click | dblclick | manual | EditingConfig | undefined>	Enable inline cell editing.
clipboard	InputSignal<boolean | ClipboardConfig | undefined>	Enable clipboard copy/paste. Requires selection to be enabled.
contextMenu	InputSignal<boolean | ContextMenuConfig | undefined>	Enable right-click context menu.
multiSort	InputSignal<boolean | multi | MultiSortConfig | single | undefined>	Enable multi-column sorting.
filtering	InputSignal<boolean | FilterConfig<any> | undefined>	Enable column filtering.
reorderColumns	InputSignal<boolean | ReorderConfig | undefined>	Enable column drag-to-reorder.
visibility	InputSignal<boolean | VisibilityConfig | undefined>	Enable column visibility toggle panel.
pinnedColumns	InputSignal<boolean | undefined>	Enable pinned/sticky columns. Columns are pinned via the sticky column property.
groupingColumns	InputSignal<boolean | GroupingColumnsConfig | undefined>	Enable multi-level column headers (column groups).
columnVirtualization	InputSignal<boolean | ColumnVirtualizationConfig | undefined>	Enable horizontal column virtualization for wide grids.
reorderRows	InputSignal<boolean | RowReorderConfig | undefined>	Enable row drag-to-reorder.
rowDragDrop	InputSignal<boolean | RowDragDropConfig<any> | undefined>	Enable row drag-and-drop within and across grids.
groupingRows	InputSignal<GroupingRowsConfig | undefined>	Enable row grouping by field values.
pinnedRows	InputSignal<boolean | PinnedRowsConfig | undefined>	Enable pinned rows (aggregation/status bar).
tree	InputSignal<boolean | TreeConfig | undefined>	Enable hierarchical tree view.
masterDetail	InputSignal<MasterDetailConfig | undefined>	Enable master-detail expandable rows.
responsive	InputSignal<boolean | ResponsivePluginConfig<unknown> | undefined>	Enable responsive card layout for narrow viewports.
undoRedo	InputSignal<boolean | UndoRedoConfig | undefined>	Enable undo/redo for cell edits. Requires editing to be enabled.
exportFeature	InputSignal<boolean | ExportConfig | undefined>	Enable CSV/JSON export functionality.
print	InputSignal<boolean | PrintConfig | undefined>	Enable print functionality.
pivot	InputSignal<PivotConfig | undefined>	Enable pivot table functionality.
serverSide	InputSignal<ServerSideConfig | undefined>	Enable server-side data operations.
tooltip	InputSignal<boolean | TooltipConfig | undefined>	Controls the tooltip behavior for the grid.
cellClick	OutputEmitterRef<CellClickDetail<any>>	Emitted when a cell is clicked.
rowClick	OutputEmitterRef<RowClickDetail<any>>	Emitted when a row is clicked.
cellActivate	OutputEmitterRef<CellActivateDetail<any>>	Emitted when a cell is activated (Enter key or double-click).
cellChange	OutputEmitterRef<CellChangeDetail<any>>	Emitted when a cell value changes (before commit).
cellCommit	OutputEmitterRef<CellCommitEvent<unknown, unknown>>	Emitted when a cell value is committed (inline editing). Provides the row, field, new value, and change tracking information.
cellCancel	OutputEmitterRef<CellCancelDetail>	Emitted when a cell edit is cancelled (Escape, click outside without commit, or editor.cancel()).
editOpen	OutputEmitterRef<EditOpenDetail<any>>	Emitted when a cell editor opens.
beforeEditClose	OutputEmitterRef<BeforeEditCloseDetail<any>>	Emitted before an editor closes. Useful for last-chance validation.
editClose	OutputEmitterRef<EditCloseDetail<any>>	Emitted after an editor closes (whether committed or cancelled).
dirtyChange	OutputEmitterRef<DirtyChangeDetail<any>>	Emitted when the dirty / changed-rows state transitions.
dataChange	OutputEmitterRef<DataChangeDetail>	Emitted when row data is replaced (e.g. via the rows setter).
rowCommit	OutputEmitterRef<RowCommitEvent<unknown>>	Emitted when a row’s values are committed (bulk/row editing). Provides the row data and change tracking information.
changedRowsReset	OutputEmitterRef<ChangedRowsResetDetail<unknown>>	Emitted when the changed rows are reset.
sortChange	OutputEmitterRef<SortChangeDetail>	Emitted when sort state changes.
filterChange	OutputEmitterRef<FilterChangeDetail>	Emitted when filter values change.
columnResize	OutputEmitterRef<ColumnResizeDetail>	Emitted when a column is resized.
columnResizeReset	OutputEmitterRef<ColumnResizeResetDetail>	Emitted when a column’s width is reset (double-click on the resize handle).
columnMove	OutputEmitterRef<ColumnMoveDetail>	Emitted when a column is moved via drag-and-drop.
columnVisibility	OutputEmitterRef<ColumnVisibilityDetail>	Emitted when a column is shown or hidden — either via the visibility sidebar, grid.toggleColumnVisibility(field), grid.setColumnVisible(field, visible), or grid.showAllColumns().
columnStateChange	OutputEmitterRef<GridColumnState>	Emitted when column state changes (resize, reorder, visibility).
selectionChange	OutputEmitterRef<SelectionChangeDetail>	Emitted when selection changes.
rowMove	OutputEmitterRef<RowMoveDetail<any>>	Emitted when a row is moved via drag-and-drop.
rowDragStart	OutputEmitterRef<RowDragStartDetail<any>>	Emitted when a row drag starts. Cancelable via event.preventDefault().
rowDragEnd	OutputEmitterRef<RowDragEndDetail<any>>	Emitted when a row drag ends (after drop or cancel).
rowDrop	OutputEmitterRef<RowDropDetail<any>>	Emitted on the target grid when rows are dropped from another grid. Cancelable via event.preventDefault().
rowTransfer	OutputEmitterRef<RowTransferDetail<any>>	Emitted on BOTH source and target grids after a successful cross-grid row transfer.
groupToggle	OutputEmitterRef<GroupToggleDetail>	Emitted when a group is expanded or collapsed.
groupExpand	OutputEmitterRef<GroupExpandDetail>	Emitted when a group is expanded.
groupCollapse	OutputEmitterRef<GroupCollapseDetail>	Emitted when a group is collapsed.
treeExpand	OutputEmitterRef<TreeExpandDetail<any>>	Emitted when a tree node is expanded.
detailExpand	OutputEmitterRef<DetailExpandDetail>	Emitted when a detail panel is expanded or collapsed.
responsiveChange	OutputEmitterRef<ResponsiveChangeDetail>	Emitted when responsive mode changes (table ↔ card).
contextMenuOpen	OutputEmitterRef<ContextMenuOpenDetail>	Emitted when the context menu opens.
copy	OutputEmitterRef<CopyDetail>	Emitted when cells are copied to clipboard.
paste	OutputEmitterRef<PasteDetail>	Emitted when cells are pasted from clipboard.
undo	OutputEmitterRef<UndoRedoDetail>	Emitted when an undo action is performed.
redo	OutputEmitterRef<UndoRedoDetail>	Emitted when a redo action is performed.
exportComplete	OutputEmitterRef<ExportCompleteDetail>	Emitted when export completes.
printStart	OutputEmitterRef<PrintStartDetail>	Emitted when print starts.
printComplete	OutputEmitterRef<PrintCompleteDetail>	Emitted when print completes.
tbwScroll	OutputEmitterRef<TbwScrollDetail>	Emitted (rAF-batched) when the grid’s viewport is scrolled vertically.
render	OutputEmitterRef<RenderDetail>	Emitted once at the end of every render-scheduler flush, after all plugin afterRender hooks have run and ready() has resolved.

Property Details

customStyles

// In your component
customStyles = `
  .my-detail-panel { padding: 16px; }
  .my-status-badge { border-radius: 4px; }
`;

<tbw-grid [customStyles]="customStyles">...</tbw-grid>

---

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 is a core grid config property, not a plugin feature. For multi-column sorting, also add the [multiSort] feature.

Default: true

<!-- Disable all sorting -->
<tbw-grid [sortable]="false" />

<!-- Enable sorting (default) - columns still need sortable: true -->
<tbw-grid [sortable]="true" />

<!-- Enable multi-column sorting -->
<tbw-grid [sortable]="true" [multiSort]="true" />

---

filterable

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

Requires the FilteringPlugin to be loaded.

Default: true

<!-- Disable all filtering -->
<tbw-grid [filterable]="false" [filtering]="true" />

<!-- Enable filtering (default) -->
<tbw-grid [filterable]="true" [filtering]="true" />

---

selectable

Grid-wide selection toggle. When false, disables selection for all rows/cells. When true (default), selection is enabled based on plugin mode.

Requires the SelectionPlugin to be loaded.

Default: true

<!-- Disable all selection -->
<tbw-grid [selectable]="false" [selection]="'range'" />

<!-- Enable selection (default) -->
<tbw-grid [selectable]="true" [selection]="'range'" />

---

loading

Show a loading overlay on the grid. Use this during initial data fetch or refresh operations.

For row/cell loading states, access the grid element directly:

• grid.setRowLoading(rowId, true/false)
• grid.setCellLoading(rowId, field, true/false)

Default: false

<!-- Show loading during data fetch -->
<tbw-grid [loading]="isLoading" [rows]="rows" />

isLoading = true;

ngOnInit() {
  this.dataService.fetchData().subscribe(data => {
    this.rows = data;
    this.isLoading = false;
  });
}

---

rows

The data rows to display in the grid.

Accepts an array of data objects. Each object represents one row. The grid reads property values for each column’s field from these objects.

<tbw-grid [rows]="employees()" [gridConfig]="config" />

---

columns

Column configuration array.

Accepts either full ColumnConfig objects or shorthand strings such as 'name' or 'salary:number'. Shorthands auto-generate human-readable headers from the field name.

Shorthand for setting columns without wrapping them in a full gridConfig. If both columns and gridConfig.columns are set, columns takes precedence (see configuration precedence system).

<tbw-grid [rows]="data" [columns]="['id:number', 'name', { field: 'status', editable: true }]" />

---

columnDefaults

<tbw-grid
  [columnDefaults]="{ sortable: true, resizable: true }"
  [columns]="[{ field: 'id', sortable: false }, { field: 'name' }]"
/>

---

fitMode

Column sizing strategy.

• 'stretch' (default) — columns stretch to fill available width
• 'fixed' — columns use their declared widths; enables horizontal scrolling
• 'auto-fit' — columns auto-size to content, then stretch to fill

Default: 'stretch'

<tbw-grid [rows]="data" fitMode="fixed" />
<tbw-grid [rows]="data" [fitMode]="dynamicMode()" />

---

columnInference

How automatic column inference combines with explicitly provided columns.

• 'auto' (default): infer only when no columns are provided.
• 'merge': always infer from data, then overlay provided columns by field.

<tbw-grid [rows]="data" columnInference="merge" />
<tbw-grid [rows]="data" [columnInference]="mode()" />

---

gridConfig

Grid configuration object with optional Angular-specific extensions.

Accepts Angular-augmented GridConfig from @toolbox-web/grid-angular. You can specify Angular component classes directly for renderers and editors.

Component classes must implement the appropriate interfaces:

• Renderers: CellRenderer<TRow, TValue> - requires value() and row() signal inputs
• Editors: CellEditor<TRow, TValue> - adds commit and cancel outputs

// Simple config with plain renderers
config: GridConfig = {
  columns: [
    { field: 'name', header: 'Name' },
    { field: 'active', type: 'boolean' }
  ],
  typeDefaults: {
    boolean: { renderer: (ctx) => ctx.value ? '✓' : '✗' }
  }
};

// Config with component classes
config: GridConfig<Employee> = {
  columns: [
    { field: 'name', header: 'Name' },
    { field: 'bonus', header: 'Bonus', editable: true, editor: BonusEditorComponent }
  ]
};

<tbw-grid [gridConfig]="config" [rows]="employees"></tbw-grid>

---

selection

Enable cell/row/range selection.

Requires feature import:

import '@toolbox-web/grid-angular/features/selection';

<!-- Shorthand - just the mode -->
<tbw-grid [selection]="'range'" />

<!-- Full config object -->
<tbw-grid [selection]="{ mode: 'range', checkbox: true }" />

---

editing

Enable inline cell editing.

Requires feature import:

import '@toolbox-web/grid-angular/features/editing';

<!-- Enable with default trigger (dblclick) -->
<tbw-grid [editing]="true" />

<!-- Specify trigger -->
<tbw-grid [editing]="'click'" />
<tbw-grid [editing]="'dblclick'" />
<tbw-grid [editing]="'manual'" />

<!-- Full config with callbacks -->
<tbw-grid [editing]="{ editOn: 'dblclick', onBeforeEditClose: myCallback }" />

---

clipboard

Enable clipboard copy/paste. Requires selection to be enabled.

Requires feature import:

import '@toolbox-web/grid-angular/features/clipboard';

<tbw-grid [selection]="'range'" [clipboard]="true" />

---

contextMenu

Enable right-click context menu.

Requires feature import:

import '@toolbox-web/grid-angular/features/context-menu';

<tbw-grid [contextMenu]="true" />

---

multiSort

Enable multi-column sorting.

Multi-sort allows users to sort by multiple columns simultaneously. For basic single-column sorting, columns with sortable: true work without this plugin.

Requires feature import:

import '@toolbox-web/grid-angular/features/multi-sort';

<!-- Enable multi-column sorting -->
<tbw-grid [multiSort]="true" />

<!-- Limit to single column (uses plugin but restricts to 1 column) -->
<tbw-grid [multiSort]="'single'" />

<!-- Full config -->
<tbw-grid [multiSort]="{ maxSortColumns: 3 }" />

---

filtering

Enable column filtering.

Requires feature import:

import '@toolbox-web/grid-angular/features/filtering';

<tbw-grid [filtering]="true" />
<tbw-grid [filtering]="{ debounceMs: 200 }" />

---

reorderColumns

Enable column drag-to-reorder.

Requires feature import:

import '@toolbox-web/grid-angular/features/reorder-columns';

<tbw-grid [reorderColumns]="true" />

---

visibility

Enable column visibility toggle panel.

Requires feature import:

import '@toolbox-web/grid-angular/features/visibility';

<tbw-grid [visibility]="true" />

---

pinnedColumns

Enable pinned/sticky columns. Columns are pinned via the sticky column property.

Requires feature import:

import '@toolbox-web/grid-angular/features/pinned-columns';

<tbw-grid [pinnedColumns]="true" [columns]="[
  { field: 'id', pinned: 'left' },
  { field: 'name' },
  { field: 'actions', pinned: 'right' }
]" />

---

groupingColumns

Enable multi-level column headers (column groups).

Requires feature import:

import '@toolbox-web/grid-angular/features/grouping-columns';

<tbw-grid [groupingColumns]="true" />

---

columnVirtualization

Enable horizontal column virtualization for wide grids.

Requires feature import:

import '@toolbox-web/grid-angular/features/column-virtualization';

<tbw-grid [columnVirtualization]="true" />

---

rowDragDrop

Enable row drag-and-drop within and across grids.

Requires feature import:

import '@toolbox-web/grid-angular/features/row-drag-drop';

<tbw-grid [rowDragDrop]="{ dropZone: 'employees', operation: 'move' }" />

---

groupingRows

Enable row grouping by field values.

Requires feature import:

import '@toolbox-web/grid-angular/features/grouping-rows';

<tbw-grid [groupingRows]="{ groupBy: ['department'] }" />

---

pinnedRows

Enable pinned rows (aggregation/status bar).

Requires feature import:

import '@toolbox-web/grid-angular/features/pinned-rows';

<tbw-grid [pinnedRows]="{ bottom: [{ type: 'aggregation' }] }" />

---

tree

Enable hierarchical tree view.

Requires feature import:

import '@toolbox-web/grid-angular/features/tree';

<tbw-grid [tree]="{ childrenField: 'children' }" />

---

masterDetail

Enable master-detail expandable rows.

Requires feature import:

import '@toolbox-web/grid-angular/features/master-detail';

<tbw-grid [masterDetail]="{ detailRenderer: detailFn }" />

---

responsive

Enable responsive card layout for narrow viewports.

Requires feature import:

import '@toolbox-web/grid-angular/features/responsive';

<tbw-grid [responsive]="{ breakpoint: 768 }" />

---

undoRedo

Enable undo/redo for cell edits. Requires editing to be enabled.

Requires feature import:

import '@toolbox-web/grid-angular/features/undo-redo';

<tbw-grid [editing]="'dblclick'" [undoRedo]="true" />

---

exportFeature

Enable CSV/JSON export functionality.

Requires feature import:

import '@toolbox-web/grid-angular/features/export';

<tbw-grid [export]="true" />
<tbw-grid [export]="{ filename: 'data.csv' }" />

---

print

Enable print functionality.

Requires feature import:

import '@toolbox-web/grid-angular/features/print';

<tbw-grid [print]="true" />

---

pivot

Enable pivot table functionality.

Requires feature import:

import '@toolbox-web/grid-angular/features/pivot';

<tbw-grid [pivot]="{ rowFields: ['category'], valueField: 'sales' }" />

---

serverSide

Enable server-side data operations.

Requires feature import:

import '@toolbox-web/grid-angular/features/server-side';

<tbw-grid [serverSide]="{ dataSource: fetchDataFn }" />

---

tooltip

<tbw-grid [tooltip]="true" />
<tbw-grid [tooltip]="{ header: true, cell: false }" />

---

cellClick

<tbw-grid (cellClick)="onCellClick($event)">...</tbw-grid>

---

rowClick

<tbw-grid (rowClick)="onRowClick($event)">...</tbw-grid>

---

cellActivate

<tbw-grid (cellActivate)="onCellActivate($event)">...</tbw-grid>

---

cellChange

<tbw-grid (cellChange)="onCellChange($event)">...</tbw-grid>

---

cellCommit

<tbw-grid (cellCommit)="onCellCommit($event)">...</tbw-grid>

onCellCommit(event: CellCommitEvent) {
  console.log(`Changed ${event.field} to ${event.value} in row ${event.rowIndex}`);
}

---

cellCancel

<tbw-grid (cellCancel)="onCellCancel($event)">...</tbw-grid>

---

editOpen

<tbw-grid (editOpen)="onEditOpen($event)">...</tbw-grid>

---

beforeEditClose

<tbw-grid (beforeEditClose)="onBeforeEditClose($event)">...</tbw-grid>

---

editClose

<tbw-grid (editClose)="onEditClose($event)">...</tbw-grid>

---

dirtyChange

<tbw-grid (dirtyChange)="onDirtyChange($event)">...</tbw-grid>

---

dataChange

<tbw-grid (dataChange)="onDataChange($event)">...</tbw-grid>

---

rowCommit

<tbw-grid (rowCommit)="onRowCommit($event)">...</tbw-grid>

---

changedRowsReset

<tbw-grid (changedRowsReset)="onChangedRowsReset($event)">...</tbw-grid>

---

sortChange

<tbw-grid (sortChange)="onSortChange($event)">...</tbw-grid>

---

filterChange

<tbw-grid (filterChange)="onFilterChange($event)">...</tbw-grid>

---

columnResize

<tbw-grid (columnResize)="onColumnResize($event)">...</tbw-grid>

---

columnResizeReset

<tbw-grid (columnResizeReset)="onColumnResizeReset($event)">...</tbw-grid>

---

columnMove

<tbw-grid (columnMove)="onColumnMove($event)">...</tbw-grid>

---

columnVisibility

<tbw-grid (columnVisibility)="onColumnVisibility($event)">...</tbw-grid>

---

columnStateChange

<tbw-grid (columnStateChange)="onColumnStateChange($event)">...</tbw-grid>

---

selectionChange

<tbw-grid (selectionChange)="onSelectionChange($event)">...</tbw-grid>

---

rowMove

<tbw-grid (rowMove)="onRowMove($event)">...</tbw-grid>

---

rowDragStart

<tbw-grid (rowDragStart)="onRowDragStart($event)">...</tbw-grid>

---

groupToggle

<tbw-grid (groupToggle)="onGroupToggle($event)">...</tbw-grid>

---

groupExpand

<tbw-grid (groupExpand)="onGroupExpand($event)">...</tbw-grid>

---

groupCollapse

<tbw-grid (groupCollapse)="onGroupCollapse($event)">...</tbw-grid>

---

treeExpand

<tbw-grid (treeExpand)="onTreeExpand($event)">...</tbw-grid>

---

detailExpand

<tbw-grid (detailExpand)="onDetailExpand($event)">...</tbw-grid>

---

responsiveChange

<tbw-grid (responsiveChange)="onResponsiveChange($event)">...</tbw-grid>

---

contextMenuOpen

<tbw-grid (contextMenuOpen)="onContextMenuOpen($event)">...</tbw-grid>

---

copy

<tbw-grid (copy)="onCopy($event)">...</tbw-grid>

---

paste

<tbw-grid (paste)="onPaste($event)">...</tbw-grid>

---

undo

<tbw-grid (undo)="onUndo($event)">...</tbw-grid>

---

redo

<tbw-grid (redo)="onRedo($event)">...</tbw-grid>

---

exportComplete

<tbw-grid (exportComplete)="onExportComplete($event)">...</tbw-grid>

---

printStart

<tbw-grid (printStart)="onPrintStart($event)">...</tbw-grid>

---

printComplete

<tbw-grid (printComplete)="onPrintComplete($event)">...</tbw-grid>

---

tbwScroll

Emitted (rAF-batched) when the grid’s viewport is scrolled vertically.

For server-side pagination of large datasets prefer ServerSidePlugin — this event is the lower-level primitive for custom load-more triggers, deferring heavy cell content, dismissing overlays, etc.

Named tbwScroll (not scroll) to avoid collision with the native DOM scroll event that bubbles from focusable internals.

<tbw-grid (tbwScroll)="onScroll($event)">...</tbw-grid>

---

render

Emitted once at the end of every render-scheduler flush, after all plugin afterRender hooks have run and ready() has resolved.

Use this to act on the rendered DOM after a programmatic mutation (e.g. focus the first input of a freshly added row in full-grid edit mode) without setTimeout or double-requestAnimationFrame hacks. The render event fires on every flush — including scroll-driven virtual-window updates — so prefer subscribing once and unsubscribing (or gating on detail.phase >= RenderPhase.ROWS) when you only care about a specific mutation.

<tbw-grid (render)="onRender($event)">...</tbw-grid>

---

Methods

ngOnInit()

A callback method that is invoked immediately after the default change detector has checked the directive’s data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

ngOnInit(): void

---

ngAfterContentInit()

A callback method that is invoked immediately after Angular has completed initialization of all of the directive’s content. It is invoked only once when the directive is instantiated.

ngAfterContentInit(): void

---

ngOnDestroy()

A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.

ngOnDestroy(): void

---