Table

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

Props

Prop	Type	Required	Description
children	React.ReactNode	yes
className	string	—
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,
    IconButton,
    Tooltip,
    Button,
    Typography,
    Trash2Icon,
    PlusIcon
} from "@rebasepro/ui";

const USERS = [
  { uid: "1", email: "maria.chen@rebase.pro", displayName: "Maria Chen", roles: [{ id: "admin", name: "Admin", isAdmin: true }] },
  { uid: "2", email: "diego.alvarez@rebase.pro", displayName: "Diego Alvarez", roles: [{ id: "editor", name: "Editor", isAdmin: false }] },
  { uid: "3", email: "priya.natarajan@rebase.pro", displayName: "Priya Natarajan", roles: [] },
  { uid: "4", email: "sam.okafor@rebase.pro", displayName: "Sam Okafor", roles: [{ id: "editor", name: "Editor", isAdmin: false }] }
];

export function UsersTable() {
  return (
    <div className="flex flex-col gap-4 w-full">
      <div className="flex items-center">
        <Typography gutterBottom variant="h4" className="grow" component="h4">Users</Typography>
        <Button startIcon={<PlusIcon/>}>Add user</Button>
      </div>
      <div className="overflow-x-auto">
        <Table className="w-full">
          <TableHeader>
            <TableCell header className="w-16"></TableCell>
            <TableCell header>Email</TableCell>
            <TableCell header>Name</TableCell>
            <TableCell header>Roles</TableCell>
          </TableHeader>
          <TableBody>
            {USERS.map(user => (
              <TableRow key={user.uid}>
                <TableCell style={{ width: "64px" }}>
                  <Tooltip asChild title="Delete this user">
                    <IconButton size="small"><Trash2Icon/></IconButton>
                  </Tooltip>
                </TableCell>
                <TableCell>{user.email}</TableCell>
                <TableCell className="font-medium">{user.displayName}</TableCell>
                <TableCell>
                  <div className="flex flex-wrap gap-2">
                    {user.roles.map(role => (
                      <Chip key={role.id} colorScheme={role.isAdmin ? "purple" : "blue"} size="small">
                        {role.name}
                      </Chip>
                    ))}
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}