DataTable

Таблица на базе @tanstack/react-table с сортировкой колонок, глобальным поиском, внешними фильтрами, пагинацией и произвольным рендером ячеек.

Basic + Sorting

Минимальный набор: columns + data. Клик по заголовку — сортировка asc → desc → off.

1Пользователь 1user1@example.comadminactive
2Пользователь 2user2@example.comeditorinactive
3Пользователь 3user3@example.comviewerpending
4Пользователь 4user4@example.comadminactive
5Пользователь 5user5@example.comeditorinactive
6Пользователь 6user6@example.comviewerpending
7Пользователь 7user7@example.comadminactive
8Пользователь 8user8@example.comeditorinactive
9Пользователь 9user9@example.comviewerpending
10Пользователь 10user10@example.comadminactive
1–10 из 42

Sorting

enableSorting: false на колонке «Действия» — она не сортируется. «Регистрации» — числовая сортировка, по дефолту desc-first.

Действия
1Пользователь 1admin37—
2Пользователь 2editor74—
3Пользователь 3viewer111—
4Пользователь 4admin148—
5Пользователь 5editor185—
6Пользователь 6viewer222—
7Пользователь 7admin259—
8Пользователь 8editor296—
1–8 из 42

Search

Передан searchColumn — над таблицей появляется поле глобального поиска.

1Пользователь 1user1@example.comadminactive
2Пользователь 2user2@example.comeditorinactive
3Пользователь 3user3@example.comviewerpending
4Пользователь 4user4@example.comadminactive
5Пользователь 5user5@example.comeditorinactive
6Пользователь 6user6@example.comviewerpending
7Пользователь 7user7@example.comadminactive
8Пользователь 8user8@example.comeditorinactive
9Пользователь 9user9@example.comviewerpending
10Пользователь 10user10@example.comadminactive
1–10 из 42

External Filtering

Фильтры живут снаружи (useState + useMemo). В DataTable приходит уже отфильтрованный data — таблица сама пересчитывает пагинацию.

найдено: 42
1Пользователь 1user1@example.comАдминистраторАктивен
2Пользователь 2user2@example.comРедакторНеактивен
3Пользователь 3user3@example.comЗрительОжидает
4Пользователь 4user4@example.comАдминистраторАктивен
5Пользователь 5user5@example.comРедакторНеактивен
1–5 из 42

Row Actions

Display-колонка без accessor: рендерит кнопки Редактировать / Удалить. Удаление меняет локальный state — таблица перерисовывается.

Действия
1Пользователь 1user1@example.comАктивен
2Пользователь 2user2@example.comНеактивен
3Пользователь 3user3@example.comОжидает
4Пользователь 4user4@example.comАктивен
5Пользователь 5user5@example.comНеактивен
6Пользователь 6user6@example.comОжидает
1–6 из 20
Последнее действие: — · Строк: 20

Resizable Columns

Тяни за правый край заголовка. Двойной клик по handle — сброс к size. min/maxSize задаются в columnDef.

1Пользователь 1user1@example.comadminactive
2Пользователь 2user2@example.comeditorinactive
3Пользователь 3user3@example.comviewerpending
4Пользователь 4user4@example.comadminactive
5Пользователь 5user5@example.comeditorinactive
6Пользователь 6user6@example.comviewerpending
1–6 из 42

Custom Cell

Произвольный JSX в cell: ссылки, бейджи, форматирование чисел.

#1Пользователь 1user1@example.comАдминистраторАктивен37
#2Пользователь 2user2@example.comРедакторНеактивен74
#3Пользователь 3user3@example.comЗрительОжидает111
#4Пользователь 4user4@example.comАдминистраторАктивен148
#5Пользователь 5user5@example.comРедакторНеактивен185
#6Пользователь 6user6@example.comЗрительОжидает222
#7Пользователь 7user7@example.comАдминистраторАктивен259
#8Пользователь 8user8@example.comРедакторНеактивен296
1–8 из 42

Page Size

pageSize={5} — короткие страницы для виджетов и компактных таблиц.

1Пользователь 1user1@example.comadminactive
2Пользователь 2user2@example.comeditorinactive
3Пользователь 3user3@example.comviewerpending
4Пользователь 4user4@example.comadminactive
5Пользователь 5user5@example.comeditorinactive
1–5 из 42

Empty

Пустой массив data — таблица показывает строку «Нет данных.»

Нет данных.
0 записей