AG Grid is designed for working with large tables. The component supports sorting, virtual scrolling, resizing, and reordering of columns. It is based on the library ag-grid-angular.
To maintain a consistent table style across projects, a theme @koobiq/ag-grid-angular-theme has been created. It includes ready-to-use styles that align with the design system. The theme supports the core features of AG Grid and simplifies table appearance customization.
Install the following packages:
npm install @koobiq/ag-grid-angular-theme@^34 ag-grid-community@^34 ag-grid-angular@^34
Import the theme into the main styles file styles.scss:
@use '@koobiq/ag-grid-angular-theme';
Apply the theme to <ag-grid-angular> in the template:
import { KbqAgGridThemeModule } from '@koobiq/ag-grid-angular-theme';
import { AgGridModule } from 'ag-grid-angular';
@Component({
imports: [AgGridModule, KbqAgGridThemeModule],
template: `<ag-grid-angular kbqAgGridTheme />`
})
The full documentation for using the theme is available in the GitHub repository.
To disable the focus styles for table cells, add the kbqAgGridThemeDisableCellFocusStyles attribute to <ag-grid-angular>:
<ag-grid-angular kbqAgGridTheme kbqAgGridThemeDisableCellFocusStyles />
The kbqAgGridRowActions directive adds an action panel that appears when hovering over a row.
The kbqAgGridRowGroup directive implements client-side row grouping. Attach it to ag-grid-angular, supply raw data via [kbqAgGridRowGroupRowData] instead of [rowData], and set the grouped columns via [(kbqAgGridRowGroupCols)].
Collapsed/expanded group state and row selection can each be persisted independently by setting kbqAgGridRowGroupCollapsedState and kbqAgGridRowGroupSelectionState to a unique key, connecting store providers via kbqAgGridRowGroupCollapsedStateStoreProvider and kbqAgGridRowGroupSelectionStateStoreProvider.
The Actions panel component allows you to perform bulk actions on rows selected in the table. To prevent the panel from overlapping the last rows of the table, a padding-bottom is added to .ag-body-viewport when it opens.
A long list can fit into a single line of a cell: Overflow items hides what does not fit the width and recalculates that whenever the column is resized. The hidden items can be expanded in the cell itself or shown as a full list in a Popover. To let the row height follow the content, enable autoHeight for the column.
The kbqAgGridCopyByCtrlC directive allows you to copy selected rows to the clipboard using the Ctrl+C keyboard shortcut.
The grid's own API can be used to export the currently displayed data (respecting active filters, sorting, and formatters). api.exportDataAsCsv() downloads a CSV file with no additional dependencies. Other formats can be built on top of the grid's cell values using third-party libraries — for example, XLSX via xlsx, and PDF via jspdf with jspdf-autotable.
The kbqAgGridStatusBar directive adds a customizable panel below the table.
Directives save and restore grid state across page reloads.
LocalStorageStore is used by default. Switch to QueryParamsStore if needed.
The kbqAgGridColumnState directive saves sort order, column order, visibility, and width. Add it with a unique key and connect the store provider via kbqAgGridColumnStateStoreProvider.
The kbqAgGridFilterState directive saves column filter models. Add it with a unique key and connect the store provider via kbqAgGridFilterStateStoreProvider.
The kbqAgGridQuickFilterState directive saves the quick filter value. Add it with a unique key, connect the store provider via kbqAgGridQuickFilterStateStoreProvider, and bind the input value via [(kbqAgGridQuickFilterStateValue)].
The kbqAgGridExternalFilterState directive saves the external filter value. Add it with a unique key, connect the store provider via kbqAgGridExternalFilterStateStoreProvider, bind the value via [(kbqAgGridExternalFilterStateValue)], and pass the row check function via kbqAgGridExternalFilterStatePass.
The kbqAgGridRowSelectionState directive saves row selection. Add it with a unique key, connect the store provider via kbqAgGridRowSelectionStateStoreProvider, and set getRowId.
The kbqAgGridRowFocusState directive saves the focused cell. Add it with a unique key, connect the store provider via kbqAgGridRowFocusStateStoreProvider, and set getRowId.
The kbqAgGridColumnMenu directive adds a button in the top-right corner of the grid that opens a column management menu. The menu allows showing and hiding columns, reordering them via drag-and-drop, pinning them to the left or right, and searching for a column by name. The reset button restores columns to their initial state.
Constraints are configured via ColDef:
lockVisible: true prevents hiding a column. The last visible column can never be hidden regardless.lockPinned: true prevents pinning and unpinning a column.Russian labels are used by default. To switch the language, provide a labels provider:
providers: [kbqAgGridColumnMenuLabelsProvider(KBQ_AG_GRID_COLUMN_MENU_LABELS_EN)];
The kbqAgGridLoadingOverlay directive controls the grid loading state: when the value is true, a skeleton overlay is shown on top of the rows. The number of skeleton rows and columns is configured via kbqAgGridLoadingOverlayConfigProvider.
KbqAgGridSkeletonCellRenderer is used together with the infinite row model (rowModelType="infinite"). While a data block is not yet loaded (params.data === undefined), cells display skeleton placeholders.
With infinite scrolling, data is loaded in blocks, so it is not possible to select all rows using a regular list — most of them are not yet loaded. The kbqAgGridInfiniteSelection directive inverts the selection: instead of a list of selected rows, it stores an "all selected" flag and a list of exceptions.
This state mirrors the condition "all except the specified IDs", so it can be passed to the server without loading all rows.
The directive requires two parameters:
kbqAgGridInfiniteSelectionDatasource accepts a data source. When all rows are selected, newly loaded blocks are automatically added to the selection.getRowId returns a stable unique row identifier.You can add custom keyboard shortcuts by adding the appropriate directives to your <ag-grid-angular> component.
Key |
Action | Directive |
|---|---|---|
| Tab | Move to next row | kbqAgGridToNextRowByTab |
| Shift + ↓↑ | Select multiple rows | kbqAgGridSelectRowsByShiftArrow |
| Ctrl + click | Select a row | kbqAgGridSelectRowsByCtrlClick |
| Ctrl + C | Copy selected rows | kbqAgGridCopyByCtrlC |
| Shift + click | Select a range of rows | kbqAgGridSelectRowsByShiftClick |
| Ctrl + A | Select all rows | kbqAgGridInfiniteSelection |
More information about keyboard shortcuts can be found in the ag-grid-angular documentation.