Table

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

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>john@example.com</TableCell>
      <TableCell>Admin</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Jane Smith</TableCell>
      <TableCell>jane@example.com</TableCell>
      <TableCell>User</TableCell>
    </TableRow>
  </TableBody>
</Table>

const [sortKey, setSortKey] = useState("name");
const [sortDirection, setSortDirection] = useState("asc");
 
<Table>
  <TableHeader>
    <TableRow>
      <TableHead
        sortable
        sortDirection={sortKey === "name" ? sortDirection : undefined}
        onSort={() => handleSort("name")}
      >
        Name
      </TableHead>
      <TableHead
        sortable
        sortDirection={sortKey === "email" ? sortDirection : undefined}
        onSort={() => handleSort("email")}
      >
        Email
      </TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {sortedData.map((row) => (
      <TableRow key={row.id}>
        <TableCell>{row.name}</TableCell>
        <TableCell>{row.email}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>
        <Checkbox
          checked={selectedRows.length === data.length}
          onChange={() => toggleAll()}
        />
      </TableHead>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {data.map((row) => (
      <TableRow key={row.id} selected={selectedRows.includes(row.id)}>
        <TableCell>
          <Checkbox
            checked={selectedRows.includes(row.id)}
            onChange={() => toggleRow(row.id)}
          />
        </TableCell>
        <TableCell>{row.name}</TableCell>
        <TableCell>{row.email}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>User</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        <div className="flex items-center gap-3">
          <Avatar type="image" src="/avatar.jpg" size="sm" />
          <div>
            <p className="font-medium text-grey-900 dark:text-grey-100">John Doe</p>
            <p className="text-sm text-grey-500 dark:text-grey-400">john@example.com</p>
          </div>
        </div>
      </TableCell>
      <TableCell>
        <Badge color="success">Active</Badge>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>