@tint-ui/data-table 0.3.10 → 0.3.12

package/cjs/use-data-table.js

@@ -20,7 +20,8 @@ var _utils = require("./utils");
 const _excluded = ["globalFilter"],
   _excluded2 = ["columnFilters"],
   _excluded3 = ["sorting"],
-  _excluded4 = ["pagination"];
+  _excluded4 = ["pagination"],
+  _excluded5 = ["onFilterReset", "state"];
 const createHash = function (name, keyName, manual, cells) {
   let hash = `${name}[${keyName},${manual ? "1" : "0"}]://`;
   for (const cell of cells) {
@@ -388,10 +389,14 @@ const useDataTable = function (props) {
         if (!mount) {
           return;
         }
+        const cb = refOptions.current?.onFilterReset;
         setState(prev => {
           if (prev.loading) {
             return prev;
           }
+          if (cb) {
+            cb();
+          }
           const state = Object.assign({}, prev, {
             pagination: {
               pageSize: prev.pagination.pageSize,
@@ -408,15 +413,20 @@ const useDataTable = function (props) {
         });
       },
       onPageSizeChange(pageSize) {
+        const cb = refOptions.current?.onPaginationChange;
         setState(prev => {
           if (prev.loading || prev.pagination.pageSize === pageSize) {
             return prev;
           }
+          const paginationState = {
+            pageSize,
+            pageIndex: 0
+          };
+          if (cb) {
+            cb(paginationState);
+          }
           const state = Object.assign({}, prev, {
-            pagination: {
-              pageSize,
-              pageIndex: 0
-            }
+            pagination: paginationState
           });
           if (force(state)) {
             state.loading = true;
@@ -427,9 +437,6 @@ const useDataTable = function (props) {
       },
       onGlobalFilterChange(value) {
         const cb = refOptions.current?.onGlobalFilterChange;
-        if (cb) {
-          cb(value);
-        }
         setState(prev => {
           if (prev.loading) {
             return prev;
@@ -441,6 +448,9 @@ const useDataTable = function (props) {
           if (typeof value === "function") {
             value = value(globalFilter);
           }
+          if (cb) {
+            cb(value);
+          }
           const state = Object.assign({}, rest, {
             pagination: {
               pageSize: prev.pagination.pageSize,
@@ -457,9 +467,6 @@ const useDataTable = function (props) {
       },
       onColumnFiltersChange(value) {
         const cb = refOptions.current?.onColumnFiltersChange;
-        if (cb) {
-          cb(value);
-        }
         setState(prev => {
           if (prev.loading) {
             return prev;
@@ -474,6 +481,9 @@ const useDataTable = function (props) {
           value = value.filter(({
             value
           }) => Array.isArray(value) ? value.length > 0 : value != null && value !== "");
+          if (cb) {
+            cb(value);
+          }
           const state = Object.assign({}, rest, {
             pagination: {
               pageSize: prev.pagination.pageSize,
@@ -490,9 +500,6 @@ const useDataTable = function (props) {
       },
       onSortingChange(value) {
         const cb = refOptions.current?.onSortingChange;
-        if (cb) {
-          cb(value);
-        }
         setState(prev => {
           if (prev.loading) {
             return prev;
@@ -501,13 +508,17 @@ const useDataTable = function (props) {
               sorting
             } = prev,
             rest = (0, _objectWithoutPropertiesLoose2.default)(prev, _excluded3);
+          const sortingState = typeof value === "function" ? value(sorting) : value;
+          if (cb) {
+            cb(sortingState);
+          }
           const state = Object.assign({}, rest, {
             pagination: {
               pageSize: prev.pagination.pageSize,
               pageIndex: 0
             },
             error: null,
-            sorting: typeof value === "function" ? value(sorting) : value,
+            sorting: sortingState,
             loading: false
           });
           if (force(state)) {
@@ -522,9 +533,6 @@ const useDataTable = function (props) {
       },
       onPaginationChange(value) {
         const cb = refOptions.current?.onPaginationChange;
-        if (cb) {
-          cb(value);
-        }
         setState(prev => {
           if (prev.loading) {
             return prev;
@@ -533,8 +541,12 @@ const useDataTable = function (props) {
               pagination
             } = prev,
             rest = (0, _objectWithoutPropertiesLoose2.default)(prev, _excluded4);
+          const paginationState = typeof value === "function" ? value(pagination) : value;
+          if (cb) {
+            cb(paginationState);
+          }
           const state = Object.assign({}, rest, {
-            pagination: typeof value === "function" ? value(pagination) : value,
+            pagination: paginationState,
             error: null,
             loading: false
           });
@@ -721,10 +733,22 @@ const useDataTable = function (props) {
       }
     };
   }, [onRowClick, loading]);
+  let optProp = {};
+  let optState = {};
+  if (options != null) {
+    const {
+        state
+      } = options,
+      prop = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded5);
+    optProp = prop;
+    if (state) {
+      optState = state;
+    }
+  }
   const {
     pagination
   } = state;
-  const tableCtx = (0, _reactTable.useReactTable)(Object.assign({}, options, {
+  const tableCtx = (0, _reactTable.useReactTable)(Object.assign({}, optProp, {
     pageCount: manual ? state.pageCount : undefined,
     getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
     getPaginationRowModel: (0, _reactTable.getPaginationRowModel)(),
@@ -739,7 +763,7 @@ const useDataTable = function (props) {
     manualFiltering: manual,
     manualSorting: manual,
     manualPagination: manual,
-    state: Object.assign({}, options?.state || null, {
+    state: Object.assign({}, optState, {
       columnVisibility,
       sorting: state.sorting,
       globalFilter: state.globalFilter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tint-ui/data-table",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "author": "phragon@websoftlab.com",
   "license": "MIT",
   "dependencies": {

package/types.d.ts

@@ -34,6 +34,7 @@ export type DataTableToolbarSize = "sm" | "md" | "lg";
 export type DataTableNavbarSize = "sm" | "md" | "lg";
 export interface DataTableOptions<TData> extends Partial<Omit<TableOptions<TData>, "pageCount" | "getCoreRowModel" | "getPaginationRowModel" | "getFilteredRowModel" | "getSortedRowModel" | "globalFilterFn" | "manualFiltering" | "manualSorting" | "manualPagination" | "data" | "columns" | "state">> {
     state?: Partial<Omit<TableState, "columnVisibility" | "sorting" | "globalFilter" | "columnFilters" | "pagination">>;
+    onFilterReset?: () => void;
 }
 export interface DataTableCoreProps<TData> extends FilterType<TData> {
     table: DataTableType<TData>;

package/use-data-table.d.ts

@@ -1,3 +1,3 @@
-import { DataTableCoreProps, DataTableContextType } from "./types";
+import type { DataTableCoreProps, DataTableContextType } from "./types";
 declare const useDataTable: <TData extends object>(props: DataTableCoreProps<TData>) => DataTableContextType<TData>;
 export { useDataTable };

package/use-data-table.js

@@ -380,10 +380,14 @@ const useDataTable = function (props) {
         if (!mount) {
           return;
         }
+        const cb = refOptions.current?.onFilterReset;
         setState(prev => {
           if (prev.loading) {
             return prev;
           }
+          if (cb) {
+            cb();
+          }
           const state = {
             ...prev,
             pagination: {
@@ -401,16 +405,21 @@ const useDataTable = function (props) {
         });
       },
       onPageSizeChange(pageSize) {
+        const cb = refOptions.current?.onPaginationChange;
         setState(prev => {
           if (prev.loading || prev.pagination.pageSize === pageSize) {
             return prev;
           }
+          const paginationState = {
+            pageSize,
+            pageIndex: 0
+          };
+          if (cb) {
+            cb(paginationState);
+          }
           const state = {
             ...prev,
-            pagination: {
-              pageSize,
-              pageIndex: 0
-            }
+            pagination: paginationState
           };
           if (force(state)) {
             state.loading = true;
@@ -421,9 +430,6 @@ const useDataTable = function (props) {
       },
       onGlobalFilterChange(value) {
         const cb = refOptions.current?.onGlobalFilterChange;
-        if (cb) {
-          cb(value);
-        }
         setState(prev => {
           if (prev.loading) {
             return prev;
@@ -435,6 +441,9 @@ const useDataTable = function (props) {
           if (typeof value === "function") {
             value = value(globalFilter);
           }
+          if (cb) {
+            cb(value);
+          }
           const state = {
             ...rest,
             pagination: {
@@ -452,9 +461,6 @@ const useDataTable = function (props) {
       },
       onColumnFiltersChange(value) {
         const cb = refOptions.current?.onColumnFiltersChange;
-        if (cb) {
-          cb(value);
-        }
         setState(prev => {
           if (prev.loading) {
             return prev;
@@ -469,6 +475,9 @@ const useDataTable = function (props) {
           value = value.filter(({
             value
           }) => Array.isArray(value) ? value.length > 0 : value != null && value !== "");
+          if (cb) {
+            cb(value);
+          }
           const state = {
             ...rest,
             pagination: {
@@ -486,9 +495,6 @@ const useDataTable = function (props) {
       },
       onSortingChange(value) {
         const cb = refOptions.current?.onSortingChange;
-        if (cb) {
-          cb(value);
-        }
         setState(prev => {
           if (prev.loading) {
             return prev;
@@ -497,6 +503,10 @@ const useDataTable = function (props) {
             sorting,
             ...rest
           } = prev;
+          const sortingState = typeof value === "function" ? value(sorting) : value;
+          if (cb) {
+            cb(sortingState);
+          }
           const state = {
             ...rest,
             pagination: {
@@ -504,7 +514,7 @@ const useDataTable = function (props) {
               pageIndex: 0
             },
             error: null,
-            sorting: typeof value === "function" ? value(sorting) : value,
+            sorting: sortingState,
             loading: false
           };
           if (force(state)) {
@@ -519,9 +529,6 @@ const useDataTable = function (props) {
       },
       onPaginationChange(value) {
         const cb = refOptions.current?.onPaginationChange;
-        if (cb) {
-          cb(value);
-        }
         setState(prev => {
           if (prev.loading) {
             return prev;
@@ -530,9 +537,13 @@ const useDataTable = function (props) {
             pagination,
             ...rest
           } = prev;
+          const paginationState = typeof value === "function" ? value(pagination) : value;
+          if (cb) {
+            cb(paginationState);
+          }
           const state = {
             ...rest,
-            pagination: typeof value === "function" ? value(pagination) : value,
+            pagination: paginationState,
             error: null,
             loading: false
           };
@@ -719,11 +730,24 @@ const useDataTable = function (props) {
       }
     };
   }, [onRowClick, loading]);
+  let optProp = {};
+  let optState = {};
+  if (options != null) {
+    const {
+      onFilterReset,
+      state,
+      ...prop
+    } = options;
+    optProp = prop;
+    if (state) {
+      optState = state;
+    }
+  }
   const {
     pagination
   } = state;
   const tableCtx = useReactTable({
-    ...options,
+    ...optProp,
     pageCount: manual ? state.pageCount : undefined,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
@@ -739,7 +763,7 @@ const useDataTable = function (props) {
     manualSorting: manual,
     manualPagination: manual,
     state: {
-      ...(options?.state || null),
+      ...optState,
       columnVisibility,
       sorting: state.sorting,
       globalFilter: state.globalFilter,