@prt-ts/fluent-react-table-v2 9.40.0-build.1.0 → 9.40.0-build.10.0

package/index.js

@@ -1,13 +1,14 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useMemo } from 'react';
 import { useDrop, useDrag, DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Popover, PopoverTrigger, PopoverSurface, MenuGroupHeader, Checkbox, Divider, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, RadioGroup, Radio, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, MenuButton, MenuGroup, MenuDivider, mergeClasses, Skeleton, SkeletonItem, Subtitle2Stronger } from '@fluentui/react-components';
-import { PreviousRegular, ArrowPreviousFilled, ArrowNextFilled, NextRegular, bundleIcon, SaveFilled, SaveRegular, TableSimpleCheckmarkFilled, TableSimpleCheckmarkRegular, SearchFilled, SearchRegular, FilterFilled, FilterRegular, CodeTextOff16Filled, CodeTextOff16Regular, ColumnEditFilled, ColumnEditRegular, GroupFilled, GroupRegular, ChevronRightFilled, ChevronRightRegular, ChevronDownRegular, ChevronDownFilled, DragFilled, DragRegular, TextGrammarDismissRegular, Search24Regular, FilterDismissFilled, Dismiss24Regular, ArrowSortDown20Filled, ArrowSortDown20Regular, ArrowSortUp20Filled, ArrowSortUp20Regular, GroupListRegular, PinRegular, TextSortAscendingFilled, TextSortDescendingFilled, GroupDismissFilled, ArrowStepInLeftRegular, ArrowStepInRightRegular, PinOffRegular, DocumentSearch24Regular } from '@fluentui/react-icons';
+import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, PopoverSurface, MenuGroupHeader, Checkbox, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, mergeClasses, Skeleton, SkeletonItem, Subtitle2Stronger, MenuItemRadio, DrawerFooter } from '@fluentui/react-components';
+import { PreviousRegular, ArrowPreviousFilled, ArrowNextFilled, NextRegular, bundleIcon, SaveFilled, SaveRegular, TableSimpleCheckmarkFilled, TableSimpleCheckmarkRegular, SearchFilled, SearchRegular, FilterFilled, FilterRegular, CodeTextOff16Filled, CodeTextOff16Regular, ColumnEditFilled, ColumnEditRegular, GroupFilled, GroupRegular, ChevronRightFilled, ChevronRightRegular, ChevronDownRegular, ChevronDownFilled, DragFilled, DragRegular, Album24Regular, Search24Regular, FilterDismissFilled, Dismiss24Regular, ArrowSortDown20Filled, ArrowSortDown20Regular, ArrowSortUp20Filled, ArrowSortUp20Regular, GroupListRegular, PinRegular, TextSortAscendingFilled, TextSortDescendingFilled, GroupDismissFilled, ArrowStepInLeftRegular, ArrowStepInRightRegular, PinOffRegular, DocumentSearch24Regular, Save20Filled, ViewDesktop20Filled, ViewDesktop20Regular } from '@fluentui/react-icons';
 import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getGroupedRowModel, getExpandedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, flexRender } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
 import { useVirtual } from 'react-virtual';
+import { DatePicker } from '@fluentui/react-datepicker-compat';
 
 const useStaticStyles = makeStaticStyles({
     "*": {
@@ -162,33 +163,21 @@ const useGridHeaderStyles = makeStyles({
 const GridHeader = (props) => {
     const { table, gridTitle, globalFilter, setGlobalFilter } = props;
     const styles = useGridHeaderStyles();
-    const resetAllFilters = React.useCallback(() => {
-        table.setGlobalFilter('');
-        table.resetColumnFilters();
-    }, [table]);
-    const resetAllGrouping = React.useCallback(() => {
-        table.resetGrouping();
-    }, [table]);
-    const clearAllSelection = React.useCallback(() => {
-        table.toggleAllRowsSelected(false);
-    }, [table]);
-    return (jsxs("div", Object.assign({ className: styles.tableTopHeaderContainer }, { children: [jsx("div", Object.assign({ className: styles.tableTopHeaderLeft }, { children: gridTitle })), jsxs("div", Object.assign({ className: styles.tableTopHeaderRight }, { children: [jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button, { icon: jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
+    return (jsxs("div", Object.assign({ className: styles.tableTopHeaderContainer }, { children: [jsx("div", Object.assign({ className: styles.tableTopHeaderLeft }, { children: gridTitle })), jsxs("div", Object.assign({ className: styles.tableTopHeaderRight }, { children: [props.headerMenu, props.headerMenu && jsx(Divider, { vertical: true }), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button, { icon: jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
                                             if (column.id === 'select')
                                                 return null;
                                             if (column.id === 'id')
                                                 return null;
-                                            return (jsx(Checkbox, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup(), label: jsx("span", { children: column.id }) }, column.id));
+                                            return (jsx(Checkbox, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup() || !column.getIsVisible(), label: jsx("span", { children: column.columnDef.id }) }, column.id));
                                         })] })) })] })), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Toggle Columns" }), jsx(Checkbox, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsx(Divider, {}), table.getAllLeafColumns().map((column) => {
                                             if (column.id === 'select')
                                                 return null;
-                                            if (column.id === 'id')
-                                                return null;
                                             return (jsx(Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
-                                        })] })) })] })), jsxs(Menu, { children: [jsx(MenuTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button
-                                // appearance="subtle"
-                                , { 
-                                    // appearance="subtle"
-                                    icon: jsx(TextGrammarDismissRegular, {}), "aria-label": "View Menu" }) })), jsx(MenuPopover, { children: jsxs(MenuList, { children: [jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters }, { children: "Clear All Filters" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllGrouping }, { children: "Clear All Grouping" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: clearAllSelection }, { children: "Clear All Selection" }))] }) })] }), jsx(DebouncedInput, { value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (value) => setGlobalFilter(String(value)), className: "p-2 font-lg shadow border border-block", placeholder: "Search all columns...", openFilterDrawer: props.openFilterDrawer, setFilterDrawerOpen: props.setFilterDrawerOpen })] }))] })));
+                                        })] })) })] })), jsx(Button
+                    // appearance="subtle"
+                    , { 
+                        // appearance="subtle"
+                        onClick: () => props.setViewsDrawerOpen((value) => !value), icon: jsx(Album24Regular, {}), "aria-label": "View Menu" }), jsx(DebouncedInput, { value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (value) => setGlobalFilter(String(value)), className: "p-2 font-lg shadow border border-block", placeholder: "Search all columns...", openFilterDrawer: props.openFilterDrawer, setFilterDrawerOpen: props.setFilterDrawerOpen })] }))] })));
 };
 // A debounced input react component
 function DebouncedInput({ value: initialValue, onChange, debounce = 500, openFilterDrawer, setFilterDrawerOpen, }) {
@@ -202,7 +191,7 @@ function DebouncedInput({ value: initialValue, onChange, debounce = 500, openFil
         }, debounce);
         return () => clearTimeout(timeout);
     }, [value, onChange, debounce]);
