Table

import { useTableSelection } from "@/components/ui/use-table-selection";
import { useTableKeyboard } from "@/components/ui/use-table-keyboard";

const sel = useTableSelection<string>({ mode: "multi" });
const kb = useTableKeyboard({
  rowCount: rows.length,
  onSelect: (i) => sel.toggle(rows[i].id),
});

<TableBody {...kb.containerProps}>
  {rows.map((row, i) => (
    <TableRow
      key={row.id}
      selectable
      selected={sel.isSelected(row.id)}
      onSelect={() => sel.toggle(row.id, { rangeIds: ids })}
      {...kb.getRowProps(i)}
    >
      ...
    </TableRow>
  ))}
</TableBody>

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@/components/ui/table";

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV001</TableCell>
      <TableCell>$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

<TableContainer stickyHeader className="max-h-[320px]">
  <TableHeader>...</TableHeader>
  <TableBody>{/* 30개 행 */}</TableBody>
</TableContainer>

import { useTableSort } from "@/components/ui/use-table-sort";

const sort = useTableSort<"invoice" | "amount">();
const sorted = sort.sortData(rows, (a, b, key) => {
  if (key === "amount") return parseFloat(a.amount) - parseFloat(b.amount);
  return String(a[key]).localeCompare(String(b[key]));
});

<TableSortableHead
  sortDirection={sort.getSortDirection("invoice")}
  onSort={() => sort.setSort("invoice")}
>
  Invoice
</TableSortableHead>

<TableContainer popinMode>
  <TableHeader>
    <TableRow>
      <TableHead popinLabel="Invoice">Invoice</TableHead>
      <TableHead popinLabel="Amount">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell popinLabel="Invoice">INV001</TableCell>
      <TableCell popinLabel="Amount">$250.00</TableCell>
    </TableRow>
  </TableBody>
</TableContainer>

// 실제 앱: viewport 기준 (sm:/md:/lg:)
// 문서 프리뷰: 컨테이너 기준 (@container + @max-md:/@max-lg:)
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead className="max-md:hidden">Title</TableHead>
      <TableHead className="max-lg:hidden">Email</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {users.map((u) => (
      <TableRow key={u.email}>
        <TableCell>
          <div className="font-medium">{u.name}</div>
          {/* 숨긴 컬럼을 Name 아래로 합쳐 노출 */}
          <div className="text-muted-foreground md:hidden">{u.title}</div>
          <div className="text-muted-foreground lg:hidden">{u.email}</div>
        </TableCell>
        <TableCell className="max-md:hidden">{u.title}</TableCell>
        <TableCell className="max-lg:hidden">{u.email}</TableCell>
        <TableCell>{u.role}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

import { useTableDnd } from "@/components/ui/use-table-dnd";

const dnd = useTableDnd<string>({
  items: rows.map((r) => r.id),
  onReorder: (newOrder) => {
    const map = new Map(rows.map((r) => [r.id, r]));
    setRows(newOrder.map((id) => map.get(id)!));
  },
});

<TableRow {...dnd.getRowProps(row.id)}>
  <TableCell className="cursor-grab">⋮⋮</TableCell>
  ...
</TableRow>

import { EditableCell } from "@/components/ui/editable-cell";

const [products, setProducts] = useState(initialData);

const update = (id, key, value) => {
  setProducts(prev => prev.map(p =>
    p.id === id ? { ...p, [key]: value } : p,
  ));
};

<TableRow>
  <TableCell>
    <EditableCell
      type="text"
      value={p.name}
      onChange={v => update(p.id, "name", v)}
    />
  </TableCell>
  <TableCell>
    <EditableCell
      type="select"
      value={p.category}
      onChange={v => update(p.id, "category", v)}
      options={CATEGORY_OPTIONS}
    />
  </TableCell>
  <TableCell>
    <EditableCell
      type="number"
      value={p.price}
      onChange={v => update(p.id, "price", Number(v))}
    />
  </TableCell>
  <TableCell>
    <EditableCell
      type="switch"
      value={p.inStock}
      onChange={v => update(p.id, "inStock", v)}
    />
  </TableCell>
</TableRow>

<TableBody>
  {rows.length === 0 ? (
    <TableEmptyState
      colSpan={4}
      icon="📭"
      title="No invoices yet"
      description="Once you create your first invoice, it will appear here."
      action={<Button size="sm">Create invoice</Button>}
    />
  ) : (
    rows.map(row => <TableRow key={row.id}>...</TableRow>)
  )}
</TableBody>