Table / DataTable
Низькорівневий примітив <Table> для розкладок «вручну», і DataTable поверх нього — універсальний реєстр під стиль 1С. Все керування таблицею (пагінація, пошук по колонці, глобальний пошук, колонки, щільність) живе у <thead> / <tfoot> як ще одна <tr> — без зовнішніх панелей.
import { Table, DataTable } from "@residence/glass-ui"| Платник | Квартира | Сума, ₴ | Статус |
|---|---|---|---|
| Іванов І.І. | 12А | 1 245,00 | Сплачено |
| Петренко О.С. | 44Б | 980,50 | Очікування |
| Боровська М.В. | 07 | 2 350,00 | Прострочено |
| Всього | 4 575,50 | ||
| ID | Платник | Сума |
|---|---|---|
| 1 | Іванов І.І. | 1245 |
| 2 | Петренко О.С. | 980.5 |
| 3 | Боровська М.В. | 2350 |
DataTable · пагінація зверху + знизу, підсумок
paginationPlacement="both" малює керування і над таблицею, і під нею — обидва живуть у thead/tfoot як <tr>, у тому самому градієнті, що шапка. pageSizeOptions додає селектор «Рядків:…». showFooter + column.footer дають підсумкову строку (Σ по сумі справа з акцентною лінією зверху, count рядків зліва).
1–10 з 73 1 / 8 | ||||
|---|---|---|---|---|
| № | Квартира | Статус | ||
| 36 | Гончар Т.Ю. | 36В | 2 795,00 | Прострочено |
| 71 | Іванов В.Д. | 71Б | 2 790,00 | Очікування |
| 18 | Мельник О.С. | 18А | 2 730,50 | Прострочено |
| 53 | Боровська А.П. | 53 | 2 725,50 | Очікування |
| 35 | Шевченко М.В. | 35Б | 2 661,00 | Очікування |
| 70 | Кравчук К.Р. | 70А | 2 656,00 | Сплачено |
| 17 | Литвин І.І. | 17 | 2 593,00 | Очікування |
| 52 | Петренко Т.Ю. | 52В | 2 588,00 | Сплачено |
| 34 | Коваль О.С. | 34А | 2 523,50 | Сплачено |
| 69 | Бондар А.П. | 69 | 2 518,50 | Прострочено |
| 10 рядків | Всього | 26 581,00 | ||
1–10 з 73 1 / 8 | ||||
DataTable · фільтри по колонках + глобальний пошук
showColumnFilters додає ще одну <tr> у thead, прямо під заголовками: text для імені, select для будинку/статусу, number-range для суми, date-range для дати. showGlobalSearch додає omnibox у верхній панелі шапки. Прапорець «Очистити фільтри · N» з'являється сам, коли є активні фільтри.
1–10 з 73 1 / 8 | ||||
|---|---|---|---|---|
| Будинок | Статус | |||
| 2026-05-01 | Іванов І.І. | Грушевського, 12 | 400,00 | Сплачено |
| 2026-05-02 | Петренко О.С. | Лесі Українки, 7 | 537,50 | Очікування |
| 2026-05-03 | Боровська М.В. | Шевченка, 3 | 675,00 | Прострочено |
| 2026-05-04 | Коваль Т.Ю. | Грушевського, 12 | 812,50 | Сплачено |
| 2026-05-05 | Шевченко А.П. | Лесі Українки, 7 | 950,00 | Очікування |
| 2026-05-06 | Гончар К.Р. | Шевченка, 3 | 1 087,50 | Прострочено |
| 2026-05-07 | Литвин В.Д. | Грушевського, 12 | 1 225,00 | Сплачено |
| 2026-05-08 | Мельник Н.М. | Лесі Українки, 7 | 1 359,00 | Очікування |
| 2026-05-09 | Бондар І.І. | Шевченка, 3 | 1 496,50 | Прострочено |
| 2026-05-10 | Кравчук О.С. | Грушевського, 12 | 1 634,00 | Сплачено |
| 10 177,00 | ||||
1–10 з 73 1 / 8 | ||||
DataTable · еластичні + статичні колонки (column.grow)
За замовчуванням усі колонки СТАТИЧНІ — тримають свій width. Признач column.grow > 0, і колонка стає ЕЛАСТИЧНОЮ: коли таблиця ширша за суму ширин, надлишок ділиться між grow-колонками пропорційно до ваги (тут «Платник» grow:2 і «Будинок» grow:1 → 2:1). До цього порогу — всі статичні (а якщо вужче — горизонтальний скрол). Колонки без grow («Дата», «Сума», «Статус», «Кв.») лишаються рівно своєї px-ширини навіть коли місця багато. Розтягни/звузь вікно — побачиш як ростуть лише дві перші, а решта стоять.
| № | Дата | Будинок | Кв. | Статус | ||
|---|---|---|---|---|---|---|
| 1 | 2026-05-01 | Іванов І.І. | Грушевського, 12 | 1 | 400,00 | Сплачено |
| 2 | 2026-05-02 | Петренко О.С. | Лесі Українки, 7 | 2А | 537,50 | Очікування |
| 3 | 2026-05-03 | Боровська М.В. | Шевченка, 3 | 3Б | 675,00 | Прострочено |
| 4 | 2026-05-04 | Коваль Т.Ю. | Грушевського, 12 | 4В | 812,50 | Сплачено |
| 5 | 2026-05-05 | Шевченко А.П. | Лесі Українки, 7 | 5 | 950,00 | Очікування |
| 6 | 2026-05-06 | Гончар К.Р. | Шевченка, 3 | 6А | 1 087,50 | Прострочено |
| 7 | 2026-05-07 | Литвин В.Д. | Грушевського, 12 | 7Б | 1 225,00 | Сплачено |
| 8 | 2026-05-08 | Мельник Н.М. | Лесі Українки, 7 | 8В | 1 359,00 | Очікування |
1–8 з 73 1 / 10 | ||||||
DataTable · групування + розкривні рядки
groupBy перетворює таблицю на «дерево» з заголовками-групами (1С: «Обороти за рахунками»). renderExpandedRow додає колонку-розкривач: клік ▸ показує детальну панель під рядком (журнал проведень, історія платежів, attachments).
| Дата | Платник | Квартира | Сума, ₴ | |
|---|---|---|---|---|
Грушевського, 12 · сума 12 910,00 ₴ · 10 | ||||
| 2026-05-01 | Іванов І.І. | 1 | 400,00 | |
| 2026-05-04 | Коваль Т.Ю. | 4В | 812,50 | |
| 2026-05-07 | Литвин В.Д. | 7Б | 1 225,00 | |
| 2026-05-10 | Кравчук О.С. | 10А | 1 634,00 | |
| 2026-05-13 | Боровська А.П. | 13 | 2 046,50 | |
| 2026-05-16 | Гончар Н.М. | 16В | 2 455,50 | |
| 2026-05-19 | Бондар М.В. | 19Б | 468,00 | |
| 2026-05-22 | Петренко К.Р. | 22А | 877,00 | |
| 2026-05-25 | Шевченко І.І. | 25 | 1 289,50 | |
| 2026-05-28 | Мельник Т.Ю. | 28В | 1 702,00 | |
Лесі Українки, 7 · сума 14 278,00 ₴ · 10 | ||||
| 2026-05-02 | Петренко О.С. | 2А | 537,50 | |
| 2026-05-05 | Шевченко А.П. | 5 | 950,00 | |
| 2026-05-08 | Мельник Н.М. | 8В | 1 359,00 | |
| 2026-05-11 | Іванов М.В. | 11Б | 1 771,50 | |
| 2026-05-14 | Коваль К.Р. | 14А | 2 184,00 | |
| 2026-05-17 | Литвин І.І. | 17 | 2 593,00 | |
| 2026-05-20 | Кравчук Т.Ю. | 20В | 605,50 | |
| 2026-05-23 | Боровська В.Д. | 23Б | 1 014,50 | |
| 2026-05-26 | Гончар О.С. | 26А | 1 427,00 | |
| 2026-05-01 | Бондар А.П. | 29 | 1 836,00 | |
Шевченка, 3 · сума 15 649,50 ₴ · 10 | ||||
| 2026-05-03 | Боровська М.В. | 3Б | 675,00 | |
| 2026-05-06 | Гончар К.Р. | 6А | 1 087,50 | |
| 2026-05-09 | Бондар І.І. | 9 | 1 496,50 | |
| 2026-05-12 | Петренко Т.Ю. | 12В | 1 909,00 | |
| 2026-05-15 | Шевченко В.Д. | 15Б | 2 318,00 | |
| 2026-05-18 | Мельник О.С. | 18А | 2 730,50 | |
| 2026-05-21 | Іванов А.П. | 21 | 743,00 | |
| 2026-05-24 | Коваль Н.М. | 24В | 1 152,00 | |
| 2026-05-27 | Литвин М.В. | 27Б | 1 564,50 | |
| 2026-05-02 | Кравчук К.Р. | 30А | 1 973,50 | |
DataTable · повний кейс (1С-style register)
Все одразу: selection (виділення), sticky-перша-колонка (№), показ/приховання колонок (Колонки ▾), щільність (S/M/L), пагінація зверху+знизу з рядками-на-сторінку, фільтри по колонках, глобальний пошук, drag-resize колонок (потягни праву межу заголовка), drag-reorder (перетягни заголовок), правий-клік контекстне меню, dropdown-меню в рядку, footer-агрегати, тулбар-слот зі своїми кнопками («Створити», «Експорт»).
1–10 з 73 1 / 8 | ||||||||
|---|---|---|---|---|---|---|---|---|
| № | Будинок | Квартира | Статус | |||||
| 28 | 2026-05-28 | Мельник Т.Ю. | Грушевського, 12 | 28В | 1 702,00 | Сплачено | ||
| 56 | 2026-05-28 | Гончар Н.М. | Лесі Українки, 7 | 56В | 738,00 | Очікування | ||
| 27 | 2026-05-27 | Литвин М.В. | Шевченка, 3 | 27Б | 1 564,50 | Прострочено | ||
| 55 | 2026-05-27 | Шевченко В.Д. | Грушевського, 12 | 55Б | 600,50 | Сплачено | ||
| 26 | 2026-05-26 | Гончар О.С. | Лесі Українки, 7 | 26А | 1 427,00 | Очікування | ||
| 54 | 2026-05-26 | Коваль К.Р. | Шевченка, 3 | 54А | 463,00 | Прострочено | ||
| 25 | 2026-05-25 | Шевченко І.І. | Грушевського, 12 | 25 | 1 289,50 | Сплачено | ||
| 53 | 2026-05-25 | Боровська А.П. | Лесі Українки, 7 | 53 | 2 725,50 | Очікування | ||
| 24 | 2026-05-24 | Коваль Н.М. | Шевченка, 3 | 24В | 1 152,00 | Прострочено | ||
| 52 | 2026-05-24 | Петренко Т.Ю. | Грушевського, 12 | 52В | 2 588,00 | Сплачено | ||
| 14 250,00 | ||||||||
1–10 з 73 1 / 8 | ||||||||