@izumisy-tailor/tailor-data-viewer 0.2.2 → 0.2.4

package/package.json

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

package/src/component/components.test.tsx

@@ -69,8 +69,8 @@ describe("DataTable", () => {
   it("renders data-bound table with auto-generated rows", () => {
     render(
       <DataTable.Root columns={testColumns} rows={testRows}>
-        <DataTable.Headers columns={testColumns} />
-        <DataTable.Body columns={testColumns} rows={testRows} />
+        <DataTable.Headers />
+        <DataTable.Body />
       </DataTable.Root>,
     );
 
@@ -84,8 +84,8 @@ describe("DataTable", () => {
   it("renders display columns via render function", () => {
     render(
       <DataTable.Root columns={testColumns} rows={testRows}>
-        <DataTable.Headers columns={testColumns} />
-        <DataTable.Body columns={testColumns} rows={testRows} />
+        <DataTable.Headers />
+        <DataTable.Body />
       </DataTable.Root>,
     );
 
@@ -96,8 +96,8 @@ describe("DataTable", () => {
   it("shows loading state", () => {
     render(
       <DataTable.Root columns={testColumns} rows={[]} loading>
-        <DataTable.Headers columns={testColumns} />
-        <DataTable.Body columns={testColumns} rows={[]} loading />
+        <DataTable.Headers />
+        <DataTable.Body />
       </DataTable.Root>,
     );
 
@@ -108,8 +108,8 @@ describe("DataTable", () => {
     const err = new Error("Something went wrong");
     render(
       <DataTable.Root columns={testColumns} rows={[]} error={err}>
-        <DataTable.Headers columns={testColumns} />
-        <DataTable.Body columns={testColumns} rows={[]} error={err} />
+        <DataTable.Headers />
+        <DataTable.Body />
       </DataTable.Root>,
     );
 
@@ -119,8 +119,8 @@ describe("DataTable", () => {
   it("shows empty state", () => {
     render(
       <DataTable.Root columns={testColumns} rows={[]}>
-        <DataTable.Headers columns={testColumns} />
-        <DataTable.Body columns={testColumns} rows={[]} />
+        <DataTable.Headers />
+        <DataTable.Body />
       </DataTable.Root>,
     );
 
@@ -129,12 +129,13 @@ describe("DataTable", () => {
 
   it("renders sort indicator on sorted column", () => {
     render(
-      <DataTable.Root columns={testColumns} rows={testRows}>
-        <DataTable.Headers
-          columns={testColumns}
-          sortStates={[{ field: "name", direction: "Asc" }]}
-        />
-        <DataTable.Body columns={testColumns} rows={testRows} />
+      <DataTable.Root
+        columns={testColumns}
+        rows={testRows}
+        sortStates={[{ field: "name", direction: "Asc" }]}
+      >
+        <DataTable.Headers />
+        <DataTable.Body />
       </DataTable.Root>,
     );
 
@@ -144,7 +145,7 @@ describe("DataTable", () => {
   it("supports custom rendering with children", () => {
     render(
       <DataTable.Root columns={testColumns} rows={testRows}>
-        <DataTable.Headers columns={testColumns} />
+        <DataTable.Headers />
         <DataTable.Body>
           <DataTable.Row>
             <DataTable.Cell>Custom Cell</DataTable.Cell>

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

@@ -1,15 +1,25 @@
 import { createContext, useContext } from "react";
-import type { RowOperations } from "../types";
+import type { Column, RowOperations, SortState } from "../types";
 
 /**
  * Context value provided by `DataTable.Root`.
  *
- * Currently exposes row operations for optimistic updates.
+ * Exposes row operations for optimistic updates and table state
+ * so that `DataTable.Headers` / `DataTable.Body` can read them
+ * without explicit props.
  */
 export interface DataTableContextValue<TRow extends Record<string, unknown>> {
   updateRow: RowOperations<TRow>["updateRow"];
   deleteRow: RowOperations<TRow>["deleteRow"];
   insertRow: RowOperations<TRow>["insertRow"];
+
+  // Table state propagated from DataTable.Root
+  columns: Column<TRow>[];
+  rows: TRow[];
+  loading: boolean;
+  error: Error | null;
+  sortStates: SortState[];
+  onSort?: (field: string, direction?: "Asc" | "Desc") => void;
 }
 
 // Using `any` for the context default since generic contexts need a base type.
@@ -31,7 +41,9 @@ export { DataTableContext };
  * };
  * ```
  */
-export function useDataTableContext<TRow extends Record<string, unknown>>(): DataTableContextValue<TRow> {
+export function useDataTableContext<
+  TRow extends Record<string, unknown>,
+>(): DataTableContextValue<TRow> {
   const ctx = useContext(DataTableContext);
   if (!ctx) {
     throw new Error("useDataTableContext must be used within <DataTable.Root>");

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

@@ -1,7 +1,12 @@
-import { createElement, type ComponentProps, type ReactNode } from "react";
+import {
+  createElement,
+  useContext,
+  type ComponentProps,
+  type ReactNode,
+} from "react";
 import { cn } from "../lib/utils";
 import { Table } from "../table";
-import type { Column, DataTableRootProps, SortState } from "../types";
+import type { Column, DataTableRootProps } from "../types";
 import {
   DataTableContext,
   type DataTableContextValue,
@@ -14,23 +19,38 @@ import {
 /**
  * Internal noop row operations used when none are provided.
  */
-const noopRowOperations: DataTableContextValue<Record<string, unknown>> = {
+const noopRowOps = {
   updateRow: () => ({ rollback: () => {} }),
-  deleteRow: () => ({ rollback: () => {}, deletedRow: {} }),
+  deleteRow: () => ({
+    rollback: () => {},
+    deletedRow: {} as Record<string, unknown>,
+  }),
   insertRow: () => ({ rollback: () => {} }),
 };
 
 function DataTableRoot<TRow extends Record<string, unknown>>({
+  columns = [] as Column<TRow>[],
+  rows = [] as TRow[],
+  loading = false,
+  error = null,
+  sortStates = [],
+  onSort,
   rowOperations,
   children,
 }: DataTableRootProps<TRow>) {
-  const contextValue: DataTableContextValue<TRow> = rowOperations ?? {
-    updateRow:
-      noopRowOperations.updateRow as DataTableContextValue<TRow>["updateRow"],
-    deleteRow:
-      noopRowOperations.deleteRow as DataTableContextValue<TRow>["deleteRow"],
-    insertRow:
-      noopRowOperations.insertRow as DataTableContextValue<TRow>["insertRow"],
+  const contextValue: DataTableContextValue<TRow> = {
+    updateRow: (rowOperations?.updateRow ??
+      noopRowOps.updateRow) as DataTableContextValue<TRow>["updateRow"],
+    deleteRow: (rowOperations?.deleteRow ??
+      noopRowOps.deleteRow) as DataTableContextValue<TRow>["deleteRow"],
+    insertRow: (rowOperations?.insertRow ??
+      noopRowOps.insertRow) as DataTableContextValue<TRow>["insertRow"],
+    columns,
+    rows,
+    loading,
+    error,
+    sortStates,
+    onSort,
   };
 
   return (
@@ -44,19 +64,17 @@ function DataTableRoot<TRow extends Record<string, unknown>>({
 // DataTable.Headers
 // =============================================================================
 
-interface DataTableHeadersProps<TRow extends Record<string, unknown>> {
-  columns?: Column<TRow>[];
-  sortStates?: SortState[];
-  onSort?: (field: string, direction?: "Asc" | "Desc") => void;
+interface DataTableHeadersProps {
   className?: string;
 }
 
-function DataTableHeaders<TRow extends Record<string, unknown>>({
-  columns,
-  sortStates,
-  onSort,
-  className,
-}: DataTableHeadersProps<TRow>) {
+function DataTableHeaders({ className }: DataTableHeadersProps) {
+  const ctx = useContext(DataTableContext);
+  if (!ctx) {
+    throw new Error("<DataTable.Headers> must be used within <DataTable.Root>");
+  }
+  const { columns, sortStates, onSort } = ctx;
+
   return (
     <Table.Headers className={className}>
       <Table.HeaderRow>
@@ -111,23 +129,18 @@ function SortIndicator({ direction }: { direction: "Asc" | "Desc" }) {
 // DataTable.Body
 // =============================================================================
 
-interface DataTableBodyProps<TRow extends Record<string, unknown>> {
-  columns?: Column<TRow>[];
-  rows?: TRow[];
-  loading?: boolean;
-  error?: Error | null;
+interface DataTableBodyProps {
   children?: ReactNode;
   className?: string;
 }
 
-function DataTableBody<TRow extends Record<string, unknown>>({
-  columns,
-  rows,
-  loading,
-  error,
-  children,
-  className,
-}: DataTableBodyProps<TRow>) {
+function DataTableBody({ children, className }: DataTableBodyProps) {
+  const ctx = useContext(DataTableContext);
+  if (!ctx) {
+    throw new Error("<DataTable.Body> must be used within <DataTable.Root>");
+  }
+  const { columns, rows, loading, error } = ctx;
+
   // If children are provided, render them directly (custom rendering)
   if (children) {
     return <Table.Body className={className}>{children}</Table.Body>;

package/src/component/types.ts

@@ -110,10 +110,16 @@ export interface PageInfo {
 
 /**
  * GraphQL query variables in Tailor Platform format.
+ *
+ * @typeParam TFieldName - Union of allowed field name strings (default: `string`).
+ *                         When metadata is provided to `useCollectionParams`, this
+ *                         narrows `order[].field` to match the table's field names,
+ *                         making the output directly compatible with gql-tada's
+ *                         `VariablesOf<>` types.
  */
-export interface QueryVariables {
+export interface QueryVariables<TFieldName extends string = string> {
   query?: Record<string, unknown>;
-  order?: { field: string; direction: "Asc" | "Desc" }[];
+  order?: { field: TFieldName; direction: "Asc" | "Desc" }[];
   first: number;
   after?: string | null;
 }
@@ -287,7 +293,7 @@ export interface UseCollectionParamsOptions<
  */
 export interface UseCollectionParamsReturn<TFieldName extends string = string> {
   /** Query variables in Tailor Platform format */
-  variables: QueryVariables;
+  variables: QueryVariables<TFieldName>;
 
   // Filter operations
   /** Current active filters */