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 disableCellFocusStyles attribute to <ag-grid-angular>:

<ag-grid-angular kbqAgGridTheme disableCellFocusStyles />

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.

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

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.