Production-ready React table component for Inertia.js with TypeScript support. Позволяет быстро создавать таблицы с поддержкой пагинации, сортировки, фильтрации и современных UI-практик (Radix UI, shadcn/ui, Tailwind).

🚀 Быстрый старт

pnpm add @wandry/inertia-table

import { DataTable } from "@wandry/inertia-table";
import type { ColumnDef } from "@tanstack/react-table";

const columns: ColumnDef<{ id: string; name: string; age: number }>[] = [
  { header: "Имя", accessorKey: "name" },
  { header: "Возраст", accessorKey: "age" },
];

const data = [
  { id: "1", name: "Иван Петров", age: 30 },
  { id: "2", name: "Мария Сидорова", age: 25 },
];

<DataTable data={data} columns={columns} />;

📚 Документация

Полная документация доступна в папке docs:

• 📖 Основная документация
• ⚡ Быстрый старт
• 🎯 Основные концепции
• 🧩 Компоненты
• 🔧 Хуки
• 📋 Руководства
• 💡 Примеры

✨ Особенности

• ✅ Простая интеграция с Inertia.js и React
• ✅ TypeScript-first подход
• ✅ Современный UI (Radix UI, shadcn/ui, Tailwind)
• ✅ Пагинация с серверной поддержкой
• ✅ Сортировка и фильтрация (в разработке)
• ✅ Кастомные колонки через базовый ColumnDef
• ✅ Хуки для гибкой работы с состоянием
• ✅ Адаптивный дизайн и доступность

🛠 Установка

# pnpm
pnpm add @wandry/inertia-table

# npm
npm install @wandry/inertia-table

# yarn
yarn add @wandry/inertia-table

Важно: Пакет требует peer-зависимости:

• react >=19
• @inertiajs/react >=2
• @tanstack/react-table >=8
• @radix-ui/react-select, @radix-ui/react-slot
• class-variance-authority, clsx, tailwind-merge, lucide-react

📖 Примеры

Простая таблица

import { DataTable } from "@wandry/inertia-table";
import type { ColumnDef } from "@tanstack/react-table";

interface User {
  id: string;
  name: string;
  email: string;
  role: string;
}

const columns: ColumnDef<User>[] = [
  { header: "Имя", accessorKey: "name" },
  { header: "Email", accessorKey: "email" },
  { header: "Роль", accessorKey: "role" },
];

const users: User[] = [
  { id: "1", name: "Иван Петров", email: "[email protected]", role: "Админ" },
  {
    id: "2",
    name: "Мария Сидорова",
    email: "[email protected]",
    role: "Пользователь",
  },
];

export function UsersTable() {
  return <DataTable data={users} columns={columns} />;
}

Таблица с пагинацией

import { DataTable, DataTableFooter } from "@wandry/inertia-table";

const pagination = {
  current_page: 1,
  from: 1,
  last_page: 5,
  per_page: 10,
  to: 10,
  total: 50,
  links: [
    { url: "?page=1", label: "1", active: true },
    { url: "?page=2", label: "2", active: false },
  ],
  path: "/users",
  date: "2024-01-01",
};

export function PaginatedTable() {
  return (
    <div>
      <DataTable data={users} columns={columns} pagination={pagination} />
      <DataTableFooter pagination={pagination} />
    </div>
  );
}

Кастомная колонка

import { ColumnDef } from "@tanstack/react-table";

const columns: ColumnDef<User>[] = [
  { header: "Имя", accessorKey: "name" },
  {
    header: "Действия",
    id: "actions",
    cell: ({ row }) => (
      <button onClick={() => editUser(row.original.id)}>Редактировать</button>
    ),
  },
];

🔧 API

<DataTable />

| Prop | Type | Описание | | --------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------- | | data | TData[] | Массив данных для строк | | columns | ColumnDef<TData>[] | Определения колонок (см. tanstack docs) | | pagination? | Pagination | Объект пагинации (см. ниже) | | onRowClick? | (row: TData, index: number) => void | Обработчик клика по строке | | classes? | { table?, header?, head?, body?, row?, cell? } | Кастомные классы для частей таблицы | | emptyMessage? | string | Сообщение при отсутствии данных (по умолчанию: "Нет результатов.") |

<DataTableFooter />

| Prop | Type | Описание | | ------------ | ------------- | ------------------------------------- | | pagination | Pagination? | Объект пагинации | | actions | ReactNode? | Кастомные действия (например, кнопки) |

<DataTablePagination />

| Prop | Type | Описание | | ------------ | ------------- | ---------------- | | pagination | Pagination? | Объект пагинации |

Тип Pagination

type PaginationLink = {
  url: string;
  label: string;
  active: boolean;
};

type Pagination = {
  current_page: number;
  from: number;
  last_page: number;
  links: PaginationLink[];
  path: string;
  per_page: number;
  to: number;
  total: number;
  date: string;
};

🧪 Тестирование

Проект использует Vitest и @testing-library/react:

pnpm test

🔗 Ссылки

• 📖 Полная документация
• 🚀 Быстрый старт
• 💡 Примеры
• 🐛 Issues
• 📦 NPM Package

📄 Лицензия

ISC