@bsol-oss/react-datatable5 2.0.2 → 2.0.4

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { RowData, OnChangeFn, Updater, FilterFn, ColumnDef, RowSelectionState, ColumnOrderState, ColumnFiltersState, GlobalFilterTableState, PaginationState, SortingState, VisibilityState, Row, Table as Table$1, Column } from '@tanstack/react-table';
+import { RowData, OnChangeFn, Updater, FilterFn, ColumnDef, RowSelectionState, ColumnOrderState, ColumnFiltersState, PaginationState, SortingState, VisibilityState, Row, Table as Table$1, Column } from '@tanstack/react-table';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1, { ReactNode } from 'react';
 import { RankingInfo } from '@tanstack/match-sorter-utils';
@@ -105,7 +105,7 @@ interface DataTableProps<TData> {
     onRowSelect?: (rowSelectionState: RowSelectionState, data: TData[]) => void;
     columnOrder: ColumnOrderState;
     columnFilters: ColumnFiltersState;
-    globalFilter: GlobalFilterTableState;
+    globalFilter: string;
     density: DensityState;
     pagination: PaginationState;
     sorting: SortingState;
@@ -115,7 +115,7 @@ interface DataTableProps<TData> {
     setSorting: OnChangeFn<SortingState>;
     setColumnFilters: OnChangeFn<ColumnFiltersState>;
     setRowSelection: OnChangeFn<RowSelectionState>;
-    setGlobalFilter: OnChangeFn<GlobalFilterTableState>;
+    setGlobalFilter: OnChangeFn<string>;
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
@@ -132,7 +132,7 @@ interface DataTableServerProps<TData> {
     onRowSelect?: (rowSelectionState: RowSelectionState, data: TData[]) => void;
     columnOrder: ColumnOrderState;
     columnFilters: ColumnFiltersState;
-    globalFilter: GlobalFilterTableState;
+    globalFilter: string;
     density: DensityState;
     pagination: PaginationState;
     sorting: SortingState;
@@ -142,7 +142,7 @@ interface DataTableServerProps<TData> {
     setSorting: OnChangeFn<SortingState>;
     setColumnFilters: OnChangeFn<ColumnFiltersState>;
     setRowSelection: OnChangeFn<RowSelectionState>;
-    setGlobalFilter: OnChangeFn<GlobalFilterTableState>;
+    setGlobalFilter: OnChangeFn<string>;
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
@@ -288,7 +288,7 @@ interface UseDataTableProps {
         pagination?: PaginationState;
         rowSelection?: RowSelectionState;
         columnOrder?: ColumnOrderState;
-        globalFilter?: GlobalFilterTableState;
+        globalFilter?: string;
         columnVisibility?: VisibilityState;
         density?: DensityState;
     };
@@ -299,14 +299,14 @@ interface UseDataTableReturn {
     pagination: PaginationState;
     rowSelection: RowSelectionState;
     columnOrder: ColumnOrderState;
-    globalFilter: GlobalFilterTableState;
+    globalFilter: string;
     columnVisibility: VisibilityState;
     density: DensityState;
     setPagination: OnChangeFn<PaginationState>;
     setSorting: OnChangeFn<SortingState>;
     setColumnFilters: OnChangeFn<ColumnFiltersState>;
     setRowSelection: OnChangeFn<RowSelectionState>;
-    setGlobalFilter: OnChangeFn<GlobalFilterTableState>;
+    setGlobalFilter: OnChangeFn<string>;
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
@@ -316,8 +316,8 @@ declare const useDataTable: ({ default: { sorting: defaultSorting, pagination: d
 declare const useDataTableContext: () => {
     table: _tanstack_table_core.Table<any>;
     refreshData: () => void;
-    globalFilter: _tanstack_table_core.GlobalFilterTableState;
-    setGlobalFilter: _tanstack_table_core.OnChangeFn<_tanstack_table_core.GlobalFilterTableState>;
+    globalFilter: string;
+    setGlobalFilter: _tanstack_table_core.OnChangeFn<string>;
     loading: boolean;
     hasError: boolean;
 };

package/dist/index.js

@@ -39,7 +39,7 @@ const EditOrderButton = ({ text, icon = jsxRuntime.jsx(md.MdOutlineMoveDown, {})
 const TableContext = react$1.createContext({
     table: {},
     refreshData: () => { },
-    globalFilter: { globalFilter: "" },
+    globalFilter: "",
     setGlobalFilter: () => { },
     loading: false,
     hasError: false,
@@ -202,6 +202,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
     const table = reactTable.useReactTable({
         _features: [DensityFeature],
         data: data,
+        rowCount: data.length,
         columns: columns,
         getCoreRowModel: reactTable.getCoreRowModel(),
         getFilteredRowModel: reactTable.getFilteredRowModel(),
@@ -318,13 +319,14 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
                 obj[filter.id] = filter.value;
                 return { ...accumulator, ...obj };
             }, {})),
-            searching: globalFilter.globalFilter,
+            searching: globalFilter,
         },
         disableFirstFetch: true,
     });
     const table = reactTable.useReactTable({
         _features: [DensityFeature],
         data: data.results,
+        rowCount: data.count ?? 0,
         columns: columns,
         getCoreRowModel: reactTable.getCoreRowModel(),
         manualPagination: true,
@@ -360,7 +362,6 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
         },
         onDensityChange: setDensity,
         onColumnVisibilityChange: setColumnVisibility,
-        rowCount: data.count,
         // for tanstack-table ts bug start
         filterFns: {
             fuzzy: () => {
@@ -378,6 +379,9 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
     react$1.useEffect(() => {
         onRowSelect(table.getState().rowSelection, data.results);
     }, [table.getState().rowSelection]);
+    react$1.useEffect(() => {
+        table.resetPagination();
+    }, [sorting, columnFilters, globalFilter, url]);
     return (jsxRuntime.jsx(TableContext.Provider, { value: {
             table: { ...table },
             refreshData: refreshData,
@@ -841,7 +845,19 @@ const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, tooltipP
 const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: defaultPagination = {
     pageIndex: 0, //initial page index
     pageSize: 10, //default page size
-}, rowSelection: defaultRowSelection = {}, columnFilters: defaultColumnFilters = [], columnOrder: defaultColumnOrder = [], columnVisibility: defaultColumnVisibility = {}, globalFilter: defaultGlobalFilter = { globalFilter: "" }, density: defaultDensity = "sm", }, } = {
+}, rowSelection: defaultRowSelection = {}, columnFilters: defaultColumnFilters = [], columnOrder: defaultColumnOrder = [], columnVisibility: defaultColumnVisibility = {}, globalFilter: defaultGlobalFilter = "", density: defaultDensity = "sm", } = {
+    sorting: [],
+    pagination: {
+        pageIndex: 0, //initial page index
+        pageSize: 10, //age size
+    },
+    rowSelection: {},
+    columnFilters: [],
+    columnOrder: [],
+    columnVisibility: {},
+    globalFilter: "",
+    density: "sm",
+}, } = {
     default: {
         sorting: [],
         pagination: {
@@ -852,7 +868,7 @@ const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: def
         columnFilters: [],
         columnOrder: [],
         columnVisibility: {},
-        globalFilter: { globalFilter: "" },
+        globalFilter: "",
         density: "sm",
     },
 }) => {
@@ -907,7 +923,10 @@ const FilterOptions = ({ column }) => {
 const GlobalFilter = ({ icon = md.MdSearch }) => {
     const { table } = useDataTableContext();
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsxs(react.InputGroup, { children: [jsxRuntime.jsx(react.InputLeftElement, { pointerEvents: "none", children: jsxRuntime.jsx(react.Icon, { as: icon, color: "gray.300" }) }), jsxRuntime.jsx(react.Input, { value: table.getState().globalFilter.globalFilter, onChange: (e) => {
-                            table.setGlobalFilter({ "globalFilter": e.target.value });
+                            if (!!e.target.value) {
+                                table.setGlobalFilter(undefined);
+                            }
+                            table.setGlobalFilter(e.target.value);
                         } })] }) }) }));
 };
 

package/dist/index.mjs

@@ -37,7 +37,7 @@ const EditOrderButton = ({ text, icon = jsx(MdOutlineMoveDown, {}), title = "Cha
 const TableContext = createContext({
     table: {},
     refreshData: () => { },
-    globalFilter: { globalFilter: "" },
+    globalFilter: "",
     setGlobalFilter: () => { },
     loading: false,
     hasError: false,
@@ -200,6 +200,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
     const table = useReactTable({
         _features: [DensityFeature],
         data: data,
+        rowCount: data.length,
         columns: columns,
         getCoreRowModel: getCoreRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
@@ -316,13 +317,14 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
                 obj[filter.id] = filter.value;
                 return { ...accumulator, ...obj };
             }, {})),
-            searching: globalFilter.globalFilter,
+            searching: globalFilter,
         },
         disableFirstFetch: true,
     });
     const table = useReactTable({
         _features: [DensityFeature],
         data: data.results,
+        rowCount: data.count ?? 0,
         columns: columns,
         getCoreRowModel: getCoreRowModel(),
         manualPagination: true,
@@ -358,7 +360,6 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
         },
         onDensityChange: setDensity,
         onColumnVisibilityChange: setColumnVisibility,
-        rowCount: data.count,
         // for tanstack-table ts bug start
         filterFns: {
             fuzzy: () => {
@@ -376,6 +377,9 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
     useEffect(() => {
         onRowSelect(table.getState().rowSelection, data.results);
     }, [table.getState().rowSelection]);
+    useEffect(() => {
+        table.resetPagination();
+    }, [sorting, columnFilters, globalFilter, url]);
     return (jsx(TableContext.Provider, { value: {
             table: { ...table },
             refreshData: refreshData,
@@ -839,7 +843,19 @@ const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, tooltipP
 const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: defaultPagination = {
     pageIndex: 0, //initial page index
     pageSize: 10, //default page size
-}, rowSelection: defaultRowSelection = {}, columnFilters: defaultColumnFilters = [], columnOrder: defaultColumnOrder = [], columnVisibility: defaultColumnVisibility = {}, globalFilter: defaultGlobalFilter = { globalFilter: "" }, density: defaultDensity = "sm", }, } = {
+}, rowSelection: defaultRowSelection = {}, columnFilters: defaultColumnFilters = [], columnOrder: defaultColumnOrder = [], columnVisibility: defaultColumnVisibility = {}, globalFilter: defaultGlobalFilter = "", density: defaultDensity = "sm", } = {
+    sorting: [],
+    pagination: {
+        pageIndex: 0, //initial page index
+        pageSize: 10, //age size
+    },
+    rowSelection: {},
+    columnFilters: [],
+    columnOrder: [],
+    columnVisibility: {},
+    globalFilter: "",
+    density: "sm",
+}, } = {
     default: {
         sorting: [],
         pagination: {
@@ -850,7 +866,7 @@ const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: def
         columnFilters: [],
         columnOrder: [],
         columnVisibility: {},
-        globalFilter: { globalFilter: "" },
+        globalFilter: "",
         density: "sm",
     },
 }) => {
@@ -905,7 +921,10 @@ const FilterOptions = ({ column }) => {
 const GlobalFilter = ({ icon = MdSearch }) => {
     const { table } = useDataTableContext();
     return (jsx(Fragment, { children: jsx(Box, { children: jsxs(InputGroup, { children: [jsx(InputLeftElement, { pointerEvents: "none", children: jsx(Icon, { as: icon, color: "gray.300" }) }), jsx(Input, { value: table.getState().globalFilter.globalFilter, onChange: (e) => {
-                            table.setGlobalFilter({ "globalFilter": e.target.value });
+                            if (!!e.target.value) {
+                                table.setGlobalFilter(undefined);
+                            }
+                            table.setGlobalFilter(e.target.value);
                         } })] }) }) }));
 };
 

package/dist/types/components/DataTable/DataTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColumnDef, ColumnFiltersState, ColumnOrderState, FilterFn, GlobalFilterTableState, OnChangeFn, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
+import { ColumnDef, ColumnFiltersState, ColumnOrderState, FilterFn, OnChangeFn, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
 import { RankingInfo } from "@tanstack/match-sorter-utils";
 import { DensityState } from "../Controls/DensityFeature";
 declare module "@tanstack/react-table" {
@@ -20,7 +20,7 @@ export interface DataTableProps<TData> {
     onRowSelect?: (rowSelectionState: RowSelectionState, data: TData[]) => void;
     columnOrder: ColumnOrderState;
     columnFilters: ColumnFiltersState;
-    globalFilter: GlobalFilterTableState;
+    globalFilter: string;
     density: DensityState;
     pagination: PaginationState;
     sorting: SortingState;
@@ -30,7 +30,7 @@ export interface DataTableProps<TData> {
     setSorting: OnChangeFn<SortingState>;
     setColumnFilters: OnChangeFn<ColumnFiltersState>;
     setRowSelection: OnChangeFn<RowSelectionState>;
-    setGlobalFilter: OnChangeFn<GlobalFilterTableState>;
+    setGlobalFilter: OnChangeFn<string>;
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;

package/dist/types/components/DataTable/DataTableContext.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { GlobalFilterTableState, OnChangeFn, Table } from "@tanstack/react-table";
+import { OnChangeFn, Table } from "@tanstack/react-table";
 export interface DataTableContext<TData> {
     table: Table<TData>;
     refreshData: () => void;
-    globalFilter: GlobalFilterTableState;
-    setGlobalFilter: OnChangeFn<GlobalFilterTableState>;
+    globalFilter: string;
+    setGlobalFilter: OnChangeFn<string>;
     loading: boolean;
     hasError: boolean;
 }

package/dist/types/components/DataTable/DataTableServer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColumnDef, ColumnFiltersState, ColumnOrderState, GlobalFilterTableState, OnChangeFn, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
+import { ColumnDef, ColumnFiltersState, ColumnOrderState, OnChangeFn, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
 import { DensityState } from "../Controls/DensityFeature";
 export interface DataTableServerProps<TData> {
     children: JSX.Element | JSX.Element[];
@@ -11,7 +11,7 @@ export interface DataTableServerProps<TData> {
     onRowSelect?: (rowSelectionState: RowSelectionState, data: TData[]) => void;
     columnOrder: ColumnOrderState;
     columnFilters: ColumnFiltersState;
-    globalFilter: GlobalFilterTableState;
+    globalFilter: string;
     density: DensityState;
     pagination: PaginationState;
     sorting: SortingState;
@@ -21,7 +21,7 @@ export interface DataTableServerProps<TData> {
     setSorting: OnChangeFn<SortingState>;
     setColumnFilters: OnChangeFn<ColumnFiltersState>;
     setRowSelection: OnChangeFn<RowSelectionState>;
-    setGlobalFilter: OnChangeFn<GlobalFilterTableState>;
+    setGlobalFilter: OnChangeFn<string>;
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;

package/dist/types/components/DataTable/useDataTable.d.ts

@@ -1,4 +1,4 @@
-import { ColumnFiltersState, ColumnOrderState, GlobalFilterTableState, OnChangeFn, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
+import { ColumnFiltersState, ColumnOrderState, OnChangeFn, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
 import { DensityState } from "../Controls/DensityFeature";
 export interface UseDataTableProps {
     default: {
@@ -7,7 +7,7 @@ export interface UseDataTableProps {
         pagination?: PaginationState;
         rowSelection?: RowSelectionState;
         columnOrder?: ColumnOrderState;
-        globalFilter?: GlobalFilterTableState;
+        globalFilter?: string;
         columnVisibility?: VisibilityState;
         density?: DensityState;
     };
@@ -18,14 +18,14 @@ export interface UseDataTableReturn {
     pagination: PaginationState;
     rowSelection: RowSelectionState;
     columnOrder: ColumnOrderState;
-    globalFilter: GlobalFilterTableState;
+    globalFilter: string;
     columnVisibility: VisibilityState;
     density: DensityState;
     setPagination: OnChangeFn<PaginationState>;
     setSorting: OnChangeFn<SortingState>;
     setColumnFilters: OnChangeFn<ColumnFiltersState>;
     setRowSelection: OnChangeFn<RowSelectionState>;
-    setGlobalFilter: OnChangeFn<GlobalFilterTableState>;
+    setGlobalFilter: OnChangeFn<string>;
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;

package/dist/types/components/DataTable/useDataTableContext.d.ts

@@ -1,8 +1,8 @@
 export declare const useDataTableContext: () => {
     table: import("@tanstack/table-core").Table<any>;
     refreshData: () => void;
-    globalFilter: import("@tanstack/table-core").GlobalFilterTableState;
-    setGlobalFilter: import("@tanstack/table-core").OnChangeFn<import("@tanstack/table-core").GlobalFilterTableState>;
+    globalFilter: string;
+    setGlobalFilter: import("@tanstack/table-core").OnChangeFn<string>;
     loading: boolean;
     hasError: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",