@multiplatform.one/table 7.7.6 → 7.8.0

package/src/components/DataTable/columnWidthLayout.spec.tsx

@@ -0,0 +1,195 @@
+/**
+ * MPO-236 — per-column width under `columnLayout: "equal"`.
+ *
+ * `equal` is the default, and it flexes every cell to `flexGrow: 1,
+ * flexBasis: 0`. A column's `width` / `size` therefore never reaches the cell
+ * box: the render comes out identical to one that declared no widths at all,
+ * which reads as "the widths ARE applied and are not enough" and sends the
+ * reader looking in the wrong place.
+ *
+ * The default is not changed here — that would move every existing table's
+ * render. The combination warns instead, naming `columnLayout` as the reason.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { __resetTableDevWarnSeen, warnColumnWidthIgnored } from "../../shared/devWarn";
+import { DataTable } from "./index";
+
+type Pokemon = { id: number; name: string; xp: number };
+
+const sampleData: Pokemon[] = [
+  { id: 1, name: "Bulbasaur", xp: 64 },
+  { id: 2, name: "Charmander", xp: 62 },
+];
+
+const plainColumns: DataTableColumn<Pokemon>[] = [
+  { id: "name", accessorKey: "name", header: "Name" },
+  { id: "xp", accessorKey: "xp", header: "XP" },
+];
+
+const widthColumns: DataTableColumn<Pokemon>[] = [
+  { id: "name", accessorKey: "name", header: "Name", width: 320 },
+  { id: "xp", accessorKey: "xp", header: "XP", width: 80 },
+];
+
+let warnings: string[] = [];
+let warnSpy: ReturnType<typeof vi.spyOn>;
+
+function startCapture() {
+  warnings = [];
+  __resetTableDevWarnSeen();
+  warnSpy = vi.spyOn(console, "warn").mockImplementation((...args) => {
+    warnings.push(args.map((arg) => String(arg)).join(" "));
+  });
+}
+
+function stopCapture() {
+  warnSpy.mockRestore();
+  __resetTableDevWarnSeen();
+}
+
+/** Only this rule's warnings — other table chrome may warn for its own reasons. */
+function widthWarnings(): string[] {
+  return warnings.filter((line) => line.includes("column-width-ignored"));
+}
+
+/**
+ * React 19's client `useId` counter is module-global (`_r_<base32>_`), so two
+ * renders in one process never share generated ids. Normalize them out before
+ * comparing markup.
+ */
+function stripGeneratedIds(html: string): string {
+  return html.replace(/_r_[0-9a-z]+_/g, "_r_id_");
+}
+
+/** `columnLayout` omitted on purpose in most calls: "equal" is the default. */
+function renderTable(
+  columns: DataTableColumn<Pokemon>[],
+  columnLayout?: "equal" | "auto" | "scroll",
+) {
+  return renderWithProviders(
+    <DataTable
+      data={sampleData}
+      columns={columns as DataTableColumn<Record<string, any>>[]}
+      layout="table"
+      columnLayout={columnLayout}
+      enablePagination={false}
+      readOnly
+    />,
+  );
+}
+
+describe("warnColumnWidthIgnored", () => {
+  let prevEnv: string | undefined;
+
+  beforeEach(() => {
+    prevEnv = process.env.NODE_ENV;
+    process.env.NODE_ENV = "development";
+    startCapture();
+  });
+
+  afterEach(() => {
+    stopCapture();
+    process.env.NODE_ENV = prevEnv;
+  });
+
+  it("names columnLayout and the offending columns", () => {
+    warnColumnWidthIgnored({ columnLayout: "equal", columns: widthColumns });
+    expect(widthWarnings()).toHaveLength(1);
+    expect(widthWarnings()[0]).toContain("[table] column-width-ignored");
+    expect(widthWarnings()[0]).toContain("columnLayout=equal");
+    expect(widthWarnings()[0]).toContain("columns=name,xp");
+  });
+
+  it("catches the TanStack `size` spelling too", () => {
+    warnColumnWidthIgnored({ columnLayout: "equal", columns: [{ id: "avatar", size: 60 }] });
+    expect(widthWarnings()).toHaveLength(1);
+    expect(widthWarnings()[0]).toContain("columns=avatar");
+  });
+
+  it("falls back to accessorKey, then position, for the column name", () => {
+    warnColumnWidthIgnored({
+      columnLayout: "equal",
+      columns: [{ accessorKey: "xp", width: 80 }, { size: 60 }],
+    });
+    expect(widthWarnings()[0]).toContain("columns=xp,#1");
+  });
+
+  it("stays quiet when no column declares a width", () => {
+    warnColumnWidthIgnored({ columnLayout: "equal", columns: plainColumns });
+    expect(widthWarnings()).toHaveLength(0);
+  });
+
+  it.each(["auto", "scroll"] as const)("stays quiet under columnLayout=%s", (columnLayout) => {
+    warnColumnWidthIgnored({ columnLayout, columns: widthColumns });
+    expect(widthWarnings()).toHaveLength(0);
+  });
+
+  it("stays quiet with enableColumnResizing, where the width does survive", () => {
+    warnColumnWidthIgnored({
+      columnLayout: "equal",
+      enableColumnResizing: true,
+      columns: widthColumns,
+    });
+    expect(widthWarnings()).toHaveLength(0);
+  });
+
+  it("no-ops in production", () => {
+    process.env.NODE_ENV = "production";
+    warnColumnWidthIgnored({ columnLayout: "equal", columns: widthColumns });
+    expect(widthWarnings()).toHaveLength(0);
+  });
+
+  it("warns once per offending column set, not once per call", () => {
+    warnColumnWidthIgnored({ columnLayout: "equal", columns: widthColumns });
+    warnColumnWidthIgnored({ columnLayout: "equal", columns: widthColumns });
+    warnColumnWidthIgnored({ columnLayout: "equal", columns: widthColumns });
+    expect(widthWarnings()).toHaveLength(1);
+  });
+});
+
+describe("DataTable columnLayout=equal with per-column widths", () => {
+  beforeEach(startCapture);
+  afterEach(stopCapture);
+
+  it("discards the widths: the markup matches a table that declared none", () => {
+    const withWidths = renderTable(widthColumns);
+    const widthMarkup = stripGeneratedIds(withWidths.container.innerHTML);
+    withWidths.unmount();
+
+    const withoutWidths = renderTable(plainColumns);
+    expect(stripGeneratedIds(withoutWidths.container.innerHTML)).toBe(widthMarkup);
+  });
+
+  it("warns, so the discard is not silent", () => {
+    renderTable(widthColumns);
+    expect(widthWarnings()).toHaveLength(1);
+    expect(widthWarnings()[0]).toContain("component=DataTable");
+  });
+
+  it("warns once per table, not once per render", () => {
+    const { rerender } = renderTable(widthColumns);
+    rerender(
+      <DataTable
+        data={[...sampleData, { id: 3, name: "Squirtle", xp: 63 }]}
+        columns={widthColumns as DataTableColumn<Record<string, any>>[]}
+        layout="table"
+        enablePagination={false}
+        readOnly
+      />,
+    );
+    expect(widthWarnings()).toHaveLength(1);
+  });
+
+  it("does not warn under columnLayout=auto", () => {
+    renderTable(widthColumns, "auto");
+    expect(widthWarnings()).toHaveLength(0);
+  });
+
+  it("does not warn for a table with no per-column widths", () => {
+    renderTable(plainColumns);
+    expect(widthWarnings()).toHaveLength(0);
+  });
+});

