Виртуализация из коробки
48 000 строк рендерятся как 12: в DOM только то, что в окне. Включается сама, когда строк больше двухсот.
v2.4 · headless-таблица для React
Сортировка, группировка, виртуализация и типы — без единого стиля. tabl отдаёт данные и поведение, разметку рисуете вы.
npm i tabl$ // песочница
Каждый переключатель — одна опция в коде. Слева то, что вы напишете, справа то, что получите.
sort: { by: "size" } — одна строка, и колонка отсортирована. Стабильно, с любым компаратором.
groupBy: "type" — строки собираются под заголовки с числом. Итоги считаются сами.
view.zebra — чётные строки подкрашены, длинную таблицу читать легче.
density: "compact" — на треть больше строк в том же окне. Всё ещё ваша разметка.
import { useTable } from "tabl"
const table = useTable({
data,
columns: ["name", "type", "size", "updated"],
})
return <Table {...table.props} />| name | type | size, kb | updated |
|---|---|---|---|
| invoice-0412.pdf | 412 | сегодня | |
| logo.svg | image | 18 | вчера |
| report-q3.xlsx | sheet | 1290 | 3 дня |
| cover.webp | image | 240 | неделю |
| contract.pdf | 980 | месяц | |
| budget.xlsx | sheet | 2100 | месяц |
// возможности
Шесть вещей, которые вы обычно пишете сами и потом чините. Здесь они написаны один раз.
48 000 строк рендерятся как 12: в DOM только то, что в окне. Включается сама, когда строк больше двухсот.
По любой колонке, с кастомным компаратором и стабильным порядком.
Ни одного стиля внутри. Светлая, тёмная, фирменная — таблица подхватывает любую.
Колонки знают тип ячеек: редактор подскажет, TypeScript проверит.
Один ключ — и строки собираются в раскрывающиеся группы с итогами.
Меньше, чем иконка. Дерево-шейкинг: берёте только то, что используете.
// сравнение
Размер после gzip у headless-таблиц для React. Данные с bundlephobia на день релиза 2.4.
gzip, минимальный импорт
Измерено `import { useTable }` без стилей. Полный набор фич tabl — 6,8 КБ.
// сообщество
Каждый пулреквест ревьюят двое мейнтейнеров, каждый релиз проходит 1 900 тестов. Присоединяйтесь — good first issue всегда есть.
// история версий
Семантические версии, ломающие изменения помечены. Полный список — в CHANGELOG.md.
Весь changelog →Звёзды на GitHub — единственная метрика, по которой проект попадает в подборки и находит людей. Если tabl сэкономил вам вечер — верните минуту.