@multiplatform.one/table 6.4.1 → 6.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/table",
-  "version": "6.4.1",
+  "version": "6.4.2",
   "description": "Advanced table components with filtering, pagination, sorting, and URL state management",
   "keywords": [
     "cross-platform",
@@ -80,13 +80,13 @@
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/table-core": "^8.21.3",
     "tamagui": "2.0.0-rc.41",
-    "@multiplatform.one/components": "6.4.1",
-    "@multiplatform.one/forms": "6.4.1",
-    "@multiplatform.one/platform": "6.4.1",
-    "@multiplatform.one/table-primitives": "6.4.1",
-    "@multiplatform.one/rich-text": "6.4.1",
-    "@multiplatform.one/router": "6.4.1",
-    "@multiplatform.one/theme": "6.4.1"
+    "@multiplatform.one/components": "6.4.2",
+    "@multiplatform.one/forms": "6.4.2",
+    "@multiplatform.one/platform": "6.4.2",
+    "@multiplatform.one/rich-text": "6.4.2",
+    "@multiplatform.one/router": "6.4.2",
+    "@multiplatform.one/table-primitives": "6.4.2",
+    "@multiplatform.one/theme": "6.4.2"
   },
   "devDependencies": {
     "@tamagui/build": "2.0.0-rc.41",
@@ -99,10 +99,10 @@
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "vitest": "^4.1.5",
-    "@multiplatform.one/router": "6.4.1",
-    "@multiplatform.one/storybook": "6.4.1",
-    "@multiplatform.one/test-utils": "6.4.1",
-    "@multiplatform.one/config": "6.4.1"
+    "@multiplatform.one/config": "6.4.2",
+    "@multiplatform.one/router": "6.4.2",
+    "@multiplatform.one/storybook": "6.4.2",
+    "@multiplatform.one/test-utils": "6.4.2"
   },
   "peerDependencies": {
     "i18next": "^25.0.0",

package/src/components/DataTable/index.native.tsx

@@ -657,7 +657,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
               aria-describedby={ariaDescribedBy}
               aria-live="polite"
               aria-atomic="false"
-              {...knobProps.borderRadius}
+              {...knobProps.containerRadius}
               // UX-011 / Axiom 6 HONEST STATE: `disabled` makes the whole
               // assembly inert (pointerEvents none blocks every touch) and
               // says so (aria-disabled). LC-40 assembly fragment carries the

package/src/components/DataTableColumnPinning/index.tsx

@@ -296,11 +296,14 @@ export function DataTableColumnPinning<TData>(props: DataTableColumnPinningProps
       );
   }, [table, pinnedColumns]);
 
