TableRow

import { TableRow } from "@rebasepro/ui";

Props

Prop	Type	Required	Description
children	React.ReactNode	—
className	string	—
onClick	React.MouseEventHandler<any> & React.MouseEventHandler<HTMLTableRowElement>	—
style	React.CSSProperties	—
id	string	—

Example

This is the example the design-system sync renders and verifies for this component.

import { Table, TableHeader, TableBody, TableRow, TableCell, Chip } from "@rebasepro/ui";

const COLLECTIONS = [
  { id: "c1", name: "users", type: "table", rows: "128,442", rls: true },
  { id: "c2", name: "orders", type: "table", rows: "54,910", rls: true },
  { id: "c3", name: "audit_logs", type: "view", rows: "2,004,331", rls: false }
];

export function ClickableRows() {
  return (
    <div className="overflow-x-auto w-full">
      <Table className="w-full">
        <TableHeader>
          <TableCell header>Name</TableCell>
          <TableCell header>Type</TableCell>
          <TableCell header align="right">Rows</TableCell>
          <TableCell header align="center">RLS</TableCell>
        </TableHeader>
        <TableBody>
          {COLLECTIONS.map(col => (
            <TableRow key={col.id} onClick={() => {}}>
              <TableCell className="font-mono text-xs font-medium">{col.name}</TableCell>
              <TableCell className="text-text-secondary dark:text-text-secondary-dark">{col.type}</TableCell>
              <TableCell align="right">{col.rows}</TableCell>
              <TableCell align="center">
                <Chip size="small" colorScheme={col.rls ? "green" : "red"}>
                  {col.rls ? "Enabled" : "Disabled"}
                </Chip>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}