@multiplatform.one/table 7.7.6 → 7.10.0

package/src/components/DataTable/DataTable.stories.tsx

@@ -16,8 +16,11 @@ import {
   DataTableFilters,
   DataTablePagination,
   DataTableToolbar,
+  formatMoney,
+  type RowAccumulator,
+  sumMoneyByCurrency,
 } from "../../index";
-import { DataTable } from "./index";
+import { DataTable, useDataTableState } from "./index";
 
 const meta: Meta<typeof DataTable> = {
   title: "Table/DataTable",
@@ -204,11 +207,7 @@ const columns: DataTableColumn<User>[] = [
   columnHelper.display({
     id: "actions",
     header: "Actions",
-    cell: (_info) => (
-      <Button size="$2" variant="outlined">
-        Edit
-      </Button>
-    ),
+    cell: (_info) => <Button size="$2">Edit</Button>,
     enableSorting: false,
     enableColumnFilter: false,
   }) as DataTableColumn<User>,
@@ -321,14 +320,7 @@ const AdvancedTableStory = () => {
           enableGlobalSearch={true}
           enableViews={true}
           renderToolbar={(props) => (
-            <DataTableToolbar
-              {...props}
-              customActions={
-                <Button size="$3" variant="outlined">
-                  Export CSV
-                </Button>
-              }
-            />
+            <DataTableToolbar {...props} customActions={<Button size="$3">Export CSV</Button>} />
           )}
           renderFilters={(props) => (
             <DataTableFilters {...props} availableColumns={columnsWithCounts} maxFilters={5} />
@@ -3090,3 +3082,183 @@ export const CustomCellAlignment: Story = {
     },
   },
 };
+
+// ---------------------------------------------------------------------------
+// Running balance (MPO-250) — a column that is a function of every row before
+// it. The fold runs BEFORE pagination, so page two continues instead of
+// restarting at zero, and its final value paints a footer total.
+// ---------------------------------------------------------------------------
+
+interface Posting extends DataTableData {
+  id: string;
+  date: string;
+  payee: string;
+  /** Cents. Integers here; a real ledger uses the "money" column type. */
+  amount: number;
+  /** Derived by the accumulator — declared so a column can name it. */
+  running?: number;
+}
+
+const registerPostings: Posting[] = [
+  { id: "P-01", date: "2026-01-02", payee: "Opening deposit", amount: 250_000 },
+  { id: "P-02", date: "2026-01-04", payee: "Rent", amount: -180_000 },
+  { id: "P-03", date: "2026-01-05", payee: "Grocers", amount: -8_450 },
+  { id: "P-04", date: "2026-01-07", payee: "Payroll", amount: 412_300 },
+  { id: "P-05", date: "2026-01-09", payee: "Utilities", amount: -14_600 },
+  { id: "P-06", date: "2026-01-11", payee: "Coffee roaster", amount: -1_875 },
+  { id: "P-07", date: "2026-01-14", payee: "Refund", amount: 3_200 },
+  { id: "P-08", date: "2026-01-16", payee: "Insurance", amount: -62_000 },
+  { id: "P-09", date: "2026-01-19", payee: "Consulting", amount: 150_000 },
+  { id: "P-10", date: "2026-01-21", payee: "Hardware", amount: -47_990 },
+  { id: "P-11", date: "2026-01-24", payee: "Payroll", amount: 412_300 },
+  { id: "P-12", date: "2026-01-27", payee: "Taxes", amount: -305_000 },
+];
+
+const cents = (value: number | undefined) =>
+  value == null ? "" : formatCurrency(value / 100, { symbol: "$", fractionDigits: "auto" });
+
+/**
+ * The fold. A module constant, not an inline literal — the table refolds
+ * whenever this identity changes.
+ */
+const registerBalance: 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,
+};
+
+/** Reads the fold's end value off the table state — the total row. */
+const RegisterTotal = () => {
+  const context = useDataTableState();
+  return <Text fontWeight="700">{cents(context?.computed.foldTotal as number | undefined)}</Text>;
+};
+
+const registerColumns: DataTableColumn<Posting>[] = [
+  { id: "date", accessorKey: "date", header: "Date", width: 120 },
+  { id: "payee", accessorKey: "payee", header: "Payee", sortable: true },
+  {
+    id: "amount",
+    accessorKey: "amount",
+    header: "Amount",
+    align: "right",
+    cell: (info) => <Text>{cents(info.getValue() as number)}</Text>,
+    footer: () => <Text fontWeight="700">Total</Text>,
+  },
+  {
+    id: "running",
+    accessorKey: "running",
+    header: "Balance",
+    align: "right",
+    // Not sortable on purpose: sorting a fold column reorders it WITHOUT
+    // refolding, so the figures stop reading down the column as a
+    // progression. The contract is on RowAccumulator.
+    sortable: false,
+    cell: (info) => <Text fontWeight="600">{cents(info.getValue() as number)}</Text>,
+    footer: () => <RegisterTotal />,
+  },
+];
+
+export const RunningBalance: Story = {
+  render: () => (
+    <DataTable
+      data={registerPostings}
+      columns={registerColumns as DataTableColumn<Record<string, any>>[]}
+      rowAccumulator={registerBalance as RowAccumulator<Record<string, any>>}
+      layout="table"
+      columnLayout="auto"
+      enableFiltering={false}
+      enableGlobalSearch={false}
+      initialState={{ pagination: { pageIndex: 0, pageSize: 5 } }}
+      aria-label="Account register with a running balance"
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A running balance is a FOLD over the rows in a total order, so it has to be computed before the table paginates. Page through this table: the Balance column continues onto page two rather than restarting, because `rowAccumulator` runs once over the whole row set before the row model. Its `total` is read once at the end and painted in the footer through `useDataTableState().computed.foldTotal`. Sorting on Payee reorders rows for display and does NOT refold — the balance stays attached to its own row.",
+      },
+    },
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Money column (MPO-252) — a Currency field is a decimal STRING. It sorts
+// numerically, filters with the numeric operators, formats from the ROW's own
+// currency, and totals per currency because two currencies never convert.
+// ---------------------------------------------------------------------------
+
+interface Charge extends DataTableData {
+  id: string;
+  vendor: string;
+  amount: string;
+  currency: string;
+}
+
+const charges: Charge[] = [
+  { id: "C-1", vendor: "Coffee roaster", amount: "9.00", currency: "USD" },
+  { id: "C-2", vendor: "Bookshop", amount: "10.00", currency: "USD" },
+  { id: "C-3", vendor: "Chai stall", amount: "250.75", currency: "INR" },
+  { id: "C-4", vendor: "Refund", amount: "-455.87", currency: "USD" },
+  { id: "C-5", vendor: "Hosting", amount: "1200.00", currency: "INR" },
+  { id: "C-6", vendor: "Domain", amount: "9.99", currency: "USD" },
+];
+
+/** One figure per currency — the mixed-currency rule, rendered. */
+const ChargeTotals = () => {
+  const totals = sumMoneyByCurrency(
+    charges,
+    (row) => row.amount,
+    (row) => row.currency,
+  );
+  return (
+    <YStack>
+      {Object.entries(totals).map(([code, total]) => (
+        <Text key={code} fontWeight="700">
+          {formatMoney(total, code)}
+        </Text>
+      ))}
+    </YStack>
+  );
+};
+
+const chargeColumns: DataTableColumn<Charge>[] = [
+  { id: "vendor", accessorKey: "vendor", header: "Vendor" },
+  { id: "currency", accessorKey: "currency", header: "Currency" },
+  {
+    id: "amount",
+    accessorKey: "amount",
+    header: "Amount",
+    field: "money",
+    // Safe now: the money type carries an exact decimal comparator, so
+    // "9.00" sorts BELOW "10.00". As a "text" column this was silently wrong.
+    sortable: true,
+    filterable: true,
+    fieldProps: { currencyField: "currency" },
+    footer: () => <ChargeTotals />,
+  },
+];
+
+export const MoneyColumn: Story = {
+  render: () => (
+    <DataTable
+      data={charges}
+      columns={chargeColumns as DataTableColumn<Record<string, any>>[]}
+      layout="table"
+      columnLayout="auto"
+      enablePagination={false}
+      readOnly
+      aria-label="Charges with a money column"
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`field: "money"` types a column as a decimal STRING rather than as text. Sort on Amount: `9.00` orders below `10.00`, which the text fallback got backwards in silence. The column filter offers `is less than` / `is greater than` / `between` instead of `contains`. Each row formats in its OWN currency (`fieldProps.currencyField`), and the footer totals PER currency — two currencies are two figures and neither converts, because there is no rate in the table.',
+      },
+    },
+  },
+};

