@multiplatform.one/table 6.4.3 → 6.7.0

package/src/components/DataTableColumnPinning/DataTableColumnPinning.stories.tsx

@@ -8,6 +8,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { useState } from "react";
+import { formatCurrency, useResolvedKnobs } from "@multiplatform.one/theme";
 import { Button } from "@multiplatform.one/forms";
 import { Card, H3, Paragraph, ScrollView, Separator, Text, View, XStack, YStack } from "tamagui";
 import { DataTableColumnPinning, useColumnPinning } from "./index";
@@ -25,10 +26,25 @@ interface Person {
   performance: number;
 }
 
+/**
+ * Seeded PRNG (mulberry32). The fixture must produce byte-identical rows on
+ * every page load: `Math.random()` here redrew Salary and the performance-bar
+ * width per capture, which is what flapped the visual baselines for this
+ * family. Determinism at the source keeps every pixel under comparison, where
+ * a screenshot mask or delay would not.
+ */
+const seededRandom = (seed: number) => () => {
+  seed = (seed + 0x6d2b79f5) | 0;
+  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+};
+
 const generateData = (count: number): Person[] => {
   const departments = ["Engineering", "Sales", "Marketing", "HR", "Finance"];
   const roles = ["Manager", "Senior", "Junior", "Lead", "Intern"];
   const statuses: ("active" | "inactive" | "pending")[] = ["active", "inactive", "pending"];
+  const random = seededRandom(0x5eed);
 
   return Array.from({ length: count }, (_, i) => ({
     id: i + 1,
@@ -37,16 +53,44 @@ const generateData = (count: number): Person[] => {
     email: `user${i + 1}@example.com`,
     department: departments[i % departments.length],
     role: roles[i % roles.length],
-    salary: 50000 + Math.floor(Math.random() * 100000),
+    salary: 50000 + Math.floor(random() * 100000),
     startDate: new Date(2020 + (i % 4), i % 12, (i % 28) + 1).toISOString().split("T")[0],
     status: statuses[i % statuses.length],
-    performance: Math.floor(Math.random() * 100),
+    performance: Math.floor(random() * 100),
   }));
 };
 
 const defaultData = generateData(50);
 const columnHelper = createColumnHelper<Person>();
 
+/**
+ * Mini performance track. A component rather than an inline cell renderer so
+ * the track's radius can follow the knob (LC-60): the previous pinned `$2`
+ * outlived `borderRadius:none` on an 8px-tall bar, which reads as an
+ * undeclared knob-immune shape.
+ */
+function PerformanceBar({ value }: { value: number }) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <XStack alignItems="center" gap="$2">
+      <View
+        backgroundColor="$gray5"
+        height={8}
+        flex={1}
+        {...knobProps.containerRadius}
+        overflow="hidden"
+      >
+        <View
+          backgroundColor={value > 70 ? "$green10" : value > 40 ? "$yellow10" : "$red10"}
+          height="100%"
+          width={`${value}%`}
+        />
+      </View>
+      <Text fontSize="$1">{value}%</Text>
+    </XStack>
+  );
+}
+
 const defaultColumns = [
   columnHelper.accessor("id", {
     header: "ID",
@@ -76,7 +120,8 @@ const defaultColumns = [
   }),
   columnHelper.accessor("salary", {
     header: "Salary",
-    cell: (info) => `$${info.getValue().toLocaleString()}`,
+    cell: (info) =>
+      formatCurrency(info.getValue() as number, { symbol: "$", fractionDigits: "auto" }),
   }),
   columnHelper.accessor("startDate", {
     header: "Start Date",
@@ -100,20 +145,7 @@ const defaultColumns = [
   }),
   columnHelper.accessor("performance", {
     header: "Performance",
-    cell: (info) => (
-      <XStack alignItems="center" gap="$2">
-        <View backgroundColor="$gray5" height={8} flex={1} borderRadius="$2" overflow="hidden">
-          <View
-            backgroundColor={
-              info.getValue() > 70 ? "$green10" : info.getValue() > 40 ? "$yellow10" : "$red10"
-            }
-            height="100%"
-            width={`${info.getValue()}%`}
-          />
-        </View>
-        <Text fontSize="$1">{info.getValue()}%</Text>
-      </XStack>
-    ),
+    cell: (info) => <PerformanceBar value={info.getValue()} />,
   }),
 ];
 

package/src/components/DataTableDateFilter/DataTableDateFilter.stories.tsx

@@ -1,5 +1,6 @@
 import { action } from "@multiplatform.one/storybook";
 import React from "react";
+import { formatAbsoluteDate } from "@multiplatform.one/theme";
 import { Card, Text, XStack, YStack } from "tamagui";
 import { DataTableDateFilter, type DateFilterValue, applyDateFilter } from "./index";
 
@@ -200,10 +201,10 @@ export const WithDateConstraints = () => {
 
       <YStack gap="$2">
         <Text fontSize="$3" color="$gray11">
-          Min Date: {minDate.toLocaleDateString()}
+          Min Date: {formatAbsoluteDate(minDate, { year: "always" })}
         </Text>
         <Text fontSize="$3" color="$gray11">
-          Max Date: {maxDate.toLocaleDateString()}
+          Max Date: {formatAbsoluteDate(maxDate, { year: "always" })}
         </Text>
       </YStack>
     </YStack>
@@ -302,7 +303,7 @@ export const WithDataIntegration = () => {
                     {task.title}
                   </Text>
                   <Text fontSize="$2" color="$gray11">
-                    Created: {new Date(task.createdAt).toLocaleDateString()}
+                    Created: {formatAbsoluteDate(task.createdAt)}
                   </Text>
                 </YStack>
                 <Text

package/src/components/DataTableExport/DataTableExport.stories.tsx

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import { formatAbsoluteDate, formatNumber } from "@multiplatform.one/theme";
 import { Card, Text, YStack } from "tamagui";
 import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableExport } from "./index";
@@ -97,7 +98,7 @@ const productColumns = [
   {
     accessorKey: "createdAt",
     header: "Created",
-    cell: (info: any) => new Date(info.getValue()).toLocaleDateString(),
+    cell: (info: any) => formatAbsoluteDate(info.getValue()),
   },
 ];
 
@@ -424,7 +425,7 @@ export const WithComplexData = () => {
     {
       accessorKey: "metrics",
       header: "Users",
-      cell: (info: any) => info.getValue().users.toLocaleString(),
+      cell: (info: any) => formatNumber(info.getValue().users),
     },
     {
       accessorKey: "features",

package/src/components/DataTableExport/index.tsx

@@ -298,6 +298,7 @@ function ExportOptionsPopover({
         {...knobProps.borderRadius}
         borderWidth={1}
         borderColor="$borderColor"
+        transition={knobProps.transition}
         enterStyle={{ x: 0, y: -10, opacity: 0 }}
         exitStyle={{ x: 0, y: -10, opacity: 0 }}
         minWidth={popoverMinWidth}

package/src/components/DataTableFilterButton/index.tsx

@@ -46,7 +46,10 @@ function FieldRow({ field, highlighted, onSelect }: FieldRowProps) {
       cursor="pointer"
       paddingHorizontal="$2.5"
       paddingVertical="$2"
-      {...knobProps.borderRadius}
+      // LC-55 FRAGMENT-LICENSE (D-03, G-08 arm): a hoverable option row is
+      // wayfinding, not chrome-earning — the full borderRadius fragment
+      // carries borderWidth and drew a permanent ring under the hover fill.
+      {...knobProps.containerRadius}
       backgroundColor={highlighted ? "$color4" : "transparent"}
       hoverStyle={{ backgroundColor: "$color4" }}
       pressStyle={{ backgroundColor: "$color5" }}

package/src/components/DataTableGrouping/DataTableGrouping.spec.tsx

@@ -1,9 +1,15 @@
 import { fireEvent, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { formatNumber } from "@multiplatform.one/theme";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import "@testing-library/jest-dom";
 import { DataTable } from "../DataTable";
-import { type AggregationConfig, DataTableGrouping, groupData } from "./index";
+import {
+  type AggregationConfig,
+  DataTableGrouping,
+  formatAggregateValue,
+  groupData,
+} from "./index";
 
 // Test data type
 type SalesRecord = {
@@ -115,7 +121,58 @@ describe("DataTableGrouping", () => {
 
     // Should show aggregation values
     expect(screen.getByText("North America")).toBeInTheDocument();
-    // The actual aggregation display would be tested in integration
+    // LC-12 render channel: the sum reaches the slot through the house
+    // number register, so it reads like the cells it summarises.
+    expect(screen.getByText(formatNumber(15400))).toBeInTheDocument();
+    expect(screen.queryByText("15400")).not.toBeInTheDocument();
+  });
+
+  it("routes the header item count through the house number register (LC-12)", () => {
+    // Same data class as the aggregates: a large group's count must read
+    // localized ("(1,000 items)"), never raw beside channel-formatted sums.
+    const bigData = Array.from({ length: 1000 }, (_, i) => ({
+      id: String(i),
+      region: "North America",
+    }));
+    renderWithProviders(
+      <DataTableGrouping
+        data={bigData}
+        columns={[{ accessorKey: "region", header: "Region", type: "string" as const }]}
+        groupBy={["region"]}
+      />,
+    );
+
+    const expected = `(${formatNumber(1000, { maximumFractionDigits: 0 })} items)`;
+    expect(screen.getByText(expected)).toBeInTheDocument();
+    expect(screen.queryByText("(1000 items)")).not.toBeInTheDocument();
+  });
+
+  describe("formatAggregateValue (LC-12 number channel)", () => {
+    const sum: AggregationConfig = { column: "totalRevenue", function: "sum" };
+    const count: AggregationConfig = { column: "quantity", function: "count" };
+
+    it("routes aggregates through the house number register", () => {
+      expect(formatAggregateValue(15400, sum)).toBe(formatNumber(15400));
+      expect(formatAggregateValue(5133.33, sum)).toBe(formatNumber(5133.33));
+    });
+
+    it("keeps counts whole", () => {
+      expect(formatAggregateValue(3, count)).toBe("3");
+    });
+
+    it("formats a numeric string from a custom aggregation", () => {
+      expect(formatAggregateValue("15400", sum)).toBe(formatNumber(15400));
+    });
+
+    it("passes non-numeric custom results through as their own text", () => {
+      expect(formatAggregateValue("mixed", sum)).toBe("mixed");
+    });
+
+    it("keeps the zero floor for missing and non-finite values", () => {
+      expect(formatAggregateValue(undefined, sum)).toBe("0");
+      expect(formatAggregateValue(Number.NaN, sum)).toBe("0");
+      expect(formatAggregateValue(0, sum)).toBe("0");
+    });
   });
 
   it("calls onGroupingChange when grouping config changes", () => {

package/src/components/DataTableGrouping/DataTableGrouping.stories.tsx

@@ -442,19 +442,31 @@ export const WithGroupingControls = () => {
   );
 };
 
+/**
+ * Seeded PRNG (mulberry32). The aggregate rows this story renders (Total
+ * Revenue, Item Count) are derived from the fixture, so `Math.random()` made
+ * the shot differ on every capture and flapped the visual baseline. Seeding
+ * keeps the whole surface under pixel comparison.
+ */
+const seededRandom = (seed: number) => () => {
+  seed = (seed + 0x6d2b79f5) | 0;
+  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+};
+
 export const PerformanceTest = () => {
   // Generate larger dataset
+  const random = seededRandom(0x5eed);
   const largeDataset = Array.from({ length: 1000 }, (_, i) => ({
     id: `item-${i + 1}`,
     region: ["North America", "Europe", "Asia Pacific", "South America"][i % 4],
     category: ["Electronics", "Furniture", "Appliances", "Books"][i % 4],
     salesperson: `Person ${(i % 10) + 1}`,
-    quantity: Math.floor(Math.random() * 20) + 1,
-    unitPrice: Math.floor(Math.random() * 1000) + 100,
+    quantity: Math.floor(random() * 20) + 1,
+    unitPrice: Math.floor(random() * 1000) + 100,
     totalRevenue: 0, // Will be calculated
-    date: new Date(Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000)
-      .toISOString()
-      .split("T")[0],
+    date: new Date(Date.now() - random() * 365 * 24 * 60 * 60 * 1000).toISOString().split("T")[0],
   })).map((item) => ({
     ...item,
     totalRevenue: item.quantity * item.unitPrice,

package/src/components/DataTableGrouping/index.tsx

@@ -559,6 +559,7 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
         {...knobProps.borderRadius}
         borderWidth={1}
         borderColor="$borderColor"
+        transition={knobProps.transition}
         enterStyle={{ x: 0, y: -10, opacity: 0 }}
         exitStyle={{ x: 0, y: -10, opacity: 0 }}
         minWidth={popoverMinWidth}

package/src/components/DataTablePagination/DataTablePagination.stories.tsx

@@ -1,8 +1,10 @@
 import { action } from "@multiplatform.one/storybook";
+import type { GuardrailSpecimenParameter } from "@multiplatform.one/theme";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import React from "react";
-import { Button } from "@multiplatform.one/forms";
-import { Input, Text, View, XStack, YStack } from "tamagui";
+// Catalog Button + Input (LC-56 STORY-HONESTY — no raw interactive primitives).
+import { Button, Input } from "@multiplatform.one/forms";
+import { Text, View, XStack, YStack } from "tamagui";
 import type {
   DataTableColumn,
   PageLoadQuery,
@@ -80,7 +82,20 @@ export const Compact: Story = {
   },
 };
 
+// LC-57 allowlist: the boundary stories below EXIST to demo pager edges —
+// first/last/single/empty page rest with the unreachable-direction buttons
+// disabled by design (the honest boundary state, LC-40-washed). The warns
+// still fire; the harvester tolerates exactly these codes on these ids.
+const pagerBoundarySpecimen = {
+  guardrailSpecimen: {
+    warns: ["bare-disabled"],
+    reason:
+      "Pager-boundary specimen: unreachable nav directions rest disabled by design at page edges.",
+  } satisfies GuardrailSpecimenParameter,
+};
+
 export const FirstPage: Story = {
+  parameters: pagerBoundarySpecimen,
   args: {
     ...Basic.args,
     pagination: {
@@ -101,6 +116,7 @@ export const MiddlePage: Story = {
 };
 
 export const LastPage: Story = {
+  parameters: pagerBoundarySpecimen,
   args: {
     ...Basic.args,
     pagination: {
@@ -172,6 +188,7 @@ export const SmallDataSet: Story = {
 };
 
 export const SinglePage: Story = {
+  parameters: pagerBoundarySpecimen,
   args: {
     ...Basic.args,
     pagination: {
@@ -406,6 +423,7 @@ export const PageJumpDemo: Story = {
         ...samplePagination,
         pageIndex: 5,
       });
+      const [jumpValue, setJumpValue] = React.useState("");
 
       const handlePaginationChange = (newPagination: TablePagination) => {
         setPagination({
@@ -445,24 +463,19 @@ export const PageJumpDemo: Story = {
             </Text>
             <XStack gap="$2" marginTop="$2" alignItems="center">
               <Text>Go to page:</Text>
-              <Input
-                keyboardType="numeric"
-                placeholder={`1-${pagination.totalPages}`}
-                onSubmitEditing={(e) => {
-                  handlePageJump(e.nativeEvent.text);
-                }}
-                padding="$1"
-                width={80}
-              />
-              <Button
-                onPress={() => {
-                  // For demo purposes, we'll use a simple approach
-                  // In a real app, you'd use a ref to get the input value
-                  handlePageJump("1");
-                }}
-                size="$2"
-                padding="$1"
-              >
+              <YStack width={110}>
+                <Input
+                  keyboardType="numeric"
+                  placeholder={`1-${pagination.totalPages}`}
+                  onChangeText={setJumpValue}
+                  inputProps={{
+                    "aria-label": "Go to page",
+                    onSubmitEditing: (e: { nativeEvent: { text: string } }) =>
+                      handlePageJump(e.nativeEvent.text),
+                  }}
+                />
+              </YStack>
+              <Button onPress={() => handlePageJump(jumpValue)} size="$2" padding="$1">
                 Go
               </Button>
             </XStack>
@@ -571,6 +584,7 @@ export const ErrorStates: Story = {
 };
 
 export const EdgeCases: Story = {
+  parameters: pagerBoundarySpecimen,
   args: {
     ...Basic.args,
     pagination: {

package/src/components/DataTableToolbar/index.tsx

@@ -176,6 +176,7 @@ export function DataTableToolbar(props: DataTableToolbarProps) {
                     <Popover.Content
                       {...knobProps.borderRadius}
                       borderColor="$color6"
+                      transition={knobProps.transition}
                       enterStyle={{ x: 0, y: -10, opacity: 0 }}
                       exitStyle={{ x: 0, y: -10, opacity: 0 }}
                     >

package/src/components/DataTableViewOptions/DataTableViewOptions.stories.tsx

@@ -1,5 +1,6 @@
 import { action } from "@multiplatform.one/storybook";
 import React from "react";
+import { formatAbsoluteDate } from "@multiplatform.one/theme";
 import { Card, Text, View, XStack, YStack } from "tamagui";
 import { DataTableViewOptions } from "./index";
 
@@ -41,7 +42,7 @@ const allColumns = [
   {
     accessorKey: "createdAt",
     header: "Created",
-    cell: (info: any) => new Date(info.getValue()).toLocaleDateString(),
+    cell: (info: any) => formatAbsoluteDate(info.getValue()),
   },
   {
     accessorKey: "description",

package/src/components/FilterManager.tsx

@@ -24,6 +24,12 @@ export interface FilterManagerProps {
    * "no filters applied" disable carries its own reason.
    */
   disabledReason?: string;
+  /**
+   * Reason placement forwarded to the trigger Button — `"inline"` keeps the
+   * reason on the control line in toolbar rows (the stacked default breaks
+   * the row's shared control height). See the Button contract.
+   */
+  disabledReasonPlacement?: "below" | "inline";
   canCreateGlobal?: boolean;
   trigger?: React.ReactNode;
 }
@@ -33,6 +39,7 @@ export function FilterManager({
   onSaveFilter,
   disabled = false,
   disabledReason,
+  disabledReasonPlacement,
   canCreateGlobal = false,
   trigger,
 }: FilterManagerProps) {
@@ -49,7 +56,7 @@ export function FilterManager({
 
   const handleSave = async () => {
     if (!filterName.trim()) {
-      setError("Filter name is required");
+      setError(t("Filter name is required"));
       return;
     }
 
@@ -62,7 +69,7 @@ export function FilterManager({
       setIsGlobal(false);
       setOpen(false);
     } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to save filter");
+      setError(e instanceof Error ? e.message : t("Failed to save filter"));
     } finally {
       setIsSaving(false);
     }
@@ -83,31 +90,32 @@ export function FilterManager({
             disabledReason={
               disabled ? disabledReason : !hasFilters ? t("Apply filters to save them") : undefined
             }
-            aria-label="Save filter"
+            disabledReasonPlacement={disabledReasonPlacement}
+            aria-label={t("Save filter")}
           >
-            Save Filter
+            {t("Save Filter")}
           </Button>
         )}
       </KnobDialogTrigger>
 
       <KnobDialogContent minWidth={dialogMinWidth}>
-        <KnobDialogTitle>Save Filter</KnobDialogTitle>
+        <KnobDialogTitle>{t("Save Filter")}</KnobDialogTitle>
         <KnobDialogDescription>
-          Save the current filter configuration for quick access later.
+          {t("Save the current filter configuration for quick access later.")}
         </KnobDialogDescription>
 
         <YStack gap="$3">
           <Input
-            label="Filter Name"
+            label={t("Filter Name")}
             value={filterName}
             onChangeText={setFilterName}
-            placeholder="e.g., Big Pokemon"
+            placeholder={t("e.g., Big Pokemon")}
             disabled={isSaving}
           />
 
           {canCreateGlobal && (
             <Checkbox
-              label="Make this filter global (visible to all users)"
+              label={t("Make this filter global (visible to all users)")}
               checked={isGlobal}
               onCheckedChange={(checked) => setIsGlobal(checked === true)}
               disabled={isSaving}
@@ -121,7 +129,7 @@ export function FilterManager({
           )}
 
           <Text color="$color10" fontSize="$2">
-            Current filters: {currentFilters.length} active
+            {t("Current filters: {{count}} active", { count: currentFilters.length })}
           </Text>
         </YStack>
 
@@ -129,7 +137,7 @@ export function FilterManager({
           <KnobDialogClose asChild>
             {/* DG-ACT-05: the cancel action never renders disabled. */}
             <Button size={knobProps.sizeToken} variant="outlined">
-              Cancel
+              {t("Cancel")}
             </Button>
           </KnobDialogClose>
           {/* Stays pressable on an empty name — handleSave surfaces the
@@ -143,7 +151,7 @@ export function FilterManager({
             onPress={handleSave}
             loading={isSaving}
           >
-            Save Filter
+            {t("Save Filter")}
           </Button>
         </XStack>
 
@@ -155,7 +163,7 @@ export function FilterManager({
             size="$2"
             circular
             icon={XIcon}
-            aria-label="Close dialog"
+            aria-label={t("Close dialog")}
           />
         </KnobDialogClose>
       </KnobDialogContent>

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

@@ -149,6 +149,9 @@ export function TableInput<TData extends DataTableData = DataTableData>({
     <Field form={resolvedForm} name={name} validators={resolvedValidators}>
       {(field) => (
         <Inner
+          // Form state wins; the `data` fallback covers only the uninitialized
+          // instant before the field registers. A `data` prop diverging from
+          // form state is never load-bearing here (D-16 rider).
           rows={(field.state.value as TData[] | undefined) ?? data}
           commit={(next) => {
             field.handleChange(next);

package/src/components/__scratch__/scratch.spec.tsx

@@ -0,0 +1,46 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "../DataTable";
+
+type Row = { id: number; name: string; amount: number };
+const data: Row[] = [
+  { id: 1, name: "Alpha", amount: 10 },
+  { id: 2, name: "Beta", amount: 20 },
+];
+const columns: DataTableColumn<Row>[] = [
+  { id: "name", accessorKey: "name", header: "Name" },
+  {
+    id: "amount",
+    accessorKey: "amount",
+    header: "Amount",
+    align: "right",
+    cell: (info: any) => info.getValue(),
+  },
+];
+
+describe("scratch", () => {
+  it("dumps selection checkbox DOM", () => {
+    const { container } = renderWithProviders(
+      <DataTable
+        data={data}
+        columns={columns}
+        enableRowSelection
+        layout="table"
+        enablePagination={false}
+      />,
+    );
+    const labeled = container.querySelectorAll('[aria-label^="Select row"]');
+    console.log("SELECT-LABELED COUNT:", labeled.length);
+    labeled.forEach((el, i) => {
+      if (i < 2) console.log("EL", i, el.outerHTML.slice(0, 800));
+    });
+    const roleCheckbox = container.querySelectorAll('[role="checkbox"]');
+    console.log("ROLE CHECKBOX COUNT:", roleCheckbox.length);
+    const ariaChecked = container.querySelectorAll("[aria-checked]");
+    console.log("ARIA-CHECKED COUNT:", ariaChecked.length);
+    const firstCell = container.querySelector('[role="row"][aria-rowindex="1"]');
+    console.log("FIRST DATA ROW:", firstCell ? firstCell.outerHTML.slice(0, 500) : "none");
+    expect(true).toBe(true);
+  });
+});

package/src/hooks/useDataTable.ts

@@ -408,9 +408,35 @@ export function useDataTable<TData extends DataTableData = DataTableData>({
     return String(index);
   }, []);
 
+  // Map the package column aliases onto TanStack's per-column switches:
+  // `sortable`/`filterable` were documented API but previously reached no
+  // TanStack option, so `sortable: false` columns still rendered a live sort
+  // header (caret, tab stop, aria-sort) — chrome asserting an interaction
+  // the column declined (Axiom 6 HONEST STATE). Explicit TanStack props win.
+  const normalizedColumns = useMemo(
+    () =>
+      columns.map((column) => {
+        const { sortable, filterable } = column as {
+          sortable?: boolean;
+          filterable?: boolean;
+        };
+        if (sortable === undefined && filterable === undefined) return column;
+        return {
+          ...column,
+          ...(sortable !== undefined && column.enableSorting === undefined
+            ? { enableSorting: sortable }
+            : {}),
+          ...(filterable !== undefined && column.enableColumnFilter === undefined
+            ? { enableColumnFilter: filterable }
+            : {}),
+        };
+      }),
+    [columns],
+  );
+
   const table = useReactTable({
     data: preFilteredData,
-    columns: columns as ColumnDef<TData>[],
+    columns: normalizedColumns as ColumnDef<TData>[],
     defaultColumn: { filterFn: operatorFilterFn as any },
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: enableRowExpansion ? getExpandedRowModel() : undefined,