@bsol-oss/react-datatable5 1.0.22 → 1.0.24

package/dist/index.d.ts

@@ -1,9 +1,18 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ColumnDef } from '@tanstack/react-table';
+import { FilterFn, ColumnDef } from '@tanstack/react-table';
+import { RankingInfo } from '@tanstack/match-sorter-utils';
 import { ReactNode } from 'react';
 import * as _tanstack_table_core from '@tanstack/table-core';
 
+declare module '@tanstack/react-table' {
+    interface FilterFns {
+        fuzzy: FilterFn<unknown>;
+    }
+    interface FilterMeta {
+        itemRank: RankingInfo;
+    }
+}
 interface DataTableProps<T> {
     children: JSX.Element | JSX.Element[];
     data: T[];
@@ -40,6 +49,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 +119,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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactTable = require('@tanstack/react-table');
 var react = require('react');
+var matchSorterUtils = require('@tanstack/match-sorter-utils');
 var axios = require('axios');
 var react$1 = require('@chakra-ui/react');
 var md = require('react-icons/md');
@@ -13,10 +14,24 @@ var table = require('@chakra-ui/table');
 const TableContext = react.createContext({
     table: {},
     refreshData: () => { },
+    globalFilter: "",
+    setGlobalFilter: () => { },
 });
 
+// Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils)
+const fuzzyFilter = (row, columnId, value, addMeta) => {
+    // Rank the item
+    const itemRank = matchSorterUtils.rankItem(row.getValue(columnId), value);
+    // Store the itemRank info
+    addMeta({
+        itemRank,
+    });
+    // Return if the item should be filtered in/out
+    return itemRank.passed;
+};
 const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
     const [columnOrder, setColumnOrder] = react.useState([]);
+    const [globalFilter, setGlobalFilter] = react.useState('');
     const table = reactTable.useReactTable({
         data: data,
         columns: columns,
@@ -31,6 +46,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
         },
         state: {
             columnOrder,
+            globalFilter,
         },
         onColumnOrderChange: (state) => {
             setColumnOrder(state);
@@ -39,6 +55,11 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
         enableMultiRowSelection: enableMultiRowSelection,
         enableSubRowSelection: enableSubRowSelection,
         columnResizeMode: "onChange",
+        filterFns: {
+            fuzzy: fuzzyFilter, //define as a filter function that can be used in column definitions
+        },
+        onGlobalFilterChange: setGlobalFilter,
+        globalFilterFn: 'fuzzy', //apply fuzzy filter to the global filter (most common use case for fuzzy filter)
     });
     react.useEffect(() => {
         setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
@@ -48,6 +69,8 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
             refreshData: () => {
                 throw new Error("not implemented");
             },
+            globalFilter: globalFilter,
+            setGlobalFilter: setGlobalFilter,
         }, children: children }));
 };
 
@@ -89,6 +112,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 +134,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
                 obj[filter.id] = filter.value;
                 return { ...accumulator, ...obj };
             }, {})),
+            searching: globalFilter,
         },
     });
     const table = reactTable.useReactTable({
@@ -129,6 +154,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
             columnFilters,
             rowSelection,
             columnOrder,
+            globalFilter,
         },
         defaultColumn: {
             size: 150, //starting column size
@@ -141,15 +167,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 +194,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 +295,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 +485,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

@@ -1,6 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
 import { createContext, useState, useEffect, useContext } from 'react';
+import { rankItem } from '@tanstack/match-sorter-utils';
 import axios from 'axios';
 import { Button, Box, Text, Input, Popover, Tooltip, PopoverTrigger, IconButton, PopoverContent, PopoverArrow, PopoverBody, Flex, FormControl, Checkbox, Menu, MenuButton, MenuList, MenuItem, Container, Table as Table$1, Grid, Card, CardBody, Tfoot, Tr as Tr$1, Th, Thead, Portal, ButtonGroup, Icon } from '@chakra-ui/react';
 import { MdFilterAlt, MdArrowUpward, MdArrowDownward, MdOutlineMoveDown, MdOutlineSort, MdPushPin, MdCancel, MdSort, MdFilterListAlt, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage, MdClear, MdOutlineChecklist } from 'react-icons/md';
@@ -11,10 +12,24 @@ import { Tbody, Tr, Td } from '@chakra-ui/table';
 const TableContext = createContext({
     table: {},
     refreshData: () => { },
+    globalFilter: "",
+    setGlobalFilter: () => { },
 });
 
+// Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils)
+const fuzzyFilter = (row, columnId, value, addMeta) => {
+    // Rank the item
+    const itemRank = rankItem(row.getValue(columnId), value);
+    // Store the itemRank info
+    addMeta({
+        itemRank,
+    });
+    // Return if the item should be filtered in/out
+    return itemRank.passed;
+};
 const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
     const [columnOrder, setColumnOrder] = useState([]);
+    const [globalFilter, setGlobalFilter] = useState('');
     const table = useReactTable({
         data: data,
         columns: columns,
@@ -29,6 +44,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
         },
         state: {
             columnOrder,
+            globalFilter,
         },
         onColumnOrderChange: (state) => {
             setColumnOrder(state);
@@ -37,6 +53,11 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
         enableMultiRowSelection: enableMultiRowSelection,
         enableSubRowSelection: enableSubRowSelection,
         columnResizeMode: "onChange",
+        filterFns: {
+            fuzzy: fuzzyFilter, //define as a filter function that can be used in column definitions
+        },
+        onGlobalFilterChange: setGlobalFilter,
+        globalFilterFn: 'fuzzy', //apply fuzzy filter to the global filter (most common use case for fuzzy filter)
     });
     useEffect(() => {
         setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
@@ -46,6 +67,8 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
             refreshData: () => {
                 throw new Error("not implemented");
             },
+            globalFilter: globalFilter,
+            setGlobalFilter: setGlobalFilter,
         }, children: children }));
 };
 
@@ -87,6 +110,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 +132,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
                 obj[filter.id] = filter.value;
                 return { ...accumulator, ...obj };
             }, {})),
+            searching: globalFilter,
         },
     });
     const table = useReactTable({
@@ -127,6 +152,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
             columnFilters,
             rowSelection,
             columnOrder,
+            globalFilter,
         },
         defaultColumn: {
             size: 150, //starting column size
@@ -139,15 +165,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 +192,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 +293,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 +477,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/DataTable.d.ts

@@ -1,5 +1,14 @@
 /// <reference types="react" />
-import { ColumnDef } from "@tanstack/react-table";
+import { ColumnDef, FilterFn } from "@tanstack/react-table";
+import { RankingInfo } from '@tanstack/match-sorter-utils';
+declare module '@tanstack/react-table' {
+    interface FilterFns {
+        fuzzy: FilterFn<unknown>;
+    }
+    interface FilterMeta {
+        itemRank: RankingInfo;
+    }
+}
 export interface DataTableProps<T> {
     children: JSX.Element | JSX.Element[];
     data: T[];

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.24",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -39,6 +39,7 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@tanstack/match-sorter-utils": "^8.15.1",
     "@tanstack/react-table": "^8.16.0",
     "axios": "^1.6.8",
     "framer-motion": "^11.0.22",