@izumisy-tailor/tailor-data-viewer 0.3.2 → 0.3.3

package/README.md

@@ -6,7 +6,7 @@ A low-level React component library for building data table interfaces with Tail
 
 - **Separation of Concerns**: Data fetching, query parameter management, and UI are fully decoupled
 - **`useCollectionVariables` Hook**: Manages filter, sort, and pagination state; outputs Tailor Platform-compatible GraphQL variables
-- **`CollectionVariablesProvider`**: Shares query parameters via React Context across sibling components
+- **`CollectionControlProvider`**: Shares collection control state via React Context across sibling components
 - **`Table.*` Compound Components**: Static, unstyled table primitives (`<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`)
 - **`DataTable.*` Compound Components**: Data-bound table with sort indicators, cell renderers, and `useDataTable` integration
 - **`useDataTable` Hook**: Integrates data, column visibility, row operations (optimistic updates), and props generators
@@ -95,7 +95,7 @@ const columns = [
 
 // 2. Build a page
 function OrdersPage() {
-  const { variables } = useCollectionVariables({ params: { pageSize: 20 } });
+  const { variables, control } = useCollectionVariables({ params: { pageSize: 20 } });
   const [result] = useQuery({
     query: GET_ORDERS,
     variables: {
@@ -109,7 +109,7 @@ function OrdersPage() {
     columns,
     data: result.data?.orders,
     loading: result.fetching,
-    collection,
+    control,
   });
 
   return (
@@ -131,7 +131,7 @@ function OrdersPage() {
 Manages filter, sort, and pagination state. Returns `variables` containing `query`, `order`, and `pagination` sub-properties in Tailor Platform-compatible format.
 
 ```tsx
-const { variables, ...collection } = useCollectionVariables({
+const { variables, control } = useCollectionVariables({
   params: {
     pageSize: 20,
     initialSort: [{ field: "createdAt", direction: "Desc" }],
@@ -149,36 +149,36 @@ const [result] = useQuery({
 });
 
 // Filter operations
-collection.addFilter("status", "eq", "ACTIVE");
-collection.setFilters([{ field: "status", operator: "eq", value: "ACTIVE" }]);
-collection.removeFilter("status");
-collection.clearFilters();
+control.addFilter("status", "eq", "ACTIVE");
+control.setFilters([{ field: "status", operator: "eq", value: "ACTIVE" }]);
+control.removeFilter("status");
+control.clearFilters();
 
 // Sort operations
-collection.setSort("createdAt", "Desc");
-collection.setSort("name", "Asc", true); // append for multi-sort
-collection.clearSort();
+control.setSort("createdAt", "Desc");
+control.setSort("name", "Asc", true); // append for multi-sort
+control.clearSort();
 
 // Pagination
-collection.nextPage(endCursor);
-collection.prevPage(startCursor);
-collection.resetPage();
+control.nextPage(endCursor);
+control.prevPage(startCursor);
+control.resetPage();
 
 // Page info tracking
-collection.setPageInfo(pageInfo);
-collection.hasPrevPage;  // boolean
-collection.hasNextPage;  // boolean
+control.setPageInfo(pageInfo);
+control.hasPrevPage;  // boolean
+control.hasNextPage;  // boolean
 ```
 
-### `DataTable.Provider` / `useDataTableContext()` / `useCollectionVariablesContext()`
+### `DataTable.Provider` / `useDataTableContext()` / `useCollectionControl()`
 
-`DataTable.Provider` wraps the table UI and provides both data table and collection context. All utility components (`Pagination`, `ColumnSelector`, `CsvButton`, `SearchFilterForm`) read from this context — no prop spreading needed.
+`DataTable.Provider` wraps the table UI and provides both data table and collection control context. All utility components (`Pagination`, `ColumnSelector`, `CsvButton`, `SearchFilterForm`) read from this context — no prop spreading needed.
 
-When `collection` is passed to `useDataTable`, `DataTable.Provider` automatically wraps a `CollectionVariablesProvider` so child components can use `useCollectionVariablesContext()`.
+When `control` is passed to `useDataTable`, `DataTable.Provider` automatically wraps a `CollectionControlProvider` so child components can use `useCollectionControl()`.
 
 ```tsx
 <DataTable.Provider value={table}>
-  <StatusFilter />   {/* useCollectionVariablesContext() inside */}
+  <StatusFilter />   {/* useCollectionControl() inside */}
   <DataTable.Root>
     <DataTable.Headers />
     <DataTable.Body />
@@ -187,13 +187,13 @@ When `collection` is passed to `useDataTable`, `DataTable.Provider` automaticall
 </DataTable.Provider>
 ```
 
-For cases where you need `CollectionVariablesProvider` without `DataTable.Provider` (e.g., non-table UIs), you can use it standalone:
+For cases where you need `CollectionControlProvider` without `DataTable.Provider` (e.g., non-table UIs), you can use it standalone:
 
 ```tsx
-<CollectionVariablesProvider value={collection}>
+<CollectionControlProvider value={control}>
   <StatusFilter />
   <CustomKanbanBoard />
-</CollectionVariablesProvider>
+</CollectionControlProvider>
 ```
 
 ### Column Definition Helper
@@ -275,7 +275,7 @@ const table = useDataTable<Order>({
   data: result.data?.orders,   // CollectionResult<Order>
   loading: result.fetching,
   error: result.error,
-  collection,
+  control,
   onClickRow: (row) => navigate(`/orders/${row.id}`),
   rowActions: [
     { id: "delete", label: "Delete", variant: "destructive", onClick: (row) => handleDelete(row.id) },

package/package.json

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