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 kbqAgGridCopyByCtrlC directive allows you to copy selected rows to the clipboard using the Ctrl+C keyboard shortcut.

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 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.

• Use the Table component for simple tables with a small amount of data that do not require resizing or reordering of columns.
• If the list contains only one column, use List or Tree.