BC Grid is the shared grid surface for BusinessCraft.

import { BcGrid, type BcGridColumn } from "@bc-grid/react";
import "@bc-grid/theming/styles.css";

type CustomerRow = {
  account: string;
  name: string;
  balance: number;
};

const columns: BcGridColumn<CustomerRow>[] = [
  { field: "account", header: "Account", pinned: "left", format: "code" },
  { field: "name", header: "Name", filter: { type: "text" } },
  { field: "balance", header: "Balance", align: "right", format: "currency" },
];

export function CustomersGrid({ rows }: { rows: CustomerRow[] }) {
  return (
    <BcGrid
      ariaLabel="Customers"
      gridId="ar.customers"
      rowId={(row) => row.account}
      columns={columns}
      data={rows}
    />
  );
}