chore: bump @koobiq/ag-grid-angular-theme to 34.4.0, added new examples (#DS-5157)

apps/docs/src/app/components/stackblitz/stackblitz-writer.ts

@@ -33,7 +33,7 @@ const OPTIONAL_PACKAGE_JSON_DEPENDENCIES = {
         'highlight.js': '^11.11.1'
     },
     '@koobiq/ag-grid-angular-theme': {
-        '@koobiq/ag-grid-angular-theme': '^34.3.1',
+        '@koobiq/ag-grid-angular-theme': '^34',
         'ag-grid-angular': '^34',
         'ag-grid-community': '^34'
     }

docs/data-grid/ag-grid/ag-grid.en.md

@@ -72,29 +72,66 @@ Directives save and restore grid state across page reloads.
 
 `LocalStorageStore` is used by default. Switch to `QueryParamsStore` if needed.
 
-| Directive                      | Saves                                     |
-| ------------------------------ | ----------------------------------------- |
-| `kbqAgGridColumnState`         | Sort, column order, visibility, and width |
-| `kbqAgGridFilterState`         | Column filter models                      |
-| `kbqAgGridQuickFilterState`    | Quick filter value                        |
-| `kbqAgGridExternalFilterState` | External filter value                     |
-
 #### Columns
 
+The `kbqAgGridColumnState` directive saves sort order, column order, visibility, and width. Add it with a unique key and connect the store provider via `kbqAgGridColumnStateStoreProvider`.
+
 <!-- example(ag-grid-column-state) -->
 
 #### Filters
 
+The `kbqAgGridFilterState` directive saves column filter models. Add it with a unique key and connect the store provider via `kbqAgGridFilterStateStoreProvider`.
+
 <!-- example(ag-grid-filter-state) -->
 
 #### Quick filter
 
+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)]`.
+
 <!-- example(ag-grid-quick-filter-state) -->
 
 #### External filter
 
+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`.
+
 <!-- example(ag-grid-external-filter-state) -->
 
+### Column menu
+
+The `kbqAgGridColumnMenu` directive adds a column management button in the top-right corner of the grid. The panel allows toggling column visibility, reordering columns via drag-and-drop, and pinning them to the left or right.
+
+Russian labels are used by default. To switch the language, provide a labels provider:
+
+```ts
+providers: [kbqAgGridColumnMenuLabelsProvider(KBQ_AG_GRID_COLUMN_MENU_LABELS_EN)];
+```
+
+To prevent a specific column from being hidden, set `lockVisible: true` in its `ColDef`.
+
+<!-- example(ag-grid-column-menu) -->
+
+### Loading overlay
+
+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`.
+
+<!-- example(ag-grid-loading-overlay) -->
+
+### Skeleton cell renderer
+
+`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.
+
+<!-- example(ag-grid-skeleton-cell-renderer) -->
+
+### Infinite selection
+
+The `kbqAgGridInfiniteSelection` directive implements inverse selection for the infinite row model: the state is stored as `KbqAgGridInfiniteSelectionState` — equivalent to `WHERE id NOT IN (excludedIds)`. This is convenient for passing to the backend without loading all rows.
+
+Instead of `datasource`, use `kbqAgGridInfiniteSelectionDatasource` — the directive wraps the data source to automatically select rows as new blocks load. Also make sure to specify `getRowId` for stable row identification.
+
+<span class="docs-hot-key-button">Ctrl</span> + <span class="docs-hot-key-button">A</span> selects all rows; pressing it again when all rows are already selected does nothing.
+
+<!-- example(ag-grid-infinite-selection) -->
+
 ### Custom keyboard shortcuts
 
 You can add custom keyboard shortcuts by adding the appropriate directives to your `<ag-grid-angular>` component.
@@ -106,6 +143,7 @@ You can add custom keyboard shortcuts by adding the appropriate directives to yo
 | <span class="docs-hot-key-button">Ctrl</span> + <span class="docs-hot-key-button">click</span>  | Select a row           | `kbqAgGridSelectRowsByCtrlClick`  |
 | <span class="docs-hot-key-button">Ctrl</span> + <span class="docs-hot-key-button">C</span>      | Copy selected rows     | `kbqAgGridCopyByCtrlC`            |
 | <span class="docs-hot-key-button">Shift</span> + <span class="docs-hot-key-button">click</span> | Select a range of rows | `kbqAgGridSelectRowsByShiftClick` |
