@multiplatform.one/table 7.8.0 → 7.11.0

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

@@ -16,7 +16,7 @@
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { fireEvent, waitFor } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import type { DataTableColumn } from "../../types";
 import { DataTable } from "./index";
 
@@ -142,3 +142,68 @@ describe("column pinning geometry", () => {
     });
   });
 });
+
+afterEach(() => document.documentElement.removeAttribute("dir"));
+
+it.each(["ltr", "rtl"])(
+  "keeps declared small pinned boxes and logical offsets aligned in %s",
+  async (direction) => {
+    document.documentElement.setAttribute("dir", direction);
+    const utils = renderPinned({
+      columns: columns.map((column, index) => ({
+        ...column,
+        footer: String(column.header),
+        width: index === 0 ? 48 : 320,
+      })),
+    });
+    await pinIdColumn(utils);
+    fireEvent.click(utils.getByLabelText("Pin First Name column left"));
+    await waitFor(() => {
+      const first = utils.container.querySelector("#id-header") as HTMLElement;
+      const second = utils.container.querySelector("#firstName-header") as HTMLElement;
+      expect(hasStyle(first, "width", "48px", "_w-48px")).toBe(true);
+      expect(hasStyle(first, "minWidth", "48px", "_miw-48px")).toBe(true);
+      expect(hasStyle(first, "maxWidth", "48px", "_maw-48px")).toBe(true);
+      expect(second.style.insetInlineStart).toBe("48px");
+      const body = utils.container.querySelector('[role="row"][aria-label="Row 1"]')!;
+      const cells = body.querySelectorAll('[role="cell"]');
+      expect(hasStyle(cells[0] as HTMLElement, "width", "48px", "_w-48px")).toBe(true);
+      expect((cells[1] as HTMLElement).style.insetInlineStart).toBe("48px");
+      const footer = utils.container.querySelectorAll('tfoot [role="cell"]');
+      expect(hasStyle(footer[0] as HTMLElement, "width", "48px", "_w-48px")).toBe(true);
+      expect((footer[1] as HTMLElement).style.insetInlineStart).toBe("48px");
+    });
+  },
+);
+
+it.each(["ltr", "rtl"])(
+  "aligns right-pinned headers, rows and footers in %s",
+  async (direction) => {
+    document.documentElement.setAttribute("dir", direction);
+    const utils = renderPinned({
+      columns: columns.map((column, index) => ({
+        ...column,
+        footer: String(column.header),
+        width: index === 3 ? 76 : 320,
+      })),
+    });
+    for (const label of ["Last Name", "Age"]) {
+      fireEvent.click(utils.getByLabelText(`Pin ${label} column left`));
+      fireEvent.click(utils.getByLabelText(`Pin ${label} column right`));
+    }
+    await waitFor(() => {
+      const last = utils.container.querySelector("#age-header") as HTMLElement;
+      const previous = utils.container.querySelector("#lastName-header") as HTMLElement;
+      expect(hasStyle(last, "width", "76px", "_w-76px")).toBe(true);
+      expect(last.style.insetInlineEnd).toBe("0px");
+      expect(previous.style.insetInlineEnd).toBe("76px");
+      const body = utils.container.querySelector('[role="row"][aria-label="Row 1"]')!;
+      const cells = body.querySelectorAll('[role="cell"]');
+      expect(hasStyle(cells[3] as HTMLElement, "width", "76px", "_w-76px")).toBe(true);
+      expect((cells[2] as HTMLElement).style.insetInlineEnd).toBe("76px");
+      const footer = utils.container.querySelectorAll('tfoot [role="cell"]');
+      expect(hasStyle(footer[3] as HTMLElement, "width", "76px", "_w-76px")).toBe(true);
+      expect((footer[2] as HTMLElement).style.insetInlineEnd).toBe("76px");
+    });
+  },
+);

