AG grid предназначен для работы с большими таблицами. Компонент поддерживает сортировку, виртуальную прокрутку, изменение ширины и порядка колонок. Основан на библиотеке ag-grid-angular.
Для единства стиля таблиц в проектах создана тема @koobiq/ag-grid-angular-theme. Она включает готовые стили, соответствующие дизайн-системе. Тема поддерживает основные функции AG grid и упрощает настройку внешнего вида таблицы.
Установите следующие пакеты:
npm install @koobiq/ag-grid-angular-theme@^34 ag-grid-community@^34 ag-grid-angular@^34
Импортируйте тему в основной файл стилей styles.scss:
@use '@koobiq/ag-grid-angular-theme';
Примените тему для <ag-grid-angular> в шаблоне:
import { KbqAgGridThemeModule } from '@koobiq/ag-grid-angular-theme';
import { AgGridModule } from 'ag-grid-angular';
@Component({
imports: [AgGridModule, KbqAgGridThemeModule],
template: `<ag-grid-angular kbqAgGridTheme />`
})
Полная документация по использованию темы хранится в репозитории на GitHub.
Для этого добавьте атрибут kbqAgGridThemeDisableCellFocusStyles к <ag-grid-angular>:
<ag-grid-angular kbqAgGridTheme kbqAgGridThemeDisableCellFocusStyles />
Директива kbqAgGridRowActions добавляет панель действий, появляющуюся при наведении на строку.
Директива kbqAgGridCopyByCtrlC позволяет копировать выделенные строки в буфер обмена при помощи комбинации клавиш Ctrl+C.
Директива kbqAgGridStatusBar добавляет настраиваемую панель под таблицей.
Директивы сохраняют и восстанавливают состояние таблицы после перезагрузки страницы.
По умолчанию используется LocalStorageStore. При необходимости можно переключиться на QueryParamsStore.
| Директива | Что сохраняет |
|---|---|
kbqAgGridColumnState |
Сортировку, порядок, видимость и ширину |
kbqAgGridFilterState |
Модели фильтров колонок |
kbqAgGridQuickFilterState |
Значение быстрого фильтра |
kbqAgGridExternalFilterState |
Значение внешнего фильтра |
Ниже примеры для каждого типа состояния.
Вы можете добавить пользовательские сочетания клавиш, добавив соответствующие директивы к вашему компоненту <ag-grid-angular>.
Клавиша |
Действие | Директива |
|---|---|---|
| Tab | Перейти к следующей строке | kbqAgGridToNextRowByTab |
| Shift + ↓↑ | Выделить несколько строк | kbqAgGridSelectRowsByShiftArrow |
| Ctrl + click | Выделить строку | kbqAgGridSelectRowsByCtrlClick |
| Ctrl + C | Копировать выделенные строки | kbqAgGridCopyByCtrlC |
| Shift + click | Выделить диапазон строк | kbqAgGridSelectRowsByShiftClick |
Больше информации о сочетаниях клавиш можно найти в документации ag-grid-angular.