Skip to content

Commit 83f7c4b

Browse files
artembelikrmnturov
artembelik
and
rmnturov
authored
chore: bump @koobiq/ag-grid-angular-theme to 34.4.0, added new examples (#DS-5157) (#1686)
Co-authored-by: Roman Turov <31649219+rmnturov@users.noreply.github.com>
1 parent cbbf768 commit 83f7c4b

21 files changed

Lines changed: 566 additions & 52 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const OPTIONAL_PACKAGE_JSON_DEPENDENCIES = {
3333
'highlight.js': '^11.11.1'
3434
},
3535
'@koobiq/ag-grid-angular-theme': {
36-
'@koobiq/ag-grid-angular-theme': '^34.3.1',
36+
'@koobiq/ag-grid-angular-theme': '^34',
3737
'ag-grid-angular': '^34',
3838
'ag-grid-community': '^34'
3939
}

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

Lines changed: 51 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -72,29 +72,72 @@ Directives save and restore grid state across page reloads.
7272

7373
`LocalStorageStore` is used by default. Switch to `QueryParamsStore` if needed.
7474

75-
| Directive | Saves |
76-
| ------------------------------ | ----------------------------------------- |
77-
| `kbqAgGridColumnState` | Sort, column order, visibility, and width |
78-
| `kbqAgGridFilterState` | Column filter models |
79-
| `kbqAgGridQuickFilterState` | Quick filter value |
80-
| `kbqAgGridExternalFilterState` | External filter value |
81-
8275
#### Columns
8376

77+
The `kbqAgGridColumnState` directive saves sort order, column order, visibility, and width. Add it with a unique key and connect the store provider via `kbqAgGridColumnStateStoreProvider`.
78+
8479
<!-- example(ag-grid-column-state) -->
8580

8681
#### Filters
8782

83+
The `kbqAgGridFilterState` directive saves column filter models. Add it with a unique key and connect the store provider via `kbqAgGridFilterStateStoreProvider`.
84+
8885
<!-- example(ag-grid-filter-state) -->
8986

9087
#### Quick filter
9188

89+
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)]`.
90+
9291
<!-- example(ag-grid-quick-filter-state) -->
9392

9493
#### External filter
9594

95+
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`.
96+
9697
<!-- example(ag-grid-external-filter-state) -->
9798

99+
### Column menu
100+
101+
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.
102+
103+
Constraints are configured via `ColDef`:
104+
105+
- `lockVisible: true` prevents hiding a column. The last visible column can never be hidden regardless.
106+
- `lockPinned: true` prevents pinning and unpinning a column.
107+
108+
Russian labels are used by default. To switch the language, provide a labels provider:
109+
110+
```ts
111+
providers: [kbqAgGridColumnMenuLabelsProvider(KBQ_AG_GRID_COLUMN_MENU_LABELS_EN)];
112+
```
113+
114+
<!-- example(ag-grid-column-menu) -->
115+
116+
### Loading overlay
117+
118+
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`.
119+
120+
<!-- example(ag-grid-loading-overlay) -->
121+
122+
### Skeleton cell renderer
123+
124+
`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.
125+
126+
<!-- example(ag-grid-skeleton-cell-renderer) -->
127+
128+
### Row selection with infinite scrolling
129+
130+
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.
131+
132+
This state mirrors the condition "all except the specified IDs", so it can be passed to the server without loading all rows.
133+
134+
The directive requires two parameters:
135+
136+
- `kbqAgGridInfiniteSelectionDatasource` accepts a data source. When all rows are selected, newly loaded blocks are automatically added to the selection.
137+
- `getRowId` returns a stable unique row identifier.
138+
139+
<!-- example(ag-grid-infinite-selection) -->
140+
98141
### Custom keyboard shortcuts
99142

