Модуль 5 · урок 3 з 10
AG Grid — коли він
У таблиці ліда AG Grid згаданий як альтернатива Material. На робочих проєктах він трапляється часто, тож варто розуміти, що він дає, чого коштує і як відповісти, якщо спитають про вибір між ними.
Що це таке
AG Grid — це готовий грид промислового рівня. Не конструктор, як Material Table, а майже застосунок: він сам малює рядки, віртуалізує скрол, тримає стан колонок і має власний API на сотні методів.
import { AgGridAngular } from 'ag-grid-angular';
@Component({
imports: [AgGridAngular],
template: `
<ag-grid-angular
class="ag-theme-quartz"
style="height: 100%"
[rowData]="rows()"
[columnDefs]="columns"
[defaultColDef]="defaults"
(gridReady)="onReady($event)" />
`,
})
export class TaskGrid {
rows = input.required<readonly Task[]>();
protected readonly columns: ColDef<Task>[] = [
{ field: 'code', headerName: 'Код', sortable: true, filter: true, width: 140 },
{ field: 'title', headerName: 'Назва', flex: 1 },
{ field: 'status', headerName: 'Статус', cellRenderer: StatusBadge },
{ field: 'dueDate', headerName: 'Термін', valueFormatter: p => formatDate(p.value) },
];
protected readonly defaults: ColDef = { resizable: true, sortable: true };
}Одна різниця видна одразу: колонки описуються масивом обʼєктів, а не розміткою. Це зручно, коли колонки приходять із конфігу або від користувача, і незручно, коли потрібна складна верстка комірки — для неї доводиться писати окремий компонент-рендерер.
Що дає з коробки
| Можливість | Material Table | AG Grid Community |
|---|---|---|
| Сортування однією колонкою | Так | Так |
| Багатоколонкове сортування | Пишеш сам | З коробки, Shift+клік |
| Віртуальний скрол | Через CDK, окремо | З коробки |
| Зміна ширини колонок мишею | Пишеш сам | З коробки |
| Перетягування колонок | Через CDK, окремо | З коробки |
| Фільтри в шапці | Пишеш сам | З коробки |
| Групування рядків, зведення | Ні | Тільки Enterprise |
| Експорт в Excel | Ні | Тільки Enterprise |
| Розмір бандла | Невеликий | Помітно більший |
| Ліцензія | MIT | Community безкоштовно, Enterprise платно |
Найцікавіші можливості AG Grid — групування, зведені таблиці, серверна модель рядків, експорт — доступні лише в Enterprise-версії, і вона платна на розробника. На проєкті це рішення ухвалює не розробник, але знати межу варто: помилково пообіцяти замовнику групування «бо ми ж уже використовуємо AG Grid» — неприємна ситуація.
Як обрати
- Колонок небагато й вони відомі наперед.
- Потрібна складна верстка комірок у стилі продукту.
- Дизайн-система вже на Material.
- Важливий розмір бандла.
- Це навчальний проєкт — видно, що відбувається всередині.
- Десятки тисяч рядків і без віртуалізації не обійтись.
- Користувачі мають самі керувати колонками.
- Потрібні групування, зведення, експорт.
- Таблиця — це і є продукт, а не одна з його сторінок.
Що відповісти на дзвінку
«Для навчального проєкту я взяв Material Table: колонок небагато, потрібна своя верстка комірок, і мені було важливо самому реалізувати багатоколонкове сортування й пагінацію — це і був сенс завдання. AG Grid я б брав, якби потрібні були віртуалізація десятків тисяч рядків, керування колонками з боку користувача чи групування — але тоді варто одразу зважати, що частина цього тільки в платній версії.»
Така відповідь показує головне: ти не «вибрав те, що знав», а розумієш критерії вибору. Саме це й перевіряють, коли ставлять питання про бібліотеки.
Роби практику на Material Table. AG Grid тут дав би готове рішення для більшості пунктів таблиці — і саме тому не показав би нічого про твої вміння. Але цей урок пройди: питання «а чому не AG Grid» дуже ймовірне.