Table

Приклад

Налаштування колонок

Задайте tableId — і вмикається все одразу: ресайз межею заголовка, меню видимості й порядку, перемикач щільності та збереження в localStorage.

Сама панель — спільний компонент із UiTreeTable (app/components/ui/table/ColumnSettings.vue), як і арифметика ширин, порівняння значень при сортуванні й зведення збереженої розкладки (app/utils/tableColumns.ts). Це не економія рядків, а гарантія: дві копії тієї самої панелі розходяться мовчки й розходилися — у дереві кнопки порядку мали зону дотику 45×45 і SVG-стрілки, тут лишались текстові «↑↓» без зони.

Закріплена перша колонка

stickyColumn тримає першу видиму колонку на місці при горизонтальній прокрутці — той самий контракт, що stickyTreeColumn у UiTreeTable, і той самий вигляд: край колонки отримує тінь, щойно під нею починає їхати вміст. Має сенс лише тоді, коли перша колонка ідентифікує рядок — назва, SKU, номер; закріплена колонка зі статусом лишає читача без орієнтира.

З selectable колонка прапорців теж закріплюється — інакше перша ж прокрутка ховала б її під колонкою даних.

Стани

Вибір рядків

selectable додає колонку прапорців, v-model:selected тримає ключі обраних рядків. Ключ береться з того самого поля, що вже дає рядкам :key — окремого props для цього немає й не треба.

Три рішення, які тут неочевидні.

«Обрати всі» об'єднує, а не замінює. Таблиця не пагінує сама: items — це вже сторінка, а UiPagination живе окремо. Якби прапорець у шапці замінював набір, користувач, що вибрав рядки, перейшов на другу сторінку й натиснув «обрати всі», мовчки втратив би вибір із першої. Тому шапка додає ключі сторінки до набору й забирає їх назад — ключі інших сторінок лишаються цілі.

Shift+клік ставить діапазону стан якоря, як у Finder і Gmail, а не перемикає кожен рядок окремо: почергове перемикання дає результат, який неможливо передбачити оком. Якір — останнє перемикання без Shift. Діапазон рахується в порядку показу, тож після сортування Shift виділяє те, що видно між двома рядками, а не те, що лежало між ними у вихідних даних.

Виділення не зберігається. Ширини й видимість колонок ідуть у localStorage, виділення — ні: набір обраних записів живе рівно стільки, скільки триває дія над ними.

Сортування виділенню не шкодить: воно ключується по keyRow, а не по індексу, тож перевпорядкування рядків його не плутає.

API

Коли використовувати

Для однорідних даних, які порівнюють між собою по колонках.

mobileCards вмикайте завжди, коли колонок більше трьох: горизонтальна прокрутка таблиці на телефоні — найгірший спосіб читання даних.

Коли НЕ використовувати

Не робіть таблицю з двох колонок «назва / значення» — це список описів (<dl>), і на мобільному він виглядатиме краще без жодних зусиль.

Ширини живуть у colgroup

width — це число в пікселях, а не CSS-рядок. Ширини задаються один раз у <colgroup> при table-layout: fixed, а не на кожній комірці: за фіксованої розкладки враховується лише перший рядок, тож інлайновий width на кожному <td> був би мертвим стилем, помноженим на кількість рядків.

Рівно одна колонка може мати flex: true — вона забирає весь залишок. Сума фіксованих ширин має вміщатись у контейнер.

Число, а не рядок, ще й тому, що ширина бере участь в арифметиці: ресайз, збереження, підрахунок переповнення. З "9rem" нічого з цього не порахуєш.

Висота: maxHeight чи fill

maxHeight — стеля в абсолютних одиницях: контейнер обіймає вміст, поки той нижчий за неї. Працює будь-де, але нічого не знає про сторінку, на якій стоїть. Типове max-height: 70vh під шапкою, фільтрами й пагінацією дає два дефекти одразу: знизу лишається смуга порожнечі, якої ніщо не заповнює, а останній рядок ріжеться навпіл там, де до низу екрана ще третина висоти.

fill віддає рішення про висоту батьківському контейнеру. Контейнер прокрутки обіймає вміст, поки той вміщається, і стискається до залишку висоти, щойно перестав: пагінація під таблицею лишається на екрані, а таблиця на три рядки не розтягується порожнім тлом на весь екран.

Ціна — ланцюжок. Висота має бути ВИЗНАЧЕНОЮ згори (h-dvh на каркасі, не min-h-dvh), а кожна ланка між каркасом і таблицею — flex-колонкою з min-h-0. Пропущений min-h-0 не дає ані помилки, ані попередження: елемент просто не стискається, і таблиця тихо рендериться на всю висоту.