package/src/components/DataTable/headerSorting.spec.tsx

@@ -130,6 +130,31 @@ describe("DataTable header sorting (web grid)", () => {
     await waitFor(() => expect(header().getAttribute("aria-sort")).toBe("none"));
   });
 
+  it("gives Phosphor resolved CSS colors in every sort state", async () => {
+    const { header } = renderTable();
+    for (const direction of ["none", "ascending", "descending"]) {
+      await waitFor(() => expect(header().getAttribute("aria-sort")).toBe(direction));
+      const icon = header().querySelector("svg");
+      expect(icon).not.toBeNull();
+      const ink = icon?.getAttribute("fill") || icon?.getAttribute("color") || icon?.style.color;
+      expect(ink).toBeTruthy();
+      expect(ink).not.toMatch(/\$/);
+      fireEvent.click(header());
+    }
+  });
+
+  it("plain click replaces another column sort and Shift+click adds to it", async () => {
+    const { header, container, states } = renderTable();
+    const ageHeader = container.querySelector("#age-header") as HTMLElement;
+    fireEvent.click(header());
+    fireEvent.click(ageHeader);
+    await waitFor(() => expect(states.at(-1)?.sorting.map((sort) => sort.id)).toEqual(["age"]));
+    fireEvent.click(header(), { shiftKey: true });
+    await waitFor(() =>
+      expect(states.at(-1)?.sorting.map((sort) => sort.id)).toEqual(["age", "firstName"]),
+    );
+  });
+
   it("non-sortable headers get no press affordance, no tab stop, and no aria-sort", () => {
     const { container } = renderWithProviders(
       <DataTable

package/src/components/DataTable/moneyColumn.spec.tsx

@@ -0,0 +1,151 @@
+/**
+ * The money column type end to end (MPO-252).
+ *
+ * A Frappe Currency field arrives as a decimal STRING, and before this the
+ * kit had no type for that, so it fell to "text". Three consequences, all
+ * asserted here: sorting was silently wrong ("9.00" above "10.00"), the
+ * filter offered `contains` instead of `isGreaterThan`, and formatting could
+ * only read a column-level currency constant even though a ledger mixes
+ * currencies row by row.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import type React from "react";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { applyFilterToValue } from "../../utils/filterUtils";
+import { mapFieldToFilterType, operatorsForFilterType } from "../../utils/filterFields";
+import { getDefaultColumnAlign } from "../../utils/columnAlign";
+import { DataTable } from "./index";
+
+interface Posting {
+  id: string;
+  payee: string;
+  amount: string;
+  currency: string;
+}
+
+const postings: Posting[] = [
+  { id: "P-1", payee: "Nine", amount: "9.00", currency: "USD" },
+  { id: "P-2", payee: "Ten", amount: "10.00", currency: "USD" },
+  { id: "P-3", payee: "Rupees", amount: "250.75", currency: "INR" },
+  { id: "P-4", payee: "Refund", amount: "-455.87", currency: "USD" },
+];
+
+const columns: DataTableColumn<Posting>[] = [
+  { id: "payee", accessorKey: "payee", header: "Payee" },
+  {
+    id: "amount",
+    accessorKey: "amount",
+    header: "Amount",
+    field: "money",
+    // Safe to turn on now: the money type carries an exact comparator.
+    sortable: true,
+    fieldProps: { currencyField: "currency", locale: "en-US" },
+  },
+];
+
+describe("money column type", () => {
+  it("maps field money → filter type money, right-aligned by default", () => {
+    expect(mapFieldToFilterType("money")).toBe("money");
+    expect(
+      getDefaultColumnAlign({ id: "amount", field: "money" }),
+      "a money column right-aligns without a column-level currency constant",
+    ).toBe("right");
+  });
+
+  it("offers the numeric filter operators, range included", () => {
+    const operators = operatorsForFilterType("money");
+    expect(operators).toContain("isLessThan");
+    expect(operators).toContain("isGreaterThan");
+    expect(operators).toContain("isBetween");
+    expect(operators, "text operators are what a money column used to get").not.toContain(
+      "contains",
+    );
+  });
+
+  it("filters numerically on decimal strings", () => {
+    const gt = { operator: "isGreaterThan" as const, value: "9.5" };
+    expect(applyFilterToValue("10.00", gt, "money")).toBe(true);
+    expect(applyFilterToValue("9.00", gt, "money")).toBe(false);
+    // The same rows through the "text" fallback are the defect: "10.00" is
+    // greater than "9.5" as a number and LESS as a string, so the row that
+    // should match is the one that gets dropped.
+    expect(applyFilterToValue("10.00", gt, "text")).toBe(false);
+
+    const between = { operator: "isBetween" as const, value: null, values: ["0", "100"] };
+    expect(applyFilterToValue("10.00", between, "money")).toBe(true);
+    expect(applyFilterToValue("250.75", between, "money")).toBe(false);
+    expect(applyFilterToValue("-455.87", between, "money")).toBe(false);
+
+    const is = { operator: "is" as const, value: "10" };
+    expect(applyFilterToValue("10.00", is, "money"), "scale does not change equality").toBe(true);
+  });
+
+  it("sorts numerically in the table, not lexically", async () => {
+    const user = userEvent.setup();
+    const { container } = renderWithProviders(
+      <DataTable
+        data={postings}
+        columns={columns}
+        layout="table"
+        enablePagination={false}
+        readOnly
+      />,
+    );
+    await waitFor(() => expect(screen.getByText("$9.00")).toBeTruthy());
+
+    await user.click(screen.getByText("Amount"));
+    await waitFor(() => {
+      const payees = Array.from(container.querySelectorAll("tbody tr"))
+        .map((row) => row.querySelector("td")?.textContent)
+        .filter((text) => !!text);
+      // Ascending: -455.87, 9.00, 10.00, 250.75. Lexically it would have been
+      // -455.87, 10.00, 250.75, 9.00 — with 9.00 LAST.
+      expect(payees).toEqual(["Refund", "Nine", "Ten", "Rupees"]);
+    });
+  });
+
+  it("formats from the ROW's currency, not only a column-level constant", async () => {
+    renderWithProviders(
+      <DataTable
+        data={postings}
+        columns={columns}
+        layout="table"
+        enablePagination={false}
+        readOnly
+      />,
+    );
+    await waitFor(() => expect(screen.getByText("$9.00")).toBeTruthy());
+    expect(screen.getByText("$10.00")).toBeTruthy();
+    expect(screen.getByText("-$455.87")).toBeTruthy();
+    // One row carries INR and renders in INR, in the same column, at the same
+    // time — two currencies are two figures and neither converts.
+    expect(screen.getByText("₹250.75")).toBeTruthy();
+  });
+});
+
+describe("the MoneyColumn story", () => {
+  it("renders mixed currencies and a per-currency footer total", async () => {
+    // The story is the documented example. Rendering it here means it cannot
+    // rot into something that formats one currency for every row.
+    const { MoneyColumn } = await import("./DataTable.stories");
+    renderWithProviders(<>{(MoneyColumn.render as () => React.ReactNode)()}</>);
+
+    await waitFor(() => expect(screen.getByText("Coffee roaster")).toBeTruthy());
+    expect(screen.getByText("$9.00")).toBeTruthy();
+    expect(screen.getByText("₹250.75")).toBeTruthy();
+    // Two totals, not one: USD 9.00 + 10.00 - 455.87 + 9.99, INR 250.75 +
+    // 1200.00. Nothing converts between them.
+    expect(screen.getByText("-$426.88")).toBeTruthy();
+    expect(screen.getByText("₹1,450.75")).toBeTruthy();
+    for (const total of ["-$426.88", "₹1,450.75"]) {
+      expect(screen.getByText(total).closest("td")?.getAttribute("data-align")).toBe("right");
+      const content = screen.getByText(total).closest('[data-cell-align="right"]') as HTMLElement;
+      expect(content).toBeTruthy();
+      expect(content.style.textAlign).toBe("right");
+    }
+  });
+});

package/src/components/DataTable/rowAccumulator.spec.tsx

@@ -0,0 +1,171 @@
+/**
+ * Row accumulator — a running balance across pages (MPO-250).
+ *
+ * The claim under test: a column can be a function of the row AND every row
+ * before it, the fold runs BEFORE pagination, and page two therefore
+ * continues rather than restarting from zero. That is what no table in the
+ * kit could do — `data` is the only channel and a `cell` renderer sees one
+ * row — and it is the default column in every register, statement and ledger.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import type { DataTableColumn, RowAccumulator } from "../../types";
+import { accumulateRows } from "../../utils/rowAccumulator";
+import { DataTable } from "./index";
+
+interface Posting {
+  id: string;
+  date: string;
+  payee: string;
+  /** Cents — integers, so this spec asserts the FOLD, not decimal arithmetic. */
+  amount: number;
+  /** Derived by the accumulator. Declared here so a column can name it. */
+  running?: number;
+}
+
+/** Twelve postings of +100 each: the running balance is 100, 200, … 1200. */
+const postings: Posting[] = Array.from({ length: 12 }, (_, i) => ({
+  id: `P-${String(i + 1).padStart(2, "0")}`,
+  date: `2026-01-${String(i + 1).padStart(2, "0")}`,
+  payee: `Payee ${String.fromCharCode(90 - i)}`, // Z, Y, X … — reverse of date order
+  amount: 100,
+}));
+
+const runningBalance: RowAccumulator<Posting, number> = {
+  initial: 0,
+  reduce: (carried, row) => carried + row.amount,
+  derive: (carried) => ({ running: carried }),
+  order: (a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0),
+  total: (carried) => carried,
+};
+
+const columns: DataTableColumn<Posting>[] = [
+  { id: "id", accessorKey: "id", header: "ID" },
+  { id: "payee", accessorKey: "payee", header: "Payee", sortable: true },
+  { id: "amount", accessorKey: "amount", header: "Amount" },
+  // Not sortable: sorting a fold column reorders it without refolding, so the
+  // figures stop reading down the column as a progression. Rendered with a
+  // marker so an assertion can tell a BALANCE of 100 from an AMOUNT of 100.
+  {
+    id: "running",
+    accessorKey: "running",
+    header: "Balance",
+    sortable: false,
+    cell: ({ row }) => `bal ${row.original.running}`,
+  },
+];
+
+describe("accumulateRows", () => {
+  it("folds in the declared order and returns the rows in it", () => {
+    const shuffled = [...postings].reverse();
+    const { rows, total } = accumulateRows(shuffled, runningBalance);
+    expect(rows.map((r) => r.id)).toEqual(postings.map((p) => p.id));
+    expect(rows.map((r) => r.running)).toEqual([
+      100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200,
+    ]);
+    expect(total, "the fold read once at the end is the footer total").toBe(1200);
+  });
+
+  it("keeps the input array identity when there is no accumulator", () => {
+    const { rows, total } = accumulateRows(postings);
+    expect(rows).toBe(postings);
+    expect(total).toBeUndefined();
+  });
+
+  it("calls a factory seed once per fold, so a mutable seed cannot leak", () => {
+    const perCurrency: RowAccumulator<Posting, Record<string, number>> = {
+      initial: () => ({}),
+      reduce: (carried, row) => {
+        carried["USD"] = (carried["USD"] ?? 0) + row.amount;
+        return carried;
+      },
+      derive: (carried) => ({ running: carried["USD"] }),
+    };
+    const first = accumulateRows(postings, perCurrency);
+    const second = accumulateRows(postings, perCurrency);
+    expect(first.rows[11]!.running).toBe(1200);
+    expect(second.rows[11]!.running, "the second fold starts from a fresh seed").toBe(1200);
+  });
+});
+
+describe("DataTable rowAccumulator", () => {
+  it("continues the running balance onto page two instead of restarting", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <DataTable
+        data={postings}
+        columns={columns}
+        rowAccumulator={runningBalance}
+        layout="table"
+        initialState={{ pagination: { pageIndex: 0, pageSize: 5 } }}
+      />,
+    );
+
+    // Page one: the fold's first five values.
+    await waitFor(() => expect(screen.getByText("P-01")).toBeTruthy());
+    expect(screen.getByText("bal 100")).toBeTruthy();
+    expect(screen.getByText("bal 500")).toBeTruthy();
+    expect(screen.queryByText("bal 600")).toBeNull();
+
+    // Page two CONTINUES. Before MPO-250 the only way to get a balance column
+    // was a per-row cell renderer, which would have restarted at 100 here.
+    await user.click(screen.getByLabelText("Go to next page"));
+    await waitFor(() => expect(screen.getByText("P-06")).toBeTruthy());
+    expect(screen.getByText("bal 600"), "page two starts where page one ended").toBeTruthy();
+    expect(screen.getByText("bal 1000")).toBeTruthy();
+    expect(screen.queryByText("bal 100"), "page one's first balance is gone").toBeNull();
+  });
+
+  it("does not refold when the user sorts on another column", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <DataTable
+        data={postings}
+        columns={columns}
+        rowAccumulator={runningBalance}
+        layout="table"
+        initialState={{ pagination: { pageIndex: 0, pageSize: 12 } }}
+      />,
+    );
+    await waitFor(() => expect(screen.getByText("P-01")).toBeTruthy());
+
+    // Payee runs backwards against date, so a payee sort puts the LAST
+    // posting first. Its balance stays 1200 — the fold order is the date
+    // order it was computed in, and sorting reorders rows for display only.
+    await user.click(screen.getByText("Payee"));
+    await waitFor(() => expect(screen.getByText("bal 1200")).toBeTruthy());
+    const rendered = screen.getAllByText(/^bal \d+$/).map((el) => el.textContent);
+    expect(rendered, "every folded figure is still on screen, attached to its own row").toContain(
+      "bal 1200",
+    );
+    expect(rendered).toContain("bal 100");
+  });
+});
+
+describe("the RunningBalance story", () => {
+  it("renders the register across two pages with figures that continue", async () => {
+    // The story is the documented example (AC: MPO-250). Rendering it here
+    // means it cannot rot into something that does not paginate.
+    const { RunningBalance } = await import("./DataTable.stories");
+    const user = userEvent.setup();
+    renderWithProviders(<>{(RunningBalance.render as () => React.ReactNode)()}</>);
+
+    await waitFor(() => expect(screen.getByText("Opening deposit")).toBeTruthy());
+    // Page one is P-01..P-05 and ends on Utilities: 2500.00 - 1800.00 - 84.50
+    // + 4123.00 - 146.00.
+    expect(screen.getByText("$4,592.50")).toBeTruthy();
+    expect(screen.queryByText("$4,573.75"), "page two's first balance is not here yet").toBeNull();
+
+    await user.click(screen.getByLabelText("Go to next page"));
+    await waitFor(() => expect(screen.getByText("Coffee roaster")).toBeTruthy());
+    // Page two picks the fold up rather than restarting: -18.75 on 4592.50.
+    expect(screen.getByText("$4,573.75"), "page two continues the fold").toBeTruthy();
+    expect(screen.getByText("$5,005.85")).toBeTruthy();
+    // The footer total is the same fold, read once at the end — every posting,
+    // not just this page.
+    expect(screen.getAllByText("$6,078.85").length).toBeGreaterThan(0);
+  });
+});

