Table

import { useState } from 'react';
import { Pagination, Table } from '@components-kit/react';
import type { ColumnDef, RowSelectionState, SortingState } from '@components-kit/react';

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

const columns: ColumnDef<User>[] = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
];

const users: User[] = [
  { id: '1', name: 'Jane Doe', email: 'jane@example.com' },
  { id: '2', name: 'John Smith', email: 'john@example.com' },
];

// Basic usage
<Table data={users} columns={columns} />

// With row selection
function SelectableUsersTable() {
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

  return (
    <Table
      data={users}
      columns={columns}
      enableRowSelection
      rowSelection={rowSelection}
      onRowSelectionChange={setRowSelection}
    />
  );
}

// With sorting + pagination UI
function SortablePaginatedUsersTable() {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [pageIndex, setPageIndex] = useState(0);
  const pageSize = 10;

  return (
    <>
      <Table
        data={users}
        columns={columns}
        enableSorting
        sorting={sorting}
        onSortingChange={setSorting}
        enablePagination
        pageIndex={pageIndex}
        pageSize={pageSize}
        onPageChange={setPageIndex}
      />
      <Pagination
        page={pageIndex + 1}
        totalPages={Math.ceil(users.length / pageSize)}
        onPageChange={(page) => setPageIndex(page - 1)}
      />
    </>
  );
}

// Custom cell rendering
<Table
  data={users}
  columns={[
    { accessorKey: 'name', header: 'Name' },
    {
      accessorKey: 'status',
      header: 'Status',
      cell: ({ getValue }) => (
        <span data-status={getValue() as string}>{getValue() as string}</span>
      ),
    },
  ]}
/>

// With column footers
<Table
  data={users}
  columns={[
    { accessorKey: 'name', header: 'Name', footer: 'Total' },
    { accessorKey: 'email', header: 'Email' },
    { accessorKey: 'amount', header: 'Amount', footer: ({ table }) => {
      const total = table.getRowModel().rows.reduce(
        (sum, row) => sum + row.getValue<number>('amount'), 0
      );
      return `$${total}`;
    }},
  ]}
/>

// With row expansion
<Table
  data={users}
  columns={columns}
  enableExpanding
  renderSubComponent={({ row }) => (
    <div>Details for {row.original.name}</div>
  )}
/>

import type {
  Cell,
  ColumnDef,
  ColumnFiltersState,
  ExpandedState,
  Row,
  RowSelectionState,
  SortingState,
  TableInstance,
} from "@components-kit/react";