@izumisy-tailor/tailor-data-viewer 0.2.29 → 0.2.31

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.2.29",
+  "version": "0.2.31",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [

package/src/component/{column-selector.test.tsx → data-table/column-selector.test.tsx}

@@ -1,7 +1,7 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, it, expect, vi } from "vitest";
-import type { Column } from "./types";
-import { createTestProviders } from "../tests/helpers";
+import type { Column } from "../types";
+import { createTestProviders } from "../../tests/helpers";
 import { ColumnSelector } from "./column-selector";
 
 // =============================================================================

package/src/component/{column-selector.tsx → data-table/column-selector.tsx}

@@ -1,4 +1,5 @@
-import { useDataTableContext } from "./data-table/data-table-context";
+import { useDataTableContext } from "./data-table-context";
+import { getLabels } from "./i18n";
 
 /**
  * Column visibility toggle dropdown.
@@ -20,12 +21,14 @@ export function ColumnSelector() {
     toggleColumn,
     showAllColumns,
     hideAllColumns,
+    locale,
   } = useDataTableContext();
+  const labels = getLabels(locale);
   return (
     <div className="relative inline-block">
       <details className="group">
         <summary className="inline-flex cursor-pointer items-center gap-1 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground select-none">
-          Columns
+          {labels.columnSelector.columns}
         </summary>
         <div className="absolute right-0 z-50 mt-1 min-w-[180px] rounded-md border bg-popover p-2 text-popover-foreground shadow-md">
           <div className="flex gap-2 border-b pb-2 mb-2">
@@ -34,14 +37,14 @@ export function ColumnSelector() {
               className="text-xs text-muted-foreground hover:text-foreground"
               onClick={showAllColumns}
             >
-              Select all
+              {labels.columnSelector.selectAll}
             </button>
             <button
               type="button"
               className="text-xs text-muted-foreground hover:text-foreground"
               onClick={hideAllColumns}
             >
-              Deselect all
+              {labels.columnSelector.deselectAll}
             </button>
           </div>
           {columns.map((col) => {

package/src/component/{csv-button.test.tsx → data-table/csv-button.test.tsx}

@@ -1,7 +1,7 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import type { Column } from "./types";
-import { createTestProviders } from "../tests/helpers";
+import type { Column } from "../types";
+import { createTestProviders } from "../../tests/helpers";
 import { CsvButton } from "./csv-button";
 
 // =============================================================================

package/src/component/{csv-button.tsx → data-table/csv-button.tsx}

@@ -1,4 +1,5 @@
-import { useDataTableContext } from "./data-table/data-table-context";
+import { useDataTableContext } from "./data-table-context";
+import { getLabels } from "./i18n";
 
 /**
  * CSV export button.
@@ -15,7 +16,8 @@ import { useDataTableContext } from "./data-table/data-table-context";
  * ```
  */
 export function CsvButton({ filename = "export" }: { filename?: string }) {
-  const { visibleColumns, rows } = useDataTableContext();
+  const { visibleColumns, rows, locale } = useDataTableContext();
+  const labels = getLabels(locale);
   const handleExport = () => {
     // Build header row
     const headers = visibleColumns.map((col) => {
@@ -62,7 +64,7 @@ export function CsvButton({ filename = "export" }: { filename?: string }) {
       className="inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
       onClick={handleExport}
     >
-      Export CSV
+      {labels.csvExport}
     </button>
   );
 }

package/src/component/data-table/data-table-context.tsx

@@ -6,6 +6,7 @@ import type {
   RowOperations,
   SortState,
 } from "../types";
+import type { DataTableLocale } from "./i18n";
 
 /**
  * Context value provided by `DataTable.Provider`.
@@ -43,6 +44,9 @@ export interface DataTableContextValue<TRow extends Record<string, unknown>> {
   onClickRow?: (row: TRow) => void;
   /** Row action definitions for the actions column */
   rowActions?: RowAction<TRow>[];
+
+  /** Locale for i18n labels */
+  locale: DataTableLocale;
 }
 
 // Using `any` for the context default since generic contexts need a base type.

package/src/component/data-table/data-table.test.tsx

@@ -68,6 +68,7 @@ function createCtx(
     showAllColumns: () => {},
     hideAllColumns: () => {},
     pageInfo: defaultPageInfo,
+    locale: "en",
     ...noopRowOps,
     ...overrides,
   };

package/src/component/data-table/data-table.tsx

@@ -16,6 +16,7 @@ import {
   DataTableContext,
   type DataTableContextValue,
 } from "./data-table-context";
+import { getLabels } from "./i18n";
 
 // =============================================================================
 // DataTable.Root
@@ -99,6 +100,7 @@ function DataTableProviderComponent<TRow extends Record<string, unknown>>({
     pageInfo: value.pageInfo,
     onClickRow: value.onClickRow,
     rowActions: value.rowActions,
+    locale: value.locale,
   };
 
   const collectionValue = value.collection ?? null;
@@ -130,7 +132,8 @@ function DataTableHeaders({ className }: { className?: string }) {
       "<DataTable.Headers> must be used within <DataTable.Provider>",
     );
   }
-  const { columns, sortStates, onSort, rowActions } = ctx;
+  const { columns, sortStates, onSort, rowActions, locale } = ctx;
+  const labels = getLabels(locale);
 
   return (
     <Table.Headers className={className}>
@@ -176,7 +179,7 @@ function DataTableHeaders({ className }: { className?: string }) {
         })}
         {rowActions && rowActions.length > 0 && (
           <Table.HeaderCell style={{ width: 50 }}>
-            <span className="sr-only">操作</span>
+            <span className="sr-only">{labels.actionsHeader}</span>
           </Table.HeaderCell>
         )}
       </Table.HeaderRow>
@@ -209,7 +212,8 @@ function DataTableBody({
       "<DataTable.Body> must be used within <DataTable.Provider>",
     );
   }
-  const { columns, rows, loading, error, onClickRow, rowActions } = ctx;
+  const { columns, rows, loading, error, onClickRow, rowActions, locale } = ctx;
+  const labels = getLabels(locale);
   const hasRowActions = rowActions && rowActions.length > 0;
   const totalColSpan = (columns?.length ?? 1) + (hasRowActions ? 1 : 0);
 
@@ -224,21 +228,23 @@ function DataTableBody({
       {loading && (!rows || rows.length === 0) && (
         <Table.Row>
           <Table.Cell colSpan={totalColSpan} className="h-24 text-center">
-            <span className="text-muted-foreground">Loading...</span>
+            <span className="text-muted-foreground">{labels.loading}</span>
           </Table.Cell>
         </Table.Row>
       )}
       {error && (
         <Table.Row>
           <Table.Cell colSpan={totalColSpan} className="h-24 text-center">
-            <span className="text-destructive">Error: {error.message}</span>
+            <span className="text-destructive">
+              {labels.errorPrefix} {error.message}
+            </span>
           </Table.Cell>
         </Table.Row>
       )}
       {!loading && !error && (!rows || rows.length === 0) && (
         <Table.Row>
           <Table.Cell colSpan={totalColSpan} className="h-24 text-center">
-            <span className="text-muted-foreground">No data</span>
+            <span className="text-muted-foreground">{labels.noData}</span>
           </Table.Cell>
         </Table.Row>
       )}
@@ -264,7 +270,11 @@ function DataTableBody({
               style={{ width: 50 }}
               onClick={(e) => e.stopPropagation()}
             >
-              <RowActionsMenu actions={rowActions} row={row} />
+              <RowActionsMenu
+                actions={rowActions}
+                row={row}
+                ariaLabel={labels.rowActions}
+              />
             </Table.Cell>
           )}
         </Table.Row>
@@ -350,9 +360,11 @@ function formatValue(value: unknown): ReactNode {
 function RowActionsMenu<TRow extends Record<string, unknown>>({
   actions,
   row,
+  ariaLabel,
 }: {
   actions: RowAction<TRow>[];
   row: TRow;
+  ariaLabel: string;
 }) {
   const [open, setOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -384,7 +396,7 @@ function RowActionsMenu<TRow extends Record<string, unknown>>({
         type="button"
         className="inline-flex h-8 w-8 items-center justify-center rounded-md text-sm hover:bg-accent"
         onClick={() => setOpen((prev) => !prev)}
-        aria-label="Row actions"
+        aria-label={ariaLabel}
         aria-haspopup="true"
         aria-expanded={open}
       >

package/src/component/data-table/i18n.ts

@@ -0,0 +1,153 @@
+import type { FilterOperator } from "../types";
+
+export type DataTableLocale = "en" | "ja";
+
+export interface DataTableLabels {
+  // DataTable.Body
+  loading: string;
+  noData: string;
+  errorPrefix: string;
+
+  // DataTable.Headers (sr-only for actions column)
+  actionsHeader: string;
+
+  // RowActionsMenu aria-label
+  rowActions: string;
+
+  // Pagination
+  pagination: {
+    first: string;
+    previous: string;
+    next: string;
+    last: string;
+    rowsPerPage: string;
+  };
+
+  // ColumnSelector
+  columnSelector: {
+    columns: string;
+    selectAll: string;
+    deselectAll: string;
+  };
+
+  // CsvButton
+  csvExport: string;
+
+  // SearchFilterForm
+  searchFilter: {
+    search: string;
+    searchFilter: string;
+    clearAll: string;
+    activeFilters: string;
+    addFilter: string;
+    selectField: string;
+    enterValue: string;
+    selectValue: string;
+    add: string;
+    noFilterableFields: string;
+    allFieldsFiltered: string;
+    operatorLabels: Record<FilterOperator, string>;
+  };
+}
+
+const en: DataTableLabels = {
+  loading: "Loading...",
+  noData: "No data",
+  errorPrefix: "Error:",
+  actionsHeader: "Actions",
+  rowActions: "Row actions",
+  pagination: {
+    first: "First page",
+    previous: "Previous page",
+    next: "Next page",
+    last: "Last page",
+    rowsPerPage: "Rows per page",
+  },
+  columnSelector: {
+    columns: "Columns",
+    selectAll: "Select all",
+    deselectAll: "Deselect all",
+  },
+  csvExport: "Export CSV",
+  searchFilter: {
+    search: "Search",
+    searchFilter: "Search Filter",
+    clearAll: "Clear all",
+    activeFilters: "Active filters",
+    addFilter: "Add filter",
+    selectField: "Select field...",
+    enterValue: "Enter value...",
+    selectValue: "Select...",
+    add: "Add",
+    noFilterableFields: "No filterable fields",
+    allFieldsFiltered: "All fields have filters applied",
+    operatorLabels: {
+      eq: "=",
+      ne: "≠",
+      contains: "contains",
+      startsWith: "starts with",
+      endsWith: "ends with",
+      gt: ">",
+      gte: "≥",
+      lt: "<",
+      lte: "≤",
+      between: "between",
+      in: "in",
+      notIn: "not in",
+    },
+  },
+};
+
+const ja: DataTableLabels = {
+  loading: "読み込み中...",
+  noData: "データがありません",
+  errorPrefix: "エラー:",
+  actionsHeader: "操作",
+  rowActions: "行の操作",
+  pagination: {
+    first: "最初のページ",
+    previous: "前のページ",
+    next: "次のページ",
+    last: "最後のページ",
+    rowsPerPage: "表示件数",
+  },
+  columnSelector: {
+    columns: "列の表示",
+    selectAll: "すべて選択",
+    deselectAll: "すべて解除",
+  },
+  csvExport: "CSV出力",
+  searchFilter: {
+    search: "検索",
+    searchFilter: "検索フィルター",
+    clearAll: "すべてクリア",
+    activeFilters: "適用中のフィルター",
+    addFilter: "フィルターを追加",
+    selectField: "フィールドを選択...",
+    enterValue: "値を入力...",
+    selectValue: "選択...",
+    add: "追加",
+    noFilterableFields: "フィルタ可能なフィールドがありません",
+    allFieldsFiltered: "すべてのフィールドにフィルターが適用されています",
+    operatorLabels: {
+      eq: "等しい",
+      ne: "等しくない",
+      contains: "含む",
+      startsWith: "で始まる",
+      endsWith: "で終わる",
+      gt: "より大きい",
+      gte: "以上",
+      lt: "より小さい",
+      lte: "以下",
+      between: "範囲内",
+      in: "含まれる",
+      notIn: "含まれない",
+    },
+  },
+};
+
+const locales: Record<DataTableLocale, DataTableLabels> = { en, ja };
+
+export function getLabels(locale: DataTableLocale): DataTableLabels {
+  return locales[locale];
+}

package/src/component/{pagination.test.tsx → data-table/pagination.test.tsx}

@@ -1,7 +1,7 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, it, expect, vi } from "vitest";
-import type { Column } from "./types";
-import { createTestProviders } from "../tests/helpers";
+import type { Column } from "../types";
+import { createTestProviders } from "../../tests/helpers";
 import { Pagination } from "./pagination";
 
 // =============================================================================

package/src/component/{pagination.tsx → data-table/pagination.tsx}

@@ -1,5 +1,6 @@
-import { useDataTableContext } from "./data-table/data-table-context";
-import { useCollectionContext } from "./collection/collection-provider";
+import { useDataTableContext } from "./data-table-context";
+import { useCollectionContext } from "../collection/collection-provider";
+import { getLabels } from "./i18n";
 
 // =============================================================================
 // Inline SVG Icons (lucide-style, no external dependency)
@@ -126,7 +127,7 @@ const btnClass =
  * ```
  */
 export function Pagination({ labels, pageSizeOptions }: PaginationProps = {}) {
-  const { pageInfo } = useDataTableContext();
+  const { pageInfo, locale } = useDataTableContext();
   const {
     nextPage,
     prevPage,
@@ -140,11 +141,12 @@ export function Pagination({ labels, pageSizeOptions }: PaginationProps = {}) {
     setPageSize,
   } = useCollectionContext();
 
-  const firstLabel = labels?.first ?? "First page";
-  const previousLabel = labels?.previous ?? "Previous page";
-  const nextLabel = labels?.next ?? "Next page";
-  const lastLabel = labels?.last ?? "Last page";
-  const rowsPerPageLabel = labels?.rowsPerPage ?? "Rows per page";
+  const pl = getLabels(locale).pagination;
+  const firstLabel = labels?.first ?? pl.first;
+  const previousLabel = labels?.previous ?? pl.previous;
+  const nextLabel = labels?.next ?? pl.next;
+  const lastLabel = labels?.last ?? pl.last;
+  const rowsPerPageLabel = labels?.rowsPerPage ?? pl.rowsPerPage;
 
   return (
     <div className="flex items-center justify-end gap-2 py-2">

package/src/component/{search-filter-form.test.tsx → data-table/search-filter-form.test.tsx}

@@ -1,8 +1,8 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi } from "vitest";
-import type { Column, Filter } from "./types";
-import { createTestProviders } from "../tests/helpers";
+import type { Column, Filter } from "../types";
+import { createTestProviders } from "../../tests/helpers";
 import { SearchFilterForm } from "./search-filter-form";
 
 // =============================================================================

package/src/component/{search-filter-form.tsx → data-table/search-filter-form.tsx}

@@ -6,10 +6,16 @@ import {
   type KeyboardEvent,
   type ReactNode,
 } from "react";
-import type { FilterOperator, FilterConfig, SearchFilterLabels } from "./types";
-import { OPERATORS_BY_FILTER_TYPE, DEFAULT_OPERATOR_LABELS } from "./types";
-import { useDataTableContext } from "./data-table/data-table-context";
-import { useCollectionContext } from "./collection/collection-provider";
+import type {
+  Filter,
+  FilterOperator,
+  FilterConfig,
+  SearchFilterLabels,
+} from "../types";
+import { OPERATORS_BY_FILTER_TYPE } from "../types";
+import { useDataTableContext } from "./data-table-context";
+import { useCollectionContext } from "../collection/collection-provider";
+import { getLabels } from "./i18n";
 
 /**
  * Composite search filter form.
@@ -38,9 +44,10 @@ export function SearchFilterForm({
   /** Custom trigger element. When provided, replaces the default trigger button content. */
   trigger?: ReactNode;
 } = {}) {
-  const { columns } = useDataTableContext();
+  const { columns, locale } = useDataTableContext();
   const { filters, addFilter, removeFilter, clearFilters } =
     useCollectionContext();
+  const sf = getLabels(locale).searchFilter;
   const filterableColumns = columns.filter(
     (col) => col.kind === "field" && col.filter,
   );
@@ -70,16 +77,18 @@ export function SearchFilterForm({
 
   // Label helpers
   const l = (key: string, fallback: string) =>
-    (labels as Record<string, string> | undefined)?.[key] ?? fallback;
+    (labels as Record<string, string> | undefined)?.[key] ??
+    (sf as unknown as Record<string, string>)[key] ??
+    fallback;
 
   const getOperatorLabel = useCallback(
     (filterType: FilterConfig["type"], operator: FilterOperator): string => {
       if (labels?.getOperatorLabel) {
         return labels.getOperatorLabel(filterType, operator);
       }
-      return DEFAULT_OPERATOR_LABELS[operator] ?? operator;
+      return sf.operatorLabels[operator] ?? operator;
     },
-    [labels],
+    [labels, sf],
   );
 
   const getFieldLabel = useCallback(
@@ -100,10 +109,7 @@ export function SearchFilterForm({
     }): string => {
       const fieldLabel = getFieldLabel(filter.field);
       if (labels?.formatFilterDisplay) {
-        return labels.formatFilterDisplay(
-          filter as import("./types").Filter,
-          fieldLabel,
-        );
+        return labels.formatFilterDisplay(filter as Filter, fieldLabel);
       }
       const value =
         typeof filter.value === "boolean"
@@ -111,8 +117,7 @@ export function SearchFilterForm({
             ? "true"
             : "false"
           : String(filter.value);
-      const opLabel =
-        DEFAULT_OPERATOR_LABELS[filter.operator] ?? filter.operator;
+      const opLabel = sf.operatorLabels[filter.operator] ?? filter.operator;
       return `${fieldLabel} ${opLabel} ${value}`;
     },
     [getFieldLabel, labels],

package/src/component/data-table/use-data-table.ts

@@ -42,6 +42,7 @@ export function useDataTable<TRow extends Record<string, unknown>>(
     collection,
     onClickRow,
     rowActions,
+    locale = "en",
   } = options;
 
   // ---------------------------------------------------------------------------
@@ -255,5 +256,8 @@ export function useDataTable<TRow extends Record<string, unknown>>(
     // Row interaction (passthrough for DataTable.Provider)
     onClickRow,
     rowActions,
+
+    // Locale
+    locale,
   };
 }

package/src/component/index.ts

@@ -63,13 +63,17 @@ export { Table } from "./table";
 export { DataTable } from "./data-table/data-table";
 export { useDataTable } from "./data-table/use-data-table";
 export { useDataTableContext } from "./data-table/data-table-context";
+export type { DataTableLocale } from "./data-table/i18n";
 
 // Field helpers
 export { createColumnHelper } from "./field-helpers";
 
-// Utility components
-export { Pagination } from "./pagination";
-export type { PaginationProps, PaginationLabels } from "./pagination";
-export { ColumnSelector } from "./column-selector";
-export { CsvButton } from "./csv-button";
-export { SearchFilterForm } from "./search-filter-form";
+// Utility components (co-located with DataTable)
+export { Pagination } from "./data-table/pagination";
+export type {
+  PaginationProps,
+  PaginationLabels,
+} from "./data-table/pagination";
+export { ColumnSelector } from "./data-table/column-selector";
+export { CsvButton } from "./data-table/csv-button";
+export { SearchFilterForm } from "./data-table/search-filter-form";

package/src/component/table.tsx

@@ -12,7 +12,8 @@ interface TableRootProps extends ComponentProps<"table"> {
 
 function Root({ className, tableLayout = "fixed", ...props }: TableRootProps) {
   return (
-    <div className="relative w-full overflow-x-auto rounded-md border bg-background">
+    /* TODO: bg-card should be something specific (bg-table?) */
+    <div className="relative w-full overflow-x-auto rounded-md border bg-card">
       <table
         className={cn(
           "w-full caption-bottom text-sm",

package/src/component/types.ts

@@ -515,6 +515,8 @@ export interface UseDataTableOptions<TRow extends Record<string, unknown>> {
   onClickRow?: (row: TRow) => void;
   /** Row action definitions for the actions column */
   rowActions?: RowAction<TRow>[];
+  /** Locale for i18n labels (default: "en") */
+  locale?: "en" | "ja";
 }
 
 /**
@@ -623,6 +625,9 @@ export interface UseDataTableReturn<TRow extends Record<string, unknown>> {
   onClickRow?: (row: TRow) => void;
   /** Row action definitions for the actions column */
   rowActions?: RowAction<TRow>[];
+
+  /** Resolved locale */
+  locale: "en" | "ja";
 }
 
 // =============================================================================

package/src/tests/helpers.tsx

@@ -37,6 +37,7 @@ export function createMockDataTableContext<T extends Record<string, unknown>>(
       hasPreviousPage: false,
       startCursor: null,
     },
+    locale: "en",
     ...overrides,
   };
 }

package/src/component/components.test.tsx

@@ -1,349 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, it, expect, vi } from "vitest";
-import { Table } from "./table";
-import { DataTable } from "./data-table/data-table";
-import { DataTableContext } from "./data-table/data-table-context";
-import type { DataTableContextValue } from "./data-table/data-table-context";
-import type { Column } from "./types";
-
-describe("Table (static)", () => {
-  it("renders a basic static table", () => {
-    render(
-      <Table.Root>
-        <Table.Headers>
-          <Table.HeaderRow>
-            <Table.HeaderCell>Name</Table.HeaderCell>
-            <Table.HeaderCell>Status</Table.HeaderCell>
-          </Table.HeaderRow>
-        </Table.Headers>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>Alice</Table.Cell>
-            <Table.Cell>Active</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Bob</Table.Cell>
-            <Table.Cell>Inactive</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table.Root>,
-    );
-
-    expect(screen.getByText("Name")).toBeInTheDocument();
-    expect(screen.getByText("Status")).toBeInTheDocument();
-    expect(screen.getByText("Alice")).toBeInTheDocument();
-    expect(screen.getByText("Bob")).toBeInTheDocument();
-  });
-});
-
-type TestRow = {
-  id: string;
-  name: string;
-  status: string;
-};
-
-const testColumns: Column<TestRow>[] = [
-  {
-    kind: "field",
-    dataKey: "name",
-    label: "Name",
-    sort: { type: "string" },
-  },
-  {
-    kind: "field",
-    dataKey: "status",
-    label: "Status",
-  },
-  {
-    kind: "display",
-    id: "actions",
-    label: "Actions",
-    render: (row) => <button>Edit {row.name}</button>,
-  },
-];
-
-const testRows: TestRow[] = [
-  { id: "1", name: "Alice", status: "Active" },
-  { id: "2", name: "Bob", status: "Inactive" },
-];
-
-const noopRowOps = {
-  updateRow: () => ({ rollback: () => {} }),
-  deleteRow: () => ({
-    rollback: () => {},
-    deletedRow: {} as TestRow,
-  }),
-  insertRow: () => ({ rollback: () => {} }),
-};
-
-const defaultPageInfo = {
-  hasNextPage: false,
-  endCursor: null,
-  hasPreviousPage: false,
-  startCursor: null,
-};
-
-function createCtx(
-  overrides: Partial<DataTableContextValue<TestRow>> = {},
-): DataTableContextValue<TestRow> {
-  return {
-    columns: testColumns,
-    rows: testRows,
-    loading: false,
-    error: null,
-    sortStates: [],
-    visibleColumns: testColumns,
-    isColumnVisible: () => true,
-    toggleColumn: () => {},
-    showAllColumns: () => {},
-    hideAllColumns: () => {},
-    pageInfo: defaultPageInfo,
-    ...noopRowOps,
-    ...overrides,
-  };
-}
-
-describe("DataTable", () => {
-  it("renders data-bound table with auto-generated rows", () => {
-    render(
-      <DataTableContext.Provider value={createCtx()}>
-        <DataTable.Root>
-          <DataTable.Headers />
-          <DataTable.Body />
-        </DataTable.Root>
-      </DataTableContext.Provider>,
-    );
-
-    expect(screen.getByText("Name")).toBeInTheDocument();
-    expect(screen.getByText("Status")).toBeInTheDocument();
-    expect(screen.getByText("Alice")).toBeInTheDocument();
-    expect(screen.getByText("Bob")).toBeInTheDocument();
-    expect(screen.getByText("Active")).toBeInTheDocument();
-  });
-
-  it("renders display columns via render function", () => {
-    render(
-      <DataTableContext.Provider value={createCtx()}>
-        <DataTable.Root>
-          <DataTable.Headers />
-          <DataTable.Body />
-        </DataTable.Root>
-      </DataTableContext.Provider>,
-    );
-
-    expect(screen.getByText("Edit Alice")).toBeInTheDocument();
-    expect(screen.getByText("Edit Bob")).toBeInTheDocument();
-  });
-
-  it("shows loading state", () => {
-    render(
-      <DataTableContext.Provider value={createCtx({ rows: [], loading: true })}>
-        <DataTable.Root>
-          <DataTable.Headers />
-          <DataTable.Body />
-        </DataTable.Root>
-      </DataTableContext.Provider>,
-    );
-
-    expect(screen.getByText("Loading...")).toBeInTheDocument();
-  });
-
-  it("shows error state", () => {
-    const err = new Error("Something went wrong");
-    render(
-      <DataTableContext.Provider value={createCtx({ rows: [], error: err })}>
-        <DataTable.Root>
-          <DataTable.Headers />
-          <DataTable.Body />
-        </DataTable.Root>
-      </DataTableContext.Provider>,
-    );
-
-    expect(screen.getByText("Error: Something went wrong")).toBeInTheDocument();
-  });
-
-  it("shows empty state", () => {
-    render(
-      <DataTableContext.Provider value={createCtx({ rows: [] })}>
-        <DataTable.Root>
-          <DataTable.Headers />
-          <DataTable.Body />
-        </DataTable.Root>
-      </DataTableContext.Provider>,
-    );
-
-    expect(screen.getByText("No data")).toBeInTheDocument();
-  });
-
-  it("renders sort indicator on sorted column", () => {
-    render(
-      <DataTableContext.Provider
-        value={createCtx({
-          sortStates: [{ field: "name", direction: "Asc" }],
-        })}
-      >
-        <DataTable.Root>
-          <DataTable.Headers />
-          <DataTable.Body />
-        </DataTable.Root>
-      </DataTableContext.Provider>,
-    );
-
-    expect(screen.getByText("▲")).toBeInTheDocument();
-  });
-
-  it("supports custom rendering with children", () => {
-    render(
-      <DataTableContext.Provider value={createCtx()}>
-        <DataTable.Root>
-          <DataTable.Headers />
-          <DataTable.Body>
-            <DataTable.Row>
-              <DataTable.Cell>Custom Cell</DataTable.Cell>
-            </DataTable.Row>
-          </DataTable.Body>
-        </DataTable.Root>
-      </DataTableContext.Provider>,
-    );
-
-    expect(screen.getByText("Custom Cell")).toBeInTheDocument();
-  });
-
-  describe("header sort click", () => {
-    const sortableColumns: Column<TestRow>[] = [
-      {
-        kind: "field",
-        dataKey: "name",
-        label: "Name",
-        sort: { type: "string" },
-      },
-      {
-        kind: "field",
-        dataKey: "status",
-        label: "Status",
-        sort: { type: "string" },
-      },
-    ];
-
-    it("calls onSort with Asc when clicking unsorted column", async () => {
-      const onSort = vi.fn();
-      render(
-        <DataTableContext.Provider
-          value={createCtx({
-            columns: sortableColumns,
-            visibleColumns: sortableColumns,
-            sortStates: [],
-            onSort,
-          })}
-        >
-          <DataTable.Root>
-            <DataTable.Headers />
-            <DataTable.Body />
-          </DataTable.Root>
-        </DataTableContext.Provider>,
-      );
-
-      await userEvent.click(screen.getByText("Name"));
-      expect(onSort).toHaveBeenCalledWith("name", "Asc");
-    });
-
-    it("cycles Asc → Desc on second click", async () => {
-      const onSort = vi.fn();
-      render(
-        <DataTableContext.Provider
-          value={createCtx({
-            columns: sortableColumns,
-            visibleColumns: sortableColumns,
-            sortStates: [{ field: "name", direction: "Asc" }],
-            onSort,
-          })}
-        >
-          <DataTable.Root>
-            <DataTable.Headers />
-            <DataTable.Body />
-          </DataTable.Root>
-        </DataTableContext.Provider>,
-      );
-
-      await userEvent.click(screen.getByText("Name"));
-      expect(onSort).toHaveBeenCalledWith("name", "Desc");
-    });
-
-    it("cycles Desc → remove (undefined) on third click", async () => {
-      const onSort = vi.fn();
-      render(
-        <DataTableContext.Provider
-          value={createCtx({
-            columns: sortableColumns,
-            visibleColumns: sortableColumns,
-            sortStates: [{ field: "name", direction: "Desc" }],
-            onSort,
-          })}
-        >
-          <DataTable.Root>
-            <DataTable.Headers />
-            <DataTable.Body />
-          </DataTable.Root>
-        </DataTableContext.Provider>,
-      );
-
-      await userEvent.click(screen.getByText("Name"));
-      expect(onSort).toHaveBeenCalledWith("name", undefined);
-    });
-
-    it("does not call onSort for non-sortable column", async () => {
-      const onSort = vi.fn();
-      const mixedColumns: Column<TestRow>[] = [
-        {
-          kind: "field",
-          dataKey: "name",
-          label: "Name",
-          sort: { type: "string" },
-        },
-        { kind: "field", dataKey: "status", label: "Status" },
-      ];
-      render(
-        <DataTableContext.Provider
-          value={createCtx({
-            columns: mixedColumns,
-            visibleColumns: mixedColumns,
-            sortStates: [],
-            onSort,
-          })}
-        >
-          <DataTable.Root>
-            <DataTable.Headers />
-            <DataTable.Body />
-          </DataTable.Root>
-        </DataTableContext.Provider>,
-      );
-
-      await userEvent.click(screen.getByText("Status"));
-      expect(onSort).not.toHaveBeenCalled();
-    });
-
-    it("shows sort indicators for multiple sorted columns", () => {
-      render(
-        <DataTableContext.Provider
-          value={createCtx({
-            columns: sortableColumns,
-            visibleColumns: sortableColumns,
-            sortStates: [
-              { field: "name", direction: "Asc" },
-              { field: "status", direction: "Desc" },
-            ],
-          })}
-        >
-          <DataTable.Root>
-            <DataTable.Headers />
-            <DataTable.Body />
-          </DataTable.Root>
-        </DataTableContext.Provider>,
-      );
-
-      expect(screen.getByText("▲")).toBeInTheDocument();
-      expect(screen.getByText("▼")).toBeInTheDocument();
-    });
-  });
-});