@multiplatform.one/table 7.34.4 → 7.36.0

package/src/components/ChildTable/childTable.zebra.spec.tsx

@@ -71,7 +71,7 @@ function native(tableZebra: "on" | "off") {
 }
 
 describe("ChildTable tableZebra (K4)", () => {
-  it("web: off by default, odd rows take $color2 when on", () => {
+  it("web: off by default, odd rows take $color3 when on", () => {
     const off = web("off");
     expect(off.map((row) => row.getAttribute("data-table-zebra"))).toEqual([
       "off",
@@ -88,7 +88,7 @@ describe("ChildTable tableZebra (K4)", () => {
       "even",
       "odd",
     ]);
-    expect(on.map(fill)).toEqual([[], ["_bg-color2"], [], ["_bg-color2"]]);
+    expect(on.map(fill)).toEqual([[], ["_bg-color3"], [], ["_bg-color3"]]);
   });
 
   it("native: stripes the same rows as web", () => {
@@ -108,6 +108,6 @@ describe("ChildTable tableZebra (K4)", () => {
       "even",
       "odd",
     ]);
-    expect(on.map(fill)).toEqual([[], ["_bg-color2"], [], ["_bg-color2"]]);
+    expect(on.map(fill)).toEqual([[], ["_bg-color3"], [], ["_bg-color3"]]);
   });
 });

package/src/components/ChildTable/index.tsx

@@ -1,7 +1,8 @@
 import { useCallback, type ReactNode } from "react";
 import { renumberIdx } from "@multiplatform.one/components";
 import { FieldLayout, useFormField, type AnyFormApi } from "@multiplatform.one/forms";
-import { useProps, YStack } from "tamagui";
+import { Surface } from "@multiplatform.one/theme";
+import { useProps, YStack, type SizeTokens } from "tamagui";
 import { TableInput } from "../TableInput";
 import type { ChildCellHidden } from "../TableInput/shared";
 import type { DataTableColumn, DataTableData } from "../../types";
@@ -17,7 +18,8 @@ export type ChildTableProps<TRow extends DataTableData = DataTableData> = {
   disabled?: boolean;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
+  /** Control size token for the field and every cell editor (`$3` for a tighter grid). */
+  size?: SizeTokens;
   minRows?: number;
   maxRows?: number;
   showRowNumbers?: boolean;
@@ -82,7 +84,7 @@ export function ChildTable<TRow extends DataTableData = DataTableData>(
     disabled,
     readOnly,
     skeleton,
-    compact,
+    size,
     minRows,
     maxRows,
     showRowNumbers = true,
@@ -99,7 +101,7 @@ export function ChildTable<TRow extends DataTableData = DataTableData>(
     isCellHidden,
   } = useProps(props);
 
-  const { knobProps, id, resolvedForm } = useFormField({ form, id: idProp, compact });
+  const { knobProps, id, resolvedForm } = useFormField({ form, id: idProp, size });
   const formBound = !!resolvedForm && !!name;
   const hasLayout = label || error || helperText || required;
   const enableReorder = enableReorderProp ?? !(readOnly || disabled);
@@ -119,28 +121,29 @@ export function ChildTable<TRow extends DataTableData = DataTableData>(
   const Input = TableInput<TRow>;
 
   const table = (
-    <Input
-      name={name}
-      form={resolvedForm}
-      validators={validators}
-      required={required}
-      skeleton={skeleton}
-      data={value ?? []}
-      onChange={emitChange}
-      columns={columns ?? []}
-      defaultRow={defaultRow}
-      readOnly={readOnly || disabled}
-      minRows={minRows}
-      maxRows={maxRows}
-      showRowNumbers={showRowNumbers}
-      showAddRow={showAddRow && !readOnly && !disabled}
-      showDeleteRow={showDeleteRow && !readOnly && !disabled}
-      compact={compact}
-      enableReorder={enableReorder && !readOnly && !disabled}
-      rowDetail={rowDetail}
-      detailColumns={detailColumns}
-      isCellHidden={isCellHidden}
-    />
+    <Surface size={size}>
+      <Input
+        name={name}
+        form={resolvedForm}
+        validators={validators}
+        required={required}
+        skeleton={skeleton}
+        data={value ?? []}
+        onChange={emitChange}
+        columns={columns ?? []}
+        defaultRow={defaultRow}
+        readOnly={readOnly || disabled}
+        minRows={minRows}
+        maxRows={maxRows}
+        showRowNumbers={showRowNumbers}
+        showAddRow={showAddRow && !readOnly && !disabled}
+        showDeleteRow={showDeleteRow && !readOnly && !disabled}
+        enableReorder={enableReorder && !readOnly && !disabled}
+        rowDetail={rowDetail}
+        detailColumns={detailColumns}
+        isCellHidden={isCellHidden}
+      />
+    </Surface>
   );
 
   if (!hasLayout && !formBound) return table;

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

@@ -143,7 +143,7 @@ describe("DataTable", () => {
 
     it("should apply different sizes", () => {
       const { container } = renderWithProviders(
-        <DataTable data={sampleData} columns={columns} size="sm" onStateChange={vi.fn()} />,
+        <DataTable data={sampleData} columns={columns} size="$3" onStateChange={vi.fn()} />,
       );
 
       // In test env sm===false → mobile card view renders (no <table> element)
@@ -152,7 +152,7 @@ describe("DataTable", () => {
 
     it("should apply different sizes (large)", () => {
       const { container } = renderWithProviders(
-        <DataTable data={sampleData} columns={columns} size="lg" onStateChange={vi.fn()} />,
+        <DataTable data={sampleData} columns={columns} size="$5" onStateChange={vi.fn()} />,
       );
 
       // In test env sm===false → mobile card view renders (no <table> element)
@@ -930,3 +930,50 @@ describe("DataTable", () => {
     });
   });
 });
+
+describe("DataTable size token (WP-c2)", () => {
+  type Person = { id: number; firstName: string };
+  const people: Person[] = [
+    { id: 1, firstName: "John" },
+    { id: 2, firstName: "Jane" },
+  ];
+  const editable: DataTableColumn<Person>[] = [
+    { accessorKey: "firstName", header: "First Name", field: "input" },
+    { accessorKey: "id", header: "ID" },
+  ];
+
+  function renderSized(size?: "$3" | "$5") {
+    return renderWithProviders(
+      <DataTable
+        data={people}
+        columns={editable}
+        layout="table"
+        size={size}
+        enableGlobalSearch
+        enableFiltering
+        onDataChange={vi.fn()}
+      />,
+    );
+  }
+
+  it('size="$3" renders the toolbar controls at $3 and cell controls one key below', () => {
+    const { container } = renderSized("$3");
+    const search = screen.getByLabelText("Search table data").closest("[data-size-token]");
+    expect(search?.getAttribute("data-size-token")).toBe("$3");
+    const cellBoxes = container.querySelectorAll(
+      "[role='cell'] [data-ring-target='box'][data-size-token]",
+    );
+    expect(cellBoxes.length).toBeGreaterThan(0);
+    for (const box of Array.from(cellBoxes)) {
+      expect(box.getAttribute("data-size-token")).toBe("$2");
+    }
+  });
+
+  it("a default table keeps the toolbar at the ambient token and cells at $3", () => {
+    const { container } = renderSized();
+    const search = screen.getByLabelText("Search table data").closest("[data-size-token]");
+    expect(search?.getAttribute("data-size-token")).toBe("$true");
+    const box = container.querySelector("[role='cell'] [data-ring-target='box'][data-size-token]");
+    expect(box?.getAttribute("data-size-token")).toBe("$3");
+  });
+});

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

@@ -325,8 +325,8 @@ const AdvancedTableStory = () => {
           renderFilters={(props) => (
             <DataTableFilters {...props} availableColumns={columnsWithCounts} maxFilters={5} />
           )}
-          renderPagination={(props) => <DataTablePagination {...props} compact />}
-          size="md"
+          renderPagination={(props) => <DataTablePagination {...props} size="$3" />}
+          size="$true"
           aria-label="User management table"
         />
       </YStack>
@@ -347,7 +347,7 @@ const SimpleTableStory = () => {
         enableSorting={true}
         enablePagination={true}
         enableGlobalSearch={true}
-        size="sm"
+        size="$3"
       />
     </View>
   );
@@ -549,7 +549,7 @@ export const Compact: Story = {
   args: {
     data: sampleData,
     columns: basicColumns as DataTableColumn<Record<string, any>>[],
-    size: "sm",
+    size: "$3",
   },
 };
 
@@ -557,7 +557,7 @@ export const Large: Story = {
   args: {
     data: sampleData,
     columns: basicColumns as DataTableColumn<Record<string, any>>[],
-    size: "lg",
+    size: "$5",
   },
 };
 

package/src/components/DataTable/DataTableCardControls.tsx

@@ -34,7 +34,6 @@ export interface DataTableCardControlsProps {
     type: DataTableColumnType;
     options?: FacetedFilterOption[];
   }>;
-  compact?: boolean;
   /** Table-level disabled state (UX-011): controls render inert + LC-40 visible. */
   disabled?: boolean;
 }
@@ -46,12 +45,11 @@ function getColumnLabel(column: any): string {
 
 export function DataTableCardSortControl({
   table,
-  compact = false,
   disabled = false,
   contained = false,
-}: Pick<DataTableCardControlsProps, "table" | "compact" | "disabled"> & { contained?: boolean }) {
+}: Pick<DataTableCardControlsProps, "table" | "disabled"> & { contained?: boolean }) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ component: "DataTable", compact });
+  const { knobProps } = useResolvedKnobs({ component: "DataTable" });
   const chrome = dataTableChrome(String(knobProps.sizeToken));
   const [sortMenuOpen, setSortMenuOpen] = useState(false);
   const sortableColumns = table.getVisibleLeafColumns().filter((col: any) => col.getCanSort());
@@ -141,11 +139,10 @@ export function DataTableCardControls({
   enableSorting = false,
   enableFiltering = false,
   availableColumns = [],
-  compact = false,
   disabled = false,
 }: DataTableCardControlsProps) {
   const { t } = useTranslation();
-  const { disabledState } = useResolvedKnobs({ component: "DataTable", compact });
+  const { disabledState } = useResolvedKnobs({ component: "DataTable" });
   if (!enableSorting && !enableFiltering) return null;
   return (
     <XStack
@@ -156,9 +153,7 @@ export function DataTableCardControls({
       role="toolbar"
       aria-label={t("Card list controls")}
     >
-      {enableSorting && (
-        <DataTableCardSortControl table={table} compact={compact} disabled={disabled} />
-      )}
+      {enableSorting && <DataTableCardSortControl table={table} disabled={disabled} />}
       {enableFiltering && availableColumns.length > 0 && (
         // DataTableFilters (chrome) has no disabled API — the wrapper is the
         // LC-40 carrier and interaction gate for the disabled table.
@@ -167,7 +162,7 @@ export function DataTableCardControls({
             ? { ...disabledState.chromeKnobProps, pointerEvents: "none" as const }
             : {})}
         >
-          <DataTableFilters compact availableColumns={availableColumns} />
+          <DataTableFilters size="$3" availableColumns={availableColumns} />
         </View>
       )}
     </XStack>

package/src/components/DataTable/DataTableContext.ts

@@ -1,16 +1,14 @@
 /**
  * DataTableContext - styled context for DataTable compound component.
  *
- * Shares variant props (size, compact) across the compound tree
- * so sub-components render with consistent sizing without prop drilling.
+ * Shares the table's size token across the compound tree so sub-components
+ * render with consistent sizing without prop drilling.
  */
 
-import { createStyledContext } from "tamagui";
+import { createStyledContext, type SizeTokens } from "tamagui";
 
 export const DataTableContext = createStyledContext<{
-  size: "sm" | "md" | "lg";
-  compact: boolean;
+  size: SizeTokens;
 }>({
-  size: "md",
-  compact: false,
+  size: "$true",
 });

package/src/components/DataTable/DataTableDocumentList.tsx

@@ -1,19 +1,24 @@
 /**
  * DataTableDocumentList — subject-led document rows (desk List view).
  *
- * One horizontal row per document: checkbox | title + stacked meta | trailing
- * indicators | actions. No key-value labels, no card chrome, no grid headers,
+ * One horizontal row per document: checkbox | title over one wrapping meta
+ * line | fixed-width numeric/date columns (ListRowMeta) | indicators | actions.
+ * A record is one 48–56 px row: metas never stack one line per column. No key-value labels, no card chrome, no grid headers,
  * no wrapping into a column grid (Polaris Index / Frappe list). Stacked-group
  * radius (LC-72): first row top corners, last row bottom, interiors square.
+ * In the compact size class the trailing columns, indicators and actions
+ * wrap in one line under the subject so they never narrow the title, and an
+ * empty meta field is left out (FZ-7374).
  * LC-71: selected = fill; keyboard ring rides the row when it is the tab stop.
  */
 
-import { EmptyState } from "@multiplatform.one/components";
+import { EmptyState, ListRowMeta } from "@multiplatform.one/components";
 import { Checkbox } from "@multiplatform.one/forms";
 import {
   getGroupPosition,
   hairline,
   stackRadiusProps,
+  useLayoutSizeClass,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import { TableCellContext } from "@multiplatform.one/table-primitives";
@@ -50,7 +55,6 @@ export interface DataTableDocumentListProps<TData> {
   disabled?: boolean;
   hasActiveFilters: boolean;
   renderCellContent: (cell: any, rowIndex: number, rowData: TData) => React.ReactNode;
-  compact?: boolean;
   selectRowLabel?: (row: any, rowIndex: number) => string;
   getRowPressProps?: (row: any, rowIndex: number, variant?: "row" | "card") => Record<string, any>;
   /** In-flight refetch: do not paint empty-state over a blank body. */
@@ -69,13 +73,13 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
   disabled = false,
   hasActiveFilters,
   renderCellContent,
-  compact = false,
   selectRowLabel,
   getRowPressProps,
   queryInFlight = false,
 }: DataTableDocumentListProps<TData>) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ component: "DataTable", compact });
+  const { knobProps } = useResolvedKnobs({ component: "DataTable" });
+  const compact = useLayoutSizeClass() === "compact";
   const chrome = dataTableChrome(String(knobProps.sizeToken));
   const tableZebraOn = knobProps.tableZebra === "on";
   const rowPad = knobProps.panelPadding.padding;
@@ -87,6 +91,7 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
       const titleCell = pickDocumentListTitleCell(visibleCells);
       const {
         indicators,
+        trailing,
         metas: metaCells,
         actions,
       } = partitionDocumentListCells(visibleCells, titleCell);
@@ -106,7 +111,16 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
       );
       const indicatorCells = indicators.map((cell: any) => slotCell(cell, "indicator"));
       const actionCells = actions.map((cell: any) => slotCell(cell, "actions"));
-      const trailing = [...indicatorCells, ...actionCells];
+      // A compact row drops the fixed column width: the values wrap under
+      // the subject with the indicators and actions.
+      const trailingCells = trailing.map((cell: any) => (
+        <ListRowMeta key={cell.id} width={compact ? undefined : "$10"}>
+          <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
+            {renderCellContent(cell, index, rowData)}
+          </TableCellContext.Provider>
+        </ListRowMeta>
+      ));
+      const compactLine = [...trailingCells, ...indicatorCells, ...actionCells];
       const position = getGroupPosition(index, tableRows.length);
       const corners = stackRadiusProps(position, knobProps.borderRadiusOuter.borderRadius);
       const selected = Boolean(enableRowSelection && row.getIsSelected?.());
@@ -157,7 +171,6 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
                       row: index + 1,
                     }),
                 }}
-                compact={compact}
               />
             )}
             <YStack flex={1} minWidth={0} gap="$1" overflow="hidden">
@@ -170,30 +183,54 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
               ) : (
                 <View flex={1} />
               )}
-              {metas.map((cell: any) => (
-                <View
-                  key={cell.id}
+              {metas.length > 0 ? (
+                <XStack
                   minWidth={0}
+                  flexWrap="wrap"
+                  alignItems="center"
+                  columnGap="$3"
+                  rowGap="$1"
                   opacity={0.7}
                   overflow="hidden"
-                  {...({ "data-list-slot": "meta" } as any)}
+                  {...({ "data-list-slot": "meta-line" } as any)}
                 >
-                  <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
-                    {renderCellContent(cell, index, rowData)}
-                  </TableCellContext.Provider>
-                </View>
-              ))}
-              {compact && trailing.length > 0 ? (
+                  {metas.map((cell: any) => (
+                    <View
+                      key={cell.id}
+                      minWidth={0}
+                      flexShrink={1}
+                      overflow="hidden"
+                      {...({ "data-list-slot": "meta" } as any)}
+                    >
+                      <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
+                        {renderCellContent(cell, index, rowData)}
+                      </TableCellContext.Provider>
+                    </View>
+                  ))}
+                </XStack>
+              ) : null}
+              {compact && compactLine.length > 0 ? (
                 <XStack
                   gap="$2"
                   alignItems="center"
                   flexWrap="wrap"
-                  {...({ "data-list-slot": "trailing" } as any)}
+                  {...({ "data-list-slot": "trailing-line" } as any)}
                 >
-                  {trailing}
+                  {compactLine}
                 </XStack>
               ) : null}
             </YStack>
+            {!compact && trailing.length > 0 ? (
+              <XStack
+                flexShrink={0}
+                gap="$3"
+                alignItems="center"
+                flexWrap="nowrap"
+                {...({ "data-list-slot": "trailing-cluster" } as any)}
+              >
+                {trailingCells}
+              </XStack>
+            ) : null}
             {!compact && indicators.length > 0 ? (
               <XStack flexShrink={0} gap="$2" alignItems="center" flexWrap="nowrap" maxWidth="40%">
                 {indicatorCells}
@@ -220,6 +257,7 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
       t,
       tableRows.length,
       tableZebraOn,
+      compact,
     ],
   );
 
@@ -234,7 +272,7 @@ export function DataTableDocumentList<TData extends Record<string, any>>({
       {tableRows.length === 0 ? (
         queryInFlight ? null : (
           <EmptyState
-            compact
+            size="$3"
             backgroundColor="$color1"
             {...knobProps.borderRadius}
             aria-live="polite"

package/src/components/DataTable/DataTableInfiniteTail.tsx

@@ -48,7 +48,7 @@ export function DataTableInfiniteTail({
           error={infinite.appendError}
           onRetry={infinite.retryAppend}
           errorTitle={t("Couldn't load more rows")}
-          compact
+          size="$3"
         />
       </View>
     );

package/src/components/DataTable/DataTableMobileCards.tsx

@@ -126,7 +126,6 @@ export interface DataTableMobileCardsProps<TData> {
   selectAllChecked?: boolean;
   selectAllIndeterminate?: boolean;
   onToggleSelectAll?: () => void;
-  compact?: boolean;
   /**
    * Accessible name for a row's selection checkbox ("Select row {identity}",
    * built by DataTableRoot so cards and grid share one naming source).
@@ -159,13 +158,12 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
   selectAllChecked = false,
   selectAllIndeterminate = false,
   onToggleSelectAll,
-  compact = false,
   selectRowLabel,
   getRowPressProps,
   queryInFlight = false,
 }: DataTableMobileCardsProps<TData>) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ component: "DataTable", compact });
+  const { knobProps } = useResolvedKnobs({ component: "DataTable" });
   const tableZebraOn = knobProps.tableZebra === "on";
 
   const renderCell = useCallback(
@@ -241,7 +239,6 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
                       row: index + 1,
                     }),
                 }}
-                compact={compact}
               />
             )}
             {titleCell ? (
@@ -258,7 +255,7 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
               <View flex={1} />
             )}
             {showRowNumbers && (
-              <Text fontSize={knobProps.sizeToken} color="$color10" fontWeight="600">
+              <Text fontSize={knobProps.sizeToken} color="$color10">
                 #{index + 1}
               </Text>
             )}
@@ -321,7 +318,7 @@ export function DataTableMobileCards<TData extends Record<string, 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">
+                  <Text fontSize={knobProps.sizeToken} color="$color10">
                     {getColumnLabel(cell)}
                   </Text>
                   <View flexShrink={1} minWidth={0}>
@@ -357,7 +354,6 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
       minRows,
       renderCell,
       onDeleteRow,
-      compact,
       knobProps,
       tableZebraOn,
       t,
@@ -386,7 +382,6 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
             }}
             disabled={disabled}
             checkboxProps={{ "aria-label": t("Select all rows") }}
-            compact={compact}
           />
           <Text fontSize={knobProps.sizeToken} color="$color10">
             {t("Select all")}
@@ -396,7 +391,7 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
       {tableRows.length === 0 ? (
         queryInFlight ? null : (
           <EmptyState
-            compact
+            size="$3"
             backgroundColor="$color1"
             {...knobProps.borderRadius}
             aria-live="polite"