package/src/components/DataTable/DataTableCardControls.tsx

@@ -89,7 +89,6 @@ export function DataTableCardControls({
           <DropdownMenu.Trigger asChild>
             <Button
               size={knobProps.sizeToken}
-              variant="outlined"
               icon={<CaretUpDownIcon size={chrome.iconPx} />}
               aria-label={t("Sort rows")}
               disabled={disabled}
@@ -134,18 +133,17 @@ export function DataTableCardControls({
           </DropdownMenu.Content>
         </DropdownMenu>
       )}
-      {enableFiltering &&
-        availableColumns.length > 0 && (
-          // DataTableFilters (chrome) has no disabled API — the wrapper is the
-          // LC-40 carrier and interaction gate for the disabled table.
-          <View
-            {...(disabled
-              ? { ...disabledState.chromeKnobProps, pointerEvents: "none" as const }
-              : {})}
-          >
-            <DataTableFilters compact availableColumns={availableColumns} />
-          </View>
-        )}
+      {enableFiltering && availableColumns.length > 0 && (
+        // DataTableFilters (chrome) has no disabled API — the wrapper is the
+        // LC-40 carrier and interaction gate for the disabled table.
+        <View
+          {...(disabled
+            ? { ...disabledState.chromeKnobProps, pointerEvents: "none" as const }
+            : {})}
+        >
+          <DataTableFilters compact availableColumns={availableColumns} />
+        </View>
+      )}
     </XStack>
   );
 }

