@structuralists/scaffolding 0.0.1

package/src/components/Tables/BigTable/BigTable.stories.tsx

@@ -0,0 +1,367 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  BigTable,
+  badgeColumn,
+  booleanColumn,
+  currencyColumn,
+  dateColumn,
+  idColumn,
+  numberColumn,
+  relativeDateColumn,
+  textColumn,
+} from './index';
+import type { ColumnDef } from './types';
+import { Text } from '../../Content/Text';
+import { LinedStack } from '../../Primitives/LinedStack';
+import { LongText } from '../../Primitives/LongText';
+import { Panels } from '../../Layout/Panels';
+import { Bar } from '../../Layout/Bar';
+import { Button } from '../../Forms/Button';
+import { Heading } from '../../Content/Heading';
+import { Stack } from '../../Layout/Stack';
+
+const meta: Meta<typeof BigTable> = {
+  title: 'Tables/BigTable',
+  component: BigTable,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj<typeof BigTable>;
+
+type User = {
+  id: string;
+  name: string;
+  email: string;
+  role: 'engineer' | 'designer' | 'pm' | 'sales';
+  team: string;
+  amount: number;
+  createdAt: string;
+  lastSeenAt: string;
+  isActive: boolean;
+};
+
+const ROLES: User['role'][] = ['engineer', 'designer', 'pm', 'sales'];
+const TEAMS = ['Platform', 'Growth', 'Infra', 'Brand', 'Revenue', 'Search'];
+const FIRST = ['Alice', 'Bob', 'Charlie', 'Dana', 'Evan', 'Faye', 'Gus', 'Hana'];
+const LAST = ['Smith', 'Jones', 'Park', 'Khan', 'Reyes', 'Fox', 'Wells'];
+
+const makeUsers = (n: number): User[] => {
+  const users: User[] = [];
+  for (let i = 0; i < n; i++) {
+    const first = FIRST[i % FIRST.length];
+    const last = LAST[(i * 3) % LAST.length];
+    const created = Date.now() - (i + 1) * 86_400_000 * 7;
+    const seen = Date.now() - (i % 9) * 3_600_000;
+    users.push({
+      id: `usr_${1000 + i}`,
+      name: `${first} ${last}`,
+      email: `${first.toLowerCase()}.${last.toLowerCase()}@example.com`,
+      role: ROLES[i % ROLES.length],
+      team: TEAMS[i % TEAMS.length],
+      amount: (i + 1) * 1234,
+      createdAt: new Date(created).toISOString(),
+      lastSeenAt: new Date(seen).toISOString(),
+      isActive: i % 5 !== 0,
+    });
+  }
+  return users;
+};
+
+const fillStyle = { height: '100vh' };
+
+export const PrefabColumns: Story = {
+  name: 'Prefab columns — typical case',
+  render: () => {
+    const data = makeUsers(40);
+    const columnDefs: ColumnDef<User>[] = [
+      idColumn({ id: 'id', header: 'ID', value: (u) => u.id }),
+      textColumn({ id: 'name', header: 'Name', value: (u) => u.name }),
+      textColumn({ id: 'email', header: 'Email', value: (u) => u.email, minWidth: 220 }),
+      badgeColumn({ id: 'role', header: 'Role', value: (u) => u.role }),
+      textColumn({ id: 'team', header: 'Team', value: (u) => u.team }),
+      currencyColumn({ id: 'amount', header: 'Amount', value: (u) => u.amount }),
+      booleanColumn({ id: 'active', header: 'Active', value: (u) => u.isActive }),
+      relativeDateColumn({ id: 'seen', header: 'Last Seen', value: (u) => u.lastSeenAt }),
+      dateColumn({ id: 'created', header: 'Created', value: (u) => u.createdAt }),
+    ];
+
+    return (
+      <div style={fillStyle}>
+        <BigTable data={data} columnDefs={columnDefs} getRowKey={(u) => u.id} />
+      </div>
+    );
+  },
+};
+
+export const StickyFirstColumn: Story = {
+  name: 'Sticky first column + horizontal scroll',
+  render: () => {
+    const data = makeUsers(40);
+    const columnDefs: ColumnDef<User>[] = [
+      textColumn({ id: 'name', header: 'Name', value: (u) => u.name, width: 180 }),
+      idColumn({ id: 'id', header: 'ID', value: (u) => u.id }),
+      textColumn({ id: 'email', header: 'Email', value: (u) => u.email, minWidth: 240 }),
+      badgeColumn({ id: 'role', header: 'Role', value: (u) => u.role }),
+      textColumn({ id: 'team', header: 'Team', value: (u) => u.team, minWidth: 140 }),
+      currencyColumn({ id: 'q1', header: 'Q1', value: (u) => u.amount }),
+      currencyColumn({ id: 'q2', header: 'Q2', value: (u) => u.amount * 1.1 }),
+      currencyColumn({ id: 'q3', header: 'Q3', value: (u) => u.amount * 0.95 }),
+      currencyColumn({ id: 'q4', header: 'Q4', value: (u) => u.amount * 1.2 }),
+      numberColumn({ id: 'visits', header: 'Visits', value: (u) => u.amount % 97 }),
+      booleanColumn({ id: 'active', header: 'Active', value: (u) => u.isActive }),
+      relativeDateColumn({ id: 'seen', header: 'Last Seen', value: (u) => u.lastSeenAt }),
+      dateColumn({ id: 'created', header: 'Created', value: (u) => u.createdAt }),
+    ];
+
+    return (
+      <div style={fillStyle}>
+        <BigTable
+          data={data}
+          columnDefs={columnDefs}
+          getRowKey={(u) => u.id}
+          hasStickyFirstColumn
+        />
+      </div>
+    );
+  },
+};
+
+export const HandRolledColumn: Story = {
+  name: 'Hand-rolled ColumnDef (no prefab)',
+  render: () => {
+    const data = makeUsers(20);
+    const columnDefs: ColumnDef<User>[] = [
+      textColumn({ id: 'name', header: 'Name', value: (u) => u.name }),
+      {
+        id: 'profile',
+        header: 'Profile',
+        cell: (u) => (
+          <span>
+            <strong>{u.name}</strong>
+            {' — '}
+            <em style={{ color: 'var(--ui-muted)' }}>{u.email}</em>
+          </span>
+        ),
+        minWidth: 280,
+      },
+      currencyColumn({ id: 'amount', header: 'Amount', value: (u) => u.amount }),
+    ];
+
+    return (
+      <div style={fillStyle}>
+        <BigTable data={data} columnDefs={columnDefs} getRowKey={(u) => u.id} />
+      </div>
+    );
+  },
+};
+
+export const CompositeCell: Story = {
+  name: 'Composite cell — LinedStack with link',
+  render: () => {
+    const data = makeUsers(40);
+    const columnDefs: ColumnDef<User>[] = [
+      {
+        id: 'user',
+        header: 'User',
+        cell: (u) => (
+          <LinedStack to={`/users/${u.id}`}>
+            <strong>{u.name}</strong>
+            <Text isMuted size="xsmall">
+              {u.email}
+            </Text>
+          </LinedStack>
+        ),
+        minWidth: 240,
+      },
+      badgeColumn({ id: 'role', header: 'Role', value: (u) => u.role }),
+      textColumn({ id: 'team', header: 'Team', value: (u) => u.team }),
+      currencyColumn({ id: 'amount', header: 'Amount', value: (u) => u.amount }),
+      relativeDateColumn({ id: 'seen', header: 'Last Seen', value: (u) => u.lastSeenAt }),
+    ];
+
+    return (
+      <div style={fillStyle}>
+        <BigTable data={data} columnDefs={columnDefs} getRowKey={(u) => u.id} />
+      </div>
+    );
+  },
+};
+
+export const LongTextCells: Story = {
+  name: 'LongText cells — truncate + click to reveal',
+  render: () => {
+    const notes = [
+      'Short note.',
+      'Wants quarterly review pushed back, mentioned travel through end of month.',
+      'Renewal pending — legal review on the master agreement, contract expected to land week of the 15th. Needs procurement sign-off after. Has flagged the data-residency clause as potentially blocking; CISO is aware.',
+      null,
+      'Followed up via Slack, no response yet.',
+      'Account paused last week pending billing reconciliation. Disputed line items: 3. Resolution target this Friday.',
+    ];
+    const data = makeUsers(40).map((u, i) => ({ ...u, note: notes[i % notes.length] }));
+
+    const columnDefs: ColumnDef<typeof data[number]>[] = [
+      textColumn({ id: 'name', header: 'Name', value: (u) => u.name, width: 160 }),
+      badgeColumn({ id: 'role', header: 'Role', value: (u) => u.role }),
+      {
+        id: 'note',
+        header: 'Note',
+        cell: (u) => <LongText>{u.note}</LongText>,
+        width: 280,
+      },
+      currencyColumn({ id: 'amount', header: 'Amount', value: (u) => u.amount }),
+      relativeDateColumn({ id: 'seen', header: 'Last Seen', value: (u) => u.lastSeenAt }),
+    ];
+
+    return (
+      <div style={fillStyle}>
+        <BigTable data={data} columnDefs={columnDefs} getRowKey={(u) => u.id} />
+      </div>
+    );
+  },
+};
+
+export const ClickableRows: Story = {
+  name: 'Clickable rows — onRowClick',
+  render: () => {
+    const data = makeUsers(40);
+    const columnDefs: ColumnDef<User>[] = [
+      idColumn({ id: 'id', header: 'ID', value: (u) => u.id }),
+      textColumn({ id: 'name', header: 'Name', value: (u) => u.name }),
+      textColumn({ id: 'email', header: 'Email', value: (u) => u.email, minWidth: 220 }),
+      badgeColumn({ id: 'role', header: 'Role', value: (u) => u.role }),
+      currencyColumn({ id: 'amount', header: 'Amount', value: (u) => u.amount }),
+      {
+        id: 'profile',
+        header: 'Profile',
+        cell: (u) => (
+          <LinedStack to={`/users/${u.id}`}>
+            <strong>view</strong>
+          </LinedStack>
+        ),
+        minWidth: 80,
+      },
+    ];
+
+    return (
+      <div style={fillStyle}>
+        <BigTable
+          data={data}
+          columnDefs={columnDefs}
+          getRowKey={(u) => u.id}
+          onRowClick={(u) => {
+            alert(`Row clicked: ${u.name}`);
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+export const MasterDetailInPanels: Story = {
+  name: 'Master-detail — BigTable inside Panels with row → overlay',
+  render: () => {
+    const Demo = () => {
+      const [selected, setSelected] = useState<User | null>(null);
+      const data = makeUsers(40);
+
+      const columnDefs: ColumnDef<User>[] = [
+        idColumn({ id: 'id', header: 'ID', value: (u) => u.id }),
+        textColumn({ id: 'name', header: 'Name', value: (u) => u.name }),
+        textColumn({ id: 'email', header: 'Email', value: (u) => u.email, minWidth: 220 }),
+        badgeColumn({ id: 'role', header: 'Role', value: (u) => u.role }),
+        textColumn({ id: 'team', header: 'Team', value: (u) => u.team }),
+        currencyColumn({ id: 'amount', header: 'Amount', value: (u) => u.amount }),
+        relativeDateColumn({ id: 'seen', header: 'Last Seen', value: (u) => u.lastSeenAt }),
+      ];
+
+      const detailRows: { label: string; value: string }[] = selected
+        ? [
+            { label: 'ID', value: selected.id },
+            { label: 'Email', value: selected.email },
+            { label: 'Role', value: selected.role },
+            { label: 'Team', value: selected.team },
+            { label: 'Amount', value: `$${selected.amount.toLocaleString()}` },
+            { label: 'Active', value: selected.isActive ? 'Yes' : 'No' },
+          ]
+        : [];
+
+      return (
+        <div style={fillStyle}>
+          <Panels
+            header={<Bar title="Users" />}
+            rightOverlayWidth={400}
+            rightOverlay={
+              selected ? (
+                <Panels
+                  header={
+                    <Bar
+                      title={selected.name}
+                      right={
+                        <Button size="small" onClick={() => setSelected(null)}>
+                          Close
+                        </Button>
+                      }
+                    />
+                  }
+                >
+                  <div style={{ padding: 16 }}>
+                    <Stack gap={3}>
+                      <Heading level={3}>Profile</Heading>
+                      <Stack gap={2}>
+                        {detailRows.map((row) => {
+                          const { label, value } = row;
+
+                          return (
+                            <Stack key={label} gap={0}>
+                              <Text isMuted size="xsmall">
+                                {label}
+                              </Text>
+                              <Text>{value}</Text>
+                            </Stack>
+                          );
+                        })}
+                      </Stack>
+                    </Stack>
+                  </div>
+                </Panels>
+              ) : null
+            }
+          >
+            <BigTable
+              data={data}
+              columnDefs={columnDefs}
+              getRowKey={(u) => u.id}
+              onRowClick={(u) => setSelected((prev) => (prev?.id === u.id ? null : u))}
+            />
+          </Panels>
+        </div>
+      );
+    };
+
+    return <Demo />;
+  },
+};
+
+export const ManyRows: Story = {
+  name: 'Many rows — vertical scroll, sticky header',
+  render: () => {
+    const data = makeUsers(500);
+    const columnDefs: ColumnDef<User>[] = [
+      idColumn({ id: 'id', header: 'ID', value: (u) => u.id }),
+      textColumn({ id: 'name', header: 'Name', value: (u) => u.name }),
+      badgeColumn({ id: 'role', header: 'Role', value: (u) => u.role }),
+      textColumn({ id: 'team', header: 'Team', value: (u) => u.team }),
+      currencyColumn({ id: 'amount', header: 'Amount', value: (u) => u.amount }),
+      relativeDateColumn({ id: 'seen', header: 'Last Seen', value: (u) => u.lastSeenAt }),
+    ];
+
+    return (
+      <div style={fillStyle}>
+        <BigTable data={data} columnDefs={columnDefs} getRowKey={(u) => u.id} />
+      </div>
+    );
+  },
+};

package/src/components/Tables/BigTable/CLAUDE.md

@@ -0,0 +1,118 @@
+# BigTable — read this before editing
+
+`BigTable` is the data-driven sibling of `QuickTable`. It accepts a typed
+`data: T[]` plus `columnDefs: ColumnDef<T>[]` and renders a sticky-header
+table that fills its container.
+
+## What it is
+
+- **Data-driven.** Caller passes a row array and a column-def array. Each
+  column has a `cell: (row: T) => ReactNode` renderer. No JSX-children API.
+- **Container-filling.** The shell is `height: 100%; overflow: auto`. The
+  parent must give it a bounded height (the way `Panels` works), or it
+  collapses.
+- **Sticky header.** `<thead>` is `position: sticky; top: 0`.
+- **Optional sticky first column.** `hasStickyFirstColumn` pins the leftmost
+  column horizontally. Only one column, only the leftmost — by design.
+- **Horizontal scroll.** The table has `min-width: max-content`, so any column
+  that needs more space pushes total table width past the shell, triggering
+  horizontal scroll without truncating cells.
+- **Optional row click.** `onRowClick(row)` is a pure passthrough — no
+  selection state, no highlight, no keyboard handling beyond what an
+  interactive cell child already provides. When set, rows get
+  `cursor: pointer` and a hover background. Clicks whose target is inside
+  an interactive element (`a, button, input, select, textarea, label,
+  [role="button"]`) are skipped, so a `linkColumn` or button-cell inside a
+  clickable row keeps its own behavior without firing the row handler too.
+
+## What it is NOT
+
+- **Not a feature-grown data grid.** No internal sorting, filtering, selection,
+  multi-column pinning, column resizing, virtualization, expand/collapse rows,
+  inline editing, footers, grouping, or pagination. The controller is responsible
+  for sort/filter/page on its side; BigTable just renders what it's handed.
+- **Not a replacement for QuickTable.** QuickTable is for ad-hoc admin/debug
+  surfaces; BigTable is for application UI where a controller has a typed
+  array and wants efficient, consistent rendering.
+- **Not virtualized in v0.** "Many rows" works at 500–2k rows; beyond that,
+  add row virtualization (TanStack Virtual is the lightest path) without
+  changing the public API.
+
+If you feel the pull to add `sortable`, `onSort`, `selectable`, `onRowSelect`,
+`columnReorderable`, `expandable`, `pageSize`, `footer`, `groupBy` —
+**stop**. That's the signal that we either need a new primitive
+(e.g. `DataGrid`) or that the controller should own the behavior. Adding
+those here defeats the "limited scope" pact and slowly rebuilds Excel.
+
+`onRowClick` is the one row-interaction prop that lives here. The line is
+**state vs. event**: `onRowClick` is a pure event passthrough that owns no
+state — no selected-row tracking, no highlight, no multi-select. Anything
+that asks BigTable to *remember* which row(s) the user touched
+(`selectedRowIds`, `onRowSelect`, `defaultSelected`, `selectionMode`)
+crosses the line and belongs in a `DataGrid` or in the controller.
+
+## ColumnDef anatomy
+
+```ts
+type ColumnDef<T> = {
+  id: string;                      // stable identity (React key, future pinning)
+  header: ReactNode;               // header content — usually a string
+  cell: (row: T) => ReactNode;     // generic renderer — the base case
+  align?: 'left' | 'right' | 'center';
+  width?: number | string;         // px number or CSS unit; omitted = flexible
+  minWidth?: number;               // floor when flexible
+};
+```
+
+You can write a `ColumnDef<T>` by hand for any one-off rendering. For the
+common cases, prefer a prefab — they set sensible `align` / `minWidth`
+defaults and keep call sites consistent across the app.
+
+## Prefabs
+
+All prefabs take `{ id, header, value, ... }` and return a full
+`ColumnDef<T>`. Override layout via the `width` / `minWidth` args; for any
+deeper override, spread the prefab result and patch:
+
+```ts
+{ ...numberColumn({ id, header, value: (r) => r.x }), align: 'left' }
+```
+
+| Prefab | Value | Defaults |
+|---|---|---|
+| `textColumn` | `string` | left |
+| `numberColumn` | `number` | right, minWidth 80 |
+| `currencyColumn` | `number` | right, minWidth 100, USD |
+| `dateColumn` | `Date \| string \| number` | left, minWidth 110 |
+| `relativeDateColumn` | `Date \| string \| number` | left, minWidth 120 |
+| `badgeColumn` | `string` (rendered in `<Badge>`) | left |
+| `booleanColumn` | `boolean` (Yes/No, configurable) | center, minWidth 60 |
+| `linkColumn` | `string` (rendered in `<Link>`) | left |
+| `idColumn` | `string` (mono, muted) | left, minWidth 100 |
+
+## Container-fill contract
+
+`<BigTable />` fills `height: 100%; width: 100%`. The parent has to give it
+a bounded box — same contract as `Panels`. If the parent is `height: auto`,
+the table grows with content and the sticky header has nothing to stick to.
+
+## Empty / loading state
+
+Not handled in v0. Caller checks `data.length === 0` (or `isLoading`) and
+renders something else (a `LoadingContainer`, an empty-state card) before
+mounting `BigTable`. Adding a built-in slot is cheap if it earns its keep,
+but most callers already have an empty-state convention.
+
+## Row identity
+
+`getRowKey` is required, not optional. Forcing the caller to declare
+identity prevents the index-key trap (rows get reordered, React reuses the
+wrong DOM, focus/selection state leaks). One extra line per call site.
+
+## File layout
+
+- `index.tsx` — `BigTable` component + barrel re-exports.
+- `types.ts` — `ColumnDef`, `BigTableProps`, `ColumnAlign`.
+- `columnDefs.tsx` — prefab factories.
+- `styles.module.css` — shell, sticky header, sticky column, alignment, mono.
+- `BigTable.stories.tsx` — stories.

package/src/components/Tables/BigTable/columnDefs.tsx

@@ -0,0 +1,208 @@
+import type { ReactNode } from 'react';
+import { Badge } from '../../Content/Badge';
+import { Link } from '../../Content/Link';
+import { Num } from '../../Primitives/Num';
+import type { NumVariant } from '../../Primitives/Num';
+import { RelativeTime } from '../../Primitives/RelativeTime';
+import { EmptyValue } from '../../Primitives/EmptyValue';
+import type { ColumnDef } from './types';
+import styles from './styles.module.css';
+
+type Layout = {
+  width?: number | string;
+  minWidth?: number;
+};
+
+type Base<T, V> = Layout & {
+  id: string;
+  header: ReactNode;
+  value: (row: T) => V;
+};
+
+export const textColumn = <T,>({
+  id,
+  header,
+  value,
+  width,
+  minWidth,
+}: Base<T, string | null | undefined>): ColumnDef<T> => ({
+  id,
+  header,
+  cell: (row) => {
+    const v = value(row);
+    return v == null || v === '' ? <EmptyValue /> : v;
+  },
+  align: 'left',
+  width,
+  minWidth,
+});
+
+export const numberColumn = <T,>({
+  id,
+  header,
+  value,
+  as,
+  precision,
+  width,
+  minWidth,
+}: Base<T, number | null | undefined> & {
+  as?: NumVariant;
+  precision?: number;
+}): ColumnDef<T> => ({
+  id,
+  header,
+  cell: (row) => <Num value={value(row)} as={as} precision={precision} />,
+  align: 'right',
+  width,
+  minWidth: minWidth ?? 80,
+});
+
+export const currencyColumn = <T,>({
+  id,
+  header,
+  value,
+  currency,
+  precision,
+  width,
+  minWidth,
+}: Base<T, number | null | undefined> & {
+  currency?: string;
+  precision?: number;
+}): ColumnDef<T> => ({
+  id,
+  header,
+  cell: (row) => (
+    <Num value={value(row)} as="currency" currency={currency} precision={precision} />
+  ),
+  align: 'right',
+  width,
+  minWidth: minWidth ?? 100,
+});
+
+const toDate = (v: Date | string | number): Date => (v instanceof Date ? v : new Date(v));
+
+export const dateColumn = <T,>({
+  id,
+  header,
+  value,
+  width,
+  minWidth,
+}: Base<T, Date | string | number | null | undefined>): ColumnDef<T> => ({
+  id,
+  header,
+  cell: (row) => {
+    const v = value(row);
+    if (v == null) return <EmptyValue />;
+    const d = toDate(v);
+    return Number.isNaN(d.getTime()) ? <EmptyValue /> : d.toLocaleDateString();
+  },
+  align: 'left',
+  width,
+  minWidth: minWidth ?? 110,
+});
+
+export const relativeDateColumn = <T,>({
+  id,
+  header,
+  value,
+  width,
+  minWidth,
+}: Base<T, Date | string | number | null | undefined>): ColumnDef<T> => ({
+  id,
+  header,
+  cell: (row) => <RelativeTime value={value(row)} />,
+  align: 'left',
+  width,
+  minWidth: minWidth ?? 120,
+});
+
+export const badgeColumn = <T,>({
+  id,
+  header,
+  value,
+  isMono,
+  width,
+  minWidth,
+}: Base<T, string | null | undefined> & { isMono?: boolean }): ColumnDef<T> => ({
+  id,
+  header,
+  cell: (row) => {
+    const v = value(row);
+    return v == null || v === '' ? <EmptyValue /> : <Badge isMono={isMono}>{v}</Badge>;
+  },
+  align: 'left',
+  width,
+  minWidth,
+});
+
+export const booleanColumn = <T,>({
+  id,
+  header,
+  value,
+  labels = { true: 'Yes', false: 'No' },
+  width,
+  minWidth,
+}: Base<T, boolean | null | undefined> & {
+  labels?: { true: string; false: string };
+}): ColumnDef<T> => ({
+  id,
+  header,
+  cell: (row) => {
+    const v = value(row);
+    if (v == null) return <EmptyValue />;
+    return v ? labels.true : labels.false;
+  },
+  align: 'center',
+  width,
+  minWidth: minWidth ?? 60,
+});
+
+export const linkColumn = <T,>({
+  id,
+  header,
+  value,
+  href,
+  isExternal,
+  width,
+  minWidth,
+}: Base<T, string | null | undefined> & {
+  href: (row: T) => string;
+  isExternal?: boolean;
+}): ColumnDef<T> => ({
+  id,
+  header,
+  cell: (row) => {
+    const v = value(row);
+    if (v == null || v === '') return <EmptyValue />;
+    return (
+      <Link href={href(row)} isExternal={isExternal}>
+        {v}
+      </Link>
+    );
+  },
+  align: 'left',
+  width,
+  minWidth,
+});
+
+export const idColumn = <T,>({
+  id,
+  header,
+  value,
+  width,
+  minWidth,
+}: Base<T, string | null | undefined>): ColumnDef<T> => ({
+  id,
+  header,
+  cell: (row) => {
+    const v = value(row);
+    return v == null || v === '' ? (
+      <EmptyValue />
+    ) : (
+      <span className={styles.cellMono}>{v}</span>
+    );
+  },
+  align: 'left',
+  width,
+  minWidth: minWidth ?? 100,
+});