VirtualTable

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

This component takes no documented props, or its type could not be flattened. See the source.

Example

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

import { VirtualTable, Chip } from "@rebasepro/ui";
import type { VirtualTableColumn, CellRendererParams } from "@rebasepro/ui";

type UserRow = { id: string; name: string; role: string; status: string };

const USER_COLUMNS: VirtualTableColumn[] = [
  { key: "name", title: "Name", width: 150 },
  { key: "role", title: "Role", width: 100 },
  { key: "status", title: "Status", width: 110 }
];

const USER_ROWS: UserRow[] = [
  { id: "1", name: "Maria Chen", role: "Admin", status: "active" },
  { id: "2", name: "Diego Alvarez", role: "Editor", status: "active" },
  { id: "3", name: "Priya Natarajan", role: "Viewer", status: "invited" },
  { id: "4", name: "Sam Okafor", role: "Editor", status: "active" },
  { id: "5", name: "Elena Petrova", role: "Viewer", status: "suspended" }
];

function statusColor(status: string) {
  if (status === "active") return "green" as const;
  if (status === "invited") return "blue" as const;
  return "gray" as const;
}

function userCellRenderer({ column, rowData }: CellRendererParams<UserRow>) {
  if (!rowData) return null;
  if (column.key === "name") {
    return <div className="flex items-center h-full px-3 font-medium truncate">{rowData.name}</div>;
  }
  if (column.key === "role") {
    return <div className="flex items-center h-full px-3"><Chip size="small">{rowData.role}</Chip></div>;
  }
  if (column.key === "status") {
    return <div className="flex items-center h-full px-3"><Chip size="small" colorScheme={statusColor(rowData.status)}>{rowData.status}</Chip></div>;
  }
  return null;
}

export function UsersVirtualTable() {
  return (
    <div style={{ width: 380, height: 296, border: "1px solid #e5e7eb", borderRadius: 8 }}>
      <VirtualTable
        data={USER_ROWS}
        columns={USER_COLUMNS}
        cellRenderer={userCellRenderer}
        rowHeight={48}
        headerHeight={40}
      />
    </div>
  );
}