100143
You can add custom keyboard shortcuts by adding the appropriate directives to your `<ag-grid-angular>` component.
@@ -106,6 +149,7 @@ You can add custom keyboard shortcuts by adding the appropriate directives to yo
106149
| <span class="docs-hot-key-button">Ctrl</span> + <span class="docs-hot-key-button">click</span> | Select a row | `kbqAgGridSelectRowsByCtrlClick` |
107150
| <span class="docs-hot-key-button">Ctrl</span> + <span class="docs-hot-key-button">C</span> | Copy selected rows | `kbqAgGridCopyByCtrlC` |
108151
| <span class="docs-hot-key-button">Shift</span> + <span class="docs-hot-key-button">click</span> | Select a range of rows | `kbqAgGridSelectRowsByShiftClick` |
152+
| <span class="docs-hot-key-button">Ctrl</span> + <span class="docs-hot-key-button">A</span> | Select all rows | `kbqAgGridInfiniteSelection` |
109153

110154
More information about keyboard shortcuts can be found in the [ag-grid-angular documentation](https://www.ag-grid.com/angular-data-grid/keyboard-navigation/).
111155

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

Lines changed: 51 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -72,31 +72,72 @@ import { AgGridModule } from 'ag-grid-angular';
7272

7373
По умолчанию используется `LocalStorageStore`. При необходимости можно переключиться на `QueryParamsStore`.
7474

75-
| Директива | Что сохраняет |
76-
| ------------------------------ | --------------------------------------- |
77-
| `kbqAgGridColumnState` | Сортировку, порядок, видимость и ширину |
78-
| `kbqAgGridFilterState` | Модели фильтров колонок |
79-
| `kbqAgGridQuickFilterState` | Значение быстрого фильтра |
80-
| `kbqAgGridExternalFilterState` | Значение внешнего фильтра |
81-
82-
Ниже примеры для каждого типа состояния.
83-
8475
#### Колонки
8576

77+
Директива `kbqAgGridColumnState` сохраняет сортировку, порядок, видимость и ширину колонок. Добавьте её с уникальным ключом и подключите провайдер хранилища через `kbqAgGridColumnStateStoreProvider`.
78+
8679
<!-- example(ag-grid-column-state) -->
8780

8881
#### Фильтры
8982

83+
Директива `kbqAgGridFilterState` сохраняет модели фильтров колонок. Добавьте её с уникальным ключом и подключите провайдер хранилища через `kbqAgGridFilterStateStoreProvider`.
84+
9085
<!-- example(ag-grid-filter-state) -->
9186

9287
#### Быстрый фильтр
9388

89+
Директива `kbqAgGridQuickFilterState` сохраняет значение быстрого фильтра. Добавьте её с уникальным ключом, подключите провайдер хранилища через `kbqAgGridQuickFilterStateStoreProvider` и привяжите значение поля ввода через `[(kbqAgGridQuickFilterStateValue)]`.
90+
9491
<!-- example(ag-grid-quick-filter-state) -->
9592

9693
#### Внешний фильтр
9794

95+
Директива `kbqAgGridExternalFilterState` сохраняет значение внешнего фильтра. Добавьте её с уникальным ключом, подключите провайдер хранилища через `kbqAgGridExternalFilterStateStoreProvider`, привяжите значение через `[(kbqAgGridExternalFilterStateValue)]` и передайте функцию проверки строк через `kbqAgGridExternalFilterStatePass`.
96+
9897
<!-- example(ag-grid-external-filter-state) -->
9998

99+
### Меню колонок
100+
101+
Директива `kbqAgGridColumnMenu` добавляет в правый верхний угол таблицы кнопку, которая открывает меню управления колонками. В меню можно показывать и скрывать колонки, менять их порядок перетаскиванием, закреплять слева или справа и находить колонку по названию. Кнопка сброса возвращает колонки к исходному состоянию.
102+
103+
Ограничения задаются через `ColDef`:
104+
105+
- `lockVisible: true` запрещает скрывать колонку. Последнюю видимую колонку скрыть нельзя в любом случае.
106+
- `lockPinned: true` запрещает закреплять и откреплять колонку.
107+
108+
По умолчанию используются русские подписи. Для смены языка подключите провайдер:
109+
110+
```ts
111+
providers: [kbqAgGridColumnMenuLabelsProvider(KBQ_AG_GRID_COLUMN_MENU_LABELS_EN)];
112+
```
113+
114+
<!-- example(ag-grid-column-menu) -->
115+
116+
### Оверлей загрузки
117+
118+
Директива `kbqAgGridLoadingOverlay` управляет состоянием загрузки таблицы: когда значение `true`, поверх строк отображается скелетон-оверлей. Число строк и колонок скелетона задаётся через `kbqAgGridLoadingOverlayConfigProvider`.
119+
120+
<!-- example(ag-grid-loading-overlay) -->
121+
122+
### Скелетон в ячейках
123+
124+
`KbqAgGridSkeletonCellRenderer` используется совместно с моделью бесконечной прокрутки (`rowModelType="infinite"`). Пока блок данных не загружен (`params.data === undefined`), ячейки отображают скелетон-заглушки.
125+
126+
<!-- example(ag-grid-skeleton-cell-renderer) -->
127+
128+
### Выбор строк при бесконечной прокрутке
129+
130+
При бесконечной прокрутке данные подгружаются блоками, поэтому выбрать их все обычным списком нельзя — большая часть еще не загружена. Директива `kbqAgGridInfiniteSelection` инвертирует выбор: вместо перечня выбранных строк она хранит признак «выбраны все» и список исключений.
131+
132+
Такое состояние повторяет условие «все, кроме указанных ID», поэтому его можно передать на сервер, не загружая все строки.
133+
134+
Директиве нужны два параметра:
135+
136+
- `kbqAgGridInfiniteSelectionDatasource` принимает источник данных. Когда выбраны все строки, подгружаемые блоки добавляются в выбор автоматически.
137+
- `getRowId` возвращает стабильный уникальный идентификатор строки.
138+
139+
<!-- example(ag-grid-infinite-selection) -->
140+
100141
### Пользовательские сочетания клавиш
101142

102143
Вы можете добавить пользовательские сочетания клавиш, добавив соответствующие директивы к вашему компоненту `<ag-grid-angular>`.
@@ -108,6 +149,7 @@ import { AgGridModule } from 'ag-grid-angular';
108149
| <span class="docs-hot-key-button">Ctrl</span> + <span class="docs-hot-key-button">click</span> | Выделить строку | `kbqAgGridSelectRowsByCtrlClick` |
109150
| <span class="docs-hot-key-button">Ctrl</span> + <span class="docs-hot-key-button">C</span> | Копировать выделенные строки | `kbqAgGridCopyByCtrlC` |
110151
| <span class="docs-hot-key-button">Shift</span> + <span class="docs-hot-key-button">click</span> | Выделить диапазон строк | `kbqAgGridSelectRowsByShiftClick` |
152+
| <span class="docs-hot-key-button">Ctrl</span> + <span class="docs-hot-key-button">A</span> | Выделить все строки | `kbqAgGridInfiniteSelection` |
111153

112154
Больше информации о сочетаниях клавиш можно найти в [документации ag-grid-angular](https://www.ag-grid.com/angular-data-grid/keyboard-navigation/).
113155

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
22
import {
3+
AgGridColumnMenuExample,
34
AgGridColumnStateExample,
45
AgGridCopySelectedExample,
56
AgGridExternalFilterStateExample,
67
AgGridFilterStateExample,
8+
AgGridInfiniteSelectionExample,
9+
AgGridLoadingOverlayExample,
710
AgGridOverviewExample,
811
AgGridQuickFilterStateExample,
912
AgGridRowActionsExample,
1013
AgGridRowDraggingExample,
14+
AgGridSkeletonCellRendererExample,
1115
AgGridStatusBarExample
1216
} from 'packages/docs-examples/components/ag-grid';
1317
import { DevThemeToggle } from '../theme-toggle';
1418

1519
@Component({
1620
selector: 'dev-examples',
1721
imports: [
22+
AgGridColumnMenuExample,
1823
AgGridOverviewExample,
1924
AgGridRowDraggingExample,
2025
AgGridCopySelectedExample,
@@ -23,9 +28,20 @@ import { DevThemeToggle } from '../theme-toggle';
2328
AgGridColumnStateExample,
2429
AgGridFilterStateExample,
2530
AgGridQuickFilterStateExample,
26-
AgGridExternalFilterStateExample
31+
AgGridExternalFilterStateExample,
32+
AgGridLoadingOverlayExample,
33+
AgGridSkeletonCellRendererExample,
34+
AgGridInfiniteSelectionExample
2735
],
2836
template: `
37+
<ag-grid-column-menu-example />
38+
<hr />
39+
<ag-grid-loading-overlay-example />
40+
<hr />
41+
<ag-grid-skeleton-cell-renderer-example />
42+
<hr />
43+
<ag-grid-infinite-selection-example />
44+
<hr />
2945
<ag-grid-external-filter-state-example />
3046
<hr />
3147
<ag-grid-quick-filter-state-example />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ type ExampleTableItem = unknown;
5151
kbqAgGridToNextRowByTab
5252
kbqAgGridSelectRowsByShiftArrow
5353
kbqAgGridSelectRowsByCtrlClick
54+
[alwaysMultiSort]="true"
5455
[rowSelection]="rowSelection"
5556
[selectionColumnDef]="selectionColumnDef"
5657
[columnDefs]="columnDefs"
@@ -133,7 +134,6 @@ export class ExampleGrid {
133134
}
134135

135136
protected onFirstDataRendered({ api }: FirstDataRenderedEvent): void {
136-
api.setFocusedCell(0, 'column0');
137137
api.forEachNode((node) => {
138138
if (node.rowIndex === 3 || node.rowIndex === 4) {
139139
node.setSelected(true);

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import {
3+
KBQ_AG_GRID_COLUMN_MENU_LABELS_EN,
4+
kbqAgGridColumnMenuLabelsProvider,
5+
KbqAgGridThemeModule
6+
} from '@koobiq/ag-grid-angular-theme';
7+
import { AgGridModule } from 'ag-grid-angular';
8+
import { AllCommunityModule, ColDef, ModuleRegistry } from 'ag-grid-community';
9+
10+
ModuleRegistry.registerModules([AllCommunityModule]);
11+
12+
/**
13+
* @title AG Grid with column menu
14+
*/
15+
@Component({
16+
selector: 'ag-grid-column-menu-example',
17+
imports: [AgGridModule, KbqAgGridThemeModule],
18+
template: `
19+
<ag-grid-angular
20+
kbqAgGridTheme
21+
kbqAgGridSelectRowsByShiftClick
22+
kbqAgGridThemeDisableCellFocusStyles
23+
kbqAgGridToNextRowByTab
24+
kbqAgGridSelectRowsByShiftArrow
25+
kbqAgGridSelectRowsByCtrlClick
26+
kbqAgGridColumnMenu
27+
[rowData]="rowData"
28+
[columnDefs]="columnDefs"
29+
[alwaysMultiSort]="true"
30+
/>
31+
`,
32+
styles: `
33+
ag-grid-angular {
34+
height: 400px;
35+
max-width: 100%;
36+
}
37+
`,
38+
providers: [kbqAgGridColumnMenuLabelsProvider(KBQ_AG_GRID_COLUMN_MENU_LABELS_EN)],
39+
changeDetection: ChangeDetectionStrategy.OnPush
40+
})
41+
export class AgGridColumnMenuExample {
42+
readonly columnDefs: ColDef[] = [
43+
// Pinned and always visible — can't be hidden.
44+
{ field: 'incidentId', headerName: 'Incident ID', lockVisible: true, pinned: 'left', width: 110 },
45+
// Shown by default. Severity and status are also locked from hiding.
46+
{ field: 'severity', headerName: 'Severity', lockVisible: true, width: 100 },
47+
{ field: 'status', headerName: 'Status', lockVisible: true, width: 140 },
48+
{ field: 'attackType', headerName: 'Attack type', width: 170 },
49+
{ field: 'sourceIp', headerName: 'Source IP', width: 128 },
50+
// Hidden by default, but available to show from the column menu.
51+
{ field: 'affectedHost', headerName: 'Affected host', hide: true, width: 170 },
52+
{ field: 'destinationIp', headerName: 'Destination IP', hide: true, width: 128 },
53+
{ field: 'assignedAnalyst', headerName: 'Assigned analyst', hide: true, width: 170 },
54+
{ field: 'mitreTechnique', headerName: 'MITRE technique', hide: true, width: 130 },
55+
{ field: 'mitreTechniqueName', headerName: 'MITRE technique name', hide: true, width: 260 },
56+
{ field: 'responseAction', headerName: 'Response action', hide: true, width: 180 },
57+
{ field: 'sourcePort', headerName: 'Source port', hide: true, width: 130 },
58+
{ field: 'destinationPort', headerName: 'Destination port', hide: true, width: 150 },
59+
{ field: 'protocol', headerName: 'Protocol', hide: true, width: 120 },
60+
{ field: 'detectionSource', headerName: 'Detection source', hide: true, width: 170 },
61+
{ field: 'confidenceScore', headerName: 'Confidence score', hide: true, width: 160 },
62+
{ field: 'assetOwner', headerName: 'Asset owner', hide: true, width: 150 },
63+
{ field: 'businessUnit', headerName: 'Business unit', hide: true, width: 150 },
64+
{ field: 'threatActor', headerName: 'Threat actor', hide: true, width: 150 },
65+
{ field: 'malwareFamily', headerName: 'Malware family', hide: true, width: 160 },
66+
{ field: 'remediationStatus', headerName: 'Remediation status', hide: true, width: 180 }
67+
];
68+
69+
readonly rowData = Array.from({ length: 30 }, (_, index) =>
70+
Object.fromEntries(this.columnDefs.map(({ field }) => [field as string, 'Text ' + index]))
71+
);
72+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ ModuleRegistry.registerModules([AllCommunityModule]);
2323
kbqAgGridTheme
2424
kbqAgGridThemeDisableCellFocusStyles
2525
kbqAgGridColumnState="dev-ag-grid-column-state"
26+
[alwaysMultiSort]="true"
2627
[rowData]="rowData"
2728
[columnDefs]="columnDefs"
2829
[style.height.px]="300"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ const customCopyFormatterWithHeaderRow: KbqAgGridCopyFormatter = (api) => {
5151
kbqAgGridSelectRowsByShiftArrow
5252
kbqAgGridSelectRowsByCtrlClick
5353
kbqAgGridCopyByCtrlC
54+
[alwaysMultiSort]="true"
5455
[kbqAgGridCopyFormatter]="copyFormatter()"
5556
[rowSelection]="rowSelection"
5657
[style.height.px]="300"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ ModuleRegistry.registerModules([AllCommunityModule]);
3232
#externalFilterState="kbqAgGridExternalFilterState"
3333
kbqAgGridTheme
3434
kbqAgGridExternalFilterState="dev-ag-grid-external-filter-state"
35+
[alwaysMultiSort]="true"
3536
[rowData]="rowData"
3637
[columnDefs]="columnDefs"
3738
[style.height.px]="300"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ ModuleRegistry.registerModules([AllCommunityModule]);
2424
kbqAgGridTheme
2525
kbqAgGridThemeDisableCellFocusStyles
2626
kbqAgGridFilterState="dev-ag-grid-filter-state"
27+
[alwaysMultiSort]="true"
2728
[rowData]="rowData"
2829
[columnDefs]="columnDefs"
2930
[style.height.px]="300"

0 commit comments

Comments
 (0)