@bsol-oss/react-datatable5 1.0.23 → 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[];

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');
@@ -17,8 +18,20 @@ const TableContext = react.createContext({
     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,
@@ -33,6 +46,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
         },
         state: {
             columnOrder,
+            globalFilter,
         },
         onColumnOrderChange: (state) => {
             setColumnOrder(state);
@@ -41,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));
@@ -50,6 +69,8 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
             refreshData: () => {
                 throw new Error("not implemented");
             },
+            globalFilter: globalFilter,
+            setGlobalFilter: setGlobalFilter,
         }, children: children }));
 };
 

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';
@@ -15,8 +16,20 @@ const TableContext = createContext({
     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,
@@ -31,6 +44,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
         },
         state: {
             columnOrder,
+            globalFilter,
         },
         onColumnOrderChange: (state) => {
             setColumnOrder(state);
@@ -39,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));
@@ -48,6 +67,8 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
             refreshData: () => {
                 throw new Error("not implemented");
             },
+            globalFilter: globalFilter,
+            setGlobalFilter: setGlobalFilter,
         }, children: children }));
 };
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "1.0.23",
+  "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",