@bsol-oss/react-datatable5 1.0.22 → 1.0.23

package/dist/index.d.ts

@@ -40,6 +40,8 @@ declare const EditSortingButton: () => react_jsx_runtime.JSX.Element;
 
 declare const EditViewButton: () => react_jsx_runtime.JSX.Element;
 
+declare const GlobalFilter: () => react_jsx_runtime.JSX.Element;
+
 interface PageSizeControlProps {
     pageSizes?: number[];
 }
@@ -108,6 +110,8 @@ declare const useDataFromUrl: <T>({ url, params, defaultData, }: useDataFromUrlP
 declare const useDataTable: () => {
     table: _tanstack_table_core.Table<any>;
     refreshData: () => void;
+    globalFilter: string;
+    setGlobalFilter: (filter: string) => void;
 };
 
-export { type DataResponse, DataTable, type DataTableProps, DataTableServer, type DataTableServerProps, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, Table, TableBody, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableFilter, TableFooter, TableHeader, type TableHeaderProps, TableOrderer, TablePagination, type TableProps, TableSelector, TableSorter, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
+export { type DataResponse, DataTable, type DataTableProps, DataTableServer, type DataTableServerProps, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, Table, TableBody, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableFilter, TableFooter, TableHeader, type TableHeaderProps, TableOrderer, TablePagination, type TableProps, TableSelector, TableSorter, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };

package/dist/index.js

@@ -13,6 +13,8 @@ var table = require('@chakra-ui/table');
 const TableContext = react.createContext({
     table: {},
     refreshData: () => { },
+    globalFilter: "",
+    setGlobalFilter: () => { },
 });
 
 const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
@@ -89,6 +91,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
     });
     const [rowSelection, setRowSelection] = react.useState({});
     const [columnOrder, setColumnOrder] = react.useState([]);
+    const [globalFilter, setGlobalFilter] = react.useState("");
     const { data, loading, hasError, refreshData } = useDataFromUrl({
         url: url,
         defaultData: {
@@ -110,6 +113,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
                 obj[filter.id] = filter.value;
                 return { ...accumulator, ...obj };
             }, {})),
+            searching: globalFilter,
         },
     });
     const table = reactTable.useReactTable({
@@ -129,6 +133,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
             columnFilters,
             rowSelection,
             columnOrder,
+            globalFilter,
         },
         defaultColumn: {
             size: 150, //starting column size
@@ -141,15 +146,23 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
         onColumnOrderChange: (state) => {
             setColumnOrder(state);
         },
+        onGlobalFilterChange: (state) => {
+            setGlobalFilter(state);
+        },
         rowCount: data.filterCount,
     });
     react.useEffect(() => {
         refreshData();
-    }, [pagination, sorting, columnFilters]);
+    }, [pagination, sorting, columnFilters, globalFilter]);
     react.useEffect(() => {
         setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
     }, []);
-    return (jsxRuntime.jsx(TableContext.Provider, { value: { table: { ...table }, refreshData: refreshData }, children: children }));
+    return (jsxRuntime.jsx(TableContext.Provider, { value: {
+            table: { ...table },
+            refreshData: refreshData,
+            globalFilter,
+            setGlobalFilter,
+        }, children: children }));
 };
 
 const ResetFilteringButton = () => {
@@ -160,8 +173,8 @@ const ResetFilteringButton = () => {
 };
 
 const useDataTable = () => {
-    const { table, refreshData } = react.useContext(TableContext);
-    return { table, refreshData };
+    const { table, refreshData, globalFilter, setGlobalFilter } = react.useContext(TableContext);
+    return { table, refreshData, globalFilter, setGlobalFilter };
 };
 
 const TableFilter = () => {
@@ -261,9 +274,16 @@ const EditViewButton = () => {
                             }) }) })] })] }));
 };
 
