# 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 ```typescript import { Component } from '@angular/core'; import { Grid } from '@toolbox-web/grid-angular'; @Component({ selector: 'app-root', imports: [Grid], template: ` ` }) 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 `` tag. When two different grid versions share a page, the second-loaded bundle registers under a version-suffixed tag (e.g. ``). 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: ```html ``` 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 ```typescript // In your component customStyles = ` .my-detail-panel { padding: 16px; } .my-status-badge { border-radius: 4px; } `; ``` ```html ... ``` --- #### 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` ```html

``` --- #### 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` ```html

``` --- #### 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` ```html

``` --- #### 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` ```html

``` ```typescript 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. ```html ``` --- #### 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). ```html ``` --- #### columnDefaults ```html ``` --- #### 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'` ```html

``` --- #### 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`. ```html

``` --- #### 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` - requires `value()` and `row()` signal inputs - Editors: `CellEditor` - adds `commit` and `cancel` outputs ```typescript // 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 = { columns: [ { field: 'name', header: 'Name' }, { field: 'bonus', header: 'Bonus', editable: true, editor: BonusEditorComponent } ] }; ``` ```html ``` --- #### selection Enable cell/row/range selection. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/selection'; ``` ```html

``` --- #### editing Enable inline cell editing. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/editing'; ``` ```html

``` --- #### clipboard Enable clipboard copy/paste. Requires selection to be enabled. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/clipboard'; ``` ```html ``` --- #### contextMenu Enable right-click context menu. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/context-menu'; ``` ```html ``` --- #### 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:** ```typescript import '@toolbox-web/grid-angular/features/multi-sort'; ``` ```html

``` --- #### filtering Enable column filtering. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/filtering'; ``` ```html

``` --- #### reorderColumns Enable column drag-to-reorder. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/reorder-columns'; ``` ```html ``` --- #### visibility Enable column visibility toggle panel. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/visibility'; ``` ```html ``` --- #### pinnedColumns Enable pinned/sticky columns. Columns are pinned via the `sticky` column property. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/pinned-columns'; ``` ```html ``` --- #### groupingColumns Enable multi-level column headers (column groups). **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/grouping-columns'; ``` ```html ``` --- #### columnVirtualization Enable horizontal column virtualization for wide grids. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/column-virtualization'; ``` ```html ``` --- #### rowDragDrop Enable row drag-and-drop within and across grids. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/row-drag-drop'; ``` ```html ``` --- #### groupingRows Enable row grouping by field values. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/grouping-rows'; ``` ```html ``` --- #### pinnedRows Enable pinned rows (aggregation/status bar). **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/pinned-rows'; ``` ```html ``` --- #### tree Enable hierarchical tree view. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/tree'; ``` ```html ``` --- #### masterDetail Enable master-detail expandable rows. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/master-detail'; ``` ```html ``` --- #### responsive Enable responsive card layout for narrow viewports. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/responsive'; ``` ```html ``` --- #### undoRedo Enable undo/redo for cell edits. Requires editing to be enabled. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/undo-redo'; ``` ```html ``` --- #### exportFeature Enable CSV/JSON export functionality. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/export'; ``` ```html

``` --- #### print Enable print functionality. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/print'; ``` ```html ``` --- #### pivot Enable pivot table functionality. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/pivot'; ``` ```html ``` --- #### serverSide Enable server-side data operations. **Requires feature import:** ```typescript import '@toolbox-web/grid-angular/features/server-side'; ``` ```html ``` --- #### tooltip ```html

``` --- #### cellClick ```html ... ``` --- #### rowClick ```html ... ``` --- #### cellActivate ```html ... ``` --- #### cellChange ```html ... ``` --- #### cellCommit ```html ... ``` ```typescript onCellCommit(event: CellCommitEvent) { console.log(`Changed ${event.field} to ${event.value} in row ${event.rowIndex}`); } ``` --- #### cellCancel ```html ... ``` --- #### editOpen ```html ... ``` --- #### beforeEditClose ```html ... ``` --- #### editClose ```html ... ``` --- #### dirtyChange ```html ... ``` --- #### dataChange ```html ... ``` --- #### rowCommit ```html ... ``` --- #### changedRowsReset ```html ... ``` --- #### sortChange ```html ... ``` --- #### filterChange ```html ... ``` --- #### columnResize ```html ... ``` --- #### columnResizeReset ```html ... ``` --- #### columnMove ```html ... ``` --- #### columnVisibility ```html ... ``` --- #### columnStateChange ```html ... ``` --- #### selectionChange ```html ... ``` --- #### rowMove ```html ... ``` --- #### rowDragStart ```html ... ``` --- #### groupToggle ```html ... ``` --- #### groupExpand ```html ... ``` --- #### groupCollapse ```html ... ``` --- #### treeExpand ```html ... ``` --- #### detailExpand ```html ... ``` --- #### responsiveChange ```html ... ``` --- #### contextMenuOpen ```html ... ``` --- #### copy ```html ... ``` --- #### paste ```html ... ``` --- #### undo ```html ... ``` --- #### redo ```html ... ``` --- #### exportComplete ```html ... ``` --- #### printStart ```html ... ``` --- #### printComplete ```html ... ``` --- #### 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. ```html ... ``` --- #### 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. ```html ... ``` --- ## 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. ```ts 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. ```ts ngAfterContentInit(): void ``` *** ### ngOnDestroy() A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed. ```ts ngOnDestroy(): void ``` ***