feat(ag-grid-angular-theme): added `KbqAgGridColumnMenu` directive (#DS-3660) by artembelik · Pull Request #167 · koobiq/data-grid

artembelik · 2026-05-20T14:34:45Z

No description provided.

github-actions · 2026-05-20T14:37:24Z

Visit the preview URL for this PR (updated for commit 2e4685f):

https://data-grid-next--data-grid-pr-167-k35b9aef.web.app

_{(expires Sat, 13 Jun 2026 14:06:58 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b9d49913f5b5988e9af8690a8b37f16143707448}

github-actions · 2026-05-20T14:39:21Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

artembelik · 2026-05-20T14:49:32Z

/approve-snapshots

github-actions · 2026-05-20T14:49:56Z

🔄 Updating snapshots.

github-actions · 2026-05-20T14:55:34Z

✅ Snapshots updated!

rmnturov · 2026-05-21T07:00:00Z

Положение кнопки-меню должно быть в углу грида, а не около последней колонки

rmnturov · 2026-05-21T07:46:04Z

колонку с чекбоксами не надо показывать в меню

artembelik · 2026-05-21T09:59:22Z

Положение кнопки-меню должно быть в углу грида, а не около последней колонки

колонку с чекбоксами не надо показывать в меню

@rmnturov поправил

Copilot

Pull request overview

Adds a new AG Grid Angular theme feature to render always-visible “header row actions” as a custom overlay component, plus accompanying styling and dev/e2e coverage. The PR also includes a broad dependency upgrade (Angular + Koobiq ecosystem) and some dev-app wiring changes.

Changes:

Introduces KbqAgGridHeaderRowActions directive + injection token to mount a custom component into the grid header area.
Adds theme SCSS for the header actions overlay and wires the directive into the theme module + public exports.
Extends the dev app with a new “header-actions” page and Playwright spec, plus upgrades dependencies/lint config.

Reviewed changes

Copilot reviewed 37 out of 38 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
packages/ag-grid-angular-theme/src/to-next-row-by-tab.ng.ts	Reorders directive metadata fields.
packages/ag-grid-angular-theme/src/theme.scss	Adds header actions overlay styling mixin and includes it in the theme.
packages/ag-grid-angular-theme/src/theme.ng.ts	Reorders directive metadata fields.
packages/ag-grid-angular-theme/src/status-bar.ng.ts	Reorders directive metadata fields.
packages/ag-grid-angular-theme/src/select-rows-by-shift-click.ng.ts	Reorders directive metadata fields.
packages/ag-grid-angular-theme/src/select-rows-by-shift-arrow.ng.ts	Reorders directive metadata fields.
packages/ag-grid-angular-theme/src/select-rows-by-ctrl-click.ng.ts	Reorders directive metadata fields.
packages/ag-grid-angular-theme/src/select-all-rows-by-ctrl-a.ng.ts	Reorders directive metadata fields.
packages/ag-grid-angular-theme/src/row-actions.ng.ts	Reorders directive metadata fields.
packages/ag-grid-angular-theme/src/quick-filter-state.ng.ts	Reorders directive metadata fields.
packages/ag-grid-angular-theme/src/module.ng.ts	Registers the new header actions directive in the theme module.
packages/ag-grid-angular-theme/src/header-row-actions.ng.ts	New directive + injection token to render header overlay component.
packages/ag-grid-angular-theme/src/filter-state.ng.ts	Reorders directive metadata fields.
packages/ag-grid-angular-theme/src/external-filter-state.ng.ts	Reorders directive metadata fields.
packages/ag-grid-angular-theme/src/copy-by-ctrl-c.ng.ts	Reorders directive metadata fields.
packages/ag-grid-angular-theme/src/column-state.ng.ts	Reorders directive metadata fields.
packages/ag-grid-angular-theme/index.ts	Exports the new header actions directive publicly.
package.json	Upgrades Angular/Koobiq/tooling dependencies.
dev/ag-grid-angular/src/tests/to-next-row-by-tab.ng.ts	Reorders component metadata fields in dev test page.
dev/ag-grid-angular/src/tests/theme.ng.ts	Reorders component metadata fields in dev test page.
dev/ag-grid-angular/src/tests/status-bar.ng.ts	Reorders component metadata fields in dev test page.
dev/ag-grid-angular/src/tests/select-rows-by-shift-click.ng.ts	Reorders component metadata fields in dev test page.
dev/ag-grid-angular/src/tests/select-rows-by-shift-arrow.ng.ts	Reorders component metadata fields in dev test page.
dev/ag-grid-angular/src/tests/select-rows-by-ctrl-click.ng.ts	Reorders component metadata fields in dev test page.
dev/ag-grid-angular/src/tests/row-actions.ng.ts	Reorders component metadata fields in dev test page.
dev/ag-grid-angular/src/tests/quick-filter-state.ng.ts	Reorders component metadata fields in dev test page.
dev/ag-grid-angular/src/tests/header-actions.playwright-spec.ts	New Playwright coverage for header actions interactions (visibility/order/drag).
dev/ag-grid-angular/src/tests/header-actions.ng.ts	New dev page demonstrating header actions component behavior.
dev/ag-grid-angular/src/tests/filter-state.ng.ts	Reorders component metadata fields in dev test page.
dev/ag-grid-angular/src/tests/external-filter-state.ng.ts	Reorders component metadata fields in dev test page.
dev/ag-grid-angular/src/tests/copy-by-ctrl-c.ng.ts	Reorders component metadata fields in dev test page.
dev/ag-grid-angular/src/tests/column-state.ng.ts	Reorders component metadata fields in dev test page.
dev/ag-grid-angular/src/styles.scss	Adds Koobiq prebuilt theme stylesheet import for the dev app.
dev/ag-grid-angular/src/overview.ng.ts	Updates dev overview UI and adds header actions demo + new UI controls/UX changes.
dev/ag-grid-angular/src/main.ts	Adds route for header-actions page and enables animations provider.
dev/ag-grid-angular/src/app.ng.ts	Reorders component metadata fields.
.eslintrc.js	Disables two Angular template accessibility lint rules.

github-actions · 2026-05-29T08:57:55Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

github-actions · 2026-05-29T09:23:46Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

github-actions · 2026-05-29T13:03:32Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

github-actions · 2026-06-01T14:06:51Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

artembelik · 2026-06-01T14:07:24Z

/approve-snapshots

rmnturov · 2026-06-05T04:48:24Z

Давай скроллбар JS-сный сделаем, чтобы появлялся по ховеру или скроллу и располагался поверх. Это минор

rmnturov · 2026-06-05T04:48:40Z

Анимация перемещения пунктов по клику или с клавы

rmnturov · 2026-06-05T04:49:54Z

Драг-н-дроп надо анимировать. Например, чуть начали тащить, отпускаем и элемент плавно возвращается на прежнее место. Вроде как .cdk-drag-animating

rmnturov · 2026-06-05T04:50:55Z

Позиция слева и справа от фона элемента списка должна быть частью его активной хоны. Это не у окна паддинги.

rmnturov · 2026-06-05T04:51:45Z

В начале и в конце списка нужны отступы

rmnturov · 2026-06-05T04:57:40Z

Давай менять состояние Показано/Не показано по Enter а не по Space (у нас так в мультиселекте)

rmnturov · 2026-06-05T05:01:55Z

Сейчас нет стилизиации у drag preview. TODO сделать спеку

rmnturov · 2026-06-05T05:45:26Z

Справа от кнопки-иконки настроек проглядывается контент из шапки грила

rmnturov · 2026-06-05T05:48:20Z

Тултипы надо показывать для кнопок «Закрепить»

rmnturov · 2026-06-05T05:50:32Z

Длинные названия колонок. Сейчас доп. кнопки показываются поверх. На заднем фне каша.

В Кубике и в макетах это решено так

rmnturov · 2026-06-05T05:57:34Z

Ховер и скругление. Пусть все углы будут скруглены у элементов, которые изначально не имеют фона (невыбранные).

Мы в Кубике тоже прошли через это. Когда у соседних элементов не тфона, в мы что-то начинаем выпрямлять по углам у ховера, то становится хуже.

rmnturov · 2026-06-05T05:58:08Z

У скрытых элементов не нужно делать серый текст

rmnturov · 2026-06-05T05:59:20Z

Драг-плейсхолдер не нужно оформлять пунктирной рамкой. Просто пустота пусть будет

artembelik · 2026-06-05T11:46:52Z

На кнопку-иконку нужна увеличенная область клика.

увеличил

artembelik · 2026-06-05T11:46:58Z

В начале и в конце списка нужны отступы

добавил

artembelik · 2026-06-05T11:47:04Z

Давай менять состояние Показано/Не показано по Enter а не по Space (у нас так в мультиселекте)

обсудили оставили space и добавили enter для выделения/снятия

artembelik · 2026-06-05T11:47:10Z

Позиция слева и справа от фона элемента списка должна быть частью его активной хоны. Это не у окна паддинги.

обновил

artembelik · 2026-06-05T11:47:19Z

Тултипы надо показывать для кнопок «Закрепить»

обсудили, пока оставили браузерный тултип

artembelik · 2026-06-05T11:50:01Z

Справа от кнопки-иконки настроек проглядывается контент из шапки грила

это сделано намеренно, иначе ты не сможешь сделать ресайз колонки

upd. поднял resize выше нашего оверлея

artembelik · 2026-06-05T11:54:12Z

У скрытых элементов не нужно делать серый текст

поправил

artembelik · 2026-06-08T11:28:36Z

Длинные названия колонок. Сейчас доп. кнопки показываются поверх. На заднем фне каша.

поправил

artembelik · 2026-06-08T13:05:31Z

Ховер и скругление. Пусть все углы будут скруглены у элементов, которые изначально не имеют фона (невыбранные).

поправил

artembelik · 2026-06-08T13:22:58Z

Драг-плейсхолдер не нужно оформлять пунктирной рамкой. Просто пустота пусть будет

поправил

github-actions · 2026-06-08T14:08:03Z

🚨 E2E tests failed

Review the report for details.

💡 Comment /approve-snapshots to approve snapshot changes.

artembelik · 2026-06-08T14:14:04Z

/approve-snapshots

github-actions · 2026-06-08T14:14:18Z

🔄 Updating snapshots.

github-actions · 2026-06-08T14:16:32Z

✅ Snapshots updated!

artembelik self-assigned this May 20, 2026

artembelik marked this pull request as ready for review May 21, 2026 09:58

artembelik requested review from NikGurev and lskramarov as code owners May 21, 2026 09:58

Copilot AI review requested due to automatic review settings May 21, 2026 09:58

Copilot started reviewing on behalf of artembelik May 21, 2026 09:58 View session

artembelik requested a review from rmnturov May 21, 2026 09:58

Copilot AI reviewed May 21, 2026

View reviewed changes

artembelik marked this pull request as draft May 22, 2026 08:51

refactor: column menu

c13a9a8

artembelik force-pushed the feat/DS-3660 branch from 541b312 to c13a9a8 Compare May 29, 2026 08:54

artembelik changed the title ~~feat(ag-grid-angular-theme): added KbqAgGridHeaderRowActions directive (#DS-3660)~~ feat(ag-grid-angular-theme): added KbqAgGridColumnMenu directive (#DS-3660) May 29, 2026

refactor: unit

8b63211

refactor: key manager

b9e822e

artembelik added 2 commits June 1, 2026 16:40

refactor: selection

33ce83d

refactor: menu position

e4fb768

artembelik marked this pull request as ready for review June 1, 2026 14:07

NikGurev approved these changes Jun 5, 2026

View reviewed changes

refactor: design review

2e4685f

test: updated e2e snapshots

d2a2c01

Conversation

artembelik commented May 20, 2026

Uh oh!

github-actions Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 20, 2026

🚨 E2E tests failed

Uh oh!

artembelik commented May 20, 2026

Uh oh!

github-actions Bot commented May 20, 2026

Uh oh!

github-actions Bot commented May 20, 2026

Uh oh!

rmnturov commented May 21, 2026

Uh oh!

rmnturov commented May 21, 2026

Uh oh!

artembelik commented May 21, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented May 29, 2026

🚨 E2E tests failed

Uh oh!

github-actions Bot commented May 29, 2026

🚨 E2E tests failed

Uh oh!

github-actions Bot commented May 29, 2026

🚨 E2E tests failed

Uh oh!

github-actions Bot commented Jun 1, 2026

🚨 E2E tests failed

Uh oh!

artembelik commented Jun 1, 2026

Uh oh!

rmnturov commented Jun 5, 2026

Uh oh!

rmnturov commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rmnturov commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rmnturov commented Jun 5, 2026

Uh oh!

rmnturov commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rmnturov commented Jun 5, 2026

Uh oh!

rmnturov commented Jun 5, 2026

Uh oh!

rmnturov commented Jun 5, 2026

Uh oh!

rmnturov commented Jun 5, 2026

Uh oh!

rmnturov commented Jun 5, 2026

Uh oh!

rmnturov commented Jun 5, 2026

Uh oh!

rmnturov commented Jun 5, 2026

Uh oh!

rmnturov commented Jun 5, 2026

Uh oh!

artembelik commented Jun 5, 2026

github-actions Bot commented May 20, 2026 •

edited

Loading

rmnturov commented Jun 5, 2026 •

edited

Loading

rmnturov commented Jun 5, 2026 •

edited

Loading

rmnturov commented Jun 5, 2026 •

edited

Loading

artembelik commented Jun 5, 2026 •

edited

Loading