package/src/components/DataTable/DataTableMobileCards.tsx

@@ -5,14 +5,18 @@
  * resolved layout is "cards" (below the `$sm` breakpoint with
  * layout="auto", or forced via layout="cards").
  *
- * Card anatomy (knobs system): `surface` + `cardSurface` fragments own
- * the card frame; the first visible column renders as the card title in
- * the header row (with selection checkbox / row number / delete), and
- * the remaining visible columns render as label/value rows. Column
- * visibility and order from table state apply unchanged — cells come
- * from `row.getVisibleCells()`. Values render through the same cell
- * renderers as the grid, inside `TableCellContext` so fields stay
- * chromeless (useIsInTableCell).
+ * Card anatomy: the first visible column is the card title in the header
+ * row (with selection checkbox / row number / delete). The remaining
+ * visible columns are NOT a stack of label/value rows any more — see
+ * `classifyCardField`. Column visibility and order from table state apply
+ * unchanged — cells come from `row.getVisibleCells()`. Values render
+ * through the same cell renderers as the grid, inside `TableCellContext`
+ * so fields stay chromeless (useIsInTableCell).
+ *
+ * The card is FLAT: no border, no elevation. A card list is drawn inside
+ * a panel that already has its own frame, and an outlined, shadowed card
+ * inside it reads as a box inside a box. The `cardSurface` fill and the
+ * gap between cards are what separate one row from the next.
  */
 
 import { TrashIcon } from "@phosphor-icons/react";
@@ -21,10 +25,10 @@ import { Button, Checkbox } from "@multiplatform.one/forms";
 import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
 import type React from "react";
 import { useCallback } from "react";
-import { Text, View, XStack } from "tamagui";
+import { Text, View, VisuallyHidden, XStack } from "tamagui";
 import { useTranslation } from "react-i18next";
 import { TableCellContext } from "@multiplatform.one/table-primitives";
-import type { DataTableColumn } from "../../types";
+import type { DataTableColumn, DataTableField } from "../../types";
 import { withInterp } from "../../utils/withInterp";
 import { rowIntentProps } from "./dataTableChrome";
 
@@ -34,13 +38,74 @@ import { rowIntentProps } from "./dataTableChrome";
  * header is a render function or a bare glyph (the liked heart) — without
  * it a card field row would print the raw column id (`_liked_by`).
  */
