@multiplatform.one/table 7.10.0 → 7.11.0

package/src/components/DataTable/DataTableRoot.tsx

@@ -43,7 +43,7 @@ import type {
 } from "../../types";
 import { DataTableColumnPinning } from "../DataTableColumnPinning";
 import { DataTablePagination } from "../DataTablePagination";
-import { DataTableToolbar } from "../DataTableToolbar";
+import { DataTableCardToolbar, DataTableToolbar } from "../DataTableToolbar";
 import { DataTableBulkActions } from "../DataTableBulkActions";
 import { DataTableCell } from "../DataTableCell";
 import { ColumnHeaderFilter } from "../ColumnHeaderFilter";
@@ -56,7 +56,7 @@ import type {
   DataTableStateContextValue,
   FilterEditTarget,
 } from "./DataTableStateContext";
-import { DataTableCardControls } from "./DataTableCardControls";
+import { DataTableCardControls, DataTableCardSortControl } from "./DataTableCardControls";
 import { DataTableMobileCards } from "./DataTableMobileCards";
 import { DataTableDocumentList } from "./DataTableDocumentList";
 import { DataTableVirtualized } from "./DataTableVirtualized";
@@ -334,6 +334,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
           flexBasis: "auto" as const,
         };
       }
+      if (columnLayout === "equal" && !enableColumnResizing) return {};
       // Scroll layout needs one concrete width per column (from the column
       // def, TanStack default otherwise) so independent flex rows stay
       // aligned while the table grows past its container.
@@ -461,13 +462,13 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       // flexBasis auto, not the `flex: 0` shorthand: RN expands `flex: 0` to
       // basis 0, which overrides per-column widths and crushes every cell to
       // the minWidth floor (contents then overflow and get clipped).
-      return { flexGrow: 0, flexShrink: 0, flexBasis: "auto" as const, minWidth: 80 };
+      return { flexGrow: 0, flexShrink: 0, flexBasis: "auto" as const, minWidth: 0 };
     }
     // Same flexBasis trap as the scroll branch above: `flex: 0` expands to
     // basis 0 and the per-column width from getColSizeProps loses, crushing
     // every resizable cell to the min-width floor (content then overlaps).
     if (enableColumnResizing) {
-      return { flexGrow: 0, flexShrink: 0, flexBasis: "auto" as const };
+      return { flexGrow: 0, flexShrink: 0, flexBasis: "auto" as const, minWidth: 0 };
     }
     return { flex: 1, flexShrink: 1, flexGrow: 1, flexBasis: 0, minWidth: 0 };
   }, [isFlexLayout, columnLayout, enableColumnResizing]);
@@ -1124,6 +1125,12 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
     [table, state, actions, computed, selectAllScope, filterUi],
   );
 