-    return (jsx(Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsx(Search24Regular, {}), style: { width: '300px' }, contentAfter: jsx(Button, { appearance: "subtle", icon: openFilterDrawer ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
+    return (jsx(Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsx(Search24Regular, {}), style: { width: '300px' }, contentAfter: jsx(Button, { appearance: "subtle", title: 'Ad', icon: openFilterDrawer ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
                 setFilterDrawerOpen((open) => !open);
             } }) }));
 }
@@ -212,10 +201,57 @@ const arrIncludesSome = (row, columnId, value) => {
     const rowValue = row.getValue(columnId);
     const passed = Array.isArray(value) &&
         ((value === null || value === void 0 ? void 0 : value.length) === 0 || value.includes(`${rowValue}`));
-    // console.log("rowValue", rowValue, "value", value, "passed", passed, "columnId", columnId)
-    // Return if the item should be filtered in/out
     return passed;
 };
+const dateRange = (row, columnId, value) => {
+    // filter by date range
+    const rowValue = row.getValue(columnId);
+    // compare the date range
+    // case if no start date or end date is selected
+    // case if start date is selected
+    // case if end date is selected
+    if (!value || value.length === 0) {
+        return true;
+    }
+    else if (value.length === 2 && value[0] && !value[1]) {
+        return typeof rowValue.getMonth === 'function' && rowValue >= value[0];
+    }
+    else if (value.length === 2 && !value[0] && value[1]) {
+        return typeof rowValue.getMonth === 'function' && rowValue <= value[1];
+    }
+    else if (value.length === 2 && !value[0] && !value[1]) {
+        return true;
+    }
+    const passed = typeof rowValue.getMonth === 'function' && value[0] <= rowValue && rowValue <= value[1];
+    return passed;
+};
+const date = (row, columnId, value) => {
+    var _a;
+    // filter by date range
+    const rowValue = row.getValue(columnId);
+    // compare the date range
+    // case if no start date or end date is selected
+    // case if start date is selected
+    // case if end date is selected
+    if (!value) {
+        return true;
+    }
+    const passed = typeof rowValue.getMonth === 'function' && ((_a = new Date(value)) === null || _a === void 0 ? void 0 : _a.toDateString()) === (rowValue === null || rowValue === void 0 ? void 0 : rowValue.toDateString());
+    return passed;
+};
+
+const getLeafColumns = (columns) => {
+    if (!columns || !columns.length) {
+        return [];
+    }
+    return columns.reduce((totalItems, col) => {
+        if (!col.columns) {
+            totalItems.push(col);
+        }
+        return totalItems.concat(getLeafColumns(col.columns));
+    }, []);
+};
+
 const useGridContainer = (props, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { columns, data, rowSelectionMode } = props;
@@ -225,21 +261,31 @@ const useGridContainer = (props, ref) => {
     });
     const [sorting, setSorting] = React.useState((_a = props.sortingState) !== null && _a !== void 0 ? _a : []);
     const [columnFilters, setColumnFilters] = React.useState((_b = props.columnFilterState) !== null && _b !== void 0 ? _b : []);
-    const [globalFilter, setGlobalFilter] = React.useState((_c = props.defaultGlobalFilter) !== null && _c !== void 0 ? _c : "");
+    const [globalFilter, setGlobalFilter] = React.useState((_c = props.defaultGlobalFilter) !== null && _c !== void 0 ? _c : '');
     const [grouping, setGrouping] = React.useState((_d = props.groupingState) !== null && _d !== void 0 ? _d : []);
     const [rowSelection, setRowSelection] = React.useState((_e = props.rowSelectionState) !== null && _e !== void 0 ? _e : {});
     const [columnVisibility, setColumnVisibility] = React.useState((_f = props.columnVisibility) !== null && _f !== void 0 ? _f : {});
-    const [columnOrder, setColumnOrder] = React.useState(() => { var _a; return (_a = props.columnOrderState) !== null && _a !== void 0 ? _a : columns.map((column) => column.id); });
+    const [columnOrder, setColumnOrder] = React.useState(() => {
+        if (props.columnOrderState) {
+            return props.columnOrderState;
+        }
+        const leafColumns = getLeafColumns(columns);
+        return leafColumns.map((col) => col.id);
+    });
     const [expanded, setExpanded] = React.useState((_g = props.expandedState) !== null && _g !== void 0 ? _g : {});
     const [columnPinning, setColumnPinning] = React.useState((_h = props.columnPinningState) !== null && _h !== void 0 ? _h : {});
+    const [columnSizing, setColumnSizing] = React.useState({});
+    const tableViews = React.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
     const table = useReactTable({
         columns: columns,
         data,
         filterFns: {
-            arrIncludesSome,
+            arrIncludesSome: arrIncludesSome,
+            inDateRange: dateRange,
+            matchDate: date,
         },
         initialState: {
-            expanded: true
+            expanded: true,
         },
         state: {
             pagination,
@@ -252,10 +298,11 @@ const useGridContainer = (props, ref) => {
             columnOrder,
             columnVisibility,
             columnPinning,
+            columnSizing,
         },
-        columnResizeMode: "onChange",
+        columnResizeMode: 'onChange',
         enableRowSelection: rowSelectionMode !== undefined,
-        enableMultiRowSelection: rowSelectionMode === "multiple",
+        enableMultiRowSelection: rowSelectionMode === 'multiple',
         enableFilters: true,
         enableGlobalFilter: true,
         enableColumnFilters: true,
@@ -271,6 +318,7 @@ const useGridContainer = (props, ref) => {
         onExpandedChange: setExpanded,
         onColumnVisibilityChange: setColumnVisibility,
         onColumnPinningChange: setColumnPinning,
+        onColumnSizingChange: setColumnSizing,
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
@@ -292,6 +340,7 @@ const useGridContainer = (props, ref) => {
             columnOrder,
             columnVisibility,
             columnPinning,
+            columnSizing
         };
     }, [
         pagination,
@@ -304,43 +353,105 @@ const useGridContainer = (props, ref) => {
         columnOrder,
         columnVisibility,
         columnPinning,
+        columnSizing
     ]);
+    const resetToDefaultView = () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const defaultTableState = {
+            pagination: {
+                pageSize: props.pageSize || 10,
+                pageIndex: 0,
+            },
+            sorting: (_a = props.sortingState) !== null && _a !== void 0 ? _a : [],
+            columnFilters: (_b = props.columnFilterState) !== null && _b !== void 0 ? _b : [],
+            globalFilter: (_c = props.defaultGlobalFilter) !== null && _c !== void 0 ? _c : '',
+            grouping: (_d = props.groupingState) !== null && _d !== void 0 ? _d : [],
+            expanded: (_e = props.expandedState) !== null && _e !== void 0 ? _e : {},
+            rowSelection: (_f = props.rowSelectionState) !== null && _f !== void 0 ? _f : {},
+            columnOrder: (() => {
+                if (props.columnOrderState) {
+                    return props.columnOrderState;
+                }
+                const leafColumns = getLeafColumns(columns);
+                return leafColumns.map((col) => col.id);
+            })(),
+            columnVisibility: (_g = props.columnVisibility) !== null && _g !== void 0 ? _g : {},
+            columnPinning: (_h = props.columnPinningState) !== null && _h !== void 0 ? _h : {},
+            columnSizing: {}
+        };
+        return applyTableState(defaultTableState);
+    };
+    const applyTableState = (tableState) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (tableState) {
+            setSorting((_a = tableState.sorting) !== null && _a !== void 0 ? _a : []);
+            setColumnFilters((_b = tableState.columnFilters) !== null && _b !== void 0 ? _b : []);
+            setGlobalFilter((_c = tableState.globalFilter) !== null && _c !== void 0 ? _c : '');
+            setGrouping((_d = tableState.grouping) !== null && _d !== void 0 ? _d : []);
+            setExpanded((_e = tableState.expanded) !== null && _e !== void 0 ? _e : {});
+            setRowSelection((_f = tableState.rowSelection) !== null && _f !== void 0 ? _f : {});
+            setColumnOrder((_g = tableState.columnOrder) !== null && _g !== void 0 ? _g : []);
+            setColumnVisibility((_h = tableState.columnVisibility) !== null && _h !== void 0 ? _h : {});
+            setColumnPinning((_j = tableState.columnPinning) !== null && _j !== void 0 ? _j : {});
+            setColumnSizing((_k = tableState.columnSizing) !== null && _k !== void 0 ? _k : {});
+            setTimeout(() => {
+                var _a;
+                setPagination((_a = tableState.pagination) !== null && _a !== void 0 ? _a : {
+                    pageSize: props.pageSize || 10,
+                    pageIndex: 0,
+                });
+            }, 10);
+            return true;
+        }
+        return false;
+    };
     React.useImperativeHandle(ref, () => {
         return {
             table,
-            getTableState: getTableState,
-            saveCurrentTableState: (viewName) => {
+            getTableState,
+            applyTableState,
+            resetToDefaultView
+        };
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [table, getTableState]);
+    const headerMenu = React.useMemo(() => {
+        if (props.headerMenu) {
+            const selectedRows = (table === null || table === void 0 ? void 0 : table.getSelectedRowModel().flatRows.map((row) => row.original)) || [];
+            return props.headerMenu(selectedRows);
+        }
+        return null;
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.headerMenu, rowSelection]);
+    // add event listeners to listen ctrl + shift + t and log current table state
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.ctrlKey && event.altKey && event.key === 'c') {
+                event.preventDefault();
                 const tableState = getTableState();
-                const tableStateString = JSON.stringify(tableState);
-                localStorage.setItem(viewName, tableStateString);
-                return true;
-            },
-            applySavedView: (viewName) => {
-                const tableStateString = localStorage.getItem(viewName);
-                if (tableStateString) {
-                    const tableState = JSON.parse(tableStateString);
-                    setSorting(tableState.sorting);
-                    setColumnFilters(tableState.columnFilters);
-                    setGlobalFilter(tableState.globalFilter);
-                    setGrouping(tableState.grouping);
-                    setExpanded(tableState.expanded);
-                    setRowSelection(tableState.rowSelection);
-                    setColumnOrder(tableState.columnOrder);
-                    setColumnVisibility(tableState.columnVisibility);
-                    setColumnPinning(tableState.columnPinning);
-                    setTimeout(() => {
-                        setPagination(tableState.pagination);
-                    }, 10);
-                    return true;
-                }
-                return false;
-            },
+                // log table state to console
+                console.log(tableState);
+                // save table state to local storage
+                localStorage.setItem('hotkey_table_state_temp', JSON.stringify(tableState));
+                // copy table state to clipboard
+                navigator.clipboard.writeText(JSON.stringify(tableState));
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
         };
-    }, [table, getTableState]);
+    }, [getTableState]);
     return {
         table,
         globalFilter,
+        tableViews,
+        headerMenu,
         setGlobalFilter,
+        resetToDefaultView,
+        applyTableState,
+        getTableState
     };
 };
 
