@tint-ui/data-table 0.3.11 → 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;
@@ -723,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)(),
@@ -741,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.11",
+  "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;
@@ -721,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(),
@@ -741,7 +763,7 @@ const useDataTable = function (props) {
     manualSorting: manual,
     manualPagination: manual,
     state: {
-      ...(options?.state || null),
+      ...optState,
       columnVisibility,
       sorting: state.sorting,
       globalFilter: state.globalFilter,