-function getColumnLabel(cell: any): string {
+export function getColumnLabel(cell: any): string {
   const columnDef = cell.column.columnDef as DataTableColumn;
   const metaLabel = columnDef.meta?.label;
   if (typeof metaLabel === "string" && metaLabel) return metaLabel;
   return typeof columnDef.header === "string" ? columnDef.header : columnDef.id || cell.column.id;
 }
 
+/** Fields that draw their own control, which names itself and needs a target. */
+const selfNamingFields = new Set<DataTableField>([
+  "checkbox",
+  "switch",
+  "rating",
+  "progress",
+  "image",
+  "signature",
+  "fileupload",
+  "colorpicker",
+  "barcode",
+  "geolocation",
+]);
+
+/** Column ids whose value is a state badge. A badge names itself. */
+const indicatorIds = new Set(["status", "priority", "workflow_state", "state"]);
+
+const dateLike = /^\d{4}-\d{2}-\d{2}([T ]|$)|^\d{1,2}\/\d{1,2}\/\d{2,4}$/;
+const numberLike = /^[+\-−]?[\d,\s]*\d(\.\d+)?%?$/;
+
+export type CardFieldKind = "skip" | "control" | "bare" | "figure";
+
+/**
+ * Whether a card field prints the column's name, and where it goes.
+ *
+ * A card is not the grid with its header repeated down the page. In the
+ * grid the header is written ONCE for a whole column of values; on a card
+ * it is written once per value, so a 12-column table prints 12 labels per
+ * record. That is what a label costs here, and most labels do not earn it.
+ *
+ *   skip     the raw value is absent. A field with nothing in it is not a
+ *            fact — "Rejected —" spends a row saying nothing.
+ *   control  a button, a switch, a rating. The control names itself and
+ *            needs its own tap target, so it keeps a row and takes no label.
+ *   bare     a string that is neither a number nor a date. "DIVIDEND
+ *            CREDIT" and "Income:Dividends" say what they are; "Payee" and
+ *            "Account" in front of them are the header printed twice. The
+ *            name is kept for assistive tech via VisuallyHidden, which
+ *            costs no layout.
+ *   figure   a number, a date, a boolean. "1,204" alone cannot be read, so
+ *            these DO keep their label — inline beside the figure, not in a
+ *            40%-wide column of its own.
+ */
+export function classifyCardField(cell: any): CardFieldKind {
+  const def = cell.column.columnDef as DataTableColumn;
+  const id = String(cell.column.id ?? "");
+  const role = def.meta?.role;
+  if (role === "hidden" || role === "skip") return "skip";
+  if (role === "actions" || id.startsWith("_") || (def.field && selfNamingFields.has(def.field))) {
+    return "control";
+  }
+  const raw = typeof cell.getValue === "function" ? cell.getValue() : undefined;
+  if (raw == null || (typeof raw === "string" && raw.trim() === "")) return "skip";
+  if (role === "indicator" || indicatorIds.has(id)) return "bare";
+  if (typeof raw === "string") {
+    const value = raw.trim();
+    return numberLike.test(value) || dateLike.test(value) ? "figure" : "bare";
+  }
+  return "figure";
+}
+
 export interface DataTableMobileCardsProps<TData> {
   tableRows: any[];
   enableRowSelection?: boolean;
@@ -98,6 +163,15 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
   const { knobProps } = useResolvedKnobs({ component: "DataTable", compact });
   const tableZebraOn = knobProps.tableZebra === "on";
 
+  const renderCell = useCallback(
+    (cell: any, index: number, rowData: TData) => (
+      <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
+        {renderCellContent(cell, index, rowData)}
+      </TableCellContext.Provider>
+    ),
+    [renderCellContent],
+  );
+
   const renderMobileCard = useCallback(
     (row: any, index: number) => {
       const rowData = row.original as TData;
@@ -105,14 +179,22 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
       const [titleCell, ...detailCells] = visibleCells;
       const showDelete = showDeleteRow && !readOnly;
 
+      const bare: any[] = [];
+      const figures: any[] = [];
+      const controls: any[] = [];
+      for (const cell of detailCells) {
+        const kind = classifyCardField(cell);
+        if (kind === "bare") bare.push(cell);
+        else if (kind === "figure") figures.push(cell);
+        else if (kind === "control") controls.push(cell);
+      }
+      const hasBody = bare.length > 0 || figures.length > 0 || controls.length > 0;
+
       return (
         <View
           key={`${row.id}-${index}`}
           testID="data-table-card"
-          {...knobProps.surface}
           {...knobProps.cardSurface}
-          elevation={knobProps.elevation}
-          borderColor="$color6"
           {...(tableZebraOn && index % 2 === 1 ? { backgroundColor: "$color2" } : {})}
           {...({
             "data-table-zebra": tableZebraOn ? (index % 2 === 0 ? "even" : "odd") : "off",
@@ -124,7 +206,7 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
           <XStack
             alignItems="center"
             gap="$2"
-            {...(detailCells.length > 0
+            {...(hasBody
               ? {
                   paddingBottom: "$2",
                   marginBottom: "$2",
@@ -156,11 +238,10 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
                 flex={1}
                 minWidth={0}
                 aria-label={getColumnLabel(titleCell)}
+                accessibilityLabel={getColumnLabel(titleCell)}
                 {...({ "data-card-slot": "title" } as any)}
               >
-                <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
-                  {renderCellContent(titleCell, index, rowData)}
-                </TableCellContext.Provider>
+                {renderCell(titleCell, index, rowData)}
               </View>
             ) : (
               <View flex={1} />
@@ -185,29 +266,71 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
             )}
           </XStack>
 
-          {/* Field rows: remaining visible columns as label/value pairs */}
-          {detailCells.map((cell: any) => (
-            <View
-              key={cell.id}
-              flexDirection="row"
+          {/* Self-naming values, wrapped into one flow. No printed labels:
+              the name goes to assistive tech only, at no layout cost. */}
+          {bare.length > 0 ? (
+            <XStack
+              flexWrap="wrap"
               alignItems="center"
-              paddingVertical="$1.5"
               gap="$2"
+              {...({ "data-card-slot": "meta" } as any)}
             >
-              <Text
-                fontSize={knobProps.sizeToken}
-                color="$color10"
-                fontWeight="500"
-                width="40%"
-                flexShrink={0}
-              >
-                {getColumnLabel(cell)}
-              </Text>
-              <View flex={1} minWidth={0}>
-                <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
-                  {renderCellContent(cell, index, rowData)}
-                </TableCellContext.Provider>
-              </View>
+              {bare.map((cell: any, i: number) => (
+                <XStack key={cell.id} alignItems="center" gap="$2" flexShrink={1} minWidth={0}>
+                  <VisuallyHidden>{`${getColumnLabel(cell)}: `}</VisuallyHidden>
+                  <View flexShrink={1} minWidth={0}>
+                    {renderCell(cell, index, rowData)}
+                  </View>
+                  {/* The separator TRAILS its value, so a line that wraps
+                      starts with content instead of a stray dot. */}
+                  {i < bare.length - 1 ? (
+                    <Text
+                      fontSize={knobProps.sizeToken}
+                      color="$color8"
+                      aria-hidden
+                      accessibilityElementsHidden
+                      importantForAccessibility="no-hide-descendants"
+                    >
+                      ·
+                    </Text>
+                  ) : null}
+                </XStack>
+              ))}
+            </XStack>
+          ) : null}
+
+          {/* Figures keep their name, inline beside the value. */}
+          {figures.length > 0 ? (
+            <XStack
+              flexWrap="wrap"
+              alignItems="center"
+              gap="$3"
+              paddingTop={bare.length > 0 ? "$1.5" : 0}
+              {...({ "data-card-slot": "figure" } as any)}
+            >
+              {figures.map((cell: any) => (
+                <XStack key={cell.id} alignItems="center" gap="$1.5" flexShrink={1} minWidth={0}>
+                  <Text fontSize={knobProps.sizeToken} color="$color10" fontWeight="500">
+                    {getColumnLabel(cell)}
+                  </Text>
+                  <View flexShrink={1} minWidth={0}>
+                    {renderCell(cell, index, rowData)}
+                  </View>
+                </XStack>
+              ))}
+            </XStack>
+          ) : null}
+
+          {/* Controls keep a row of their own — they are tap targets. */}
+          {controls.map((cell: any) => (
+            <View
+              key={cell.id}
+              paddingTop="$2"
+              minWidth={0}
+              {...({ "data-card-slot": "control" } as any)}
+            >
+              <VisuallyHidden>{`${getColumnLabel(cell)}: `}</VisuallyHidden>
+              {renderCell(cell, index, rowData)}
             </View>
           ))}
         </View>
@@ -221,7 +344,7 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
       disabled,
       dataLength,
       minRows,
-      renderCellContent,
+      renderCell,
       onDeleteRow,
       compact,
       knobProps,

package/src/components/DataTable/DataTableRoot.tsx

@@ -62,6 +62,7 @@ import { DataTableDocumentList } from "./DataTableDocumentList";
 import { DataTableVirtualized } from "./DataTableVirtualized";
 import { dataTableChrome, resolveDataTableIntent, rowIntentProps } from "./dataTableChrome";
 import { tableCellKeyboardProps, tableRowStateProps } from "./rowStateChrome";
+import { warnColumnWidthIgnored } from "../../shared/devWarn";
 import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign";
 import { mapFieldToFilterType } from "../../utils/filterFields";
 import { INFINITE_TRIGGER_ROWS } from "../../utils/paginationDefaults";
@@ -125,6 +126,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   pageSizeOptions,
   paginationMode = "pages",
   loadPage,
+  rowAccumulator,
   enableColumnVisibility = true,
   enableColumnOrdering = false,
   enableColumnResizing = false,
@@ -176,6 +178,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   "aria-describedby": ariaDescribedBy,
   ...props
 }: DataTableRootProps<TData>) {
+  warnColumnWidthIgnored({ columnLayout, enableColumnResizing, columns });
   const { t } = useTranslation();
   const { sm } = useMedia();
   // Resolved responsive layout: cards below `$sm` (W11 compact class) unless
@@ -224,6 +227,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
     enablePagination,
     paginationMode,
     loadPage,
+    rowAccumulator,
     enableColumnVisibility,
     enableColumnOrdering,
     enableColumnResizing,
@@ -1670,22 +1674,21 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                           {sortDirection === "asc" && (
                                             <CaretDownIcon
                                               size={chrome.iconPx}
-                                              color={
-                                                sortDirection ? "var(--color10)" : "var(--color8)"
-                                              }
+                                              color="var(--color11)"
                                             />
                                           )}
                                           {sortDirection === "desc" && (
                                             <CaretDownIcon
                                               size={chrome.iconPx}
-                                              color={
-                                                sortDirection ? "var(--color10)" : "var(--color8)"
-                                              }
+                                              color="var(--color11)"
                                               style={{ transform: "rotate(180deg)" }}
                                             />
                                           )}
                                           {sortDirection === false && (
-                                            <CaretUpDownIcon size={chrome.iconPx} color="$color8" />
+                                            <CaretUpDownIcon
+                                              size={chrome.iconPx}
+                                              color="var(--color11)"
+                                            />
                                           )}
                                         </View>
                                       </Tooltip>
@@ -2082,13 +2085,36 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                     <Table.Foot>
                       {footerGroups.map((footerGroup: any) => (
                         <Table.Row key={footerGroup.id}>
-                          {footerGroup.headers.map((header: any) => (
-                            <Table.Cell key={header.id}>
-                              {header.isPlaceholder
-                                ? null
-                                : flexRender(header.column.columnDef.footer, header.getContext())}
-                            </Table.Cell>
-                          ))}
+                          {footerGroup.headers.map((header: any) => {
+                            const columnAlign = resolveColumnAlign({
+                              ...(header.column.columnDef as DataTableColumn),
+                              id: header.column.id,
+                            });
+                            return (
+                              <Table.Cell
+                                key={header.id}
+                                justifyContent={alignToFlex(columnAlign)}
+                                data-align={columnAlign}
+                              >
+                                {header.isPlaceholder ? null : (
+                                  <View
+                                    width="100%"
+                                    minWidth={0}
+                                    flexDirection="row"
+                                    alignItems="center"
+                                    justifyContent={alignToFlex(columnAlign)}
+                                    data-cell-align={columnAlign}
+                                    style={isWeb ? { textAlign: columnAlign } : undefined}
+                                  >
+                                    {flexRender(
+                                      header.column.columnDef.footer,
+                                      header.getContext(),
+                                    )}
+                                  </View>
+                                )}
+                              </Table.Cell>
+                            );
+                          })}
                         </Table.Row>
                       ))}
                     </Table.Foot>

package/src/components/DataTable/DataTableStateContext.ts

@@ -62,6 +62,13 @@ export interface DataTableStateContextValue<TData = any> {
     totalRows: number;
     hasActiveFilters: boolean;
     activeFilterCount: number;
+    /**
+     * The row accumulator's `total(finalAccumulator, rowCount)` — the fold
+     * read once at the end (MPO-250). A column's TanStack `footer` renderer
+     * reads it from here to paint a total row; the table already renders a
+     * footer whenever any column defines one.
+     */
+    foldTotal?: unknown;
     [key: string]: any;
   };
 }