package/src/components/DataTableBulkActions/index.tsx

@@ -159,7 +159,6 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
         {showSelectAllMatching && (
           <Button
             size={knobProps.sizeToken}
-            variant="outlined"
             onPress={() => ctx?.table.toggleAllRowsSelected(true)}
             aria-label={`Select all ${matchingCount} matching rows`}
             {...knobProps.borderRadius}
@@ -173,7 +172,6 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
             <Button
               key={action.id}
               size={knobProps.sizeToken}
-              variant="outlined"
               theme={action.variant === "destructive" ? "red" : undefined}
               disabled={action.disabled}
               // DG-ST-03: reason renders via the Button explain affordance;
@@ -199,7 +197,6 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
 
         <Button
           size={knobProps.sizeToken}
-          variant="outlined"
           onPress={onClearSelection}
           aria-label="Clear selection"
           {...knobProps.borderRadius}
@@ -265,7 +262,6 @@ function BulkActionsOverflowMenu<T = any>({
     >
       <Button
         size={knobProps.sizeToken}
-        variant="outlined"
         icon={<DotsThreeIcon size={iconPx} />}
         aria-label="More bulk actions"
         {...knobProps.borderRadius}

package/src/components/DataTableCell/index.tsx

@@ -53,9 +53,10 @@ import { Star } from "@phosphor-icons/react";
 import { RichTextEditor } from "@multiplatform.one/rich-text";
 import { useResolvedKnobs, ensureCompositeFocusRing } from "@multiplatform.one/theme";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { View, isWeb } from "tamagui";
+import { Text, View, isWeb } from "tamagui";
 import type { DataTableFieldProps, DataTableField } from "../../types";
 import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign";
+import { formatMoney } from "../../utils/money";
 import { t } from "../../shared/t";
 
 export interface DataTableCellProps {
@@ -125,7 +126,9 @@ export function DataTableCell({
     max,
     step,
     precision,
-    currency: _currency,
+    currency,
+    currencyField,
+    locale,
     defaultCountry,
     otpLength,
     mentions,
@@ -171,6 +174,29 @@ export function DataTableCell({
     );
   }
 
+  // A money cell is DISPLAY, in both modes. A Currency field is a decimal
+  // STRING (a float would round it) and a grid row is not where a ledger
+  // figure gets retyped — money is edited through the form surfaces (MPO-252).
+  //
+  // Formatting reads the ROW's own currency first, because a ledger genuinely
+  // mixes currencies row by row; the column-level `currency` constant is the
+  // fallback for rows carrying none. Nothing here converts between codes —
+  // two currencies are two figures. See utils/money.ts.
+  if (field === "money") {
+    const rowCurrency = currencyField
+      ? (rowData as Record<string, unknown> | undefined)?.[currencyField]
+      : undefined;
+    const resolvedCurrency =
+      typeof rowCurrency === "string" && rowCurrency ? rowCurrency : currency;
+    return (
+      <CellWrapper justify={cellJustify}>
+        <Text numberOfLines={1} aria-label={cellName}>
+          {formatMoney(value, resolvedCurrency, locale)}
+        </Text>
+      </CellWrapper>
+    );
+  }
+
   // Read-only cells route through FieldDisplay (lightweight, view-only) rather
   // than mounting the full Edit component with disabled={true}. This keeps
   // large tables performant and gives heavy fields a purpose-built compact

package/src/components/DataTableColumnPinning/DataTableColumnPinning.stories.tsx

@@ -227,7 +227,6 @@ function BasicPinningExample() {
                             onPress={() => pinning.togglePin(header.column.id, "left")}
                             disabled={!isPinned && position !== "left" && !pinning.canPin("left")}
                             circular
-                            variant={position === "left" ? "outlined" : undefined}
                             aria-label={
                               isPinned && position === "left"
                                 ? `Unpin ${headerLabel} column`
@@ -240,7 +239,6 @@ function BasicPinningExample() {
                             onPress={() => pinning.togglePin(header.column.id, "right")}
                             disabled={!isPinned && position !== "right" && !pinning.canPin("right")}
                             circular
-                            variant={position === "right" ? "outlined" : undefined}
                             aria-label={
                               isPinned && position === "right"
                                 ? `Unpin ${headerLabel} column`
@@ -483,7 +481,6 @@ export const MaxPinnedColumns: Story = {
                     size="$2"
                     onPress={() => pinning.togglePin(column.id, "left")}
                     disabled={!pinning.isPinned(column.id) && !pinning.canPin("left")}
-                    variant={pinning.getPinPosition(column.id) === "left" ? "outlined" : undefined}
                   >
                     {pinning.getPinPosition(column.id) === "left" ? "Unpin" : "Pin Left"}
                   </Button>
@@ -491,7 +488,6 @@ export const MaxPinnedColumns: Story = {
                     size="$2"
                     onPress={() => pinning.togglePin(column.id, "right")}
                     disabled={!pinning.isPinned(column.id) && !pinning.canPin("right")}
-                    variant={pinning.getPinPosition(column.id) === "right" ? "outlined" : undefined}
                   >
                     {pinning.getPinPosition(column.id) === "right" ? "Unpin" : "Pin Right"}
                   </Button>