Таблица данных

DataTable оборачивает безголовый движок строковых моделей @tanstack/react-table вокруг собственных примитивов Table. Используйте DataTableColumnHeader в header колонки для сортируемого заголовка, читайте и вызывайте API выбора строки или таблицы в header/cell колонки, чтобы добавить колонку с чекбоксами, включите pagination для встроенных выбора количества строк на странице, текста диапазона и переключения страниц, а через rowHeaderColumnId сделайте одну колонку семантическим заголовком строки (<th scope="row">). Сортировка и выбор строк поддерживают управляемый и внутренний режимы, а stickyHeader закрепляет заголовок над вертикально прокручиваемым tableWrapperClassName.

Пример

Интерактивный пример

Участники команды и их роли

Дарья Коул	Владелец
Маркус Уэбб	Администратор

Использование

Импортируйте компонент из публичной точки входа пакета.

"use client";

import { DataTable, type DataTableColumnDef, DataTableColumnHeader } from "denjs-ui";

interface Member {
  name: string;
  role: string;
}

const columns: DataTableColumnDef<Member>[] = [
  {
    accessorKey: "name",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
  },
  {
    accessorKey: "role",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Role" />,
  },
];

const data: Member[] = [
  { name: "Daria Cole", role: "Owner" },
  { name: "Marcus Webb", role: "Admin" },
];

export function Example() {
  return <DataTable columns={columns} data={data} caption="Team members" />;
}