Data Table

"use client";

import * as React from "react";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const rows = [
  { id: "1", name: "Ana", role: "Design" },
  { id: "2", name: "Bruno", role: "Engenharia" },
  { id: "3", name: "Carla", role: "Produto" },
];

export function Demo() {
  const [selected, setSelected] = React.useState<string[]>(["1"]);

  function toggle(id: string) {
    setSelected((prev) =>
      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
    );
  }

  return (
    <Table>
      <TableCaption>Equipe (seleção local).</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead className="w-10">
            <span className="sr-only">Selecionar</span>
          </TableHead>
          <TableHead>Nome</TableHead>
          <TableHead>Função</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.id} data-state={selected.includes(row.id) ? "selected" : undefined}>
            <TableCell>
              <Checkbox
                checked={selected.includes(row.id)}
                onCheckedChange={() => toggle(row.id)}
                aria-label={`Selecionar ${row.name}`}
              />
            </TableCell>
            <TableCell>{row.name}</TableCell>
            <TableCell>{row.role}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}