<div class="flex h-dvh flex-col">
  <main class="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-3">
    <section class="flex min-h-96 flex-1 flex-col gap-3">
      <PageHeader />
      <UiTable fill sticky-header :headers="headers" :items="items" />
      <UiPagination v-model:page="page" :total-pages="pages" />
    </section>
  </main>
</div>

min-h-96 на секції — не окраса. Таблиця з fill єдина в колонці має min-h-0, тож вона забирає ВЕСЬ дефіцит висоти: у вікні 1280×320 без підлоги від неї лишається сама шапка. Підлога стоїть на секції, а не на таблиці, саме тому, що на таблиці вона тримала б порожнечу під короткими списками; на секції зайва висота йде під пагінацію, де її не видно, а переповнення бере на себе overflow-y-auto на <main>.

Саме тому fill безпечний і на сторінці, що прокручується: визначеної висоти згори там немає, стискати немає до чого, і властивість просто знімає кліть maxHeight — таблиця показує всі рядки, а гортає сторінка. Для таблиці, вбудованої в довгу сторінку, це НЕ завжди те, що треба: якщо колонки не вміщаються по ширині, горизонтальний скролбар поїде в самий низ високого блока. Там лишайте maxHeight.

Одне API, дві верстки

Нижче md таблиця ховається, а картки рендеряться з тих самих слотів cell-*. Розмітку комірки не треба писати двічі:

<UiTable :headers="headers" :items="items" mobile-cards>
  <template #cell-status="{ item }">
    <UiChip :tone="item.status === 'published' ? 'success' : 'neutral'">
      {{ item.status }}
    </UiChip>
  </template>
</UiTable>

Сортування

Порівняння враховує числа й локаль. Наївні < і > ставлять «Розділ 10» перед «Розділ 9», а кирилицю сортують за кодами символів — перевірте це на прикладі вище.

Порожні значення завжди в кінці, незалежно від напрямку: рядок без даних не має витісняти заповнені з початку списку.

Третій клік по заголовку скидає сортування. Без цього повернутися до вихідного порядку можна було б лише перезавантаженням сторінки.

Для серверного сортування задайте serverSort: компонент повідомить про намір через update:sort, але порядок рядків не чіпатиме.

Стани

Скелетон показується лише при першому завантаженні. Якщо дані вже є, замість нього накладається напівпрозорий оверлей — інакше таблиця блимала б на кожній зміні фільтра.

Ширина заглушок детермінована, а не випадкова: Math.random() міняв би її на кожному рендері, і скелетон миготів би.

Доступність

Заголовки колонок мають scope="col" і aria-sort. Сортування вмикається кнопкою всередині <th>, а не кліком по самому <th> — інакше воно недоступне з клавіатури.

stickyHeader вимагає контейнера з власною прокруткою — тобто maxHeight або fill. Без жодного з них закріплювати шапку немає відносно чого, і властивість мовчки нічого не робить.

Дві осі версій збереженого

Найтонше місце всієї таблиці. Збережена розкладка має два незалежні номери версій, бо в ній змішані дві різні речі.

settingsVersion — ваш. Підніміть його, коли змінили дефолтні ширини чи видимість у headers: збережене більше не описує ту саму таблицю, і тримати його означало б показувати користувачам чужу розкладку.

SETTINGS_SCHEMA — компонента. Коли міняється формат payload, порядок і видимість (це вибір користувача) мігрують уперед, а ширини й щільність (це дефолти компонента) скидаються.

Нова колонка вставляється після найближчого лівого сусіда, а не в кінець. Без цього колонка, додана через пів року, стрибала б у хвіст у кожного, хто колись міняв порядок.

tableId варто передавати динамічно там, де таблиця показує різні сутності (group-${id}) — компонент стежить і за ним, інакше наступна сутність відкрилася б із розкладкою попередньої.

Афорданси прокрутки

Переповнення рахується як ширина таблиці − ширина видимої області, а не через scrollWidth. Так градієнт з'являється і після ресайзу колонки — від нього розмір контейнера не міняється, тож самого ResizeObserver було б замало.

ResizeObserver при цьому теж потрібен: згортання сайдбара міняє ширину контейнера без жодної події resize вікна.

Чого тут немає

Віртуального скролу. Для списків у тисячі рядків беріть пагінацію або серверну фільтрацію. Якщо дані ще й ієрархічні — TreeTable: він віртуалізує рядки, але вимагає фіксованої висоти рядка, якої тут немає.