@multiplatform.one/table 7.34.4 → 7.35.0

package/src/components/SimpleTable/columnSizing.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import type { SizeTokens } from "tamagui";
+
+export type SimpleTableSizeToken = SizeTokens & `$${string}`;
+
+export interface SimpleTableColumn {
+  accessorKey: string;
+  header: string;
+  align?: "left" | "center" | "right";
+  type?: "text" | "number";
+  width?: SimpleTableSizeToken | { flex: number };
+  cell?: (value: unknown, row: Record<string, any>, rowIndex: number) => ReactNode;
+}
+
+export function resolveSimpleTableColumns(
+  columns: SimpleTableColumn[],
+  data: Array<Record<string, any>>,
+  viewportWidth: number,
+  tokenValue: (token: SimpleTableSizeToken) => number,
+) {
+  const resolved = columns.map((column) => {
+    const values = data.map((row) => row[column.accessorKey]).filter((value) => value != null);
+    const numeric = column.type
+      ? column.type === "number"
+      : values.length > 0 && values.every((value) => typeof value === "number");
+    const hint = column.width;
+    const minimum = tokenValue(typeof hint === "string" ? hint : numeric ? "$9" : "$14");
+    const requestedFlex = typeof hint === "object" ? hint.flex : numeric || hint ? 0 : 1;
+    const flex = Number.isFinite(requestedFlex) && requestedFlex > 0 ? requestedFlex : 0;
+    return { ...column, align: column.align ?? (numeric ? "right" : "left"), minimum, flex };
+  });
+  const minimumWidth = resolved.reduce((sum, column) => sum + column.minimum, 0);
+  const totalFlex = resolved.reduce((sum, column) => sum + column.flex, 0);
+  const spare = Math.max(0, viewportWidth - minimumWidth);
+  return resolved.map((column) => ({
+    ...column,
+    width: column.minimum + (totalFlex ? (spare * column.flex) / totalFlex : 0),
+  }));
+}

package/src/components/SimpleTable/index.tsx

@@ -17,9 +17,13 @@ import {
   transitionProps,
 } from "@multiplatform.one/theme";
 import { useCallback, useState, type ReactNode } from "react";
+import type { LayoutChangeEvent } from "react-native";
 import { useTranslation } from "react-i18next";
 import type { FontSizeTokens, ViewProps } from "tamagui";
-import { Text, View, isWeb, useMedia } from "tamagui";
+import { Text, View, getTokenValue, isWeb, useMedia } from "tamagui";
+import { resolveSimpleTableColumns, type SimpleTableColumn } from "./columnSizing";
+import { PinnedCell, ScrollFrame } from "./ScrollFrame";
+export type { SimpleTableColumn, SimpleTableSizeToken } from "./columnSizing";
 import { Table, tableZebraFill } from "@multiplatform.one/table-primitives";
 import type { DataTableLayout } from "../../types";
 import { isInteractiveInnerTarget } from "../../utils/rowPress";
@@ -31,18 +35,8 @@ import { withInterp } from "../../utils/withInterp";
 
 type IntentName = "accent" | "error" | "warning" | "success";
 
