@multiplatform.one/table 7.10.0 → 7.15.0

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

@@ -32,7 +32,8 @@ import type {
 } from "../../types";
 import { DataTableCell } from "../DataTableCell";
 import { withInterp } from "../../utils/withInterp";
-import { generateRowId, isEmptyRows, SKELETON_ROW_COUNT } from "./shared";
+import { RowDetailEditor } from "./RowDetailEditor";
+import { generateRowId, isEmptyRows, SKELETON_ROW_COUNT, type ChildCellHidden } from "./shared";
 
 export interface TableInputProps<TData extends DataTableData = DataTableData> {
   /** Data array for the table (ignored in favor of form state in the form branch) */
@@ -80,6 +81,12 @@ export interface TableInputProps<TData extends DataTableData = DataTableData> {
   compact?: boolean;
   /** Leading grab handle + keyboard reorder via kanbanDnd (web implements). */
   enableReorder?: boolean;
+  /** Per-row button that opens the row in a detail editor (MPO-22). */
+  rowDetail?: boolean;
+  /** Fields the detail editor shows. Defaults to `columns`. */
+  detailColumns?: DataTableColumn<TData>[];
+  /** Hides one row's cell, in the grid and in the detail editor. */
+  isCellHidden?: ChildCellHidden<TData>;
 }
 
 export function TableInput<TData extends DataTableData = DataTableData>({
@@ -103,6 +110,9 @@ export function TableInput<TData extends DataTableData = DataTableData>({
   emptyMessage,
   "aria-label": ariaLabel,
   compact = true,
+  rowDetail = false,
+  detailColumns,
+  isCellHidden,
 }: TableInputProps<TData>) {
   const { t } = useTranslation();
   const { resolvedForm } = useFormField({ form: formProp });
@@ -138,6 +148,9 @@ export function TableInput<TData extends DataTableData = DataTableData>({
     emptyMessage: emptyMessage ?? t("No rows"),
     ariaLabel: resolvedAriaLabel,
     compact,
+    rowDetail,
+    detailColumns: detailColumns ?? columns,
+    isCellHidden,
     t,
   };
 
@@ -191,6 +204,9 @@ interface TableInputInnerProps<TData extends DataTableData> {
   emptyMessage: string;
   ariaLabel: string;
   compact: boolean;
+  rowDetail: boolean;
+  detailColumns: DataTableColumn<TData>[];
+  isCellHidden?: ChildCellHidden<TData>;
   t: (key: string, options?: Record<string, unknown>) => string;
 }
 
@@ -210,6 +226,9 @@ function TableInputInner<TData extends DataTableData>({
   emptyMessage,
   ariaLabel,
   compact,
+  rowDetail,
+  detailColumns,
+  isCellHidden,
   t,
 }: TableInputInnerProps<TData>) {
   const theme = useTheme();
@@ -219,6 +238,7 @@ function TableInputInner<TData extends DataTableData>({
   const indexWidth = Math.max(36, chromePx);
   const actionWidth = chromePx + 16;
   const [activeRowId, setActiveRowId] = useState<string | null>(null);
+  const Detail = RowDetailEditor<TData>;
 
   const handleCellChange = useCallback(
     (rowIndex: number, columnId: string, value: unknown) => {
@@ -250,6 +270,16 @@ function TableInputInner<TData extends DataTableData>({
     [rows, commit, minRows],
   );
 
+  const handleRowDetailCommit = useCallback(
+    (rowIndex: number, next: TData, changed: string[]) => {
+      for (const columnId of changed) {
+        onCellChange?.(rowIndex, columnId, next[columnId as keyof TData]);
+      }
+      commit(rows.map((row, index) => (index === rowIndex ? next : row)));
+    },
+    [rows, commit, onCellChange],
+  );
+
   const canAddRow = !maxRows || rows.length < maxRows;
   const canDelete = !minRows || rows.length > (minRows || 0);
 
@@ -277,6 +307,7 @@ function TableInputInner<TData extends DataTableData>({
           </Text>
         </View>
       ))}
+      {rowDetail && <View width={actionWidth} />}
       {showDeleteRow && !readOnly && <View width={actionWidth} />}
     </XStack>
   );
@@ -304,6 +335,9 @@ function TableInputInner<TData extends DataTableData>({
           const field = (col.field || "input") as DataTableField;
           const fieldProps = col.fieldProps as DataTableFieldProps | undefined;
 
+          if (isCellHidden?.(item, columnId, index)) {
+            return <View key={columnId} flex={1} paddingHorizontal="$1" />;
+          }
           return (
             <View key={columnId} flex={1} paddingHorizontal="$1">
               <DataTableCell
@@ -321,6 +355,19 @@ function TableInputInner<TData extends DataTableData>({
             </View>
           );
         })}
+        {rowDetail && (
+          <View width={actionWidth} justifyContent="center" alignItems="center">
+            <Detail
+              row={item}
+              rowIndex={index}
+              columns={detailColumns}
+              readOnly={readOnly}
+              compact={compact}
+              isCellHidden={isCellHidden}
+              onCommit={(next, changed) => handleRowDetailCommit(index, next, changed)}
+            />
+          </View>
+        )}
         {showDeleteRow && !readOnly && (
           <View width={actionWidth} justifyContent="center" alignItems="center">
             <Button
@@ -355,6 +402,7 @@ function TableInputInner<TData extends DataTableData>({
               <Skeleton variant="rounded" width="70%" height={16} />
             </View>
           ))}
+          {rowDetail && <View width={actionWidth} />}
           {showDeleteRow && !readOnly && <View width={actionWidth} />}
         </XStack>
       ))}

package/src/components/TableInput/index.tsx

@@ -1,7 +1,7 @@
 /**
  * TableInput — the child-table field (the forms↔table bridge).
  *
- * Follows the forms field contract (agent-os/standards/frontend/field-architecture.md):
+ * Follows the forms field contract (docs/standards/frontend/field-architecture.md):
  * - Canonical change prop is `onChange(rows)` (LC-14 ONCHANGE-CANONICAL);
  *   `onDataChange(rows)` survives as a deprecated alias that fires from the
  *   same emit site, and `onCellChange(rowIndex, columnId, value)` is a
@@ -17,6 +17,8 @@
  * Row identity: added rows get a collision-free generated `id`. TableInput
  * reorders through the shared kanbanDnd machine (`enableReorder`); Frappe
  * `idx` renumbering is the ChildTable layer (MPO-22), not this field.
+ * `rowDetail` opens one row as a form over `detailColumns` (RowDetailEditor);
+ * `isCellHidden` blanks a cell per row, and the caller owns the rule.
  */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -47,14 +49,18 @@ import type {
 } from "../../types";
 import { DataTableCell } from "../DataTableCell";
 import { withInterp } from "../../utils/withInterp";
+import { RowDetailEditor } from "./RowDetailEditor";
 import {
   childRowAttrs,
   childTableKeyAction,
   generateRowId,
   isEmptyRows,
   SKELETON_ROW_COUNT,
+  type ChildCellHidden,
 } from "./shared";
 
+const chromeColumnIds = new Set(["_reorder", "_rowNumber", "_detail", "_actions"]);
+
 export interface TableInputProps<TData extends DataTableData = DataTableData> {
   /** Data array for the table (ignored in favor of form state in the form branch) */
   data?: TData[];
@@ -104,6 +110,12 @@ export interface TableInputProps<TData extends DataTableData = DataTableData> {
    * this on and writes `idx` on the change payload (MPO-22).
    */
   enableReorder?: boolean;
+  /** Per-row button that opens the row in a detail editor (MPO-22). */
+  rowDetail?: boolean;
+  /** Fields the detail editor shows. Defaults to `columns`. */
+  detailColumns?: DataTableColumn<TData>[];
+  /** Hides one row's cell, in the grid and in the detail editor. */
+  isCellHidden?: ChildCellHidden<TData>;
 }
 
 export function TableInput<TData extends DataTableData = DataTableData>({
@@ -128,6 +140,9 @@ export function TableInput<TData extends DataTableData = DataTableData>({
   "aria-label": ariaLabel,
   compact = true,
   enableReorder = false,
+  rowDetail = false,
+  detailColumns,
+  isCellHidden,
 }: TableInputProps<TData>) {
   const { t } = useTranslation();
   const { resolvedForm } = useFormField({ form: formProp });
@@ -164,6 +179,9 @@ export function TableInput<TData extends DataTableData = DataTableData>({
     ariaLabel: resolvedAriaLabel,
     compact,
     enableReorder,
+    rowDetail,
+    detailColumns: detailColumns ?? columns,
+    isCellHidden,
     t,
   };
 
@@ -218,6 +236,9 @@ interface TableInputInnerProps<TData extends DataTableData> {
   ariaLabel: string;
   compact: boolean;
   enableReorder: boolean;
+  rowDetail: boolean;
+  detailColumns: DataTableColumn<TData>[];
+  isCellHidden?: ChildCellHidden<TData>;
   t: (key: string, options?: Record<string, unknown>) => string;
 }
 
@@ -238,6 +259,9 @@ function TableInputInner<TData extends DataTableData>({
   ariaLabel,
   compact,
   enableReorder,
+  rowDetail,
+  detailColumns,
+  isCellHidden,
   t,
 }: TableInputInnerProps<TData>) {
   const theme = useTheme();
@@ -248,6 +272,7 @@ function TableInputInner<TData extends DataTableData>({
   const pendingFocusRef = useRef<string | null>(null);
   const gridRef = useRef<HTMLElement | null>(null);
   const reorderEnabled = enableReorder && !readOnly && !skeleton;
+  const Detail = RowDetailEditor<TData>;
 
   const firstDataKey = useMemo(() => {
     const first = columns[0];
@@ -329,6 +354,16 @@ function TableInputInner<TData extends DataTableData>({
     [rows, commit, minRows],
   );
 
+  const handleRowDetailCommit = useCallback(
+    (rowIndex: number, next: TData, changed: string[]) => {
+      for (const columnId of changed) {
+        onCellChange?.(rowIndex, columnId, next[columnId as keyof TData]);
+      }
+      commit(rows.map((row, index) => (index === rowIndex ? next : row)));
+    },
+    [rows, commit, onCellChange],
+  );
+
   useEffect(() => {
     const id = pendingFocusRef.current;
     if (!id || typeof document === "undefined") return;
@@ -432,6 +467,7 @@ function TableInputInner<TData extends DataTableData>({
         ...col,
         id: columnId,
         cell: ({ row }) => {
+          if (isCellHidden?.(row.original, columnId, row.index)) return null;
           const value = row.original[columnId as keyof TData];
           const field = (col.field || "input") as DataTableField;
           const fieldProps = col.fieldProps as DataTableFieldProps | undefined;
@@ -454,6 +490,25 @@ function TableInputInner<TData extends DataTableData>({
       } as ColumnDef<TData, unknown>);
     });
 
+    if (rowDetail) {
+      cols.push({
+        id: "_detail",
+        header: "",
+        size: chromePx + 16,
+        cell: ({ row }) => (
+          <Detail
+            row={row.original}
+            rowIndex={row.index}
+            columns={detailColumns}
+            readOnly={readOnly}
+            compact={compact}
+            isCellHidden={isCellHidden}
+            onCommit={(next, changed) => handleRowDetailCommit(row.index, next, changed)}
+          />
+        ),
+      });
+    }
+
     if (showDeleteRow && !readOnly) {
       cols.push({
         id: "_actions",
@@ -495,6 +550,10 @@ function TableInputInner<TData extends DataTableData>({
     knobProps.label.fontSize,
     knobProps.nestedControl.hitSlop,
     reorderEnabled,
+    rowDetail,
+    detailColumns,
+    isCellHidden,
+    handleRowDetailCommit,
   ]);
 
   const table = useReactTable({
@@ -556,10 +615,7 @@ function TableInputInner<TData extends DataTableData>({
                     key={header.id}
                     style={{
                       width: header.getSize(),
-                      ...(isEmpty &&
-                      header.column.id !== "_rowNumber" &&
-                      header.column.id !== "_actions" &&
-                      header.column.id !== "_reorder"
+                      ...(isEmpty && !chromeColumnIds.has(header.column.id)
                         ? { flexGrow: 1 }
                         : null),
                     }}
@@ -578,7 +634,9 @@ function TableInputInner<TData extends DataTableData>({
                 <Table.Row key={`skeleton-${rowIndex}`}>
                   {table.getAllLeafColumns().map((column) => (
                     <Table.Cell key={column.id}>
-                      {column.id === "_actions" || column.id === "_reorder" ? null : (
+                      {column.id === "_actions" ||
+                      column.id === "_reorder" ||
+                      column.id === "_detail" ? null : (
                         <Skeleton
                           variant="rounded"
                           width={column.id === "_rowNumber" ? 16 : "70%"}
@@ -617,10 +675,7 @@ function TableInputInner<TData extends DataTableData>({
                     >)}
                   >
                     {row.getVisibleCells().map((cell) => {
-                      const isData =
-                        cell.column.id !== "_rowNumber" &&
-                        cell.column.id !== "_actions" &&
-                        cell.column.id !== "_reorder";
+                      const isData = !chromeColumnIds.has(cell.column.id);
                       const field = columns.find((col) => {
                         const id =
                           typeof col.accessorKey === "string"

package/src/components/TableInput/shared.ts

@@ -1,5 +1,7 @@
 /** Shared TableInput internals (web + native). */
 
+import type { DataTableColumn, DataTableData } from "../../types";
+
 let rowIdCounter = 0;
 
 /**
@@ -75,3 +77,30 @@ export function childTableKeyAction(
   if (next < 0 || next >= ctx.rowCount) return null;
   return { type: "move", rowIndex: next, columnId: ctx.columnId };
 }
+
+/**
+ * Per-row cell visibility (Frappe child `depends_on`, evaluated by the
+ * caller). True hides that cell's editor in the grid and its field in the
+ * row detail editor.
+ */
+export type ChildCellHidden<TData extends DataTableData = DataTableData> = (
+  row: TData,
+  columnId: string,
+  rowIndex: number,
+) => boolean;
+
+/** Row-data key a column reads (accessorKey, else id). */
+export function columnKey<TData extends DataTableData>(col: DataTableColumn<TData>): string {
+  return typeof col.accessorKey === "string" ? col.accessorKey : col.id || String(col.accessorKey);
+}
+
+/** Column keys whose value differs between two versions of a row. */
+export function changedColumns<TData extends DataTableData>(
+  before: TData,
+  after: TData,
+  columns: DataTableColumn<TData>[],
+): string[] {
+  return columns
+    .map(columnKey)
+    .filter((key) => !Object.is(before[key as keyof TData], after[key as keyof TData]));
+}

package/src/components/tableDropdowns.spec.tsx

@@ -0,0 +1,172 @@
+/**
+ * MPO-221: a table dropdown is a FloatingPanel (the cover family, MPO-38),
+ * never Tamagui's Popover. Each surface opens the FloatingPanel viewport from
+ * its trigger, and no component source under components/ imports Popover.
+ */
+
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { ColumnHeaderFilter } from "./ColumnHeaderFilter";
+import { DataTableDateFilter } from "./DataTableDateFilter";
+import { DataTableExport } from "./DataTableExport";
+import { DataTableGroupingConfig } from "./DataTableGrouping";
+import { DataTableSearch } from "./DataTableSearch";
+import { DataTableToolbar } from "./DataTableToolbar";
+import { DataTableViewOptions } from "./DataTableViewOptions";
+
+const panel = () =>
+  document.querySelector('[data-testid="floating-panel-viewport"]') as HTMLElement | null;
+
+const rows = [{ name: "Ada", city: "London" }];
+const columns = [
+  { accessorKey: "name", header: "Name", id: "name", searchable: true },
+  { accessorKey: "city", header: "City", id: "city", searchable: true },
+];
+
+interface Surface {
+  name: string;
+  ui: ReactElement;
+  trigger: () => HTMLElement;
+  content: string;
+}
+
+const surfaces: Surface[] = [
+  {
+    name: "column header filter",
+    ui: (
+      <ColumnHeaderFilter
+        columnId="name"
+        columnLabel="Name"
+        columnType="text"
+        onFilterChange={vi.fn()}
+      />
+    ),
+    trigger: () => screen.getByLabelText("Filter column Name"),
+    content: "Filter: Name",
+  },
+  {
+    name: "export options",
+    ui: <DataTableExport data={rows} columns={columns} />,
+    trigger: () => screen.getByRole("button", { name: "Export options" }),
+    content: "Export Options",
+  },
+  {
+    name: "grouping",
+    ui: (
+      <DataTableGroupingConfig
+        columns={columns}
+        currentConfig={{ columns: [], aggregations: [] }}
+        onConfigChange={vi.fn()}
+      />
+    ),
+    trigger: () => screen.getByLabelText("Grouping configuration"),
+    content: "Grouping & Aggregation",
+  },
+  {
+    name: "date filter",
+    ui: <DataTableDateFilter placeholder="Pick a date" />,
+    trigger: () => screen.getByText("Pick a date"),
+    content: "Date Filter",
+  },
+  {
+    name: "search options",
+    ui: <DataTableSearch data={rows} columns={columns} onSearchResults={vi.fn()} />,
+    trigger: () => screen.getByRole("button", { name: "Search options" }),
+    content: "Search Options",
+  },
+  {
+    name: "toolbar save-view",
+    ui: (
+      <DataTableToolbar
+        onSaveView={vi.fn()}
+        onLoadView={vi.fn()}
+        views={[]}
+        enableViews
+        showViewSelector
+      />
+    ),
+    trigger: () => screen.getByRole("button", { name: "Save view" }),
+    content: "",
+  },
+  {
+    name: "view options save-view",
+    ui: (
+      <DataTableViewOptions
+        columns={[{ id: "name", label: "Name", visible: true, order: 0 }]}
+        onSaveView={vi.fn()}
+        onLoadView={vi.fn()}
+        onResetToDefault={vi.fn()}
+        showViewManagement
+      />
+    ),
+    trigger: () => screen.getByText("Save Current View"),
+    content: "Save View",
+  },
+];
+
+describe("table dropdowns open FloatingPanel (MPO-221)", () => {
+  it.each(surfaces)("$name opens the FloatingPanel viewport", async ({ ui, trigger, content }) => {
+    renderWithProviders(ui);
+    expect(panel()).toBeNull();
+    fireEvent.click(trigger());
+    await waitFor(() => expect(panel()).not.toBeNull());
+    if (content) expect(panel()!.textContent).toContain(content);
+    // A compose-class editor declares its dismissal contract (LC-21 VERIFY).
+    expect(panel()!.querySelector('[data-dismiss-class="compose"]')).not.toBeNull();
+  });
+
+  it.each(surfaces)("$name closes on Escape", async ({ ui, trigger }) => {
+    renderWithProviders(ui);
+    fireEvent.click(trigger());
+    await waitFor(() => expect(panel()).not.toBeNull());
+    fireEvent.keyDown(document.activeElement ?? document.body, { key: "Escape" });
+    await waitFor(() => expect(panel()).toBeNull());
+  });
+
+  it("the save-view panel holds the view-name field and its two actions", async () => {
+    const onSaveView = vi.fn();
+    renderWithProviders(
+      <DataTableToolbar
+        onSaveView={onSaveView}
+        onLoadView={vi.fn()}
+        views={[]}
+        enableViews
+        showViewSelector
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Save view" }));
+    await waitFor(() => expect(panel()).not.toBeNull());
+    fireEvent.change(screen.getByLabelText("View name"), { target: { value: "Mine" } });
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+    expect(onSaveView).toHaveBeenCalledWith("Mine");
+    await waitFor(() => expect(panel()).toBeNull());
+  });
+});
+
+function componentSources(dir: string): string[] {
+  return readdirSync(dir).flatMap((entry) => {
+    const path = join(dir, entry);
+    if (statSync(path).isDirectory()) return componentSources(path);
+    return /\.tsx?$/.test(entry) && !/\.(spec|stories)\.tsx?$/.test(entry) ? [path] : [];
+  });
+}
+
+describe("no Tamagui Popover in the table (MPO-221)", () => {
+  it("no component source imports Popover from tamagui", () => {
+    const offenders = componentSources(__dirname).filter((file) =>
+      /import\s*{[^}]*\bPopover\b[^}]*}\s*from\s*["']tamagui["']/.test(readFileSync(file, "utf8")),
+    );
+    expect(offenders).toEqual([]);
+  });
+
+  it("no component source mounts the components PopoverContent", () => {
+    const offenders = componentSources(__dirname).filter((file) =>
+      /\bPopoverContent\b/.test(readFileSync(file, "utf8")),
+    );
+    expect(offenders).toEqual([]);
+  });
+});

package/src/hooks/useDataTable.spec.ts

@@ -111,3 +111,156 @@ describe("useDataTable controlledState adoption", () => {
     expect(result.current.state.filters).toEqual([]);
   });
 });
+
+describe("useDataTable column width normalization", () => {
+  type Row = (typeof data)[number];
+
+  it.each<[Partial<DataTableColumn<Row>>, number]>([
+    [{ width: 320 }, 320],
+    [{ width: 320, size: 90 }, 90],
+    [{ width: 320, minWidth: 200, maxWidth: 240 }, 240],
+    [{ width: 320, size: 90, minWidth: 200, minSize: 60, maxWidth: 80, maxSize: 100 }, 90],
+    [{ width: 320, size: 180, maxWidth: 140 }, 140],
+    [{ width: 125.5 }, 125.5],
+    [{ width: 0 }, 20],
+    [{ width: 0, minWidth: 0 }, 0],
+    [{ width: 320, size: 0, minSize: 0 }, 0],
+    [{ width: Number.NaN }, 150],
+    [{ width: Number.POSITIVE_INFINITY }, 150],
+    [{ width: -1 }, 150],
+    [{ minWidth: Number.NaN, maxWidth: -1 }, 150],
+  ])("resolves %j to %s through the real table", (sizing, expected) => {
+    const { result } = renderHook(() =>
+      useDataTable({ data, columns: [{ id: "name", accessorKey: "name", ...sizing }] }),
+    );
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(expected);
+  });
+
+  it("preserves input objects and normalizes grouped leaves without distributing group width", () => {
+    const leaf: DataTableColumn<Row> = { id: "name", accessorKey: "name", width: 320 };
+    const group: DataTableColumn<Row> = {
+      id: "group",
+      header: "Group",
+      width: 900,
+      columns: [leaf],
+    };
+    const plain: DataTableColumn<Row> = { id: "status", accessorKey: "status" };
+    Object.freeze(leaf);
+    Object.freeze(group.columns);
+    Object.freeze(group);
+    Object.freeze(plain);
+    const source = [group, plain];
+    Object.freeze(source);
+    const { result, rerender } = renderHook(() => useDataTable({ data, columns: source }));
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(320);
+    expect(leaf).not.toHaveProperty("size");
+    expect(group.columns?.[0]).toBe(leaf);
+    expect(result.current.table.options.columns[1]).toBe(plain);
+    const normalized = result.current.table.options.columns;
+    rerender();
+    expect(result.current.table.options.columns).toBe(normalized);
+  });
+
+  it("keeps sizing state ahead of updated declarations and resets to the current definition", () => {
+    const { result, rerender } = renderHook(
+      ({ width }) => useDataTable({ data, columns: [{ id: "name", accessorKey: "name", width }] }),
+      { initialProps: { width: 320 } },
+    );
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(320);
+    act(() => result.current.actions.setColumnSizing({ name: 210 }));
+    rerender({ width: 400 });
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(210);
+    act(() => result.current.actions.resetToDefault());
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(400);
+  });
+
+  it("loads existing view width state without renaming its persistence field", () => {
+    const { result } = renderHook(() =>
+      useDataTable({
+        data,
+        columns: [{ id: "name", accessorKey: "name", width: 320 }],
+        initialState: {
+          views: [
+            {
+              id: "saved",
+              name: "Saved",
+              columns: { name: { id: "name", visible: true, width: 205, order: 0 } },
+              filters: [],
+              sorting: [],
+              pagination: { pageIndex: 0, pageSize: 10 },
+            },
+          ],
+        },
+      }),
+    );
+    act(() => result.current.actions.loadView("saved"));
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(205);
+    expect(result.current.state.columnSizing).toEqual({ name: 205 });
+    act(() => result.current.actions.resetToDefault());
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(320);
+  });
+
+  it("preserves sorting/filter aliases and explicit overrides alongside width", () => {
+    const sortingFn = vi.fn(() => 0);
+    const { result } = renderHook(() =>
+      useDataTable({
+        data,
+        columns: [
+          { id: "name", accessorKey: "name", width: 320, sortable: false, filterable: false },
+          {
+            id: "status",
+            accessorKey: "status",
+            width: 90,
+            sortable: false,
+            enableSorting: true,
+            sortingFn,
+          },
+        ],
+      }),
+    );
+    expect(result.current.table.getColumn("name")?.getSize()).toBe(320);
+    expect(result.current.table.getColumn("name")?.getCanSort()).toBe(false);
+    expect(result.current.table.getColumn("name")?.getCanFilter()).toBe(false);
+    expect(result.current.table.getColumn("status")?.getCanSort()).toBe(true);
+    expect(result.current.table.getColumn("status")?.columnDef.sortingFn).toBe(sortingFn);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// columnOrder seeding — id-less columns keep the caller's declared order
+// (MPO-292: `col.id || ""` matched no column, so every id-less column fell
+// behind every id'd one)
+// ---------------------------------------------------------------------------
+
+describe("useDataTable columnOrder seeding", () => {
+  type Row = { id: number; name: string; status: string; owner: { name: string } };
+  const rows: Row[] = [
+    { id: 1, name: "Alice", status: "Active", owner: { name: "Ops" } },
+    { id: 2, name: "Bob", status: "Lead", owner: { name: "Sales" } },
+  ];
+
+  it("seeds columnOrder with TanStack's own key for every column, id or not", () => {
+    const columns = [
+      { accessorKey: "name", header: "Name" },
+      { id: "_actions", header: "Actions", cell: () => null },
+      { accessorKey: "owner.name", header: "Owner" },
+      { accessorFn: (row: Row) => row.status, header: "Status" },
+    ] as DataTableColumn<Row>[];
+    const { result } = renderHook(() => useDataTable({ data: rows, columns }));
+    const order = result.current.state.columnOrder;
+    expect(order).toEqual(["name", "_actions", "owner_name", "Status"]);
+    expect(new Set(order).size).toBe(columns.length);
+    for (const key of order) expect(result.current.table.getColumn(key)?.id).toBe(key);
+  });
+
+  it("renders getVisibleCells() in the declared order when id'd and id-less columns mix", () => {
+    const columns = [
+      { accessorKey: "name", header: "Name" },
+      { id: "_actions", header: "Actions", cell: () => null },
+      { accessorKey: "status", header: "Status" },
+    ] as DataTableColumn<Row>[];
+    const { result } = renderHook(() => useDataTable({ data: rows, columns }));
+    const cells = result.current.table.getRowModel().rows[0].getVisibleCells();
+    expect(cells.map((cell) => cell.column.id)).toEqual(["name", "_actions", "status"]);
+  });
+});