package/src/components/DataTableExport/DataTableExport.spec.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { DataTable } from "../DataTable";
@@ -203,16 +203,30 @@ describe("DataTableExport", () => {
   });
 
   it("shows loading state when export is in progress", async () => {
-    const mockOnExport = vi.fn(
-      () => new Promise<void>((resolve) => setTimeout(resolve, 100)),
-    ) as unknown as ReturnType<typeof vi.fn> & ((options: ExportOptions) => Promise<void>);
+    let finishExport!: () => void;
+    const pending = new Promise<void>((resolve) => {
+      finishExport = resolve;
+    });
+    const mockOnExport = vi.fn(() => pending) as unknown as ReturnType<typeof vi.fn> &
+      ((options: ExportOptions) => Promise<void>);
 
     renderWithProviders(
       <DataTableExport data={mockData} columns={mockColumns} onExport={mockOnExport} />,
     );
 
-    fireEvent.click(screen.getByText("CSV"));
-    expect(screen.getByText("...")).toBeInTheDocument();
+    const exportButton = screen.getByRole("button", { name: /Export as CSV/i });
+    try {
+      fireEvent.click(exportButton);
+      expect(screen.getByText("...")).toBeInTheDocument();
+      expect(exportButton).toHaveAttribute("aria-disabled", "true");
+    } finally {
+      await act(async () => {
+        finishExport();
+        await pending;
+      });
+    }
+    expect(exportButton).toHaveTextContent("CSV");
+    expect(exportButton).not.toHaveAttribute("aria-disabled", "true");
   });
 
   it("disables buttons when disabled prop is true", () => {
@@ -599,9 +613,12 @@ describe("DataTableExport", () => {
   });
 
   it("prevents multiple simultaneous exports", async () => {
-    const mockOnExport = vi.fn(
-      () => new Promise<void>((resolve) => setTimeout(resolve, 200)),
-    ) as unknown as ReturnType<typeof vi.fn> & ((options: ExportOptions) => Promise<void>);
+    let finishExport!: () => void;
+    const pending = new Promise<void>((resolve) => {
+      finishExport = resolve;
+    });
+    const mockOnExport = vi.fn(() => pending) as unknown as ReturnType<typeof vi.fn> &
+      ((options: ExportOptions) => Promise<void>);
 
     renderWithProviders(
       <DataTableExport data={mockData} columns={mockColumns} onExport={mockOnExport} />,
@@ -609,13 +626,22 @@ describe("DataTableExport", () => {
 
     // Click export twice quickly - button shows "..." when loading
     const exportButton = screen.getByRole("button", { name: /Export as CSV/i });
-    fireEvent.click(exportButton);
-    fireEvent.click(exportButton);
+    try {
+      fireEvent.click(exportButton);
+      fireEvent.click(exportButton);
 
-    // Should only call once
-    await waitFor(() => {
-      expect(mockOnExport).toHaveBeenCalledTimes(1);
-    });
+      // Should only call once
+      await waitFor(() => {
+        expect(mockOnExport).toHaveBeenCalledTimes(1);
+      });
+    } finally {
+      await act(async () => {
+        finishExport();
+        await pending;
+      });
+    }
+    expect(exportButton).toHaveTextContent("CSV");
+    expect(exportButton).not.toHaveAttribute("aria-disabled", "true");
   });
 
   it("surfaces an inline error when Blob URLs are unavailable", async () => {
@@ -629,9 +655,7 @@ describe("DataTableExport", () => {
       renderWithProviders(<DataTableExport data={mockData} columns={mockColumns} />);
       fireEvent.click(screen.getByRole("button", { name: /Export as CSV/i }));
       await waitFor(() => {
-        expect(screen.getByRole("alert").textContent).toMatch(
-          /not available on this platform/i,
-        );
+        expect(screen.getByRole("alert").textContent).toMatch(/not available on this platform/i);
       });
       expect(mockCreateObjectURL).not.toHaveBeenCalled();
     } finally {

package/src/components/DataTableFilterButton/index.tsx

@@ -91,6 +91,14 @@ function GroupHeader({ children }: { children: string }) {
 }
 
 export function DataTableFilterButton() {
+  return <FilterButton />;
+}
+
+export function DataTableCardFilterButton() {
+  return <FilterButton contentTrigger />;
+}
+
+function FilterButton({ contentTrigger = false }: { contentTrigger?: boolean }) {
   const ctx = useDataTableState();
   const { knobProps } = useResolvedKnobs();
   // "Back to field list" points toward the panel's start edge — directional,
@@ -315,6 +323,7 @@ export function DataTableFilterButton() {
       open={open}
       onOpenChange={handleOpenChange}
       trigger={trigger}
+      {...(contentTrigger ? { triggerSizing: "content" as const } : {})}
       fitContent
       scrollable={false}
     >

package/src/components/DataTableToolbar/index.tsx

@@ -11,7 +11,7 @@ import type { TableView } from "../../types";
 import { iconSizeForToken } from "../../utils/chromeIcons";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 import { DataTableExport } from "../DataTableExport";
-import { DataTableFilterButton } from "../DataTableFilterButton";
+import { DataTableCardFilterButton, DataTableFilterButton } from "../DataTableFilterButton";
 
 export interface DataTableToolbarProps {
   // Search
@@ -49,6 +49,17 @@ export interface DataTableToolbarProps {
 }
 
 export function DataTableToolbar(props: DataTableToolbarProps) {
+  return <ToolbarLayout {...props} />;
+}
+
+export function DataTableCardToolbar(props: DataTableToolbarProps) {
+  return <ToolbarLayout {...props} cardLayout />;
+}
+
+function ToolbarLayout({
+  cardLayout = false,
+  ...props
+}: DataTableToolbarProps & { cardLayout?: boolean }) {
   const ctx = useDataTableState();
 
   const globalFilter = props.globalFilter ?? ctx?.state.globalFilter ?? "";
@@ -108,9 +119,105 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
   );
   const hasTrailing = showActionCluster || isFetching;
 
+  const viewPickerContent = showViewPicker && (
+    <DropdownMenu closeOnSelect placement="bottom-end">
+      <DropdownMenu.Trigger asChild>
+        <RovingFocusGroup.Item focusable asChild>
+          <Button
+            chromeless
+            size={controlSize}
+            iconAfter={<CaretDownIcon size={iconPx} />}
+            aria-label={t("Saved views")}
+            {...(cardLayout ? { minWidth: 0, maxWidth: "100%" as const } : {})}
+            aria-haspopup="menu"
+          >
+            {activeView?.name ?? t("Views")}
+          </Button>
+        </RovingFocusGroup.Item>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        {views.map((view) => (
+          <DropdownMenu.CheckboxItem
+            key={view.id}
+            checked={view.id === activeViewId}
+            closeOnSelect
+            onSelect={() => onLoadView(view.id)}
+          >
+            {view.name}
+          </DropdownMenu.CheckboxItem>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+  const viewPicker =
+    cardLayout && showViewPicker ? (
+      <XStack minWidth={0} maxWidth="100%" flexBasis="auto" flexGrow={0} flexShrink={1}>
+        {viewPickerContent}
+      </XStack>
+    ) : (
+      viewPickerContent
+    );
+  const saveView = showSave && (
+    <Popover open={showSaveViewDialog} onOpenChange={setShowSaveViewDialog}>
+      <Popover.Trigger asChild>
+        <RovingFocusGroup.Item focusable asChild>
+          <Button
+            chromeless
+            size={controlSize}
+            icon={<FloppyDiskIcon size={iconPx} />}
+            aria-label={t("Save view")}
+          />
+        </RovingFocusGroup.Item>
+      </Popover.Trigger>
+      <Popover.Content
+        {...knobProps.elevatedSurface}
+        {...knobProps.borderRadius}
+        borderColor="$color6"
+        // LC-24: enter/exitStyle need a `transition` driver on the
+        // same element ({...string} spread set nothing).
+        transition={knobProps.transition}
+        enterStyle={{ x: 0, y: -10, opacity: 0 }}
+        exitStyle={{ x: 0, y: -10, opacity: 0 }}
+        data-dismiss-class="compose"
+      >
+        <YStack {...knobProps.gap} {...knobProps.panelPadding} minWidth={240}>
+          <Input
+            placeholder={t("View name")}
+            value={newViewName}
+            onChangeText={setNewViewName}
+            size={searchSize}
+            {...(compact === undefined ? {} : { compact })}
+            inputProps={{
+              "aria-label": t("View name"),
+              onKeyDown: (e: React.KeyboardEvent) => {
+                if (e.key === "Enter") handleSaveView();
+              },
+            }}
+          />
+          <XStack {...knobProps.gap} justifyContent="flex-end">
+            <Button size={controlSize} onPress={() => setShowSaveViewDialog(false)}>
+              {t("Cancel")}
+            </Button>
+            <Button
+              size={controlSize}
+              onPress={handleSaveView}
+              disabled={!newViewName.trim()}
+              disabledReason={t("Enter a view name")}
+            >
+              {t("Save")}
+            </Button>
+          </XStack>
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  );
+  const showSecondary = showViewPicker || showSave || enableExport || isFetching;
+
   return (
     <XStack
-      alignItems="center"
+      alignItems={cardLayout ? "stretch" : "center"}
+      flexDirection={cardLayout ? "column" : "row"}
+      {...(cardLayout ? { width: "100%" as const, minWidth: 0 } : {})}
       // LC-39: flush band — no painted panel, so no horizontal inset.
       paddingVertical={knobProps.panelPadding.padding}
       paddingHorizontal={0}
@@ -124,7 +231,12 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
       aria-busy={isFetching || undefined}
     >
       {enableGlobalSearch && (
-        <XStack flex={1} minWidth={160} maxWidth={searchMaxWidth} flexShrink={1}>
+        <XStack
+          flex={cardLayout ? undefined : 1}
+          minWidth={cardLayout ? 0 : 160}
+          maxWidth={cardLayout ? undefined : searchMaxWidth}
+          flexShrink={1}
+        >
           <SearchInput
             value={globalFilter}
             onChange={onGlobalFilterChange}
@@ -144,116 +256,83 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
         </XStack>
       )}
 
-      {hasTrailing && (
-        <XStack
-          alignItems="center"
-          {...knobProps.gap}
-          flexShrink={0}
-          marginInlineStart={enableGlobalSearch ? "auto" : 0}
-        >
-          {showActionCluster && (
+      {cardLayout ? (
+        <>
+          {(showFilterButton || customActions) && (
             <RovingFocusGroup orientation="horizontal" loop asChild>
-              <XStack alignItems="center" {...knobProps.gap}>
-                {showFilterButton && <DataTableFilterButton />}
-
-                {enableExport && <DataTableExport />}
-
+              <XStack
+                data-table-card-primary=""
+                width="100%"
+                minWidth={0}
+                alignItems="center"
+                flexWrap="nowrap"
+                {...knobProps.gap}
+              >
+                {showFilterButton && (
+                  <XStack flexShrink={0}>
+                    <DataTableCardFilterButton />
+                  </XStack>
+                )}
                 {customActions}
-
-                {showViewPicker && (
-                  <DropdownMenu closeOnSelect placement="bottom-end">
-                    <DropdownMenu.Trigger asChild>
-                      <RovingFocusGroup.Item focusable asChild>
-                        <Button
-                          chromeless
-                          size={controlSize}
-                          iconAfter={<CaretDownIcon size={iconPx} />}
-                          aria-label={t("Saved views")}
-                          aria-haspopup="menu"
-                        >
-                          {activeView?.name ?? t("Views")}
-                        </Button>
-                      </RovingFocusGroup.Item>
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Content>
-                      {views.map((view) => (
-                        <DropdownMenu.CheckboxItem
-                          key={view.id}
-                          checked={view.id === activeViewId}
-                          closeOnSelect
-                          onSelect={() => onLoadView(view.id)}
-                        >
-                          {view.name}
-                        </DropdownMenu.CheckboxItem>
-                      ))}
-                    </DropdownMenu.Content>
-                  </DropdownMenu>
+              </XStack>
+            </RovingFocusGroup>
+          )}
+          {showSecondary && (
+            <RovingFocusGroup orientation="horizontal" loop asChild>
+              <XStack
+                data-table-card-secondary=""
+                width="100%"
+                minWidth={0}
+                flexWrap="wrap"
+                alignItems="center"
+                {...knobProps.gap}
+              >
+                {enableExport && (
+                  <XStack maxWidth="100%" minWidth={0}>
+                    <DataTableExport />
+                  </XStack>
                 )}
-
-                {showSave && (
-                  <Popover open={showSaveViewDialog} onOpenChange={setShowSaveViewDialog}>
-                    <Popover.Trigger asChild>
-                      <RovingFocusGroup.Item focusable asChild>
-                        <Button
-                          chromeless
-                          size={controlSize}
-                          icon={<FloppyDiskIcon size={iconPx} />}
-                          aria-label={t("Save view")}
-                        />
-                      </RovingFocusGroup.Item>
-                    </Popover.Trigger>
-                    <Popover.Content
-                      {...knobProps.elevatedSurface}
-                      {...knobProps.borderRadius}
-                      borderColor="$color6"
-                      // LC-24: enter/exitStyle need a `transition` driver on the
-                      // same element ({...string} spread set nothing).
-                      transition={knobProps.transition}
-                      enterStyle={{ x: 0, y: -10, opacity: 0 }}
-                      exitStyle={{ x: 0, y: -10, opacity: 0 }}
-                      data-dismiss-class="compose"
-                    >
-                      <YStack {...knobProps.gap} {...knobProps.panelPadding} minWidth={240}>
-                        <Input
-                          placeholder={t("View name")}
-                          value={newViewName}
-                          onChangeText={setNewViewName}
-                          size={searchSize}
-                          {...(compact === undefined ? {} : { compact })}
-                          inputProps={{
-                            "aria-label": t("View name"),
-                            onKeyDown: (e: React.KeyboardEvent) => {
-                              if (e.key === "Enter") handleSaveView();
-                            },
-                          }}
-                        />
-                        <XStack {...knobProps.gap} justifyContent="flex-end">
-                          <Button size={controlSize} onPress={() => setShowSaveViewDialog(false)}>
-                            {t("Cancel")}
-                          </Button>
-                          <Button
-                            size={controlSize}
-                            onPress={handleSaveView}
-                            disabled={!newViewName.trim()}
-                            disabledReason={t("Enter a view name")}
-                          >
-                            {t("Save")}
-                          </Button>
-                        </XStack>
-                      </YStack>
-                    </Popover.Content>
-                  </Popover>
+                {viewPicker}
+                {saveView}
+                {isFetching && (
+                  <XStack alignItems="center" aria-live="polite" data-table-fetching="true">
+                    <Spinner size="small" />
+                  </XStack>
                 )}
               </XStack>
             </RovingFocusGroup>
           )}
+        </>
+      ) : (
+        hasTrailing && (
+          <XStack
+            alignItems="center"
+            {...knobProps.gap}
+            flexShrink={0}
+            marginInlineStart={enableGlobalSearch ? "auto" : 0}
+          >
+            {showActionCluster && (
+              <RovingFocusGroup orientation="horizontal" loop asChild>
+                <XStack alignItems="center" {...knobProps.gap}>
+                  {showFilterButton && <DataTableFilterButton />}
 
-          {isFetching && (
-            <XStack alignItems="center" aria-live="polite" data-table-fetching="true">
-              <Spinner size="small" />
-            </XStack>
-          )}
-        </XStack>
+                  {enableExport && <DataTableExport />}
+
+                  {customActions}
+
+                  {viewPicker}
+                  {saveView}
+                </XStack>
+              </RovingFocusGroup>
+            )}
+
+            {isFetching && (
+              <XStack alignItems="center" aria-live="polite" data-table-fetching="true">
+                <Spinner size="small" />
+              </XStack>
+            )}
+          </XStack>
+        )
       )}
     </XStack>
   );

package/src/hooks/useDataTable.spec.ts

@@ -111,3 +111,117 @@ 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);
+  });
+});