+| <span class="docs-hot-key-button">Ctrl</span> + <span class="docs-hot-key-button">A</span>      | Select all rows        | `kbqAgGridInfiniteSelection`      |
 
 More information about keyboard shortcuts can be found in the [ag-grid-angular documentation](https://www.ag-grid.com/angular-data-grid/keyboard-navigation/).
 

docs/data-grid/ag-grid/ag-grid.ru.md

@@ -72,31 +72,66 @@ import { AgGridModule } from 'ag-grid-angular';
 
 По умолчанию используется `LocalStorageStore`. При необходимости можно переключиться на `QueryParamsStore`.
 
-| Директива                      | Что сохраняет                           |
-| ------------------------------ | --------------------------------------- |
-| `kbqAgGridColumnState`         | Сортировку, порядок, видимость и ширину |
-| `kbqAgGridFilterState`         | Модели фильтров колонок                 |
-| `kbqAgGridQuickFilterState`    | Значение быстрого фильтра               |
-| `kbqAgGridExternalFilterState` | Значение внешнего фильтра               |
-
-Ниже примеры для каждого типа состояния.
-
 #### Колонки
 
+Директива `kbqAgGridColumnState` сохраняет сортировку, порядок, видимость и ширину колонок. Добавьте её с уникальным ключом и подключите провайдер хранилища через `kbqAgGridColumnStateStoreProvider`.
+
 <!-- example(ag-grid-column-state) -->
 
 #### Фильтры
 
+Директива `kbqAgGridFilterState` сохраняет модели фильтров колонок. Добавьте её с уникальным ключом и подключите провайдер хранилища через `kbqAgGridFilterStateStoreProvider`.
+
 <!-- example(ag-grid-filter-state) -->
 
 #### Быстрый фильтр
 
+Директива `kbqAgGridQuickFilterState` сохраняет значение быстрого фильтра. Добавьте её с уникальным ключом, подключите провайдер хранилища через `kbqAgGridQuickFilterStateStoreProvider` и привяжите значение поля ввода через `[(kbqAgGridQuickFilterStateValue)]`.
+
 <!-- example(ag-grid-quick-filter-state) -->
 
 #### Внешний фильтр
 
+Директива `kbqAgGridExternalFilterState` сохраняет значение внешнего фильтра. Добавьте её с уникальным ключом, подключите провайдер хранилища через `kbqAgGridExternalFilterStateStoreProvider`, привяжите значение через `[(kbqAgGridExternalFilterStateValue)]` и передайте функцию проверки строк через `kbqAgGridExternalFilterStatePass`.
+
 <!-- example(ag-grid-external-filter-state) -->
 
+### Меню колонок
+
+Директива `kbqAgGridColumnMenu` добавляет кнопку управления колонками в правом верхнем углу таблицы. Панель позволяет переключать видимость колонок, изменять их порядок перетаскиванием и закреплять слева или справа.
+
+По умолчанию используются русские подписи. Для смены языка подключите провайдер:
+
+```ts
+providers: [kbqAgGridColumnMenuLabelsProvider(KBQ_AG_GRID_COLUMN_MENU_LABELS_EN)];
+```
+
+Чтобы запретить скрытие конкретной колонки, добавьте `lockVisible: true` в её `ColDef`.
+
+<!-- example(ag-grid-column-menu) -->
+
+### Оверлей загрузки
+
+Директива `kbqAgGridLoadingOverlay` управляет состоянием загрузки таблицы: когда значение `true`, поверх строк отображается скелетон-оверлей. Число строк и колонок скелетона задаётся через `kbqAgGridLoadingOverlayConfigProvider`.
+
+<!-- example(ag-grid-loading-overlay) -->
+
+### Скелетон в ячейках
+
+`KbqAgGridSkeletonCellRenderer` используется совместно с моделью бесконечной прокрутки (`rowModelType="infinite"`). Пока блок данных не загружен (`params.data === undefined`), ячейки отображают скелетон-заглушки.
+
+<!-- example(ag-grid-skeleton-cell-renderer) -->
+
+### Бесконечная выборка
+
+Директива `kbqAgGridInfiniteSelection` реализует инвертированную выборку для модели бесконечной прокрутки: состояние хранится как `KbqAgGridInfiniteSelectionState` — эквивалент `WHERE id NOT IN (excludedIds)`. Это удобно для передачи на backend без загрузки всех строк.
+
+Вместо `datasource` используйте `kbqAgGridInfiniteSelectionDatasource` — директива оборачивает источник данных, чтобы автоматически выделять строки при загрузке новых блоков. Также обязательно укажите `getRowId` для стабильной идентификации строк.
+
+Комбинация клавиш <span class="docs-hot-key-button">Ctrl</span> + <span class="docs-hot-key-button">A</span> выделяет все строки, повторное нажатие, когда все строки уже выделены, не снимает выделение.
+
+<!-- example(ag-grid-infinite-selection) -->
+
 ### Пользовательские сочетания клавиш
 
 Вы можете добавить пользовательские сочетания клавиш, добавив соответствующие директивы к вашему компоненту `<ag-grid-angular>`.
@@ -108,6 +143,7 @@ import { AgGridModule } from 'ag-grid-angular';
 | <span class="docs-hot-key-button">Ctrl</span> + <span class="docs-hot-key-button">click</span>  | Выделить строку              | `kbqAgGridSelectRowsByCtrlClick`  |
 | <span class="docs-hot-key-button">Ctrl</span> + <span class="docs-hot-key-button">C</span>      | Копировать выделенные строки | `kbqAgGridCopyByCtrlC`            |
 | <span class="docs-hot-key-button">Shift</span> + <span class="docs-hot-key-button">click</span> | Выделить диапазон строк      | `kbqAgGridSelectRowsByShiftClick` |
+| <span class="docs-hot-key-button">Ctrl</span> + <span class="docs-hot-key-button">A</span>      | Выделить все строки          | `kbqAgGridInfiniteSelection`      |
 
 Больше информации о сочетаниях клавиш можно найти в [документации ag-grid-angular](https://www.ag-grid.com/angular-data-grid/keyboard-navigation/).
 

package.json

@@ -29,7 +29,7 @@
         "@docsearch/js": "^3.9.0",
         "@fontsource/inter": "^5.2.8",
         "@fontsource/jetbrains-mono": "^5.2.6",
-        "@koobiq/ag-grid-angular-theme": "^34.3.1",
+        "@koobiq/ag-grid-angular-theme": "^34.4.0",
         "@koobiq/date-adapter": "^3.5.1",
         "@koobiq/date-formatter": "^3.5.1",
         "@koobiq/icons": "^11.7.1",

packages/components-dev/ag-grid/module.ts

@@ -1,20 +1,25 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import {
+    AgGridColumnMenuExample,
     AgGridColumnStateExample,
     AgGridCopySelectedExample,
     AgGridExternalFilterStateExample,
     AgGridFilterStateExample,
+    AgGridInfiniteSelectionExample,
+    AgGridLoadingOverlayExample,
     AgGridOverviewExample,
     AgGridQuickFilterStateExample,
     AgGridRowActionsExample,
     AgGridRowDraggingExample,
+    AgGridSkeletonCellRendererExample,
     AgGridStatusBarExample
 } from 'packages/docs-examples/components/ag-grid';
 import { DevThemeToggle } from '../theme-toggle';
 
 @Component({
     selector: 'dev-examples',
     imports: [
+        AgGridColumnMenuExample,
         AgGridOverviewExample,
         AgGridRowDraggingExample,
         AgGridCopySelectedExample,
@@ -23,9 +28,20 @@ import { DevThemeToggle } from '../theme-toggle';
         AgGridColumnStateExample,
         AgGridFilterStateExample,
         AgGridQuickFilterStateExample,
-        AgGridExternalFilterStateExample
+        AgGridExternalFilterStateExample,
+        AgGridLoadingOverlayExample,
+        AgGridSkeletonCellRendererExample,
+        AgGridInfiniteSelectionExample
     ],
     template: `
+        <ag-grid-column-menu-example />
+        <hr />
+        <ag-grid-loading-overlay-example />
+        <hr />
+        <ag-grid-skeleton-cell-renderer-example />
+        <hr />
+        <ag-grid-infinite-selection-example />
+        <hr />
         <ag-grid-external-filter-state-example />
         <hr />
         <ag-grid-quick-filter-state-example />

packages/docs-examples/components/actions-panel/actions-panel-overview/actions-panel-overview-example.ts

@@ -51,6 +51,7 @@ type ExampleTableItem = unknown;
             kbqAgGridToNextRowByTab
             kbqAgGridSelectRowsByShiftArrow
             kbqAgGridSelectRowsByCtrlClick
+            [alwaysMultiSort]="true"
             [rowSelection]="rowSelection"
             [selectionColumnDef]="selectionColumnDef"
             [columnDefs]="columnDefs"
@@ -133,7 +134,6 @@ export class ExampleGrid {
     }
 
     protected onFirstDataRendered({ api }: FirstDataRenderedEvent): void {
-        api.setFocusedCell(0, 'column0');
         api.forEachNode((node) => {
             if (node.rowIndex === 3 || node.rowIndex === 4) {
                 node.setSelected(true);

packages/docs-examples/components/ag-grid/ag-grid-column-menu/ag-grid-column-menu-example.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+    KBQ_AG_GRID_COLUMN_MENU_LABELS_EN,
+    kbqAgGridColumnMenuLabelsProvider,
+    KbqAgGridThemeModule
+} from '@koobiq/ag-grid-angular-theme';
+import { AgGridModule } from 'ag-grid-angular';
+import { AllCommunityModule, ColDef, ModuleRegistry } from 'ag-grid-community';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+/**
+ * @title AG Grid with column menu
+ */
+@Component({
+    selector: 'ag-grid-column-menu-example',
+    imports: [AgGridModule, KbqAgGridThemeModule],
+    template: `
+        <ag-grid-angular
+            kbqAgGridTheme
+            kbqAgGridSelectRowsByShiftClick
+            kbqAgGridThemeDisableCellFocusStyles
+            kbqAgGridToNextRowByTab
+            kbqAgGridSelectRowsByShiftArrow
+            kbqAgGridSelectRowsByCtrlClick
+            kbqAgGridColumnMenu
+            [rowData]="rowData"
+            [columnDefs]="columnDefs"
+            [alwaysMultiSort]="true"
+        />
+    `,
+    styles: `
+        ag-grid-angular {
+            height: 400px;
+            max-width: 100%;
+        }
+    `,
+    providers: [kbqAgGridColumnMenuLabelsProvider(KBQ_AG_GRID_COLUMN_MENU_LABELS_EN)],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AgGridColumnMenuExample {
+    readonly columnDefs: ColDef[] = [
+        { field: 'column0', headerName: 'Column 0', lockVisible: true, pinned: 'left', width: 150 },
+        { field: 'column1', headerName: 'Column 1', lockVisible: true, width: 150 },
+        { field: 'column2', headerName: 'Column 2', width: 150 },
+        { field: 'column3', headerName: 'Column 3', pinned: 'right', width: 150 },
+        { field: 'column4', headerName: 'Column 4', width: 150 }
+    ];
+    readonly rowData = Array.from({ length: 30 }, (_, index) => ({
+        column0: 'Text ' + index,
+        column1: 'Text ' + index,
+        column2: 'Text ' + index,
+        column3: 'Text ' + index,
+        column4: 'Text ' + index
+    }));
+}

packages/docs-examples/components/ag-grid/ag-grid-column-state/ag-grid-column-state-example.ts

@@ -23,6 +23,7 @@ ModuleRegistry.registerModules([AllCommunityModule]);
             kbqAgGridTheme
             kbqAgGridThemeDisableCellFocusStyles
             kbqAgGridColumnState="dev-ag-grid-column-state"
+            [alwaysMultiSort]="true"
             [rowData]="rowData"
             [columnDefs]="columnDefs"
             [style.height.px]="300"

packages/docs-examples/components/ag-grid/ag-grid-copy-selected/ag-grid-copy-selected-example.ts

@@ -51,6 +51,7 @@ const customCopyFormatterWithHeaderRow: KbqAgGridCopyFormatter = (api) => {
             kbqAgGridSelectRowsByShiftArrow
             kbqAgGridSelectRowsByCtrlClick
             kbqAgGridCopyByCtrlC
+            [alwaysMultiSort]="true"
             [kbqAgGridCopyFormatter]="copyFormatter()"
             [rowSelection]="rowSelection"
             [style.height.px]="300"

packages/docs-examples/components/ag-grid/ag-grid-external-filter-state/ag-grid-external-filter-state-example.ts

@@ -32,6 +32,7 @@ ModuleRegistry.registerModules([AllCommunityModule]);
             #externalFilterState="kbqAgGridExternalFilterState"
             kbqAgGridTheme
             kbqAgGridExternalFilterState="dev-ag-grid-external-filter-state"
+            [alwaysMultiSort]="true"
             [rowData]="rowData"
             [columnDefs]="columnDefs"
             [style.height.px]="300"

packages/docs-examples/components/ag-grid/ag-grid-filter-state/ag-grid-filter-state-example.ts

@@ -24,6 +24,7 @@ ModuleRegistry.registerModules([AllCommunityModule]);
             kbqAgGridTheme
             kbqAgGridThemeDisableCellFocusStyles
             kbqAgGridFilterState="dev-ag-grid-filter-state"
+            [alwaysMultiSort]="true"
             [rowData]="rowData"
             [columnDefs]="columnDefs"
             [style.height.px]="300"