Expandable rows

import {
  Table,
  TableBody,
  TableExpandableRow,
  TableHeader,
  TableHeaderCell,
  TableRow,
  TableViewport,
} from "@gpuixui/data";
import { useState } from "react";

const [open, setOpen] = useState<string | null>(null);

<Table height={300} aria-label="Files with details">
  <TableViewport>
    <TableHeader>
      <TableRow>
        <TableHeaderCell width={32} />
        <TableHeaderCell width={200}>Name</TableHeaderCell>
      </TableRow>
    </TableHeader>
    <TableBody>
      {files.map((file) => (
        <TableExpandableRow
          key={file.id}
          expanded={open === file.id}
          onToggle={() => setOpen(open === file.id ? null : file.id)}
          cells={<TableCell width={200}>{file.name}</TableCell>}
          detail={<KeyValue entries={detailOf(file)} />}
        />
      ))}
    </TableBody>
  </TableViewport>
</Table>;