+  // Pinned cells are R-NONE/SF-TRANSPARENT like every other cell — they carry
+  // only the sticky occlusion fill and their own seam border, so they take the
+  // radius-only fragment (D-03); a border-bearing one ringed each pinned cell.
   const ThemedStickyColumn = useCallback(
     (props: React.ComponentProps<typeof StickyColumn>) => (
-      <StickyColumn {...knobProps.borderRadius} {...props} />
+      <StickyColumn {...knobProps.containerRadius} {...props} />
     ),
-    [knobProps.borderRadius],
+    [knobProps.containerRadius],
   );
 
   return {

package/src/components/DataTableFilterChips/index.tsx

@@ -96,7 +96,7 @@ export function DataTableFilterChips() {
           tabIndex={0}
           aria-label={t("Edit filter {{label}}", { label: chip.label })}
           cursor="pointer"
-          {...knobProps.borderRadius}
+          {...knobProps.containerRadius}
           focusVisibleStyle={{
             outlineColor: "$outlineColor",
             outlineWidth: 2,

package/src/components/DataTableGrouping/DataTableGrouping.stories.tsx

@@ -1,5 +1,6 @@
 import { action } from "@multiplatform.one/storybook";
 import React from "react";
+import { formatCurrency } from "@multiplatform.one/theme";
 import { Button } from "@multiplatform.one/forms";
 import { Card, Text, XStack, YStack } from "tamagui";
 import { type AggregationConfig, DataTableGrouping, type GroupingConfig } from "./index";
@@ -101,7 +102,7 @@ const columns = [
   {
     accessorKey: "totalRevenue",
     header: "Revenue",
-    cell: (info: any) => `$${info.getValue().toLocaleString()}`,
+    cell: (info: any) => formatCurrency(info.getValue(), { symbol: "$", fractionDigits: "auto" }),
   },
   {
     accessorKey: "date",
@@ -273,7 +274,10 @@ export const CustomGroupHeaders = () => {
           </Text>
         </YStack>
         <Text fontSize="$3" fontWeight="500" color="$blue11">
-          ${group.aggregations?.totalRevenue?.sum?.toLocaleString() || 0}
+          {formatCurrency(group.aggregations?.totalRevenue?.sum ?? 0, {
+            symbol: "$",
+            fractionDigits: "auto",
+          })}
         </Text>
       </XStack>
     </YStack>

package/src/components/DataTableGrouping/DataTableGroupingConfig.stories.tsx

@@ -0,0 +1,120 @@
+/**
+ * DataTableGroupingConfig — coverage arm of G-15 story honesty (D-05 rider).
+ *
+ * `DataTableGroupingConfig` is a public export of @multiplatform.one/table
+ * that shipped with no story at all (audit-tc §1.2, audit-table-chrome-
+ * functional "coverage gap"), so its trigger badge and configuration popover
+ * could never be screenshot-verified from the index. These stories give the
+ * component a home next to its implementation.
+ *
+ * Stories compose catalog components only and are network-hermetic.
+ */
+import { useState } from "react";
+import { Text, XStack, YStack } from "@multiplatform.one/components";
+import { DataTableGroupingConfig, type GroupingConfig } from "./index";
+
+const columns = [
+  { accessorKey: "region", header: "Region", type: "string" as const },
+  { accessorKey: "category", header: "Category", type: "string" as const },
+  { accessorKey: "salesperson", header: "Salesperson", type: "string" as const },
+  { accessorKey: "quantity", header: "Quantity", type: "number" as const },
+  { accessorKey: "totalRevenue", header: "Revenue", type: "number" as const },
+  { accessorKey: "date", header: "Date", type: "date" as const },
+];
+
+export default {
+  title: "Table/DataTableGroupingConfig",
+  component: DataTableGroupingConfig,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Trigger + popover that edits a GroupingConfig (group-by columns and aggregations). The trigger carries a count badge once either list is non-empty. Standalone here; inside a DataTable it reads columns from DataTableStateContext.",
+      },
+    },
+  },
+};
+
+/** Live config state so the popover edits (and the badge count) are real. */
+function ConfigHarness({
+  initial,
+  disabled = false,
+}: {
+  initial: GroupingConfig;
+  disabled?: boolean;
+}) {
+  const [config, setConfig] = useState<GroupingConfig>(initial);
+  return (
+    <YStack gap="$3" padding="$4" minHeight={420} alignItems="flex-start">
+      <DataTableGroupingConfig
+        columns={columns}
+        currentConfig={config}
+        onConfigChange={setConfig}
+        disabled={disabled}
+      />
+      {/* Echo the committed config so a screenshot proves the edit landed. */}
+      <YStack gap="$1">
+        <Text fontSize="$2" color="$color11">
+          Group by: {config.columns.length > 0 ? config.columns.join(", ") : "(none)"}
+        </Text>
+        <Text fontSize="$2" color="$color11">
+          Aggregations:{" "}
+          {config.aggregations.length > 0
+            ? config.aggregations.map((a) => `${a.function}(${a.column})`).join(", ")
+            : "(none)"}
+        </Text>
+      </YStack>
+    </YStack>
+  );
+}
+
+const emptyConfig: GroupingConfig = { columns: [], aggregations: [] };
+
+/** Rest state: nothing grouped yet, so the trigger shows no count badge. */
+export const Default = () => <ConfigHarness initial={emptyConfig} />;
+Default.storyName = "Main";
+
+/**
+ * One group-by column and one aggregation: the trigger badge reads 2. This is
+ * the badge that audit-table-chrome-functional fixed from a theme-blind
+ * `color="white"` to `$color12` and could not screenshot-verify without a story.
+ */
+export const WithBadgeCount = () => (
+  <ConfigHarness
+    initial={{
+      columns: ["region"],
+      aggregations: [{ column: "totalRevenue", function: "sum", label: "Revenue" }],
+    }}
+  />
+);
+
+/** Multi-level grouping plus several aggregations — the popover's scroll case. */
+export const ManySelections = () => (
+  <ConfigHarness
+    initial={{
+      columns: ["region", "category", "salesperson"],
+      aggregations: [
+        { column: "totalRevenue", function: "sum", label: "Revenue" },
+        { column: "quantity", function: "avg", label: "Avg qty" },
+        { column: "quantity", function: "max", label: "Max qty" },
+        { column: "totalRevenue", function: "min", label: "Min revenue" },
+      ],
+    }}
+  />
+);
+
+/** Disabled trigger: the control stays legible rather than vanishing (LC-40). */
+export const Disabled = () => (
+  <ConfigHarness initial={{ columns: ["region"], aggregations: [] }} disabled />
+);
+
+/** No columns to offer — the popover must say so instead of rendering empty chrome. */
+export const NoColumns = () => {
+  const [config, setConfig] = useState<GroupingConfig>(emptyConfig);
+  return (
+    <XStack padding="$4" minHeight={420}>
+      <DataTableGroupingConfig columns={[]} currentConfig={config} onConfigChange={setConfig} />
+    </XStack>
+  );
+};

package/src/components/DataTableGrouping/index.tsx

@@ -11,7 +11,7 @@ import {
   GearIcon,
 } from "@phosphor-icons/react";
 import { useDirection } from "@multiplatform.one/components";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { formatNumber, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback, useMemo, useState } from "react";
 import { Button, Select } from "@multiplatform.one/forms";
 import { Popover, Separator, Text, View, XStack, YStack, isWeb } from "tamagui";
@@ -88,6 +88,30 @@ const groupMetaSizeMap: Record<string, string> = {
   $5: "$4",
 };
 
+/**
+ * Group aggregates are the same number class as the cells they summarise, so
+ * they render through the house number register (LC-12 render channel) —
+ * "15,400", never the raw `15400` beside a localized cell. Counts are whole
+ * by construction; a custom aggregation may return anything, and a
+ * non-numeric result passes through as its own text.
+ */
+export function formatAggregateValue(value: unknown, agg: AggregationConfig): string {
+  if (value == null) return formatNumber(0);
+  if (typeof value === "number") {
+    // The aggregation math is NaN-guarded upstream; keep the zero floor so a
+    // guard slipping through still reads as a number, not a hole.
+    if (!Number.isFinite(value)) return formatNumber(0);
+    return agg.function === "count"
+      ? formatNumber(value, { maximumFractionDigits: 0 })
+      : formatNumber(value);
+  }
+  if (typeof value === "string") {
+    const asNumber = Number(value);
+    return value.trim() !== "" && Number.isFinite(asNumber) ? formatNumber(asNumber) : value;
+  }
+  return String(value);
+}
+
 export function DataTableGrouping<T = any>(props: DataTableGroupingProps<T>) {
   // Try to consume from DataTableStateContext (compound component pattern)
   const ctx = useDataTableState();
@@ -345,7 +369,7 @@ function GroupHeader<T = any>({
                   {agg.label || `${agg.function}(${agg.column})`}:
                 </Text>
                 <Text fontSize={groupMetaSizeMap[knobProps.sizeToken] ?? "$3"} fontWeight="500">
-                  {group.aggregations[agg.column]?.[agg.function] || 0}
+                  {formatAggregateValue(group.aggregations[agg.column]?.[agg.function], agg)}
                 </Text>
               </XStack>
             ))}

package/src/components/SimpleTable/index.tsx

@@ -237,7 +237,7 @@ export function SimpleTable({ data, columns, layout = "auto", ...props }: Simple
   // Card layout below `$sm` (layout="auto") or when pinned via layout="cards"
   if (layout === "cards" || (layout === "auto" && sm === false)) {
     return (
-      <View {...knobProps.borderRadius} {...props} testID="simple-table-cards">
+      <View {...knobProps.containerRadius} {...props} testID="simple-table-cards">
         <SimpleTableMobileCards data={data} columns={columns} />
       </View>
     );