bc-grid
GitHub

Installation + first grid

View source

bc-grid ships as a small set of workspace packages. Inside the BusinessCraft monorepo every consumer already has them wired in. This page walks through the minimum you need to put a grid on screen.

1. Install

From inside the bsncraft monorepo, every consumer already depends on the workspace packages. If you are wiring it into a fresh app, declare them as workspace dependencies:

// apps/your-app/package.json
{
  "dependencies": {
    "@bc-grid/react":    "workspace:*",
    "@bc-grid/editors":  "workspace:*",
    "@bc-grid/theming":  "workspace:*"
  }
}

2. Pull in the stylesheet

bc-grid ships a single CSS bundle with theming variables and density modes. Import it once at the root of your Tailwind v4 stylesheet, and add a @source directive so Tailwind compiles classes used inside the grid sources:

/* apps/your-app/app/globals.css */
@import "tailwindcss";
@import "@bc-grid/theming/styles.css";

@source "../../../packages/bc-grid/packages/*/src/**/*.{ts,tsx}";

3. Render a grid

A grid needs three things: a row identity callback, a list of column definitions, and an array of rows. Everything else (sorting, filter chrome, pinning, range selection, context menu, keyboard nav) is opt-out, not opt-in.

"use client";

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

type Customer = {
  id: string;
  name: string;
  status: "active" | "pending";
  balance: number;
};

const rows: Customer[] = [
  { id: "C-001", name: "Acme Corp", status: "active",  balance: 1240.5 },
  { id: "C-002", name: "Globex",    status: "pending", balance:  890.0 },
];

const columns: BcGridColumn<Customer>[] = [
  { columnId: "id",      field: "id",      header: "Code",    width: 100, pinned: "left" },
  { columnId: "name",    field: "name",    header: "Name",    width: 220 },
  { columnId: "status",  field: "status",  header: "Status",  width: 120 },
  { columnId: "balance", field: "balance", header: "Balance", width: 140, align: "right" },
];

export function CustomersGrid() {
  return (
    <BcGrid<Customer>
      ariaLabel="Customers"
      gridId="customers"
      rowId={(row) => row.id}
      columns={columns}
      data={rows}
    />
  );
}

See the Basic grid page for the live version of this example.

Where the parts live

  • @bc-grid/react — the React surface: BcGrid, BcEditGrid, BcServerGrid, the useBcGridState and server-row-model hooks, all the chrome (toolbar, status bar, context menu, sidebar).
  • @bc-grid/editors — the built-in editors: text, number, date, datetime, time, select, multi-select, autocomplete, checkbox.
  • @bc-grid/theming — the canonical styles.css and theme tokens.
  • @bc-grid/{aggregations,filters,server-row-model,export,virtualizer,animations,enterprise,core} — engine packages. Most consumers never import these directly; they travel along with @bc-grid/react.

Next steps