Сортування таблиці HTML: 5 причин лишити таблицю
Прайс, історія замовлень, список клієнтів: хтось просить сортування й фільтр, і відповідь зазвичай «поставимо грід-бібліотеку». Через пів року таблиця стає чорною скринькою, сторінка везе двісті кілобайт скрипта, а скрінрідер оголошує div там, де була таблиця.
Код: Oat-Table, ліцензія MIT.
Сортування таблиці HTML такої міни не потребує. Oat Table додає сортування, фільтр і вибір рядків навколо елемента <table>, і таблиця лишається таблицею.
Розмітка вже несе сенс
<th scope="col"> каже скрінрідеру, до якого стовпця належить комірка. <time datetime="2026-05-15"> каже парсеру, що означає видима дата. Нативний чекбокс у формі надсилає значення без серіалізатора.
Грід-бібліотека перезбирає все це на JavaScript, і кожне перезбирання щось втрачає: зв’язок заголовка з коміркою, стилі друку, вставку списку в таблицю.
Сортування це атрибут, а не віджет
<th scope="col" data-sort> робить стовпець сортованим як текст. number або date змінюють порівняння, auto визначає тип сам.
Коли видимий текст відформатований, комірка несе значення окремо: $42,128 сортується за 42128. Це все налаштування. Ні описів колонок в окремому файлі, ні функції рендера, ні віртуального DOM.
Скрипт обгортає текст заголовка в кнопку й оновлює aria-sort, тому керування доступне з клавіатури, а стан оголошується. Саме цей крок самописні рішення пропускають.
Фільтр ховає рядки, а не перезавантажує дані
Поле з data-table-filter порівнює текст рядка й ховає те, що не підійшло. Рядок може оголосити власний рядок пошуку, і тоді «Ada» знаходить запис, у якого видимий текст починається з назви компанії.
Лічильник потрапляє в <output aria-live="polite">, тому скрінрідер чує «12 рядків» після кожного натискання, не втрачаючи фокус.
Вибір рядків іде нативними чекбоксами, і «вибрати всі» діє лише на видимі рядки. Відфільтрували регіон, вибрали всі, і дія застосувалася до регіону. У бібліотеці така поведінка зазвичай стає багом.
Що бачить відвідувач на поганому зв’язку
Таблиця є в HTML, тому вона малюється раніше, ніж розбирається скрипт, і працює, якщо скрипт не завантажився. На телефоні з однією смужкою сигналу ця різниця вирішує, чи придатний список.
Прогресивне покращення це ще й стратегія тестування: у сторінки є стан без JavaScript, тому зламаний бандл дає деградовану сторінку, а не порожню.
Як перевірити відкат
Вимкніть JavaScript і завантажте сторінку. Таблиця має намалюватися, надрукуватися й знаходитися пошуком по сторінці. Потім заблокуйте запит скрипта і повторіть: сторінка, яка втрачає вміст через один файл, має єдину точку відмови посеред релізу.
Скільки це коштує
Одна таблиця стилів, один скрипт, жодних залежностей у рантаймі й розмітка, яку ви написали б і так. Для проєкту по 30–50 $ за годину економія не в завантаженні, а в тижні зв’язування, який не потрапляє в рахунок.
Де бібліотека все одно виграє
Правка комірок на місці, віртуалізація на десять тисяч рядків, зведені таблиці, перетягування колонок, вивантаження з оформленням. Це функції продукту, а не оздоблення таблиці, і там бібліотека відпрацьовує свою вагу.
Що перевірити перед вибором
Порахуйте рядки в реальному документі й подивіться, чи є в таблиці правка комірок або зведені підсумки. Якщо немає ні того ні другого, бібліотека додає вагу без функції.
Потім відкрийте сторінку з вимкненим JavaScript. Список, який без скрипта перетворюється на порожнє місце, коштує дорожче, ніж здається: він зникає в частини відвідувачів і в частини релізів.
Якщо таблиця потрібна лише для читання, сортування по кліку часто не потрібне взагалі: достатньо посилання на відсортовану адресу, і така адреса живе в закладках.
Прайс на сорок рядків таким продуктом не є. Нативна таблиця означає, що наступний розробник прочитає сторінку, не відкриваючи документацію.
Поруч: веб-розробка про те, як рахується обсяг фронтенду, і SEO про те, що вміст таблиці дає пошуку. Якщо сторінку читає перекладена аудиторія, цю перевірку закриває читабельність тексту.