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

package/index.js

@@ -3,11 +3,12 @@ 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, 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, Search24Regular, 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,34 +163,25 @@ const useGridHeaderStyles = makeStyles({
 const GridHeader = (props) => {
     const { table, gridTitle, globalFilter, setGlobalFilter } = props;
     const styles = useGridHeaderStyles();
-    const allLeafColumns = table.getAllLeafColumns() || [];
-    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" }), allLeafColumns.map((column) => {
-                                            if (column.id === "select")
-                                                return null;
-                                            if (column.id === "id")
+    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;
-                                            return (jsx(Checkbox, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup(), label: column.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")
+                                            if (column.id === 'id')
                                                 return null;
-                                            if (column.id === "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;
                                             return (jsx(Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
-                                        })] })) })] })), 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...", resetAllFilters: resetAllFilters, resetAllGrouping: resetAllGrouping, clearAllSelection: clearAllSelection })] }))] })));
+                                        })] })) })] })), 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, resetAllFilters, resetAllGrouping, clearAllSelection, }) {
-    const [value, setValue] = React.useState("");
+function DebouncedInput({ value: initialValue, onChange, debounce = 500, openFilterDrawer, setFilterDrawerOpen, }) {
+    const [value, setValue] = React.useState('');
     React.useEffect(() => {
         setValue(initialValue);
     }, [initialValue]);
@@ -199,7 +191,9 @@ function DebouncedInput({ value: initialValue, onChange, debounce = 500, resetAl
         }, 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(Fragment, { children: jsxs(Menu, { children: [jsx(MenuTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button, { appearance: "subtle", icon: jsx(FilterFilled, {}), "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" }))] }) })] }) }) }));
+    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);
+            } }) }));
 }
 
 const arrIncludesSome = (row, columnId, value) => {
@@ -207,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;
@@ -220,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,
@@ -247,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,
@@ -266,6 +318,7 @@ const useGridContainer = (props, ref) => {
         onExpandedChange: setExpanded,
         onColumnVisibilityChange: setColumnVisibility,
         onColumnPinningChange: setColumnPinning,
+        onColumnSizingChange: setColumnSizing,
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
@@ -287,6 +340,7 @@ const useGridContainer = (props, ref) => {
             columnOrder,
             columnVisibility,
             columnPinning,
+            columnSizing
         };
     }, [
         pagination,
@@ -299,55 +353,130 @@ 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
     };
 };
 
 const useCheckboxFilterStyles = makeStyles({
     searchInput: {
-        width: "90%",
-        marginBottom: "8px",
-        marginLeft: "10px",
-        marginRight: "10px"
-    }
+        width: '90%',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    },
+    searchContainer: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, 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 FilterMultiSelectCheckbox = ({ column, table }) => {
+const FilterMultiSelectCheckbox = ({ column, table, }) => {
     var _a, _b, _c;
     const firstValue = (_a = table
         .getPreFilteredRowModel()
@@ -355,18 +484,21 @@ const FilterMultiSelectCheckbox = ({ 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);
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [column.getFacetedUniqueValues()]);
-    const [localColumnFilterValue, setLocalColumnFilterValue] = React.useState("");
+    const [localColumnFilterValue, setLocalColumnFilterValue] = React.useState('');
     const filterOptionsFiltered = React.useMemo(() => {
         if (!localColumnFilterValue)
             return filterOptions;
-        return filterOptions.filter(option => option.toLowerCase().includes(localColumnFilterValue.toLowerCase()));
+        return filterOptions.filter((option) => {
+            var _a, _b, _c;
+            return (_b = (_a = `${option}`) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_c = `${localColumnFilterValue}`) === null || _c === void 0 ? void 0 : _c.toLowerCase());
+        });
     }, [localColumnFilterValue, filterOptions]);
     const filterContainer = React.useRef(null);
     const rowVirtualizer = useVirtual({
@@ -379,34 +511,58 @@ const FilterMultiSelectCheckbox = ({ column, table }) => {
     const paddingBottom = virtualRows.length > 0
         ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
         : 0;
-    const allOptionChecked = (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0 && (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) !== (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) ? "mixed" : (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 allOptionChecked = (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0 &&
+        (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) !== (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length)
+        ? 'mixed'
+        : (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, style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    maxHeight: "300px",
-                    width: "100%",
-                    overflow: "auto"
-                } }, { 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;
                             }
-                            column.setFilterValue([...filterOptions]);
-                        }, label: "(Toggle All)" }, `toggle-all-${column.id}`), virtualRows.map((row) => {
+                            column.setFilterValue([
+                                ...((filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.map((x) => `${x}`)) || []),
+                            ]);
+                        }, label: '(Toggle All)' }, `toggle-all-${column.id}`), virtualRows.map((row) => {
                         var _a;
                         const value = `${filterOptionsFiltered[row.index]}`;
                         return (jsx(Checkbox, { checked: (_a = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) !== null && _a !== void 0 ? _a : false, onChange: () => {
                                 if (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) {
-                                    column.setFilterValue((old) => old === null || old === void 0 ? void 0 : old.filter(v => v !== value));
+                                    column.setFilterValue((old) => old === null || old === void 0 ? void 0 : old.filter((v) => v !== value));
                                     return;
                                 }
-                                column.setFilterValue((old) => [...(old || []), value]);
+                                column.setFilterValue((old) => [
+                                    ...(old || []),
+                                    value,
+                                ]);
                             }, label: value }, `${column.id}-${row.index}`));
-                    }), paddingBottom > 0 && jsx("span", { style: { paddingBottom: `${paddingBottom}px` } })] }), "filter-multi-select-checkbox")] }));
+                    }), paddingBottom > 0 && (jsx("span", { style: { paddingBottom: `${paddingBottom}px` } }))] }), 'filter-multi-select-checkbox')] }));
 };
 