+const GlobalFilter = () => {
+    const { globalFilter, setGlobalFilter } = useDataTable();
+    return (jsxRuntime.jsx(react$1.Input, { value: globalFilter, onChange: (e) => {
+            setGlobalFilter(e.target.value);
+        } }));
+};
+
 const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
     const { table } = react.useContext(TableContext);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(react$1.Menu, { children: [jsxRuntime.jsx(react$1.MenuButton, { as: react$1.Button, variant: "ghost", rightIcon: jsxRuntime.jsx(icons.ChevronDownIcon, {}), children: table.getState().pagination.pageSize }), jsxRuntime.jsx(react$1.MenuList, { children: pageSizes.map((pageSize) => (jsxRuntime.jsx(react$1.MenuItem, { onClick: () => {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(react$1.Menu, { children: [jsxRuntime.jsx(react$1.MenuButton, { as: react$1.Button, variant: "ghost", rightIcon: jsxRuntime.jsx(icons.ChevronDownIcon, {}), gap: "0.5rem", children: table.getState().pagination.pageSize }), jsxRuntime.jsx(react$1.MenuList, { children: pageSizes.map((pageSize) => (jsxRuntime.jsx(react$1.MenuItem, { onClick: () => {
                             table.setPageSize(Number(pageSize));
                         }, children: pageSize }))) })] }) }));
 };
@@ -444,6 +464,7 @@ exports.EditFilterButton = EditFilterButton;
 exports.EditOrderButton = EditOrderButton;
 exports.EditSortingButton = EditSortingButton;
 exports.EditViewButton = EditViewButton;
+exports.GlobalFilter = GlobalFilter;
 exports.PageSizeControl = PageSizeControl;
 exports.ResetFilteringButton = ResetFilteringButton;
 exports.ResetSelectionButton = ResetSelectionButton;

package/dist/index.mjs

@@ -11,6 +11,8 @@ import { Tbody, Tr, Td } from '@chakra-ui/table';
 const TableContext = createContext({
     table: {},
     refreshData: () => { },
+    globalFilter: "",
+    setGlobalFilter: () => { },
 });
 
 const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
@@ -87,6 +89,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
     });
     const [rowSelection, setRowSelection] = useState({});
     const [columnOrder, setColumnOrder] = useState([]);
+    const [globalFilter, setGlobalFilter] = useState("");
     const { data, loading, hasError, refreshData } = useDataFromUrl({
         url: url,
         defaultData: {
@@ -108,6 +111,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
                 obj[filter.id] = filter.value;
                 return { ...accumulator, ...obj };
             }, {})),
+            searching: globalFilter,
         },
     });
     const table = useReactTable({
@@ -127,6 +131,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
             columnFilters,
             rowSelection,
             columnOrder,
+            globalFilter,
         },
         defaultColumn: {
             size: 150, //starting column size
@@ -139,15 +144,23 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
         onColumnOrderChange: (state) => {
             setColumnOrder(state);
         },
+        onGlobalFilterChange: (state) => {
+            setGlobalFilter(state);
+        },
         rowCount: data.filterCount,
     });
     useEffect(() => {
         refreshData();
-    }, [pagination, sorting, columnFilters]);
+    }, [pagination, sorting, columnFilters, globalFilter]);
     useEffect(() => {
         setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
     }, []);
-    return (jsx(TableContext.Provider, { value: { table: { ...table }, refreshData: refreshData }, children: children }));
+    return (jsx(TableContext.Provider, { value: {
+            table: { ...table },
+            refreshData: refreshData,
+            globalFilter,
+            setGlobalFilter,
+        }, children: children }));
 };
 
 const ResetFilteringButton = () => {
@@ -158,8 +171,8 @@ const ResetFilteringButton = () => {
 };
 
 const useDataTable = () => {
-    const { table, refreshData } = useContext(TableContext);
-    return { table, refreshData };
+    const { table, refreshData, globalFilter, setGlobalFilter } = useContext(TableContext);
+    return { table, refreshData, globalFilter, setGlobalFilter };
 };
 
 const TableFilter = () => {
@@ -259,9 +272,16 @@ const EditViewButton = () => {
                             }) }) })] })] }));
 };
 
+const GlobalFilter = () => {
+    const { globalFilter, setGlobalFilter } = useDataTable();
+    return (jsx(Input, { value: globalFilter, onChange: (e) => {
+            setGlobalFilter(e.target.value);
+        } }));
+};
+
 const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
     const { table } = useContext(TableContext);
-    return (jsx(Fragment, { children: jsxs(Menu, { children: [jsx(MenuButton, { as: Button, variant: "ghost", rightIcon: jsx(ChevronDownIcon, {}), children: table.getState().pagination.pageSize }), jsx(MenuList, { children: pageSizes.map((pageSize) => (jsx(MenuItem, { onClick: () => {
+    return (jsx(Fragment, { children: jsxs(Menu, { children: [jsx(MenuButton, { as: Button, variant: "ghost", rightIcon: jsx(ChevronDownIcon, {}), gap: "0.5rem", children: table.getState().pagination.pageSize }), jsx(MenuList, { children: pageSizes.map((pageSize) => (jsx(MenuItem, { onClick: () => {
                             table.setPageSize(Number(pageSize));
                         }, children: pageSize }))) })] }) }));
 };
@@ -436,4 +456,4 @@ const TextCell = ({ label, children }) => {
     return (jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }));
 };
 
-export { DataTable, DataTableServer, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, PageSizeControl, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, Table, TableBody, TableCardContainer, TableCards, TableFilter, TableFooter, TableHeader, TableOrderer, TablePagination, TableSelector, TableSorter, TextCell, useDataFromUrl, useDataTable };
+export { DataTable, DataTableServer, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, Table, TableBody, TableCardContainer, TableCards, TableFilter, TableFooter, TableHeader, TableOrderer, TablePagination, TableSelector, TableSorter, TextCell, useDataFromUrl, useDataTable };

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

@@ -3,5 +3,7 @@ import { Table } from "@tanstack/react-table";
 export interface DataTableContext<T> {
     table: Table<T>;
     refreshData: () => void;
+    globalFilter: string;
+    setGlobalFilter: (filter: string) => void;
 }
 export declare const TableContext: import("react").Context<DataTableContext<any>>;

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

@@ -0,0 +1 @@
+export declare const GlobalFilter: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,6 @@
 export declare const useDataTable: () => {
     table: import("@tanstack/table-core").Table<any>;
     refreshData: () => void;
+    globalFilter: string;
+    setGlobalFilter: (filter: string) => void;
 };

package/dist/types/index.d.ts

@@ -4,6 +4,7 @@ export * from "./components/EditFilterButton";
 export * from "./components/EditOrderButton";
 export * from "./components/EditSortingButton";
 export * from "./components/EditViewButton";
+export * from "./components/GlobalFilter";
 export * from "./components/PageSizeControl";
 export * from "./components/ResetFilteringButton";
 export * from "./components/ResetSelectionButton";

package/package.json

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