@@ -406,7 +517,7 @@ const FilterMultiSelectCheckbox = ({ column, table, }) => {
         : (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) === (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) &&
             (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) > 0;
     const styles = useCheckboxFilterStyles();
-    return (jsxs("div", { children: [jsx(Input, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxs("div", Object.assign({ ref: filterContainer, className: styles.searchContainer }, { children: [paddingTop > 0 && (jsx("span", { style: { paddingTop: `${paddingTop}px` } })), jsx(Checkbox, { checked: allOptionChecked, onChange: () => {
+    return (jsxs("div", { children: [jsx(Input, { type: 'search', value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxs("div", Object.assign({ ref: filterContainer, className: styles.searchContainer }, { children: [paddingTop > 0 && (jsx("span", { style: { paddingTop: `${paddingTop}px` } })), jsx(Checkbox, { checked: allOptionChecked, onChange: () => {
                             if ((columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0) {
                                 column.setFilterValue(undefined);
                                 return;
@@ -451,7 +562,7 @@ const useRadioFilterStyles = makeStyles({
             'background-color': '#555',
         } }),
 });
-const FilterMultiSelectRadio = ({ column, table }) => {
+const FilterSelectRadio = ({ column, table, }) => {
     var _a, _b, _c;
     const firstValue = (_a = table
         .getPreFilteredRowModel()
@@ -459,8 +570,8 @@ const FilterMultiSelectRadio = ({ column, table }) => {
     const columnFilterValue = column.getFilterValue();
     const [filterOptions, setFilterOptions] = React.useState([]);
     React.useEffect(() => {
-        const uniqueSortedOptions = typeof firstValue === "number" || !isNaN(firstValue) ?
-            Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => Number(a) - Number(b))
+        const uniqueSortedOptions = typeof firstValue === 'number' || !isNaN(firstValue)
+            ? Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => Number(a) - Number(b))
             : Array.from(column.getFacetedUniqueValues().keys()).sort();
         setFilterOptions(uniqueSortedOptions);
     }, 
@@ -499,28 +610,168 @@ const FilterMultiSelectRadio = ({ column, table }) => {
                             })] })), paddingBottom > 0 && (jsx("div", { style: { paddingBottom: `${paddingBottom}px` } }))] }))] }));
 };
 
+const useNumberRangeFilterStyles$2 = makeStyles({
+    searchInput: {
+        width: '100%',
+    },
+    searchInputField: {
+        width: '100%',
+        flexGrow: 1,
+    },
+    searchContainer: {
+        display: 'flex',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    }
+});
+const FilterNumberRange = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { column } = props;
+    const columnFilterValue = column.getFilterValue();
+    const min = Number((_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '');
+    const max = Number((_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : '');
+    const handleMinChange = (e, data) => {
+        const value = Number(data.value);
+        column.setFilterValue((old) => [value, old === null || old === void 0 ? void 0 : old[1]]);
+    };
+    const handleMaxChange = (e, data) => {
+        const value = Number(data.value);
+        column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], value]);
+    };
+    const styles = useNumberRangeFilterStyles$2();
+    return (jsxs("div", Object.assign({ className: styles.searchContainer }, { children: [jsx(Field, Object.assign({ label: 'Min:', size: "small", className: styles.searchInputField }, { children: jsx(Input, { type: "number", value: `${(columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || ''}`, min: min, max: max, onChange: handleMinChange, className: styles.searchInput, placeholder: `Min ${((_e = column.getFacetedMinMaxValues()) === null || _e === void 0 ? void 0 : _e[0])
+                        ? `(${(_f = column.getFacetedMinMaxValues()) === null || _f === void 0 ? void 0 : _f[0]})`
+                        : ''}` }) })), jsx(Field, Object.assign({ label: 'Max:', size: "small", className: styles.searchInputField }, { children: jsx(Input, { type: "number", value: `${(columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) || ''}`, min: min, max: max, onChange: handleMaxChange, className: styles.searchInput, placeholder: `Max ${((_g = column.getFacetedMinMaxValues()) === null || _g === void 0 ? void 0 : _g[1])
+                        ? `(${(_h = column.getFacetedMinMaxValues()) === null || _h === void 0 ? void 0 : _h[1]})`
+                        : ''}` }) }))] })));
+};
+
+const useNumberRangeFilterStyles$1 = makeStyles({
+    searchInput: {
+        width: '100%',
+    },
+    searchInputField: {
+        width: '100%',
+        flexGrow: 1,
+    },
+    searchContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    },
+});
+const FilterDateRange = (props) => {
+    var _a, _b, _c, _d;
+    const { column } = props;
+    const columnFilterValue = column.getFilterValue();
+    const min = (_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : undefined;
+    const max = (_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : undefined;
+    const handleMinChange = (date) => {
+        if (!date) {
+            column.setFilterValue((old) => [undefined, old === null || old === void 0 ? void 0 : old[1]]);
+            return;
+        }
+        column.setFilterValue((old) => [date, old === null || old === void 0 ? void 0 : old[1]]);
+    };
+    const handleMaxChange = (date) => {
+        if (!date) {
+            column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], undefined]);
+            return;
+        }
+        column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], date]);
+    };
+    const styles = useNumberRangeFilterStyles$1();
+    return (jsxs("div", Object.assign({ className: styles.searchContainer }, { children: [jsx(Field, Object.assign({ label: 'From Date:', size: "small", className: styles.searchInputField }, { children: jsx(DatePicker, { value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || null, min: min, max: max, onSelectDate: handleMinChange, className: styles.searchInput, placeholder: `From Date`, size: 'small', allowTextInput: true }) })), jsx(Field, Object.assign({ label: 'To Date:', size: "small", className: styles.searchInputField }, { children: jsx(DatePicker, { value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) || null, min: min, max: max, onSelectDate: handleMaxChange, className: styles.searchInput, placeholder: `To Date`, size: 'small', allowTextInput: true }) }))] })));
+};
+
+const useNumberRangeFilterStyles = makeStyles({
+    searchInput: {
+        width: '100%',
+    },
+    searchInputField: {
+        width: '100%',
+        flexGrow: 1,
+    },
+    searchContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    },
+});
+const FilterDate = (props) => {
+    var _a, _b, _c, _d;
+    const { column } = props;
+    const columnFilterValue = column.getFilterValue();
+    const min = (_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : undefined;
+    const max = (_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : undefined;
+    const onDateSelect = (date) => {
+        if (!date) {
+            column.setFilterValue(undefined);
+            return;
+        }
+        column.setFilterValue(date);
+    };
+    const styles = useNumberRangeFilterStyles();
+    return (jsx("div", Object.assign({ className: styles.searchContainer }, { children: jsx(DatePicker, { value: columnFilterValue || null, min: min, max: max, onSelectDate: onDateSelect, className: styles.searchInput, placeholder: `Select a date`, size: 'small', allowTextInput: true }) })));
+};
+
 const useFilterStyles = makeStyles({
-    root: Object.assign(Object.assign({}, shorthands.padding("10px")), { width: "100%" }),
-    defaultInput: Object.assign(Object.assign({}, shorthands.padding("10px")), { width: "100%" })
+    searchInput: {
+        width: '100%',
+    },
+    searchInputField: {
+        width: '100%',
+        flexGrow: 1,
+    },
+    searchContainer: {
+        display: 'flex',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    },
 });
-const Filter = ({ column, table }) => {
-    var _a;
-    const sortFunctionName = ((_a = column.getFilterFn()) === null || _a === void 0 ? void 0 : _a.name) || "arrIncludesSome";
+const Filter = ({ column, table, }) => {
+    var _a, _b;
+    const filterFunctionName = column.columnDef.filterFn;
     const styles = useFilterStyles();
-    switch (sortFunctionName) {
-        case "arrIncludesSome":
-            return (jsx(FilterMultiSelectCheckbox, { column: column, table: table }));
-        case "arrIncludesAll":
-            return (jsx(FilterMultiSelectRadio, { column: column, table: table }));
-        case "arrIncludes":
-            return (jsx(FilterMultiSelectRadio, { column: column, table: table }));
+    switch (filterFunctionName) {
+        case 'arrIncludesSome':
+            return jsx(FilterMultiSelectCheckbox, { column: column, table: table });
+        case 'arrIncludesAll':
+        case 'arrIncludes':
+            return jsx(FilterSelectRadio, { column: column, table: table });
+        case 'inNumberRange':
+            return jsx(FilterNumberRange, { column: column, table: table });
+        case 'inDateRange': {
+            const firstValue = (_a = table
+                .getPreFilteredRowModel()
+                .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
+            if (typeof firstValue.getMonth === 'function') {
+                return jsx(FilterDateRange, { column: column, table: table });
+            }
+            break;
+        }
+        case 'matchDate': {
+            const firstValue = (_b = table
+                .getPreFilteredRowModel()
+                .flatRows[0]) === null || _b === void 0 ? void 0 : _b.getValue(column.id);
+            if (typeof firstValue.getMonth === 'function') {
+                return jsx(FilterDate, { column: column, table: table });
+            }
+            break;
+        }
     }
-    return (jsx("div", Object.assign({ className: styles.root }, { children: jsx(Input, { type: "search", value: (column.getFilterValue() || ""), onChange: (_, data) => {
-                column.setFilterValue(data.value);
-            }, placeholder: "Search...", size: "small", className: styles.defaultInput }) })));
+    return (jsx("div", Object.assign({ className: styles.searchContainer }, { children: jsx(Field, Object.assign({ size: 'small', className: styles.searchInputField }, { children: jsx(Input, { value: (column.getFilterValue() || ''), onChange: (_, data) => {
+                    column.setFilterValue(data.value);
+                }, placeholder: "Search Keyword...", size: "small", className: styles.searchInput }) })) })));
 };
 
-const useFilterDrawerStyles = makeStyles({
+const useFilterDrawerStyles$1 = makeStyles({
     drawerBody: Object.assign(Object.assign({}, shorthands.overflow('hidden', 'auto')), { 
         /* width */
         ':hover': Object.assign({}, shorthands.overflow('auto', 'auto')), '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, shorthands.borderRadius('50%')), 
@@ -539,7 +790,7 @@ const useFilterDrawerStyles = makeStyles({
 });
 const FilterDrawer = ({ open, setOpen, table }) => {
     const headerGroups = table.getHeaderGroups();
-    const styles = useFilterDrawerStyles();
+    const styles = useFilterDrawerStyles$1();
     return (jsxs(InlineDrawer, Object.assign({ position: "end", open: open, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => setOpen(false) }) }, { children: "Advance Filters" })) }), jsx(DrawerBody, Object.assign({ className: styles.drawerBody }, { children: headerGroups.map((headerGroup) => {
                     const canApplyFilter = headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1;
                     if (!canApplyFilter)
@@ -598,18 +849,20 @@ const HeaderCell = ({ header, table, hideMenu, headerDepth, totalNumberOfHeaderD
     const styles = useTableHeaderCellStyles();
     return (jsxs("th", Object.assign({ colSpan: header.colSpan, style: {
             opacity: isDragging ? 0.5 : 1,
-            cursor: isDragging ? "grabbing" : "pointer",
-            alignItems: headerDepth === totalNumberOfHeaderDepth ? "left" : "center",
+            cursor: isDragging ? 'grabbing' : 'pointer',
+            alignItems: headerDepth === totalNumberOfHeaderDepth ? 'left' : 'center',
             zIndex: 99,
-            backgroundColor: isOver ? "#0000000d" : "transparent",
-            border: isOver ? "1px dashed #0000000d" : "none",
-        }, className: styles.tHeadCell }, { children: [jsx("div", Object.assign({ ref: dragRef }, { children: jsxs("div", Object.assign({ className: styles.tHeadCellContent, ref: dropRef }, { children: [jsx("div", Object.assign({ ref: previewRef }, { children: header.isPlaceholder ? null : (jsxs(Button, Object.assign({ style: {
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "left",
+            backgroundColor: isOver ? '#0000000d' : 'transparent',
+            border: isOver ? '1px dashed #0000000d' : 'none',
+        }, className: styles.tHeadCell }, { children: [jsx("div", Object.assign({ ref: header.isPlaceholder ? undefined : dragRef }, { children: jsxs("div", Object.assign({ className: styles.tHeadCellContent, ref: header.isPlaceholder ? undefined : dropRef }, { children: [jsx("div", Object.assign({ ref: header.isPlaceholder ? undefined : previewRef }, { children: header.isPlaceholder ? null : (jsxs(Button, Object.assign({ style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'left',
                                     flex: 1,
                                 }, onClick: (e) => {
-                                    header.column.toggleSorting(header.column.getIsSorted() === "asc", e.ctrlKey);
+                                    if (!header.column.getCanSort())
+                                        return;
+                                    header.column.toggleSorting(header.column.getIsSorted() === 'asc', e.ctrlKey);
                                 }, onDoubleClick: () => {
                                     if (!header.column.getCanGroup())
                                         return;
@@ -617,24 +870,28 @@ const HeaderCell = ({ header, table, hideMenu, headerDepth, totalNumberOfHeaderD
                                 }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_a = {
                                     asc: (jsx("strong", { children: jsx(SortAscIcon, {}) })),
                                     desc: (jsx("strong", { children: jsx(SortDescIcon, {}) })),
-                                }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : undefined, iconPosition: "after" }, { children: [jsx("strong", { children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getIsGrouped() && jsx(GroupListRegular, {}), header.column.getIsFiltered() && (jsx("strong", { children: jsx(FilterFilled, {}) })), header.column.getIsPinned() && jsx(PinRegular, {})] }))) })), !header.isPlaceholder && !hideMenu && (jsx("div", { children: jsxs(Menu, { children: [jsx(MenuTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(MenuButton, { appearance: "transparent", "aria-label": "View Column Actions" }) })), jsx(MenuPopover, Object.assign({ className: styles.tHeadMenuPopover }, { children: jsxs(MenuList, { children: [header.column.getCanSort() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Sort by", " ", flexRender(header.column.columnDef.header, header.getContext())] }), jsx(MenuItem, Object.assign({ onClick: (e) => {
+                                }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : undefined, iconPosition: "after" }, { children: [jsx("strong", { children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getIsGrouped() && jsx(GroupListRegular, {}), header.column.getIsFiltered() && (jsx("strong", { children: jsx(FilterFilled, {}) })), header.column.getIsPinned() && jsx(PinRegular, {})] }))) })), !header.isPlaceholder &&
+                            !hideMenu &&
+                            (header.column.getCanSort() ||
+                                header.column.getCanGroup() ||
+                                header.column.getCanFilter()) && (jsx("div", { children: jsxs(Menu, { children: [jsx(MenuTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(MenuButton, { appearance: "transparent", "aria-label": "View Column Actions" }) })), jsx(MenuPopover, Object.assign({ className: styles.tHeadMenuPopover }, { children: jsxs(MenuList, { children: [header.column.getCanSort() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Sort by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(MenuItem, Object.assign({ onClick: (e) => {
                                                                 var _a;
                                                                 const isControlKeySelected = e.ctrlKey;
                                                                 (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(false, isControlKeySelected);
-                                                            }, icon: jsx(TextSortAscendingFilled, {}), disabled: header.column.getIsSorted() === "asc" }, { children: "Sort A to Z" })), jsx(MenuItem, Object.assign({ onClick: (e) => {
+                                                            }, icon: jsx(TextSortAscendingFilled, {}), disabled: header.column.getIsSorted() === 'asc' }, { children: "Sort A to Z" })), jsx(MenuItem, Object.assign({ onClick: (e) => {
                                                                 var _a;
                                                                 const isControlKeySelected = e.ctrlKey;
                                                                 (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(true, isControlKeySelected);
-                                                            }, icon: jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === "desc" }, { children: "Sort Z to A" })), jsx(MenuDivider, {})] }, "sort-group")), header.column.getCanGroup() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Group by", " ", flexRender(header.column.columnDef.header, header.getContext())] }), !header.column.getIsGrouped() && (jsxs(MenuItem, Object.assign({ onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupFilled, {}) }, { children: ["Group by", " ", flexRender(header.column.columnDef.header, header.getContext())] }))), header.column.getIsGrouped() && (jsxs(MenuItem, Object.assign({ onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupDismissFilled, {}) }, { children: ["Remove Grouping on", " ", flexRender(header.column.columnDef.header, header.getContext())] }))), jsx(MenuDivider, {})] }, "grouping-group")), header.column.getCanSort() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Pin Column", " ", flexRender(header.column.columnDef.header, header.getContext())] }), jsx(MenuItem, Object.assign({ onClick: () => {
+                                                            }, icon: jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc' }, { children: "Sort Z to A" })), jsx(MenuDivider, {})] }, 'sort-group')), header.column.getCanGroup() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Group by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), !header.column.getIsGrouped() && (jsxs(MenuItem, Object.assign({ onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupFilled, {}) }, { children: ["Group by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }))), header.column.getIsGrouped() && (jsxs(MenuItem, Object.assign({ onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupDismissFilled, {}) }, { children: ["Remove Grouping on", ' ', flexRender(header.column.columnDef.header, header.getContext())] }))), jsx(MenuDivider, {})] }, 'grouping-group')), header.column.getCanSort() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Pin Column", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(MenuItem, Object.assign({ onClick: () => {
                                                                 var _a;
-                                                                (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin("left");
-                                                            }, icon: jsx(ArrowStepInLeftRegular, {}), disabled: header.column.getIsPinned() === "left" }, { children: "To Left" })), jsx(MenuItem, Object.assign({ onClick: () => {
+                                                                (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('left');
+                                                            }, icon: jsx(ArrowStepInLeftRegular, {}), disabled: header.column.getIsPinned() === 'left' }, { children: "To Left" })), jsx(MenuItem, Object.assign({ onClick: () => {
                                                                 var _a;
-                                                                (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin("right");
-                                                            }, icon: jsx(ArrowStepInRightRegular, {}), disabled: header.column.getIsPinned() === "right" }, { children: "To Right" })), ["left", "right"].includes(header.column.getIsPinned()) && (jsx(MenuItem, Object.assign({ onClick: () => {
+                                                                (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('right');
+                                                            }, icon: jsx(ArrowStepInRightRegular, {}), disabled: header.column.getIsPinned() === 'right' }, { children: "To Right" })), ['left', 'right'].includes(header.column.getIsPinned()) && (jsx(MenuItem, Object.assign({ onClick: () => {
                                                                 var _a;
                                                                 (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
-                                                            }, icon: jsx(PinOffRegular, {}) }, { children: "Unpin Column" }))), jsx(MenuDivider, {})] }, "pin columns")), header.column.getCanFilter() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Filter by", " ", flexRender(header.column.columnDef.header, header.getContext())] }), jsx(Filter, { column: header.column, table: table })] }, "filter-group"))] }) }))] }) }))] })) })), header.column.getCanResize() && (jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }))] })));
+                                                            }, icon: jsx(PinOffRegular, {}) }, { children: "Unpin Column" }))), jsx(MenuDivider, {})] }, 'pin columns')), header.column.getCanFilter() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Filter by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(Filter, { column: header.column, table: table })] }, 'filter-group'))] }) }))] }) }))] })) })), header.column.getCanResize() && (jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }))] })));
 };
 
 const useLoadingStyles = makeStyles({
@@ -715,17 +972,17 @@ const TableContainer = (props) => {
     const isLoading = props.isLoading && virtualRows.length === 0;
     const noItems = !isLoading && ((_c = props.data) === null || _c === void 0 ? void 0 : _c.length) === 0;
     const noSearchResult = !isLoading && ((_d = props === null || props === void 0 ? void 0 : props.data) === null || _d === void 0 ? void 0 : _d.length) > 0 && virtualRows.length === 0;
-    return (jsxs("div", Object.assign({ ref: tableContainerRef, className: styles.tableContainer }, { children: [jsxs("table", Object.assign({ className: styles.table, "aria-label": "Data Grid" }, { children: [jsx("thead", Object.assign({ className: styles.tHead }, { children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup) => (jsxs("tr", { children: [rowSelectionMode === 'multiple' && (jsx("th", Object.assign({ style: { width: '1rem' } }, { children: headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1 && (jsx(Checkbox, { checked: table.getIsSomeRowsSelected()
+    return (jsxs("div", Object.assign({ ref: tableContainerRef, className: styles.tableContainer }, { children: [jsxs("table", Object.assign({ className: styles.table, "aria-label": "Data Grid" }, { children: [jsx("thead", Object.assign({ className: styles.tHead }, { children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup) => (jsxs("tr", { children: [rowSelectionMode === 'multiple' && (jsx("th", Object.assign({ style: { width: '1rem' }, "aria-label": "Select All Row Column" }, { children: headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1 && (jsx(Checkbox, { checked: table.getIsSomeRowsSelected()
                                             ? 'mixed'
-                                            : table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select All Rows", title: 'Select All Rows' })) }))), rowSelectionMode === 'single' && (jsx("th", Object.assign({ style: { width: '1rem' } }, { children: " " }))), headerGroup.headers.map((header) => {
+                                            : table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select All Rows", title: 'Select All Rows' })) }))), rowSelectionMode === 'single' && (jsx("th", Object.assign({ style: { width: '1rem' }, "aria-label": "Select All Row Column" }, { children: ' ' }))), headerGroup.headers.map((header) => {
                                     return (jsx(HeaderCell, { header: header, table: table, hideMenu: headerGroup.depth !== (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1, headerDepth: headerGroup.depth, totalNumberOfHeaderDepth: (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1 }, header.id));
                                 })] }, headerGroup.id))) })), jsxs("tbody", Object.assign({ className: styles.tBody }, { children: [paddingTop > 0 && (jsx("tr", Object.assign({ className: styles.tBodyRow, "aria-hidden": true }, { children: jsx("td", { style: { height: `${paddingTop}px` } }) }))), virtualRows.map((virtualRow) => {
                                 const row = rows[virtualRow.index];
                                 return (jsxs("tr", Object.assign({ className: row.getIsSelected() || row.getIsAllSubRowsSelected()
                                         ? styles.tBodySelectedRow
-                                        : styles.tBodyRow }, { children: [rowSelectionMode === 'multiple' && (jsx("td", Object.assign({ className: styles.tBodyCell }, { children: jsx(Checkbox, { checked: row.getIsSomeSelected()
+                                        : styles.tBodyRow }, { children: [rowSelectionMode === 'multiple' && (jsx("td", Object.assign({ className: styles.tBodyCell, "aria-label": "Select Row Column" }, { children: jsx(Checkbox, { checked: row.getIsSomeSelected()
                                                     ? 'mixed'
-                                                    : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }))), rowSelectionMode === 'single' && (jsx("td", Object.assign({ className: styles.tBodyCell }, { children: jsx(Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }))), row.getVisibleCells().map((cell) => {
+                                                    : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }))), rowSelectionMode === 'single' && (jsx("td", Object.assign({ className: styles.tBodyCell, "aria-label": "Select Row Column" }, { children: jsx(Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }))), row.getVisibleCells().map((cell) => {
                                             var _a;
                                             return (jsx("td", Object.assign({}, {
                                                 key: cell.id,
@@ -761,11 +1018,92 @@ const TableContainer = (props) => {
                                             : table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), "aria-label": "Select All Current Page Rows", title: 'Select All Current Page Rows' }) })), jsxs("td", Object.assign({ colSpan: 20 }, { children: [table.getIsAllPageRowsSelected() ? 'Unselect' : 'Select', " All Current Page Rows (", table.getRowModel().rows.length, ")"] }))] }) })))] })), isLoading && jsx(Loading, {}), noItems && jsx(NoItemGrid, { message: props.noItemPage }), noSearchResult && jsx(NoSearchResult, { message: props.noFilterMatchPage })] })));
 };
 
+const ViewSaveForm = (props) => {
+    const [errorMessage, setErrorMessage] = React.useState('');
+    const [isFormOpen, setIsFormOpen] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const checkboxRef = React.useRef(null);
+    if (!isFormOpen) {
+        return (jsxs(Fragment, { children: [jsx(MenuList, { children: jsx(MenuItemRadio, Object.assign({ name: 'view-manager', value: 'View Manager', onClick: () => setIsFormOpen(true), icon: jsx(Save20Filled, {}) }, { children: "Save Current View" })) }), jsx(Divider, {})] }));
+    }
+    return (jsxs("div", Object.assign({ style: {
+            boxSizing: 'border-box',
+            padding: '0.4rem',
+            border: '1px solid #ccc',
+            marginBottom: '0.5rem'
+        } }, { children: [jsx(Caption1Stronger, { children: "Enter View Details" }), jsx(Field, Object.assign({ label: "View Name", validationMessage: errorMessage, validationState: errorMessage ? "error" : undefined, hint: jsx(Fragment, { children: "Give your view a name and save it." }) }, { children: jsx(Input, { ref: inputRef, placeholder: "View Name" }) })), jsx(Field, Object.assign({ hint: jsx(Fragment, { children: "Global view is accessible to everybody in the system." }) }, { children: jsx(Checkbox, { ref: checkboxRef, label: "Set as global view" }) })), jsxs("div", Object.assign({ style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '0.5rem'
+                } }, { children: [jsx(Button, Object.assign({ onClick: () => {
+                            setIsFormOpen(false);
+                            setErrorMessage('');
+                        } }, { children: "Cancel" })), jsx(Button, Object.assign({ appearance: 'primary', onClick: () => {
+                            var _a, _b, _c;
+                            if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
+                                setErrorMessage('View name is required');
+                                return;
+                            }
+                            const viewName = inputRef.current.value;
+                            const isGlobal = (_b = checkboxRef.current) === null || _b === void 0 ? void 0 : _b.checked;
+                            const tableView = {
+                                id: Math.random() * 100,
+                                viewName: viewName,
+                                tableState: props.getTableState(),
+                                isGlobal: isGlobal,
+                                isViewOwner: true
+                            };
+                            (_c = props === null || props === void 0 ? void 0 : props.onSave) === null || _c === void 0 ? void 0 : _c.call(props, tableView);
+                            setErrorMessage('');
+                            setIsFormOpen(false);
+                        } }, { children: "Save" }))] }))] })));
+};
+
+const useFilterDrawerStyles = makeStyles({
+    drawerBody: Object.assign(Object.assign({}, shorthands.overflow('hidden', 'auto')), { 
+        /* width */
+        ':hover': Object.assign({}, shorthands.overflow('auto', 'auto')), '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, shorthands.borderRadius('50%')), 
+        /* Track */
+        '::-webkit-scrollbar-track': {
+            'background-color': '#f1f1f1',
+        }, 
+        /* Handle */
+        '::-webkit-scrollbar-thumb': {
+            'background-color': '#888',
+        }, 
+        /* Handle on hover */
+        '::-webkit-scrollbar-thumb:hover': {
+            'background-color': '#555',
+        } }),
+});
+const ViewsDrawer = (props) => {
+    const { open, setOpen, table, tableViews, applyTableState, resetToGridDefaultView, getTableState, onTableViewSave } = props;
+    const styles = useFilterDrawerStyles();
+    const [checkedValues, setCheckedValues] = React.useState({ font: ["calibri"] });
+    const onChange = (e, { name, checkedItems }) => {
+        setCheckedValues((s) => (Object.assign(Object.assign({}, s), { [name]: checkedItems })));
+    };
+    const resetAllFilters = React.useCallback(() => {
+        table.setGlobalFilter('');
+        table.resetColumnFilters();
+    }, [table]);
+    const resetAllGrouping = React.useCallback(() => {
+        table.resetGrouping();
+    }, [table]);
+    const clearAllSelection = React.useCallback(() => {
+        table.toggleAllRowsSelected(false);
+    }, [table]);
+    return (jsxs(InlineDrawer, Object.assign({ position: "end", open: open, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => setOpen(false) }) }, { children: "Table Views" })) }), jsxs(DrawerBody, Object.assign({ className: styles.drawerBody }, { children: [onTableViewSave && jsx(ViewSaveForm, { mode: 'create', getTableState: getTableState, onSave: onTableViewSave }), jsxs(MenuList, Object.assign({ checkedValues: checkedValues, onCheckedValueChange: onChange }, { children: [jsx(MenuItemRadio, Object.assign({ name: 'table-views', value: 'Default View', icon: jsx(ViewDesktop20Filled, {}), onClick: resetToGridDefaultView }, { children: "Default View" })), tableViews.length > 0 && jsx(MenuDivider, { children: "Additional Views" }), tableViews.map((view) => {
+                                return (jsx(MenuItemRadio, Object.assign({ name: 'table-views', value: view.viewName, onClick: () => applyTableState(view.tableState), icon: jsx(ViewDesktop20Regular, {}) }, { children: view.viewName }), view.id));
+                            })] }))] })), jsx(DrawerFooter, { children: jsxs(MenuList, { children: [jsx(MenuDivider, {}), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters }, { children: "Clear All Filters" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllGrouping }, { children: "Clear All Grouping" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: clearAllSelection }, { children: "Clear All Selection" }))] }) })] })));
+};
+
 function AdvancedTable(props, ref) {
-    const { table, globalFilter, setGlobalFilter } = useGridContainer(props, ref);
     useStaticStyles();
+    const { table, globalFilter, headerMenu, tableViews, setGlobalFilter, resetToDefaultView, applyTableState, getTableState } = useGridContainer(props, ref);
     const [isFilterDrawerOpen, setIsFilterDrawerOpen] = React.useState(false);
-    return (jsxs(DndProvider, Object.assign({ backend: HTML5Backend }, { children: [jsx(GridHeader, { table: table, gridTitle: props.gridTitle, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, setFilterDrawerOpen: setIsFilterDrawerOpen, openFilterDrawer: isFilterDrawerOpen }), jsxs("div", Object.assign({ style: { display: 'flex' } }, { children: [jsx(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, rowSelectionMode: props.rowSelectionMode, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsx(FilterDrawer, { open: isFilterDrawerOpen, setOpen: setIsFilterDrawerOpen, table: table })] })), jsx(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] })));
+    const [isViewsDrawerOpen, setIsViewsDrawerOpen] = React.useState(false);
+    return (jsxs(DndProvider, Object.assign({ backend: HTML5Backend }, { children: [jsx(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, openFilterDrawer: isFilterDrawerOpen, openViewsDrawer: isViewsDrawerOpen, setGlobalFilter: setGlobalFilter, setFilterDrawerOpen: setIsFilterDrawerOpen, setViewsDrawerOpen: setIsViewsDrawerOpen, applyTableState: applyTableState }), jsxs("div", Object.assign({ style: { display: 'flex' } }, { children: [jsx(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, rowSelectionMode: props.rowSelectionMode, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsx(FilterDrawer, { open: isFilterDrawerOpen, setOpen: setIsFilterDrawerOpen, table: table }), jsx(ViewsDrawer, { table: table, open: isViewsDrawerOpen, setOpen: setIsViewsDrawerOpen, tableViews: tableViews, applyTableState: applyTableState, resetToGridDefaultView: resetToDefaultView, getTableState: getTableState, onTableViewSave: props.onTableViewSave, onTableViewDelete: props.onTableViewDelete })] })), jsx(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] })));
 }
 const ForwardedAdvancedTable = React.forwardRef(AdvancedTable);
 

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@prt-ts/fluent-react-table-v2",
-  "version": "9.40.0-build.1.0",
+  "version": "9.40.0-build.10.0",
   "main": "./index.js",
   "types": "./src\\index.d.ts",
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
     "@fluentui/react-components": ">=9.40.0",
+    "@fluentui/react-datepicker-compat": ">=0.4.5",
     "@fluentui/react-icons": ">=2.0.221"
   },
   "dependencies": {

package/src/lib/components/filters/Filter.d.ts

@@ -1,5 +1,5 @@
-import { Column, Table } from "@tanstack/react-table";
-export declare const Filter: <TItem extends object>({ column, table }: {
+import { Column, Table } from '@tanstack/react-table';
+export declare const Filter: <TItem extends object>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filters/FilterDate.d.ts

@@ -0,0 +1,7 @@
+import { Column, Table } from '@tanstack/react-table';
+type FilterNumberRangeProps<TItem extends object> = {
+    column: Column<TItem, unknown>;
+    table: Table<TItem>;
+};
+export declare const FilterDate: <TItem extends object>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/components/filters/FilterDateRange.d.ts

@@ -0,0 +1,7 @@
+import { Column, Table } from '@tanstack/react-table';
+type FilterNumberRangeProps<TItem extends object> = {
+    column: Column<TItem, unknown>;
+    table: Table<TItem>;
+};
+export declare const FilterDateRange: <TItem extends object>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/components/filters/FilterNumberRange.d.ts

@@ -0,0 +1,7 @@
+import { Column, Table } from '@tanstack/react-table';
+type FilterNumberRangeProps<TItem extends object> = {
+    column: Column<TItem, unknown>;
+    table: Table<TItem>;
+};
+export declare const FilterNumberRange: <TItem extends object>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/components/filters/{FilterMultiSelectRadio.d.ts → FilterSelectRadio.d.ts}

@@ -1,5 +1,5 @@
 import { Column, Table } from "@tanstack/react-table";
-export declare const FilterMultiSelectRadio: <TItem extends object>({ column, table }: {
+export declare const FilterSelectRadio: <TItem extends object>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/grid-header/GridHeader.d.ts

@@ -1,12 +1,16 @@
 import * as React from 'react';
-import { Table } from '@tanstack/react-table';
+import { Table, TableState } from '@tanstack/react-table';
 type GridHeaderProps<TItem extends object> = {
     table: Table<TItem>;
     gridTitle: JSX.Element | React.ReactNode;
+    headerMenu?: JSX.Element | React.ReactNode;
     globalFilter: string;
     setGlobalFilter: (value: string) => void;
+    applyTableState: (tableState: Partial<TableState>) => boolean;
     openFilterDrawer: boolean;
     setFilterDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    openViewsDrawer: boolean;
+    setViewsDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export declare const GridHeader: <TItem extends object>(props: GridHeaderProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/useGridContainer.d.ts

@@ -1,8 +1,14 @@
-import { TableProps } from "..";
-import { TableRef } from "../types";
-import * as React from "react";
+import { TableState } from '@tanstack/react-table';
+import { TableProps } from '..';
+import { TableRef, TableView } from '../types';
+import * as React from 'react';
 export declare const useGridContainer: <TItem extends object>(props: TableProps<TItem>, ref: React.ForwardedRef<TableRef<TItem>>) => {
     table: import("@tanstack/react-table").Table<TItem>;
     globalFilter: string;
+    tableViews: TableView[];
+    headerMenu: JSX.Element | React.ReactNode;
     setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
+    resetToDefaultView: () => boolean;
+    applyTableState: (tableState: Partial<TableState>) => boolean;
+    getTableState: () => Partial<TableState>;
 };

package/src/lib/components/views/ViewSaveForm.d.ts

@@ -0,0 +1,9 @@
+import { TableProps } from "../../types";
+import { TableState } from '@tanstack/react-table';
+type ViewSaveFormProps<TItem extends object> = {
+    mode: 'create' | 'edit';
+    onSave: TableProps<TItem>['onTableViewSave'];
+    getTableState: () => Partial<TableState>;
+};
+export declare const ViewSaveForm: <TItem extends object>(props: ViewSaveFormProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/components/views/ViewsDrawer.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { TableProps, TableView } from '../../types';
+import { Table, TableState } from '@tanstack/react-table';
+type ViewsDrawerProps<TItem extends object> = {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    table: Table<TItem>;
+    tableViews: TableView[];
+    applyTableState: (tableView: Partial<TableState>) => void;
+    resetToGridDefaultView: () => boolean;
+    getTableState: () => Partial<TableState>;
+    onTableViewSave?: TableProps<TItem>['onTableViewSave'];
+    onTableViewDelete?: TableProps<TItem>['onTableViewDelete'];
+};
+export declare const ViewsDrawer: <TItem extends object>(props: ViewsDrawerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/helpers/FilterHelpers.d.ts

@@ -0,0 +1,4 @@
+import { FilterFn } from "@tanstack/react-table";
+export declare const arrIncludesSome: FilterFn<unknown>;
+export declare const dateRange: FilterFn<unknown>;
+export declare const date: FilterFn<unknown>;

package/src/lib/helpers/Helpers.d.ts

@@ -0,0 +1,2 @@
+import { Column } from "@tanstack/react-table";
+export declare const getLeafColumns: <TItem extends object>(columns: Column<TItem, unknown>[]) => Column<TItem, unknown>[];

package/src/lib/index.d.ts

@@ -1,4 +1,12 @@
+import { FilterFn } from "@tanstack/react-table";
+declare module '@tanstack/table-core' {
+    interface FilterFns {
+        arrIncludesSome: FilterFn<unknown>;
+        matchDate: FilterFn<unknown>;
+        inDateRange: FilterFn<unknown>;
+    }
+}
 export { Table } from "./components";
-export type { TableProps, TableRef } from "./types";
-export type { ColumnDef } from "@tanstack/react-table";
+export type { TableProps, TableRef, TableView } from "./types";
+export type { ColumnDef, TableState } from "@tanstack/react-table";
 export { createColumnHelper } from "@tanstack/react-table";

package/src/lib/types/TableProps.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ExpandedState, GroupingState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
+import { TableView } from "./TableView";
 export type TableProps<TItem extends object> = {
     /**
      * Table Columns definitions.
@@ -17,6 +18,10 @@ export type TableProps<TItem extends object> = {
      * Grid title
      */
     gridTitle?: JSX.Element | React.ReactNode;
+    /**
+     * Table header menu
+     */
+    headerMenu?: (selectedItems: TItem[]) => JSX.Element | React.ReactNode;
     /**
      * Table default page size.
      */
@@ -75,4 +80,16 @@ export type TableProps<TItem extends object> = {
      * @default defaultNoItemComponent
      */
     noItemPage?: React.ReactNode;
+    /**
+     * Table Views
+     */
+    views?: TableView[];
+    /**
+     * Callback when a table view is saved
+     */
+    onTableViewSave?: (tableView: TableView) => void;
+    /**
+     * Callback when a table view is deleted
+     */
+    onTableViewDelete?: (tableView: TableView) => void;
 };

package/src/lib/types/TableRef.d.ts

@@ -1,7 +1,7 @@
-import { Table } from "@tanstack/react-table";
+import { Table, TableState } from "@tanstack/react-table";
 export type TableRef<TItem extends object> = {
     table: Table<TItem>;
-    getTableState: () => Record<string, unknown>;
-    saveCurrentTableState: (viewName: string) => boolean;
-    applySavedView: (viewName: string) => boolean;
+    getTableState: () => Partial<TableState>;
+    applyTableState: (tableState: Partial<TableState>) => boolean;
+    resetToDefaultView: () => boolean;
 };

package/src/lib/types/TableView.d.ts

@@ -0,0 +1,8 @@
+import { TableState } from "@tanstack/react-table";
+export type TableView = {
+    id: number;
+    viewName: string;
+    tableState: Partial<TableState>;
+    isGlobal?: boolean;
+    isViewOwner?: boolean;
+};

package/src/lib/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./TableProps";
 export * from "./TableRef";
+export * from "./TableView";