-const FilterMultiSelectRadio = ({ column, table }) => {
+const useRadioFilterStyles = makeStyles({
+    searchInput: {
+        width: '90%',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    },
+    searchContainer: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, 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 FilterSelectRadio = ({ column, table, }) => {
     var _a, _b, _c;
     const firstValue = (_a = table
         .getPreFilteredRowModel()
@@ -414,17 +570,26 @@ 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);
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [column.getFacetedUniqueValues()]);
+    const [localColumnFilterValue, setLocalColumnFilterValue] = React.useState('');
+    const filterOptionsFiltered = React.useMemo(() => {
+        if (!localColumnFilterValue)
+            return filterOptions;
+        return filterOptions.filter((option) => {
+            var _a, _b, _c;
+            return (_b = (_a = `${option}`) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_c = `${localColumnFilterValue}`) === null || _c === void 0 ? void 0 : _c.toLowerCase());
+        });
+    }, [localColumnFilterValue, filterOptions]);
     const filterContainer = React.useRef(null);
     const rowVirtualizer = useVirtual({
         parentRef: filterContainer,
-        size: filterOptions.length,
+        size: filterOptionsFiltered.length,
         overscan: 15,
     });
     const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
@@ -432,37 +597,211 @@ const FilterMultiSelectRadio = ({ column, table }) => {
     const paddingBottom = virtualRows.length > 0
         ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
         : 0;
-    return (jsxs("div", Object.assign({ ref: filterContainer, style: { display: "flex", flexDirection: "column", maxHeight: "300px", width: "100%", overflowY: "auto" } }, { children: [paddingTop > 0 && jsx("div", { style: { paddingTop: `${paddingTop}px` } }), jsxs(RadioGroup, Object.assign({ layout: "vertical", value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || "", onChange: (_, data) => {
-                    if (data.value === "") {
-                        column.setFilterValue([]);
-                        return;
-                    }
-                    column.setFilterValue([data.value]);
-                } }, { children: [jsx(Radio, { value: "", label: "None" }), virtualRows.map(row => {
-                        const value = filterOptions[row.index];
-                        return (jsx(Radio, { value: value, label: value }, value));
-                    })] })), paddingBottom > 0 && jsx("div", { style: { paddingBottom: `${paddingBottom}px` } })] })));
+    const styles = useRadioFilterStyles();
+    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("div", { style: { paddingTop: `${paddingTop}px` } }), jsxs(RadioGroup, Object.assign({ layout: "vertical", value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || '', onChange: (_, data) => {
+                            if (data.value === '') {
+                                column.setFilterValue([]);
+                                return;
+                            }
+                            column.setFilterValue([data.value]);
+                        } }, { children: [jsx(Radio, { value: '', label: 'None' }), virtualRows.map((row) => {
+                                const value = filterOptionsFiltered[row.index];
+                                return jsx(Radio, { value: value, label: value }, value);
+                            })] })), 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$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%')), 
+        /* 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 FilterDrawer = ({ open, setOpen, table }) => {
+    const headerGroups = table.getHeaderGroups();
+    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)
+                        return null;
+                    return headerGroup.headers.map((header) => {
+                        const canFilter = header.column.getCanFilter();
+                        if (!canFilter)
+                            return null;
+                        return (jsx("div", { children: header.column.getCanFilter() && (jsxs("div", { children: [jsxs(Caption1Stronger, { children: ["Filter by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(Filter, { column: header.column, table: table })] }, 'filter-group')) }, header.column.id));
+                    });
+                }) }))] })));
 };
 
 const SortAscIcon = bundleIcon(ArrowSortDown20Filled, ArrowSortDown20Regular);
@@ -510,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;
@@ -529,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({
@@ -624,62 +969,141 @@ const TableContainer = (props) => {
         : 0;
     const headerGroups = table.getHeaderGroups();
     // utilities
-    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 (jsx(Fragment, { children: 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()
-                                                ? "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) => {
-                                        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()
-                                                        ? "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) => {
-                                                var _a;
-                                                return (jsx("td", Object.assign({}, {
-                                                    key: cell.id,
+    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' }, "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' }, "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, "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, "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,
+                                                style: {
+                                                    // background: cell.getIsGrouped()
+                                                    //   ? "#0aff0082"
+                                                    //   : cell.getIsAggregated()
+                                                    //   ? "#ffa50078"
+                                                    //   : cell.getIsPlaceholder()
+                                                    //   ? "#ff000042"
+                                                    //   : "white",
+                                                    width: cell.column.getSize(),
+                                                },
+                                            }, { className: styles.tBodyCell }, { children: cell.getIsGrouped() ? (
+                                                // If it's a grouped cell, add an expander and row count
+                                                jsx(Button, Object.assign({}, {
+                                                    onClick: row.getToggleExpandedHandler(),
                                                     style: {
-                                                        // background: cell.getIsGrouped()
-                                                        //   ? "#0aff0082"
-                                                        //   : cell.getIsAggregated()
-                                                        //   ? "#ffa50078"
-                                                        //   : cell.getIsPlaceholder()
-                                                        //   ? "#ff000042"
-                                                        //   : "white",
-                                                        width: cell.column.getSize(),
+                                                        cursor: row.getCanExpand() ? 'pointer' : 'normal',
                                                     },
-                                                }, { className: styles.tBodyCell }, { children: cell.getIsGrouped() ? (
-                                                    // If it's a grouped cell, add an expander and row count
-                                                    jsx(Fragment, { children: jsx(Button, Object.assign({}, {
-                                                            onClick: row.getToggleExpandedHandler(),
-                                                            style: {
-                                                                cursor: row.getCanExpand()
-                                                                    ? "pointer"
-                                                                    : "normal",
-                                                            },
-                                                        }, { appearance: "transparent", icon: row.getIsExpanded() ? (jsx(GroupExpandedIcon, {})) : (jsx(GroupCollapsedIcon, {})) }, { children: jsxs("strong", { children: [flexRender(cell.column.columnDef.cell, cell.getContext()), " ", "(", row.subRows.length, ")"] }) })) })) : cell.getIsAggregated() ? (
-                                                    // If the cell is aggregated, use the Aggregated
-                                                    // renderer for cell
-                                                    jsx("strong", { children: flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext()) })) : cell.getIsPlaceholder() ? null : ( // For cells with repeated values, render null
-                                                    // Otherwise, just render the regular cell
-                                                    flexRender(cell.column.columnDef.cell, cell.getContext())) })));
-                                            })] }), row.id));
-                                }), paddingBottom > 0 && (jsx("tr", Object.assign({ className: styles.tBodyRow, "aria-hidden": true }, { children: jsx("td", { style: { height: `${paddingBottom}px` } }) })))] })), rowSelectionMode === "multiple" &&
-                            !isLoading &&
-                            !noItems &&
-                            !noSearchResult && (jsx("tfoot", Object.assign({ className: styles.tFoot }, { children: jsxs("tr", { children: [jsx("td", Object.assign({ className: "p-1" }, { children: jsx(Checkbox, { checked: table.getIsSomePageRowsSelected()
-                                                ? "mixed"
-                                                : 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 })] })) }));
+                                                }, { appearance: "transparent", icon: row.getIsExpanded() ? (jsx(GroupExpandedIcon, {})) : (jsx(GroupCollapsedIcon, {})) }, { children: jsxs("strong", { children: [flexRender(cell.column.columnDef.cell, cell.getContext()), ' ', "(", row.subRows.length, ")"] }) }))) : cell.getIsAggregated() ? (
+                                                // If the cell is aggregated, use the Aggregated
+                                                // renderer for cell
+                                                jsx("strong", { children: flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext()) })) : cell.getIsPlaceholder() ? null : ( // For cells with repeated values, render null
+                                                // Otherwise, just render the regular cell
+                                                flexRender(cell.column.columnDef.cell, cell.getContext())) })));
+                                        })] }), row.id));
+                            }), paddingBottom > 0 && (jsx("tr", Object.assign({ className: styles.tBodyRow, "aria-hidden": true }, { children: jsx("td", { style: { height: `${paddingBottom}px` } }) })))] })), rowSelectionMode === 'multiple' &&
+                        !isLoading &&
+                        !noItems &&
+                        !noSearchResult && (jsx("tfoot", Object.assign({ className: styles.tFoot }, { children: jsxs("tr", { children: [jsx("td", Object.assign({ className: "p-1" }, { children: jsx(Checkbox, { checked: table.getIsSomePageRowsSelected()
+                                            ? 'mixed'
+                                            : 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();
-    return (jsxs(DndProvider, Object.assign({ backend: HTML5Backend }, { children: [jsx(GridHeader, { table: table, gridTitle: props.gridTitle, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter }), jsx(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, rowSelectionMode: props.rowSelectionMode, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsx(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] })));
+    const { table, globalFilter, headerMenu, tableViews, setGlobalFilter, resetToDefaultView, applyTableState, getTableState } = useGridContainer(props, ref);
+    const [isFilterDrawerOpen, setIsFilterDrawerOpen] = React.useState(false);
+    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);