+  const hasCardSort =
+    showCards &&
+    enableSorting &&
+    table.getVisibleLeafColumns().some((column) => column.getCanSort());
+  const defaultCardToolbar = showCards && !renderToolbar;
+  const ToolbarComponent = defaultCardToolbar ? DataTableCardToolbar : DataTableToolbar;
   const renderToolbarComponent = () => {
     const activeFilterCount = table.getState().columnFilters?.length || 0;
 
@@ -1143,10 +1150,20 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
     }
 
     return (
-      <DataTableToolbar
+      <ToolbarComponent
         globalFilter={state.globalFilter || ""}
         onGlobalFilterChange={actions.setGlobalFilter}
         onClearFilters={actions.clearFilters}
+        customActions={
+          defaultCardToolbar && hasCardSort ? (
+            <DataTableCardSortControl
+              table={table}
+              compact={isCompact}
+              disabled={disabled}
+              contained
+            />
+          ) : undefined
+        }
         activeFilterCount={activeFilterCount}
         onSaveView={actions.saveView}
         onLoadView={actions.loadView}
@@ -1192,7 +1209,8 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       newValue: any,
     ) => Promise<void>,
   ) => {
-    const hasToolbar = enableGlobalSearch || enableFiltering || enableViews;
+    const hasToolbar =
+      enableGlobalSearch || enableFiltering || enableViews || (defaultCardToolbar && hasCardSort);
     const scrollContainerRef = useRef<HTMLDivElement>(null);
 
     // DF-12 / Axiom 6 HONEST STATE — a height-constrained body clips rows
@@ -1347,14 +1365,16 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
               <>
                 {/* Header affordances (sort / per-column filter) live in the
                     grid headers; the card list restores them here. */}
-                <DataTableCardControls
-                  table={table}
-                  enableSorting={enableSorting}
-                  enableFiltering={enableFiltering}
-                  availableColumns={cardFilterColumns}
-                  compact={isCompact}
-                  disabled={disabled}
-                />
+                {!defaultCardToolbar && (
+                  <DataTableCardControls
+                    table={table}
+                    enableSorting={enableSorting}
+                    enableFiltering={enableFiltering}
+                    availableColumns={cardFilterColumns}
+                    compact={isCompact}
+                    disabled={disabled}
+                  />
+                )}
                 <DataTableMobileCards
                   tableRows={displayRows}
                   enableRowSelection={enableRowSelection}
@@ -2085,7 +2105,31 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                     <Table.Foot>
                       {footerGroups.map((footerGroup: any) => (
                         <Table.Row key={footerGroup.id}>
+                          {enableRowSelection && (
+                            <Table.Cell
+                              cellWidth={selectionColWidth}
+                              cellHeight={cellHeight as any}
+                              cellLocation="first"
+                            />
+                          )}
+                          {showRowNumbers && (
+                            <Table.Cell
+                              cellWidth={chrome.rowNumberCol}
+                              cellHeight={cellHeight as any}
+                              cellLocation={enableRowSelection ? "middle" : "first"}
+                            />
+                          )}
+                          {enableRowExpansion && (
+                            <Table.Cell
+                              cellWidth={chrome.expandCol}
+                              cellHeight={cellHeight as any}
+                              cellLocation={
+                                enableRowSelection || showRowNumbers ? "middle" : "first"
+                              }
+                            />
+                          )}
                           {footerGroup.headers.map((header: any) => {
+                            const stickyStyle = getStickyStyle(header.column.id);
                             const columnAlign = resolveColumnAlign({
                               ...(header.column.columnDef as DataTableColumn),
                               id: header.column.id,
@@ -2093,6 +2137,23 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                             return (
                               <Table.Cell
                                 key={header.id}
+                                {...cellFlexProps}
+                                {...getColSizeProps(header.column)}
+                                {...(isWeb && stickyStyle
+                                  ? {
+                                      style: {
+                                        position: "sticky",
+                                        ...("insetInlineStart" in stickyStyle && {
+                                          insetInlineStart: stickyStyle.insetInlineStart,
+                                        }),
+                                        ...("insetInlineEnd" in stickyStyle && {
+                                          insetInlineEnd: stickyStyle.insetInlineEnd,
+                                        }),
+                                        zIndex: 2,
+                                        backgroundColor: "var(--color2)",
+                                      } as React.CSSProperties,
+                                    }
+                                  : {})}
                                 justifyContent={alignToFlex(columnAlign)}
                                 data-align={columnAlign}
                               >
@@ -2115,6 +2176,13 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                               </Table.Cell>
                             );
                           })}
+                          {showDeleteRow && !readOnly && (
+                            <Table.Cell
+                              cellWidth={chrome.deleteCol}
+                              cellHeight={cellHeight as any}
+                              cellLocation="last"
+                            />
+                          )}
                         </Table.Row>
                       ))}
                     </Table.Foot>

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

@@ -283,11 +283,12 @@ describe("DataTable card layout", () => {
       expect(titles).toEqual(["John"]);
     });
 
-    it("renders the filter chrome (Add Filter) in card layout", () => {
-      const { getByText } = renderWithProviders(
+    it("renders the canonical Filter in card layout", () => {
+      const { getByRole, queryByText } = renderWithProviders(
         <DataTable data={sampleData} columns={columns} onStateChange={vi.fn()} />,
       );
-      expect(getByText("Add Filter")).toBeDefined();
+      expect(getByRole("button", { name: "Filter" })).toBeDefined();
+      expect(queryByText("Add Filter")).toBeNull();
     });
 
     it("hides sort/filter chrome when sorting and filtering are disabled", () => {

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

@@ -0,0 +1,238 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn, FilterableField } from "../../types";
+import { DataTableCardToolbar, DataTableToolbar } from "../DataTableToolbar";
+import { DataTableCardSortControl } from "./DataTableCardControls";
+import { useDataTableState } from "./DataTableStateContext";
+import { DataTable } from "./index";
+
+const filings = [
+  { id: "a", form: "Alpha", entity: "personal", year: 2023 },
+  { id: "b", form: "Beta", entity: "business", year: 2024 },
+  { id: "c", form: "Gamma", entity: "personal", year: 2023 },
+];
+const columns: DataTableColumn<(typeof filings)[number]>[] = [
+  { accessorKey: "form", header: "Form" },
+  { accessorKey: "entity", header: "Entity" },
+];
+const filterableFields: FilterableField[] = [{ id: "year", label: "Year", type: "number" }];
+
+function Cards(props: Record<string, any>) {
+  return (
+    <DataTable
+      data={filings}
+      columns={columns}
+      filterableFields={filterableFields}
+      layout="cards"
+      enableGlobalSearch={false}
+      onStateChange={vi.fn()}
+      {...props}
+    />
+  );
+}
+
+function cardTitles(container: HTMLElement) {
+  return [...container.querySelectorAll('[data-card-slot="title"]')].map((el) => el.textContent);
+}
+
+function AllCardActionsToolbar(props: Record<string, any>) {
+  const { table } = useDataTableState()!;
+  return (
+    <DataTableCardToolbar
+      {...props}
+      enableExport
+      enableViews
+      isFetching
+      customActions={<DataTableCardSortControl table={table} contained />}
+    />
+  );
+}
+
+describe("default card toolbar", () => {
+  it("owns Filter and Sort in one primary row with no duplicate controls", () => {
+    const { container } = renderWithProviders(<Cards />);
+    const toolbar = screen.getByRole("toolbar", { name: "Table toolbar" });
+    expect(screen.getAllByRole("toolbar")).toHaveLength(1);
+    const primary = container.querySelector<HTMLElement>("[data-table-card-primary]")!;
+    expect(toolbar.contains(primary)).toBe(true);
+    expect(primary.contains(screen.getByRole("button", { name: "Filter" }))).toBe(true);
+    expect(primary.contains(screen.getByLabelText("Sort rows"))).toBe(true);
+    expect(screen.queryByText("Add Filter")).toBeNull();
+  });
+
+  it("keeps search and secondary view/fetching controls outside the primary pair", () => {
+    const { container } = renderWithProviders(<Cards enableGlobalSearch enableViews isFetching />);
+    const primary = container.querySelector<HTMLElement>("[data-table-card-primary]")!;
+    const secondary = container.querySelector<HTMLElement>("[data-table-card-secondary]")!;
+    expect(primary).not.toBeNull();
+    expect(secondary).not.toBeNull();
+    expect(primary.contains(screen.getByLabelText("Search table data"))).toBe(false);
+    expect(secondary.contains(screen.getByLabelText("Save view"))).toBe(true);
+    expect(secondary.querySelector("[data-table-fetching]")).not.toBeNull();
+    expect(primary.contains(secondary)).toBe(false);
+  });
+
+  it("keeps a sort-only toolbar when search, filtering and views are all off", () => {
+    renderWithProviders(<Cards enableFiltering={false} enableViews={false} />);
+    const toolbar = screen.getByRole("toolbar", { name: "Table toolbar" });
+    expect(within(toolbar).getByLabelText("Sort rows")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Filter" })).toBeNull();
+  });
+
+  it("does not create an empty toolbar for unsortable columns", () => {
+    renderWithProviders(
+      <Cards
+        enableFiltering={false}
+        columns={columns.map((column) => ({ ...column, enableSorting: false }))}
+      />,
+    );
+    expect(screen.queryByRole("toolbar")).toBeNull();
+  });
+
+  it("exposes the full active sorting identity without replacing the button label recipe", () => {
+    const longHeader = "Form with a deliberately long distinguishing classification suffix";
+    renderWithProviders(
+      <Cards
+        columns={[{ accessorKey: "form", header: longHeader }]}
+        initialState={{ sorting: [{ id: "form", desc: true }] }}
+      />,
+    );
+    const trigger = screen.getByLabelText("Sort rows");
+    expect(trigger.getAttribute("aria-description")).toBe(`${longHeader} ↓`);
+    expect(trigger.textContent).toContain(`${longHeader} ↓`);
+  });
+
+  it("retains hidden Year filtering, chip edit and removal in readOnly cards", async () => {
+    const { container } = renderWithProviders(<Cards readOnly />);
+    expect(screen.queryByText("Add Filter")).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Filter" }));
+    fireEvent.click(await screen.findByRole("option", { name: "Year" }));
+    fireEvent.change(await screen.findByPlaceholderText("Enter value..."), {
+      target: { value: "2023" },
+    });
+    await waitFor(() => expect(cardTitles(container)).toEqual(["Alpha", "Gamma"]));
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => expect(screen.queryByPlaceholderText("Enter value...")).toBeNull());
+    fireEvent.click(await screen.findByRole("button", { name: /Edit filter.*Year/ }));
+    const value = await screen.findByPlaceholderText("Enter value...");
+    expect((value as HTMLInputElement).value).toBe("2023");
+    fireEvent.change(value, { target: { value: "2024" } });
+    await waitFor(() => expect(cardTitles(container)).toEqual(["Beta"]));
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => expect(screen.queryByPlaceholderText("Enter value...")).toBeNull());
+    fireEvent.click(screen.getByRole("button", { name: "Remove" }));
+    await waitFor(() => expect(cardTitles(container)).toEqual(["Alpha", "Beta", "Gamma"]));
+  });
+
+  it("keeps the custom-toolbar fallback and clears its active filter", async () => {
+    const { container } = renderWithProviders(
+      <Cards
+        renderToolbar={() => <div>Custom actions</div>}
+        initialState={{
+          filters: [{ id: "f", columnId: "form", value: { operator: "contains", value: "Alpha" } }],
+        }}
+      />,
+    );
+    expect(screen.getByText("Custom actions")).toBeTruthy();
+    const fallback = screen.getByRole("toolbar", { name: "Card list controls" });
+    expect(within(fallback).getByRole("button", { name: /Add Filter/ })).toBeTruthy();
+    expect(cardTitles(container)).toEqual(["Alpha"]);
+    fireEvent.click(within(fallback).getByRole("button", { name: "Clear" }));
+    await waitFor(() => expect(cardTitles(container)).toEqual(["Alpha", "Beta", "Gamma"]));
+    fireEvent.click(within(fallback).getByRole("button", { name: "Add Filter" }));
+    expect(await screen.findByText("Select column")).toBeTruthy();
+  });
+
+  it("leaves an explicitly supplied canonical custom toolbar intact", () => {
+    renderWithProviders(<Cards renderToolbar={(props: any) => <DataTableToolbar {...props} />} />);
+    expect(screen.getByRole("button", { name: "Filter" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Add Filter" })).toBeTruthy();
+    expect(screen.getByRole("toolbar", { name: "Card list controls" })).toBeTruthy();
+  });
+
+  it("partitions actual export, long saved view, save and fetching from Filter and Sort", () => {
+    const name = "Saved view with a deliberately long distinguishing classification suffix";
+    const { container } = renderWithProviders(
+      <Cards
+        enableGlobalSearch
+        initialState={{
+          activeViewId: "long",
+          views: [
+            {
+              id: "long",
+              name,
+              columns: {},
+              filters: [],
+              sorting: [],
+              pagination: { pageIndex: 0, pageSize: 10 },
+            },
+          ],
+        }}
+        renderToolbar={(props: any) => <AllCardActionsToolbar {...props} />}
+      />,
+    );
+    const primary = container.querySelector<HTMLElement>("[data-table-card-primary]")!;
+    const secondary = container.querySelector<HTMLElement>("[data-table-card-secondary]")!;
+    expect(within(primary).getByLabelText("Sort rows")).toBeTruthy();
+    expect(within(primary).getByRole("button", { name: "Filter" })).toBeTruthy();
+    expect(within(secondary).getByRole("button", { name: /Export as CSV/ })).toBeTruthy();
+    expect(within(secondary).getByLabelText("Saved views").textContent).toContain(name);
+    expect(within(secondary).getByLabelText("Save view")).toBeTruthy();
+    expect(secondary.querySelector("[data-table-fetching]")).not.toBeNull();
+    expect(within(primary).queryByLabelText("Saved views")).toBeNull();
+    const sort = primary.querySelector("[data-table-card-sort]")!;
+    expect(sort.contains(within(primary).getByLabelText("Sort rows"))).toBe(true);
+  });
+
+  it("retains hidden filters and sort order when cards change to grid and back", () => {
+    const initialState = {
+      filters: [{ id: "year", columnId: "year", value: { operator: "is", value: "2023" } }],
+      sorting: [{ id: "form", desc: true }],
+    };
+    const { container, rerender } = renderWithProviders(<Cards initialState={initialState} />);
+    expect(cardTitles(container)).toEqual(["Gamma", "Alpha"]);
+    rerender(<Cards initialState={initialState} layout="table" />);
+    expect(cardTitles(container)).toEqual([]);
+    expect(screen.queryByLabelText("Sort rows")).toBeNull();
+    expect(screen.getByText("Gamma")).toBeTruthy();
+    expect(screen.queryByText("Beta")).toBeNull();
+    rerender(<Cards initialState={initialState} />);
+    expect(cardTitles(container)).toEqual(["Gamma", "Alpha"]);
+    expect(screen.getByLabelText("Sort rows").getAttribute("aria-description")).toBe("Form ↓");
+    expect(screen.getAllByRole("button", { name: "Filter" })).toHaveLength(1);
+    expect(screen.queryByPlaceholderText("Enter value...")).toBeNull();
+  });
+
+  it("clears hidden and visible advanced filters together without clearing plain column filters", async () => {
+    const { container } = renderWithProviders(
+      <Cards
+        initialState={{
+          filters: [
+            { id: "year", columnId: "year", value: { operator: "is", value: "2023" } },
+            { id: "form", columnId: "form", value: { operator: "contains", value: "Alpha" } },
+          ],
+          columnFilters: [{ id: "entity", value: "personal" }],
+        }}
+      />,
+    );
+    expect(cardTitles(container)).toEqual(["Alpha"]);
+    fireEvent.click(screen.getByRole("button", { name: "Clear all" }));
+    await waitFor(() => expect(cardTitles(container)).toEqual(["Alpha", "Gamma"]));
+    expect(screen.queryByRole("button", { name: /Edit filter/ })).toBeNull();
+  });
+
+  it("leaves the public standalone toolbar in its original layout", () => {
+    const { container } = renderWithProviders(
+      <DataTableToolbar
+        enableGlobalSearch
+        enableViews
+        customActions={<button type="button">Custom action</button>}
+      />,
+    );
+    expect(container.querySelector<HTMLElement>("[data-table-card-primary]")).toBeNull();
+    expect(container.querySelector<HTMLElement>("[data-table-card-secondary]")).toBeNull();
+    expect(screen.getByLabelText("Search table data")).toBeTruthy();
+    expect(screen.getByText("Custom action")).toBeTruthy();
+  });
+});

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

@@ -204,8 +204,11 @@ describe("chrome interplay: Search × injected filters × enableFiltering", () =
     expect(screen.getByLabelText("Search table data")).toBeInTheDocument();
   });
 
-  it("enableFiltering=false suppresses the card layout's Add Filter control too", () => {
+  it("enableFiltering=false suppresses the card layout's filter control too", () => {
     // auto layout renders cards below sm (the test env default).
+    // MPO-300: the default card path owns the canonical all-field Filter in
+    // the toolbar; the lower Card list controls toolbar and its Add Filter
+    // builder only mount behind a custom toolbar now.
     const control = renderWithProviders(
       <DataTable
         data={rows}
@@ -214,10 +217,8 @@ describe("chrome interplay: Search × injected filters × enableFiltering", () =
         initialState={{ filters: injectedReadyFilter }}
       />,
     );
-    // The control renders its active-filter count in the label text
-    // ("Add Filter (1)"), so an exact getByText no longer matches. The
-    // aria-label is the stable handle, as the sibling arms above use.
-    expect(screen.getByLabelText("Add Filter")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Filter" })).toBeInTheDocument();
+    expect(screen.queryByText("Add Filter")).not.toBeInTheDocument();
     control.unmount();
 
     renderWithProviders(
@@ -228,6 +229,7 @@ describe("chrome interplay: Search × injected filters × enableFiltering", () =
         initialState={{ filters: injectedReadyFilter }}
       />,
     );
+    expect(screen.queryByRole("button", { name: "Filter" })).not.toBeInTheDocument();
     expect(screen.queryByText("Add Filter")).not.toBeInTheDocument();
     // Injected filters still scope the card list.
     expect(screen.getByText("Alpha")).toBeInTheDocument();

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

@@ -11,12 +11,34 @@
  * render. The combination warns instead, naming `columnLayout` as the reason.
  */
 
+import { fireEvent, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { DataTableColumn } from "../../types";
 import { __resetTableDevWarnSeen, warnColumnWidthIgnored } from "../../shared/devWarn";
 import { DataTable } from "./index";
 
+vi.mock("@tanstack/react-virtual", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@tanstack/react-virtual")>();
+  return {
+    ...actual,
+    useVirtualizer: (options: Parameters<typeof actual.useVirtualizer>[0]) =>
+      actual.useVirtualizer({
+        ...options,
+        initialRect: { width: 800, height: 240 },
+        observeElementRect: (_instance, callback) => {
+          callback({ width: 800, height: 240 });
+          return () => {};
+        },
+        observeElementOffset: (_instance, callback) => {
+          callback(0, false);
+          return () => {};
+        },
+        scrollToFn: () => {},
+      }),
+  };
+});
+
 type Pokemon = { id: number; name: string; xp: number };
 
 const sampleData: Pokemon[] = [
@@ -193,3 +215,170 @@ describe("DataTable columnLayout=equal with per-column widths", () => {
     expect(widthWarnings()).toHaveLength(0);
   });
 });
+
+function hasSizingStyle(element: HTMLElement, property: string, value: string, token: string) {
+  return (
+    element.style.getPropertyValue(property) === value || String(element.className).includes(token)
+  );
+}
+
+function expectCellWidth(element: HTMLElement | null, width: number) {
+  expect(element).not.toBeNull();
+  expect(hasSizingStyle(element!, "width", `${width}px`, `_w-${width}px`)).toBe(true);
+}
+
+describe("DataTable declared column sizes", () => {
+  beforeEach(startCapture);
+  afterEach(stopCapture);
+
+  it.each(["alias", "canonical"])(
+    "applies %s widths to scroll headers, body and footer below the old floor",
+    (spelling) => {
+      const sizingColumns = plainColumns.map((column, index) => ({
+        ...column,
+        [spelling === "alias" ? "width" : "size"]: index === 0 ? 320 : 48,
+        footer: index === 0 ? "Totals" : "126",
+      }));
+      const { container } = renderTable(sizingColumns, "scroll");
+      expectCellWidth(container.querySelector("#name-header"), 320);
+      expectCellWidth(container.querySelector("#xp-header"), 48);
+      const cells = container.querySelectorAll('[aria-label="Table data"] [role="cell"]');
+      expect(cells.length).toBeGreaterThanOrEqual(4);
+      expectCellWidth(cells[0] as HTMLElement, 320);
+      expectCellWidth(cells[1] as HTMLElement, 48);
+      expect(hasSizingStyle(cells[1] as HTMLElement, "min-width", "0px", "_miw-0px")).toBe(true);
+      const footer = container.querySelectorAll('tfoot [role="cell"]');
+      expect(footer).toHaveLength(2);
+      expectCellWidth(footer[0] as HTMLElement, 320);
+      expectCellWidth(footer[1] as HTMLElement, 48);
+      expect(widthWarnings()).toHaveLength(0);
+    },
+  );
+
+  it("gives unpinned equal cells the same flex policy for canonical and alias declarations", () => {
+    const canonical = plainColumns.map((column, index) => ({
+      ...column,
+      size: index === 0 ? 320 : 80,
+    }));
+    const withSizes = renderTable(canonical);
+    const sizeMarkup = stripGeneratedIds(withSizes.container.innerHTML);
+    withSizes.unmount();
+    const withoutSizes = renderTable(plainColumns);
+    expect(stripGeneratedIds(withoutSizes.container.innerHTML)).toBe(sizeMarkup);
+  });
+
+  it("lets resizing use aliases in equal mode while preserving the fixed flex basis", () => {
+    const { container } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={widthColumns}
+        columnLayout="equal"
+        layout="table"
+        enableColumnResizing
+        enablePagination={false}
+        readOnly
+      />,
+    );
+    const header = container.querySelector("#name-header") as HTMLElement;
+    expectCellWidth(header, 320);
+    expect(hasSizingStyle(header, "flex-basis", "auto", "_fb-auto")).toBe(true);
+    expect(hasSizingStyle(header, "flex-grow", "0", "_fg-0")).toBe(true);
+    expect(widthWarnings()).toHaveLength(0);
+  });
+
+  it("does not inflate a 48px resizable equal-layout cell with the primitive width floor", () => {
+    const { container } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={[{ accessorKey: "xp", header: "XP", width: 48 }]}
+        columnLayout="equal"
+        layout="table"
+        enableColumnResizing
+        enablePagination={false}
+        readOnly
+      />,
+    );
+    const header = container.querySelector("#xp-header") as HTMLElement;
+    expectCellWidth(header, 48);
+    expect(hasSizingStyle(header, "min-width", "0px", "_miw-0px")).toBe(true);
+  });
+
+  it("passes size inputs to auto layout without changing its table algorithm", () => {
+    const { container } = renderTable(widthColumns, "auto");
+    expectCellWidth(container.querySelector("#name-header"), 320);
+    expect((container.querySelector('[role="table"]') as HTMLElement).style.tableLayout).toBe(
+      "fixed",
+    );
+  });
+
+  it("resizes an aliased column through the real header handle within its bounds", () => {
+    const columns = widthColumns.map((column) => ({ ...column, minWidth: 50, maxWidth: 350 }));
+    const { container, getByRole } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns}
+        columnLayout="scroll"
+        layout="table"
+        enableColumnResizing
+        enablePagination={false}
+        readOnly
+      />,
+    );
+    const handle = getByRole("separator", { name: "Resize Name column" });
+    expect(handle.getAttribute("aria-valuenow")).toBe("320");
+    fireEvent.mouseDown(handle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 120 });
+    fireEvent.mouseUp(document, { clientX: 120 });
+    expectCellWidth(container.querySelector("#name-header"), 340);
+    fireEvent.mouseDown(handle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 300 });
+    fireEvent.mouseUp(document, { clientX: 300 });
+    expectCellWidth(container.querySelector("#name-header"), 350);
+    expect(handle.getAttribute("aria-valuenow")).toBe("350");
+    const cell = container.querySelector<HTMLElement>('[aria-label="Table data"] [role="cell"]');
+    expectCellWidth(cell, 350);
+  });
+
+  it("exposes the normalized size to the view-options display on mount", async () => {
+    const { getByText } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={widthColumns}
+        columnLayout="scroll"
+        layout="table"
+        enableColumnResizing
+        enablePagination={false}
+        readOnly
+      >
+        <DataTable.ViewOptions showColumnResizing showColumnVisibility={false} />
+      </DataTable>,
+    );
+    await waitFor(() => expect(getByText("320px")).toBeDefined());
+    expect(getByText("80px")).toBeDefined();
+  });
+
+  it("uses the real virtual row renderer with the same declared widths", async () => {
+    const { container } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={widthColumns}
+        columnLayout="scroll"
+        layout="table"
+        enableVirtualization
+        virtualizationHeight={240}
+        enablePagination={false}
+        readOnly
+      />,
+    );
+    await waitFor(() => {
+      const virtualBody = container.querySelector('tbody[role="presentation"] [role="rowgroup"]');
+      expect(virtualBody).not.toBeNull();
+      expect(virtualBody!.querySelectorAll('[role="row"]')).toHaveLength(2);
+      const cells = virtualBody!.querySelectorAll('[role="cell"]');
+      expect(cells.length).toBeGreaterThanOrEqual(4);
+      expectCellWidth(cells[0] as HTMLElement, 320);
+      expectCellWidth(cells[1] as HTMLElement, 80);
+    });
+    expectCellWidth(container.querySelector("#name-header"), 320);
+  });
+});