-export interface SimpleTableColumn {
-  /** Key to access the value from each data object */
-  accessorKey: string;
-  /** Header label to display */
-  header: string;
-  /** Text alignment for the column */
-  align?: "left" | "center" | "right";
-  /** Optional cell renderer. Strings/numbers still pick up table type + align. */
-  cell?: (value: unknown, row: Record<string, any>, rowIndex: number) => ReactNode;
-}
-
 export interface SimpleTableProps extends ViewProps {
+  onLayout?: (event: LayoutChangeEvent) => void;
   /** Array of data objects to render */
   data: Array<Record<string, any>>;
   /** Column configuration */
@@ -164,7 +158,7 @@ function AlignedCellText({
 }
 
 function renderCellContent(
-  col: SimpleTableColumn,
+  col: Omit<SimpleTableColumn, "width">,
   row: Record<string, any>,
   rowIndex: number,
   body: KnobBody,
@@ -194,7 +188,7 @@ function useSimpleTableRowPress({
   disabled,
 }: {
   data: Array<Record<string, any>>;
-  columns: SimpleTableColumn[];
+  columns: Pick<SimpleTableColumn, "accessorKey">[];
   onRowPress?: (row: Record<string, any>, rowIndex: number) => void;
   rowLabel?: (row: Record<string, any>) => string;
   disabled?: boolean;
@@ -332,7 +326,7 @@ function SimpleTableMobileCards({
   const tableZebraOn = knobProps.tableZebra === "on";
   const [titleCol, ...detailCols] = columns;
   const typeSize = knobProps.label.fontSize;
-  const motion = transitionProps(knobProps.transition);
+  const motion = transitionProps(knobProps.motion.control);
 
   if (data.length === 0) {
     return (
@@ -346,7 +340,7 @@ function SimpleTableMobileCards({
             {caption}
           </Text>
         ) : null}
-        <EmptyState compact aria-live="polite" title={t("No data available")} />
+        <EmptyState size="$3" aria-live="polite" title={t("No data available")} />
       </View>
     );
   }
@@ -445,6 +439,7 @@ function SimpleTableMobileCards({
 // ===========================================================================
 
 export interface SimpleTableDesktopProps extends ViewProps {
+  onLayout?: (event: LayoutChangeEvent) => void;
   /** Array of data objects to render */
   data: Array<Record<string, any>>;
   /** Column configuration */
@@ -461,15 +456,21 @@ export interface SimpleTableDesktopProps extends ViewProps {
 /** Desktop table layout using Layer 1 Table primitives. Exported for testing. */
 export function SimpleTableDesktop({
   data,
-  columns,
+  columns: columnDefinitions,
   caption,
   onRowPress,
   rowLabel,
   getRowId,
   disabled,
+  onLayout,
   ...props
 }: SimpleTableDesktopProps) {
   const { knobProps, disabledState } = useResolvedKnobs({ component: "SimpleTable" });
+  const [viewportWidth, setViewportWidth] = useState(0);
+  const columns = resolveSimpleTableColumns(columnDefinitions, data, viewportWidth, (token) =>
+    Number(getTokenValue(token as Parameters<typeof getTokenValue>[0], "size")),
+  );
+  const tableWidth = columns.reduce((sum, column) => sum + column.width, 0);
   const { t } = useTranslation();
   const { rowPressActive, getRowPressProps } = useSimpleTableRowPress({
     data,
@@ -481,116 +482,187 @@ export function SimpleTableDesktop({
   const tableZebraOn = knobProps.tableZebra === "on";
   const ariaLabel = caption ? undefined : props["aria-label"];
   const typeSize = knobProps.label.fontSize;
-  const motion = transitionProps(knobProps.transition);
+  const motion = transitionProps(knobProps.motion.control);
   const pad = cellPad(knobProps.gap.gap);
   const frameBorder = knobProps.surface.borderWidth;
 
   return (
-    <Table
-      {...props}
+    <View
       minWidth={0}
-      {...({
-        overflow: "auto",
-        "data-simple-table-frame": "true",
-        "data-border-width": String(frameBorder),
-        "data-animation": knobProps.transition ? "on" : "none",
-      } as Record<string, unknown>)}
-      {...disabledChrome(Boolean(disabled), disabledState)}
-      aria-label={ariaLabel}
-      {...({ "aria-rowcount": data.length + 1 } as any)}
+      onLayout={(event) => {
+        setViewportWidth(Math.max(0, event.nativeEvent.layout.width - frameBorder * 2));
+        onLayout?.(event);
+      }}
+      {...props}
     >
-      {caption ? (
-        <Table.Caption>
-          <Text {...knobProps.label} color={knobProps.textAccentColor}>
-            {caption}
-          </Text>
-        </Table.Caption>
-      ) : null}
-      <Table.Head borderBottomWidth={frameBorder} borderBottomColor="$borderColor">
-        <Table.Row>
-          {columns.map((col, colIndex) => (
-            <Table.HeaderCell
-              key={col.accessorKey}
-              justifyContent={alignToFlex(col.align)}
-              cellLocation={cellLocationFor(colIndex, columns.length)}
-              data-align={col.align ?? "left"}
-              data-cell-pad={knobProps.gap.gap}
-              borderRadius={0}
-              {...pad}
-            >
-              {/* Block text filling the cell + textAlign: alignment that
-                  works in the real <th> (display:table-cell — flex props
-                  are inert there) and in the flex displayMode alike. */}
-              <Text
-                {...knobProps.label}
-                color={knobProps.textAccentColor}
-                display="block"
-                width="100%"
-                textAlign={col.align ?? "left"}
-                numberOfLines={1}
-                ellipsizeMode="tail"
-                {...(col.align === "right" ? ({ fontVariant: ["tabular-nums"] } as any) : {})}
-              >
-                {col.header}
+      <ScrollFrame>
+        <Table
+          displayMode="flex"
+          width={tableWidth}
+          minWidth={tableWidth}
+          {...({
+            overflow: "visible",
+            "data-simple-table-frame": "true",
+            "data-border-width": String(frameBorder),
+            "data-animation": knobProps.motion.control.transition ? "on" : "none",
+          } as Record<string, unknown>)}
+          {...disabledChrome(Boolean(disabled), disabledState)}
+          aria-label={ariaLabel}
+          {...({ "aria-rowcount": data.length + 1 } as any)}
+        >
+          {caption ? (
+            <Table.Caption>
+              <Text {...knobProps.label} color={knobProps.textAccentColor}>
+                {caption}
               </Text>
-            </Table.HeaderCell>
-          ))}
-        </Table.Row>
-      </Table.Head>
-      <Table.Body {...(rowPressActive ? ({ "data-row-press-scope": "true" } as any) : {})}>
-        {data.length === 0 ? (
-          <Table.Row>
-            <Table.Cell
-              cellWidth="auto"
-              borderRadius={0}
-              {...({ colSpan: Math.max(columns.length, 1) } as any)}
-            >
-              <EmptyState compact aria-live="polite" title={t("No data available")} />
-            </Table.Cell>
-          </Table.Row>
-        ) : (
-          data.map((row, rowIndex) => {
-            const intent = row._intent as IntentName | undefined;
-            const intentProps = intent ? { [intent]: true } : {};
-            const isLast = rowIndex === data.length - 1;
-            const zebraFill =
-              !intent && tableZebraOn && rowIndex % 2 === 1
-                ? { backgroundColor: tableZebraFill(knobProps.surface.backgroundColor) }
-                : {};
-
-            return (
-              <Table.Row
-                key={resolveRowId(row, rowIndex, getRowId)}
-                rowLocation={rowLocationFor(rowIndex, data.length)}
-                {...(disabled ? {} : { hoverStyle: { backgroundColor: "$backgroundHover" } })}
-                {...motion}
-                {...zebraFill}
-                {...intentProps}
-                {...({
-                  "data-table-zebra": tableZebraOn ? (rowIndex % 2 === 0 ? "even" : "odd") : "off",
-                } as any)}
-                {...(getRowPressProps(row, rowIndex) as any)}
-              >
-                {columns.map((col, colIndex) => (
-                  <Table.Cell
+            </Table.Caption>
+          ) : null}
+          <Table.Head borderBottomWidth={frameBorder} borderBottomColor="$borderColor">
+            <Table.Row alignItems="stretch">
+              {columns.map((col, colIndex) => {
+                const cell = (
+                  <Table.HeaderCell
                     key={col.accessorKey}
+                    cellWidth={col.width}
+                    flexShrink={0}
                     justifyContent={alignToFlex(col.align)}
                     cellLocation={cellLocationFor(colIndex, columns.length)}
                     data-align={col.align ?? "left"}
                     data-cell-pad={knobProps.gap.gap}
                     borderRadius={0}
                     {...pad}
-                    {...gridRule(frameBorder, !isLast)}
                   >
-                    {renderCellContent(col, row, rowIndex, knobProps.body, typeSize)}
-                  </Table.Cell>
-                ))}
+                    {/* Block text filling the cell + textAlign: alignment that
+                  works in the real <th> (display:table-cell — flex props
+                  are inert there) and in the flex displayMode alike. */}
+                    <Text
+                      {...knobProps.label}
+                      color={knobProps.textAccentColor}
+                      display="block"
+                      width="100%"
+                      textAlign={col.align ?? "left"}
+                      numberOfLines={1}
+                      ellipsizeMode="tail"
+                      {...(col.align === "right" ? ({ fontVariant: ["tabular-nums"] } as any) : {})}
+                    >
+                      {col.header}
+                    </Text>
+                  </Table.HeaderCell>
+                );
+                return colIndex === 0 ? (
+                  <PinnedCell key={col.accessorKey} width={col.width}>
+                    {cell}
+                  </PinnedCell>
+                ) : (
+                  cell
+                );
+              })}
+            </Table.Row>
+          </Table.Head>
+          <Table.Body
+            overflow="visible"
+            overflowX="visible"
+            overflowY="visible"
+            {...(rowPressActive ? ({ "data-row-press-scope": "true" } as any) : {})}
+          >
+            {data.length === 0 ? (
+              <Table.Row>
+                <Table.Cell
+                  cellWidth="auto"
+                  borderRadius={0}
+                  {...({ colSpan: Math.max(columns.length, 1) } as any)}
+                >
+                  <EmptyState size="$3" aria-live="polite" title={t("No data available")} />
+                </Table.Cell>
               </Table.Row>
-            );
-          })
-        )}
-      </Table.Body>
-    </Table>
+            ) : (
+              data.map((row, rowIndex) => {
+                const intent = row._intent as IntentName | undefined;
+                const intentProps = intent ? { [intent]: true } : {};
+                const isLast = rowIndex === data.length - 1;
+                const zebraFill =
+                  !intent && tableZebraOn && rowIndex % 2 === 1
+                    ? { backgroundColor: tableZebraFill(knobProps.surface.backgroundColor) }
+                    : {};
+
+                return (
+                  <Table.Row
+                    key={resolveRowId(row, rowIndex, getRowId)}
+                    rowLocation={rowLocationFor(rowIndex, data.length)}
+                    alignItems="stretch"
+                    group="simpleTableRow"
+                    backgroundColor={
+                      intent ? "$color3" : (zebraFill.backgroundColor ?? "$background")
+                    }
+                    {...(disabled ? {} : { hoverStyle: { backgroundColor: "$backgroundHover" } })}
+                    {...motion}
+                    {...zebraFill}
+                    {...intentProps}
+                    {...({
+                      "data-table-zebra": tableZebraOn
+                        ? rowIndex % 2 === 0
+                          ? "even"
+                          : "odd"
+                        : "off",
+                    } as any)}
+                    {...(getRowPressProps(row, rowIndex) as any)}
+                  >
+                    {columns.map((col, colIndex) => {
+                      const cell = (
+                        <Table.Cell
+                          key={col.accessorKey}
+                          cellWidth={col.width}
+                          flexShrink={0}
+                          {...(colIndex === 0
+                            ? {
+                                backgroundColor: isWeb
+                                  ? "inherit"
+                                  : intent
+                                    ? "$color3"
+                                    : (zebraFill.backgroundColor ?? "$background"),
+                                ...(!isWeb && !disabled
+                                  ? {
+                                      "$group-simpleTableRow-hover": {
+                                        backgroundColor: "$backgroundHover",
+                                      },
+                                      ...(rowPressActive
+                                        ? {
+                                            "$group-simpleTableRow-press": {
+                                              backgroundColor: "$backgroundPress",
+                                            },
+                                          }
+                                        : {}),
+                                    }
+                                  : {}),
+                              }
+                            : {})}
+                          justifyContent={alignToFlex(col.align)}
+                          cellLocation={cellLocationFor(colIndex, columns.length)}
+                          data-align={col.align ?? "left"}
+                          data-cell-pad={knobProps.gap.gap}
+                          borderRadius={0}
+                          {...pad}
+                          {...gridRule(frameBorder, !isLast)}
+                        >
+                          {renderCellContent(col, row, rowIndex, knobProps.body, typeSize)}
+                        </Table.Cell>
+                      );
+                      return colIndex === 0 ? (
+                        <PinnedCell key={col.accessorKey} width={col.width}>
+                          {cell}
+                        </PinnedCell>
+                      ) : (
+                        cell
+                      );
+                    })}
+                  </Table.Row>
+                );
+              })
+            )}
+          </Table.Body>
+        </Table>
+      </ScrollFrame>
+    </View>
   );
 }
 
@@ -622,7 +694,7 @@ export function SimpleTable({
         {...({
           "data-simple-table-frame": "true",
           "data-border-width": String(knobProps.surface.borderWidth),
-          "data-animation": knobProps.transition ? "on" : "none",
+          "data-animation": knobProps.motion.control.transition ? "on" : "none",
         } as Record<string, unknown>)}
       >
         <SimpleTableMobileCards

package/src/components/SimpleTable/simpleTable.spec.tsx

@@ -15,6 +15,49 @@ import { SimpleTable, SimpleTableDesktop } from "./index";
 import type { SimpleTableColumn } from "./index";
 
 describe("SimpleTable", () => {
+  it("gives numbers narrow, right-aligned columns and text the remaining width", () => {
+    const { container } = renderWithProviders(
+      <SimpleTableDesktop
+        columns={[
+          { accessorKey: "name", header: "Pokemon Name" },
+          { accessorKey: "id", header: "Poke ID" },
+          { accessorKey: "weight", header: "Weight" },
+        ]}
+        data={[{ name: "Pikachu", id: 25, weight: 60 }]}
+      />,
+    );
+    const headers = container.querySelectorAll<HTMLElement>('[role="columnheader"]');
+    expect(headers[1].dataset.align).toBe("right");
+    expect(headers[2].dataset.align).toBe("right");
+    expect(parseFloat(getComputedStyle(headers[0]).width)).toBeGreaterThan(
+      parseFloat(getComputedStyle(headers[1]).width),
+    );
+  });
+
+  it("puts a single semantic table in a horizontal viewport with its first cells pinned", () => {
+    const { container } = renderWithProviders(
+      <SimpleTableDesktop
+        columns={[
+          { accessorKey: "name", header: "Name" },
+          { accessorKey: "id", header: "ID" },
+        ]}
+        data={[{ name: "Pikachu", id: 25 }]}
+      />,
+    );
+    const viewport = container.querySelector('[data-testid="simple-table-scroll"]');
+    expect(viewport).not.toBeNull();
+    expect(getComputedStyle(viewport as Element).overflowX).toBe("auto");
+    expect(container.querySelectorAll("table")).toHaveLength(1);
+    const body = container.querySelector("tbody") as Element;
+    expect(getComputedStyle(body).overflowX).toBe("visible");
+    expect(getComputedStyle(body).overflowY).toBe("visible");
+    for (const selector of ['[role="columnheader"]', '[role="cell"]']) {
+      expect(getComputedStyle(container.querySelector(selector) as Element).position).toBe(
+        "sticky",
+      );
+    }
+  });
+
   it("renders basic data with column config producing correct cells", () => {
     const columns: SimpleTableColumn[] = [
       { accessorKey: "name", header: "Name" },
@@ -226,8 +269,8 @@ describe("SimpleTable", () => {
           Array.from(card.classList).filter((name) => /^_bg-(background|color\d+)$/.test(name)),
       );
     };
-    expect(cardFills("dark")).toEqual([["_bg-color2"], ["_bg-color3"]]);
-    expect(cardFills("light")).toEqual([["_bg-background"], ["_bg-color2"]]);
+    expect(cardFills("dark")).toEqual([["_bg-background"], ["_bg-color3"]]);
+    expect(cardFills("light")).toEqual([["_bg-background"], ["_bg-color3"]]);
   });
 
   it("renders a custom cell renderer and a visible caption", () => {
@@ -384,7 +427,7 @@ describe("SimpleTable", () => {
     }
   });
 
-  it("drops motion when animation is none and steps cell pad with space", () => {
+  it("drops motion when animation is none and pads cells with the gap role", () => {
     const columns: SimpleTableColumn[] = [
       { accessorKey: "name", header: "Name" },
       { accessorKey: "age", header: "Age" },
@@ -399,22 +442,7 @@ describe("SimpleTable", () => {
     expect(still.querySelector("[data-simple-table-frame]")?.getAttribute("data-animation")).toBe(
       "none",
     );
-
-    const { container: small } = renderWithProviders(
-      <Preset overrides={{ space: "small" }}>
-        <SimpleTableDesktop data={data} columns={columns} />
-      </Preset>,
-    );
-    const { container: large } = renderWithProviders(
-      <Preset overrides={{ space: "large" }}>
-        <SimpleTableDesktop data={data} columns={columns} />
-      </Preset>,
-    );
-    const smallPad = small.querySelector("[data-cell-pad]")?.getAttribute("data-cell-pad");
-    const largePad = large.querySelector("[data-cell-pad]")?.getAttribute("data-cell-pad");
-    expect(smallPad).toBeTruthy();
-    expect(largePad).toBeTruthy();
-    expect(smallPad).not.toBe(largePad);
+    expect(still.querySelector("[data-cell-pad]")?.getAttribute("data-cell-pad")).toBe("$3");
   });
 
   it("disabled rows stay visible, inert, and visually distinct (LC-40)", () => {

package/src/components/TableInput/RowDetailEditor.native.tsx

@@ -24,11 +24,10 @@ export function RowDetailEditor<TData extends DataTableData>({
   rowIndex,
   columns,
   readOnly,
-  compact,
   isCellHidden,
   onCommit,
 }: RowDetailEditorProps<TData>) {
-  const { knobProps } = useResolvedKnobs({ compact });
+  const { knobProps } = useResolvedKnobs();
   const [draft, setDraft] = useState<TData | null>(null);
   const draftRef = useRef(draft);
   draftRef.current = draft;
@@ -109,7 +108,6 @@ export function RowDetailEditor<TData extends DataTableData>({
                 field={(col.field || "input") as DataTableField}
                 fieldProps={col.fieldProps as DataTableFieldProps | undefined}
                 readOnly={readOnly}
-                compact={false}
                 columnId={columnId}
                 columnLabel={label}
                 rowIndex={rowIndex}

package/src/components/TableInput/RowDetailEditor.tsx

@@ -36,7 +36,6 @@ export interface RowDetailEditorProps<TData extends DataTableData> {
   rowIndex: number;
   columns: DataTableColumn<TData>[];
   readOnly: boolean;
-  compact: boolean;
   isCellHidden?: ChildCellHidden<TData>;
   /** Receives the edited row once per session, only when a value changed. */
   onCommit: (row: TData, changed: string[]) => void;
@@ -47,11 +46,10 @@ export function RowDetailEditor<TData extends DataTableData>({
   rowIndex,
   columns,
   readOnly,
-  compact,
   isCellHidden,
   onCommit,
 }: RowDetailEditorProps<TData>) {
-  const { knobProps } = useResolvedKnobs({ compact });
+  const { knobProps } = useResolvedKnobs();
   const [draft, setDraft] = useState<TData | null>(null);
   const draftRef = useRef(draft);
   draftRef.current = draft;
@@ -105,12 +103,7 @@ export function RowDetailEditor<TData extends DataTableData>({
   return (
     <Dialog open={draft !== null} onOpenChange={handleOpenChange} modal>
       <Dialog.Trigger asChild>
-        <Button
-          chromeless
-          compact={compact}
-          hitSlop={knobProps.nestedControl.hitSlop}
-          aria-label={triggerLabel}
-        >
+        <Button chromeless hitSlop={knobProps.nestedControl.hitSlop} aria-label={triggerLabel}>
           <PencilSimpleIcon size={16} />
         </Button>
       </Dialog.Trigger>
@@ -143,7 +136,6 @@ export function RowDetailEditor<TData extends DataTableData>({
                         field={(col.field || "input") as DataTableField}
                         fieldProps={col.fieldProps as DataTableFieldProps | undefined}
                         readOnly={readOnly}
-                        compact={false}
                         columnId={columnId}
                         columnLabel={label}
                         rowIndex={rowIndex}