@prt-ts/fluent-react-table-v2 9.41.0-build.4.0 → 9.44.3-build.1.0

package/index.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src\\index";

package/{index.js → index.esm.js}

@@ -1009,9 +1009,9 @@ const SaveFilled = /*#__PURE__*/createFluentIcon('SaveFilled', "1em", ["M3 5c0-1
 const SaveRegular = /*#__PURE__*/createFluentIcon('SaveRegular', "1em", ["M3 5c0-1.1.9-2 2-2h8.38a2 2 0 0 1 1.41.59l1.62 1.62A2 2 0 0 1 17 6.62V15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1v-4.5c0-.83.67-1.5 1.5-1.5h7c.83 0 1.5.67 1.5 1.5V16a1 1 0 0 0 1-1V6.62a1 1 0 0 0-.3-.7L14.1 4.28a1 1 0 0 0-.71-.29H13v2.5c0 .83-.67 1.5-1.5 1.5h-4A1.5 1.5 0 0 1 6 6.5V4H5Zm2 0v2.5c0 .28.22.5.5.5h4a.5.5 0 0 0 .5-.5V4H7Zm7 12v-4.5a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5V16h8Z"]);
 const SearchFilled = /*#__PURE__*/createFluentIcon('SearchFilled', "1em", ["M8.5 3a5.5 5.5 0 0 1 4.38 8.82l4.15 4.15a.75.75 0 0 1-.98 1.13l-.08-.07-4.15-4.15A5.5 5.5 0 1 1 8.5 3Zm0 1.5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"]);
 const SearchRegular = /*#__PURE__*/createFluentIcon('SearchRegular', "1em", ["M8.5 3a5.5 5.5 0 0 1 4.23 9.02l4.12 4.13a.5.5 0 0 1-.63.76l-.07-.06-4.13-4.12A5.5 5.5 0 1 1 8.5 3Zm0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"]);
+
 const TableSimpleCheckmarkFilled = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkFilled', "1em", ["M14 17h-3.5v-6.5H17V14a3 3 0 0 1-3 3Zm3-7.5h-6.5V3H14a3 3 0 0 1 3 3v3.5Zm-7.5 0V3H6a3 3 0 0 0-3 3v3.5h6.5Zm0 7.5v-6.5H3V14a3 3 0 0 0 3 3h3.5Zm5.85-3.9a.5.5 0 0 0-.7-.7l-1.4 1.4-.4-.4a.5.5 0 0 0-.7.7l.75.75c.2.2.5.2.7 0l1.75-1.75Z"]);
 const TableSimpleCheckmarkRegular = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkRegular', "1em", ["M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4 6c0-1.1.9-2 2-2h3.5v5.5H4V6Zm6.5 3.5V4H14a2 2 0 0 1 2 2v3.5h-5.5Zm-6.5 1h5.5V16H6a2 2 0 0 1-2-2v-3.5Zm10.86 1.4c.2.2.2.5 0 .7l-1.75 1.75a.5.5 0 0 1-.71 0l-.75-.75a.5.5 0 0 1 .7-.7l.4.4 1.4-1.4c.2-.2.51-.2.7 0Z"]);
-
 const TextSortAscendingFilled = /*#__PURE__*/createFluentIcon('TextSortAscendingFilled', "1em", ["M6.7 2.5a.75.75 0 0 0-1.4 0L3.03 9a.75.75 0 0 0 1.42.5l.34-1h2.4l.34 1A.75.75 0 0 0 8.96 9L6.7 2.5ZM6 5.04 6.68 7H5.32L6 5.04ZM4 11a.75.75 0 0 0 0 1.5h2.53l-3.14 4.3A.75.75 0 0 0 4 18h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 11H4Zm10.25-9c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
 const TextSortDescendingFilled = /*#__PURE__*/createFluentIcon('TextSortDescendingFilled', "1em", ["M4 2a.75.75 0 1 0 0 1.5h2.53L3.39 7.8A.75.75 0 0 0 4 9h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 2H4Zm2.7 8.5a.75.75 0 0 0-1.4 0L3.03 17a.75.75 0 1 0 1.42.5l.34-1h2.4l.34 1a.75.75 0 1 0 1.42-.5L6.7 10.5ZM6 13.04 6.68 15H5.32L6 13.04ZM14.25 2c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
 
@@ -1032,7 +1032,6 @@ const Dismiss24Regular = /*#__PURE__*/createFluentIcon('Dismiss24Regular', "24",
 const DocumentSearch24Regular = /*#__PURE__*/createFluentIcon('DocumentSearch24Regular', "24", ["M11.4 10.95a4.93 4.93 0 0 1 .55 6.32l-.14.2 4.22 4.21.07.09a.77.77 0 0 1-1.08 1.08l-.09-.08-4.25-4.25a4.93 4.93 0 1 1 .73-7.57ZM13.14 2c.6 0 1.17.24 1.59.66l2.81 2.8 2.8 2.82c.43.42.67 1 .67 1.6v9.87c0 1.24-1.01 2.25-2.25 2.25h-1.51c-.04-.3-.15-.58-.34-.83l-.12-.14-.52-.53h2.49c.41 0 .75-.34.75-.75V10h-4.25c-1.2 0-2.17-.92-2.24-2.1L13 7.76V3.5H7.25a.75.75 0 0 0-.75.75v4.42a5.9 5.9 0 0 0-1.5.58v-5C5 3.01 6 2 7.25 2h5.88Zm-7.6 10.04a3.38 3.38 0 1 0 4.79 4.78 3.38 3.38 0 0 0-4.78-4.78Zm8.97-7.48v3.2c0 .37.28.69.65.74H18.45L14.5 4.56Z"]);
 
 const Save20Filled = /*#__PURE__*/createFluentIcon('Save20Filled', "20", ["M3 5c0-1.1.9-2 2-2h1v3.5C6 7.33 6.67 8 7.5 8h4c.83 0 1.5-.67 1.5-1.5V3h.38a2 2 0 0 1 1.41.59l1.62 1.62A2 2 0 0 1 17 6.62V15a2 2 0 0 1-2 2v-5.5c0-.83-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5V17a2 2 0 0 1-2-2V5Zm9-2H7v3.5c0 .28.22.5.5.5h4a.5.5 0 0 0 .5-.5V3Zm2 8.5V17H6v-5.5c0-.28.22-.5.5-.5h7c.28 0 .5.22.5.5Z"]);
-
 const Search24Regular = /*#__PURE__*/createFluentIcon('Search24Regular', "24", ["M10 2.75a7.25 7.25 0 0 1 5.63 11.82l4.9 4.9a.75.75 0 0 1-.98 1.13l-.08-.07-4.9-4.9A7.25 7.25 0 1 1 10 2.75Zm0 1.5a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Z"]);
 
 const ViewDesktop20Filled = /*#__PURE__*/createFluentIcon('ViewDesktop20Filled', "20", ["M1.96 4.5c0-.83.67-1.5 1.5-1.5H16.4c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H12v2.01h1.5a.5.5 0 0 1 0 1h-7a.5.5 0 1 1 0-1H8V14H3.46a1.5 1.5 0 0 1-1.5-1.5v-8ZM9 14v2.01h2V14H9ZM4 5.5v6c0 .28.22.5.5.5h1a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5Zm3 0v6c0 .28.22.5.5.5h8a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5Z"]);
@@ -1090,10 +1089,9 @@ const Pagination = (props) => {
         let end = currentPage + Math.floor(DEFAULT_NUMBER_OF_PAGE_BTN / 2);
         if (start < 1) {
             start = 1;
-            end =
-                totalNumberOfPage > DEFAULT_NUMBER_OF_PAGE_BTN
-                    ? DEFAULT_NUMBER_OF_PAGE_BTN
-                    : totalNumberOfPage;
+            end = totalNumberOfPage > DEFAULT_NUMBER_OF_PAGE_BTN
+                ? DEFAULT_NUMBER_OF_PAGE_BTN
+                : totalNumberOfPage;
         }
         else if (end > totalNumberOfPage) {
             const possibleStart = totalNumberOfPage - DEFAULT_NUMBER_OF_PAGE_BTN + 1;
@@ -1103,12 +1101,12 @@ const Pagination = (props) => {
         const currentPageOptions = end - start >= 0 ? range(start, end) : [];
         return (currentPageOptions === null || currentPageOptions === void 0 ? void 0 : currentPageOptions.length) ? [...currentPageOptions] : [1];
     }, [totalNumberOfPage, currentPage]);
-    return (jsx("div", Object.assign({ className: styles.paginationContainer }, { children: jsxs("div", Object.assign({ className: styles.wrapper }, { children: [jsx("div", Object.assign({ className: styles.pageSelectionWrapper }, { children: jsx(Dropdown, Object.assign({ id: pageSizeSelectionId, size: "small", selectedOptions: [`${pageSize}`], placeholder: "Select Page Size", value: table.getState().pagination.pageSize.toString(), onOptionSelect: (_, data) => { var _a; return table.setPageSize(Number(+((_a = data.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]))); }, className: styles.pageSelectionDropdown, "aria-label": "Select Page Size" }, { children: pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions.map((option) => (jsx(Option, Object.assign({ value: `${option}` }, { children: `${option}` }), option))) })) })), jsxs("div", Object.assign({ className: styles.pageBtnContainer }, { children: [jsxs("div", { children: [jsxs("span", { children: ["Page", " ", jsxs("strong", { children: [table.getState().pagination.pageIndex + 1, " of", " ", table.getPageCount()] })] }), jsxs("span", { children: [" ", "| Go to page:", " ", jsx(Input, { type: "number", size: "small", value: `${table.getState().pagination.pageIndex + 1}`, onChange: (e, data) => {
+    return (jsx("div", { className: styles.paginationContainer, children: jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.pageSelectionWrapper, children: jsx(Dropdown, { id: pageSizeSelectionId, size: "small", selectedOptions: [`${pageSize}`], placeholder: "Select Page Size", value: table.getState().pagination.pageSize.toString(), onOptionSelect: (_, data) => { var _a; return table.setPageSize(Number(+((_a = data.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]))); }, className: styles.pageSelectionDropdown, "aria-label": "Select Page Size", children: pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions.map((option) => (jsx(Option, { value: `${option}`, children: `${option}` }, option))) }) }), jsxs("div", { className: styles.pageBtnContainer, children: [jsxs("div", { children: [jsxs("span", { children: ["Page", " ", jsxs("strong", { children: [table.getState().pagination.pageIndex + 1, " of", " ", table.getPageCount()] })] }), jsxs("span", { children: [" ", "| Go to page:", " ", jsx(Input, { type: "number", size: "small", value: `${table.getState().pagination.pageIndex + 1}`, onChange: (e, data) => {
                                                 const page = data.value ? Number(e.target.value) - 1 : 0;
                                                 if (page >= 0 && page < table.getPageCount()) {
                                                     table.setPageIndex(page);
                                                 }
-                                            }, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: "off", autoCorrect: "off" })] })] }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsx(PreviousRegular, {}), "aria-label": "Go to first page" }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsx(ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.map((option, index) => (jsx(Button, Object.assign({ shape: "circular", appearance: option - 1 === currentPage ? "primary" : undefined, onClick: () => table.setPageIndex(option - 1), "aria-label": `Show Page ${option}`, size: "small", className: styles.pageBtn }, { children: option }), index))), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), icon: jsx(ArrowNextFilled, {}), "aria-label": "Go to next page" }), jsx(Button, { size: "small", shape: "circular", className: styles.pageBtn, onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), icon: jsx(NextRegular, {}), "aria-label": "Go to last page" })] }))] })) })));
+                                            }, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: "off", autoCorrect: "off" })] })] }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsx(PreviousRegular, {}), "aria-label": "Go to first page" }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsx(ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.map((option, index) => (jsx(Button, { shape: "circular", appearance: option - 1 === currentPage ? "primary" : undefined, onClick: () => table.setPageIndex(option - 1), "aria-label": `Show Page ${option}`, size: "small", className: styles.pageBtn, children: option }, index))), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), icon: jsx(ArrowNextFilled, {}), "aria-label": "Go to next page" }), jsx(Button, { size: "small", shape: "circular", className: styles.pageBtn, onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), icon: jsx(NextRegular, {}), "aria-label": "Go to last page" })] })] }) }));
 };
 
 bundleIcon$1(SaveFilled, SaveRegular);
@@ -1142,19 +1140,19 @@ const useGridHeaderStyles = makeStyles({
 const GridHeader = (props) => {
     const { table, gridTitle, globalFilter, setGlobalFilter, dispatch, drawerState } = props;
     const styles = useGridHeaderStyles();
-    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(Tooltip, Object.assign({ content: 'Toggle Group Column', relationship: "label" }, { 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", { className: styles.tableTopHeaderContainer, children: [jsx("div", { className: styles.tableTopHeaderLeft, children: gridTitle }), jsxs("div", { className: styles.tableTopHeaderRight, children: [props.headerMenu, props.headerMenu && jsx(Divider, { vertical: true }), jsxs(Popover, { withArrow: true, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(Tooltip, { content: 'Toggle Group Column', relationship: "label", children: jsx(Button, { icon: jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) }) }), jsx(PopoverSurface, { children: jsxs("div", { 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() || !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(Tooltip, Object.assign({ content: 'Toggle Column Visibility', relationship: "label" }, { 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) => {
+                                        })] }) })] }), jsxs(Popover, { withArrow: true, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(Tooltip, { content: 'Toggle Column Visibility', relationship: "label", children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) }) }), jsx(PopoverSurface, { children: jsxs("div", { 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(Tooltip, Object.assign({ content: 'Table Views Management', relationship: "label" }, { children: jsx(Button, { onClick: () => {
+                                        })] }) })] }), jsx(Tooltip, { content: 'Table Views Management', relationship: "label", children: jsx(Button, { onClick: () => {
                                 dispatch({ type: "TOGGLE_VIEW_DRAWER" });
-                            }, 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...", drawerState: drawerState, dispatch: dispatch })] }))] })));
+                            }, 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...", drawerState: drawerState, dispatch: dispatch })] })] }));
 };
 // A debounced input react component
 function DebouncedInput({ value: initialValue, onChange, debounce = 500, drawerState, dispatch, }) {
@@ -1168,9 +1166,9 @@ function DebouncedInput({ value: initialValue, onChange, debounce = 500, drawerS
         }, 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(Tooltip, Object.assign({ content: drawerState.isFilterDrawerOpen ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label" }, { children: jsx(Button, { appearance: "subtle", icon: drawerState.isFilterDrawerOpen ? 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(Tooltip, { content: drawerState.isFilterDrawerOpen ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label", children: jsx(Button, { appearance: "subtle", icon: drawerState.isFilterDrawerOpen ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
                     dispatch({ type: "TOGGLE_FILTER_DRAWER" });
-                } }) })) }));
+                } }) }) }));
 }
 
 const arrIncludesSome = (row, columnId, value) => {
@@ -1305,21 +1303,6 @@ const useGridContainer = (props, ref) => {
         getFacetedMinMaxValues: getFacetedMinMaxValues(),
     });
     const tableViews = React.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
-    const getTableState = React.useCallback(() => {
-        return {
-            pagination,
-            sorting,
-            columnFilters,
-            globalFilter,
-            grouping,
-            expanded,
-            rowSelection,
-            columnOrder,
-            columnVisibility,
-            columnPinning,
-            columnSizing
-        };
-    }, [pagination, sorting, columnFilters, globalFilter, grouping, expanded, rowSelection, columnOrder, columnVisibility, columnPinning, columnSizing]);
     const resetToDefaultView = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         const defaultTableState = {
@@ -1342,13 +1325,24 @@ const useGridContainer = (props, ref) => {
             })(),
             columnVisibility: (_g = props.columnVisibility) !== null && _g !== void 0 ? _g : {},
             columnPinning: (_h = props.columnPinningState) !== null && _h !== void 0 ? _h : {},
-            columnSizing: {}
+            columnSizing: {},
+            rowPinning: {},
+            columnSizingInfo: {
+                "startOffset": null,
+                "startSize": null,
+                "deltaOffset": null,
+                "deltaPercentage": null,
+                "isResizingColumn": false,
+                "columnSizingStart": []
+            },
         };
         return applyTableState(defaultTableState);
     };
     const applyTableState = (tableState) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if (tableState) {
+            // set table state
+            console.log('tableState', 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 : '');
@@ -1373,13 +1367,13 @@ const useGridContainer = (props, ref) => {
     React.useImperativeHandle(ref, () => {
         return {
             table,
-            getTableState,
+            getTableState: table.getState,
             applyTableState,
             resetToDefaultView
         };
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [table, getTableState]);
+    [table]);
     const headerMenu = React.useMemo(() => {
         if (props.headerMenu) {
             const selectedRows = (table === null || table === void 0 ? void 0 : table.getSelectedRowModel().flatRows.map((row) => row.original)) || [];
@@ -1394,7 +1388,7 @@ const useGridContainer = (props, ref) => {
         const handleKeyDown = (event) => {
             if (event.ctrlKey && event.altKey && event.key === 'c') {
                 event.preventDefault();
-                const tableState = getTableState();
+                const tableState = table.getState();
                 // log table state to console
                 console.log(tableState);
                 // save table state to local storage
@@ -1407,7 +1401,7 @@ const useGridContainer = (props, ref) => {
         return () => {
             window.removeEventListener('keydown', handleKeyDown);
         };
-    }, [getTableState]);
+    }, [table]);
     return {
         table,
         globalFilter,
@@ -1415,8 +1409,7 @@ const useGridContainer = (props, ref) => {
         headerMenu,
         setGlobalFilter,
         resetToDefaultView,
-        applyTableState,
-        getTableState
+        applyTableState
     };
 };
 
@@ -1520,7 +1513,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, { 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: () => {
+    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", { 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;
@@ -1541,7 +1534,7 @@ const FilterMultiSelectCheckbox = ({ column, table, }) => {
                                     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 useRadioFilterStyles = makeStyles({
@@ -1601,16 +1594,16 @@ const FilterSelectRadio = ({ column, table, }) => {
         ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
         : 0;
     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) => {
+    return (jsxs("div", { children: [jsx(Input, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxs("div", { ref: filterContainer, className: styles.searchContainer, children: [paddingTop > 0 && jsx("div", { style: { paddingTop: `${paddingTop}px` } }), jsxs(RadioGroup, { 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) => {
+                        }, 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` } }))] }))] }));
+                            })] }), paddingBottom > 0 && (jsx("div", { style: { paddingBottom: `${paddingBottom}px` } }))] })] }));
 };
 
 const useNumberRangeFilterStyles$2 = makeStyles({
@@ -1643,11 +1636,11 @@ const FilterNumberRange = (props) => {
         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])
+    return (jsxs("div", { className: styles.searchContainer, children: [jsx(Field, { 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])
+                        : ''}` }) }), jsx(Field, { 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({
@@ -1687,7 +1680,7 @@ const FilterDateRange = (props) => {
         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 }) }))] })));
+    return (jsxs("div", { className: styles.searchContainer, children: [jsx(Field, { 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, { 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({
@@ -1720,7 +1713,7 @@ const FilterDate = (props) => {
         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 }) })));
+    return (jsx("div", { 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({
@@ -1769,9 +1762,9 @@ const Filter = ({ column, table, }) => {
             break;
         }
     }
-    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) => {
+    return (jsx("div", { className: styles.searchContainer, children: jsx(Field, { 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 }) })) })));
+                }, placeholder: "Search Keyword...", size: "small", className: styles.searchInput }) }) }));
 };
 
 const useFilterDrawerStyles$1 = makeStyles({
@@ -1798,7 +1791,7 @@ const FilterDrawer = ({ drawerState, dispatch, table }) => {
         table.setGlobalFilter('');
         table.resetColumnFilters();
     }, [table]);
-    return (jsxs(InlineDrawer, Object.assign({ position: "end", open: drawerState.isFilterDrawerOpen, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => dispatch({ type: "CLOSE_FILTER_DRAWER" }) }) }, { children: "Advanced Filters" })) }), jsx(DrawerBody, Object.assign({ className: styles.drawerBody }, { children: headerGroups.map((headerGroup) => {
+    return (jsxs(InlineDrawer, { position: "end", open: drawerState.isFilterDrawerOpen, separator: true, children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, { action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => dispatch({ type: "CLOSE_FILTER_DRAWER" }) }), children: "Advanced Filters" }) }), jsx(DrawerBody, { 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;
@@ -1806,11 +1799,11 @@ const FilterDrawer = ({ drawerState, dispatch, table }) => {
                         const canFilter = header.column.getCanFilter();
                         if (!canFilter)
                             return null;
-                        return (jsx("div", { children: header.column.getCanFilter() && (jsxs("div", Object.assign({ style: {
+                        return (jsx("div", { children: header.column.getCanFilter() && (jsxs("div", { style: {
                                     marginTop: "20px",
-                                } }, { 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));
+                                }, 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));
                     });
-                }) })), jsx(DrawerFooter, { children: jsx(Button, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters, style: { width: "100%" } }, { children: "Clear All Filters" })) })] })));
+                }) }), jsx(DrawerFooter, { children: jsx(Button, { icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters, style: { width: "100%" }, children: "Clear All Filters" }) })] }));
 };
 
 const SortAscIcon = bundleIcon$1(ArrowSortDown20Filled, ArrowSortDown20Regular);
@@ -1845,12 +1838,12 @@ function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderD
     const canDragDrop = headerDepth === totalNumberOfHeaderDepth && !header.isPlaceholder;
     const isLeafHeaders = headerDepth === totalNumberOfHeaderDepth;
     if (header.isPlaceholder) {
-        return (jsx("th", Object.assign({ colSpan: header.colSpan, className: styles.tHeadCell }, { children: header.column.getCanResize() && (jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) })) })));
+        return (jsx("th", { colSpan: header.colSpan, className: styles.tHeadCell, children: header.column.getCanResize() && (jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) })) }));
     }
-    return (jsxs("th", Object.assign({ colSpan: header.colSpan, className: mergeClasses$1(styles.tHeadCell, isLeafHeaders || header.isPlaceholder ? undefined
-            : styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging, isOver && isLeafHeaders && styles.tHeadCellOver) }, { children: [jsx("div", Object.assign({ className: styles.tHeadCellDraggable, ref: canDragDrop ? dropRef : undefined }, { children: jsxs("div", Object.assign({ className: isLeafHeaders
+    return (jsxs("th", { colSpan: header.colSpan, className: mergeClasses$1(styles.tHeadCell, isLeafHeaders || header.isPlaceholder ? undefined
+            : styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging, isOver && isLeafHeaders && styles.tHeadCellOver), children: [jsx("div", { className: styles.tHeadCellDraggable, ref: canDragDrop ? dropRef : undefined, children: jsxs("div", { className: isLeafHeaders
                         ? styles.tLeafHeadCellContent
-                        : styles.tNonLeafHeadCellContent, ref: canDragDrop ? dragRef : undefined }, { children: [jsx("div", Object.assign({ ref: canDragDrop ? previewRef : undefined }, { children: header.isPlaceholder ? null : (jsxs(Button, Object.assign({ style: {
+                        : styles.tNonLeafHeadCellContent, ref: canDragDrop ? dragRef : undefined, children: [jsx("div", { ref: canDragDrop ? previewRef : undefined, children: header.isPlaceholder ? null : (jsxs(Button, { style: {
                                     display: 'flex',
                                     alignItems: 'center',
                                     justifyContent: 'left',
@@ -1866,7 +1859,7 @@ function 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, {})] }))) })), jsx(HeaderMenu, { header: header, table: table, hideMenu: hideMenu })] })) })), header.column.getCanResize() && (jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }))] })));
+                                }[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, {})] })) }), jsx(HeaderMenu, { header: header, table: table, hideMenu: hideMenu })] }) }), header.column.getCanResize() && (jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }))] }));
 }
 function HeaderMenu(props) {
     const { header, table, hideMenu } = props;
@@ -1878,40 +1871,40 @@ function HeaderMenu(props) {
         header.column.getCanFilter();
     if (!canHavePopOver)
         return (jsx(Fragment, { children: " " }));
-    return (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) => {
+    return (jsxs(Menu, { children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(MenuButton, { appearance: "transparent", "aria-label": "View Column Actions" }) }), jsx(MenuPopover, { 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, { 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, { 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, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupFilled, {}), children: ["Group by", ' ', flexRender(header.column.columnDef.header, header.getContext())] })), header.column.getIsGrouped() && (jsxs(MenuItem, { 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, { 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: () => {
+                                    }, icon: jsx(ArrowStepInLeftRegular, {}), disabled: header.column.getIsPinned() === 'left', children: "To Left" }), jsx(MenuItem, { 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: () => {
+                                    }, icon: jsx(ArrowStepInRightRegular, {}), disabled: header.column.getIsPinned() === 'right', children: "To Right" }), ['left', 'right'].includes(header.column.getIsPinned()) && (jsx(MenuItem, { 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'))] }) }))] }));
+                                    }, 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'))] }) })] }));
 }
 
 function HeaderRow(props) {
     const styles = useTableHeaderStyles();
     const { table, headerGroup, rowSelectionMode, headerGroupsLength } = props;
-    return (jsxs("tr", Object.assign({ className: styles.tHeadRow }, { children: [rowSelectionMode === 'multiple' && (jsx("th", Object.assign({ style: { width: '1rem' }, "aria-label": "Select All Row Column" }, { children: headerGroup.depth === headerGroupsLength - 1 && (jsx(Checkbox, { checked: table.getIsSomeRowsSelected()
+    return (jsxs("tr", { className: styles.tHeadRow, children: [rowSelectionMode === 'multiple' && (jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row Column", children: headerGroup.depth === headerGroupsLength - 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) => {
+                        : table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select All Rows", title: 'Select All Rows' })) })), rowSelectionMode === 'single' && (jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row Column", children: ' ' })), headerGroup.headers.map((header) => {
                 return (jsx(HeaderCell, { header: header, table: table, hideMenu: headerGroup.depth !== headerGroupsLength - 1, headerDepth: headerGroup.depth, totalNumberOfHeaderDepth: headerGroupsLength - 1 }, header.id));
-            })] }), headerGroup.id));
+            })] }, headerGroup.id));
 }
 
 function TableHeader(props) {
     const styles = useTableHeaderStyles();
     const { table, headerGroups, rowSelectionMode } = props;
-    return (jsx("thead", Object.assign({ className: styles.tHead }, { children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup) => (jsx(HeaderRow, { table: table, rowSelectionMode: rowSelectionMode, headerGroup: headerGroup, headerGroupsLength: headerGroups.length }, headerGroup.id))) })));
+    return (jsx("thead", { className: styles.tHead, children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup) => (jsx(HeaderRow, { table: table, rowSelectionMode: rowSelectionMode, headerGroup: headerGroup, headerGroupsLength: headerGroups.length }, headerGroup.id))) }));
 }
 
 const useLoadingStyles = makeStyles({
@@ -1924,12 +1917,12 @@ const useLoadingStyles = makeStyles({
 const Loading = (props) => {
     const { numberOfItems = 16, numberOfColumns = 5 } = props;
     const styles = useLoadingStyles();
-    return (jsx("div", Object.assign({ className: styles.invertedWrapper }, { children: jsx(Skeleton, { children: [...Array(numberOfItems)].map((_, i) => (jsx("div", Object.assign({ className: styles.row }, { children: [...Array(numberOfColumns)].map((_, i) => {
+    return (jsx("div", { className: styles.invertedWrapper, children: jsx(Skeleton, { children: [...Array(numberOfItems)].map((_, i) => (jsx("div", { className: styles.row, children: [...Array(numberOfColumns)].map((_, i) => {
                     if (i === 0) {
                         return jsx(SkeletonItem, { shape: "circle", size: 24 }, i);
                     }
                     return jsx(SkeletonItem, { size: 16 }, i);
-                }) }), i))) }) })));
+                }) }, i))) }) }));
 };
 
 const useNoItemGridStyles = makeStyles({
@@ -1945,7 +1938,7 @@ const useNoItemGridStyles = makeStyles({
 
 const NoItemGrid = ({ message }) => {
     const styles = useNoItemGridStyles();
-    return (jsx("div", Object.assign({ className: styles.wrapper }, { children: jsx("div", { children: message ? message : jsx(Subtitle2Stronger, { children: "No Data to Show." }) }) })));
+    return (jsx("div", { className: styles.wrapper, children: jsx("div", { children: message ? message : jsx(Subtitle2Stronger, { children: "No Data to Show." }) }) }));
 };
 
 const useNoFilterMatchStyles = makeStyles({
@@ -1968,7 +1961,7 @@ const useNoFilterMatchStyles = makeStyles({
 
 const NoSearchResult = ({ message }) => {
     const styles = useNoFilterMatchStyles();
-    return (jsxs("div", Object.assign({ className: styles.wrapper }, { children: [jsx("div", Object.assign({ className: styles.iconWrapper }, { children: jsx(DocumentSearch24Regular, {}) })), jsx("div", { children: message ? message : jsx(Subtitle2Stronger, { children: "No item found that matches your search term." }) })] })));
+    return (jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.iconWrapper, children: jsx(DocumentSearch24Regular, {}) }), jsx("div", { children: message ? message : jsx(Subtitle2Stronger, { children: "No item found that matches your search term." }) })] }));
 };
 
 const useTableBodyStyles = makeStyles({
@@ -1996,24 +1989,24 @@ function TableCell({ cell, row }) {
         return jsx("td", { style: tdStyle, className: styles.tBodyCell }, cell.id);
     }
     if (cell.getIsGrouped()) {
-        return (jsx("td", Object.assign({ style: tdStyle, className: styles.tBodyCell }, { children: jsx(Button, Object.assign({ onClick: row.getToggleExpandedHandler(), style: {
+        return (jsx("td", { style: tdStyle, className: styles.tBodyCell, children: jsx(Button, { onClick: row.getToggleExpandedHandler(), style: {
                     cursor: row.getCanExpand() ? 'pointer' : 'normal',
                     textAlign: 'left',
-                }, appearance: "transparent", icon: row.getIsExpanded() ? jsx(GroupExpandedIcon, {}) : jsx(GroupCollapsedIcon, {}) }, { children: jsxs("strong", { children: [flexRender(cell.column.columnDef.cell, cell.getContext()), " (", row.subRows.length, ")"] }) })) }), cell.id));
+                }, appearance: "transparent", icon: row.getIsExpanded() ? jsx(GroupExpandedIcon, {}) : jsx(GroupCollapsedIcon, {}), children: jsxs("strong", { children: [flexRender(cell.column.columnDef.cell, cell.getContext()), " (", row.subRows.length, ")"] }) }) }, cell.id));
     }
     if (cell.getIsAggregated()) {
-        return (jsx("td", Object.assign({ style: tdStyle, className: styles.tBodyCell }, { children: jsx("strong", { children: flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext()) }) }), cell.id));
+        return (jsx("td", { style: tdStyle, className: styles.tBodyCell, children: jsx("strong", { children: flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
     }
-    return (jsx("td", Object.assign({ style: tdStyle, className: styles.tBodyCell }, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
+    return (jsx("td", { style: tdStyle, className: styles.tBodyCell, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
 }
 
 function TableRow({ row, rowSelectionMode }) {
     const styles = useTableBodyStyles();
-    return (jsxs("tr", Object.assign({ className: row.getIsSelected() || row.getIsAllSubRowsSelected()
+    return (jsxs("tr", { 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()
+            : styles.tBodyRow, children: [rowSelectionMode === 'multiple' && (jsx("td", { 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) => (jsx(TableCell, { cell: cell, row: row }, cell.id)))] }), row.id));
+                        : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) })), rowSelectionMode === 'single' && (jsx("td", { 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) => (jsx(TableCell, { cell: cell, row: row }, cell.id)))] }, row.id));
 }
 
 function TableBody(props) {
@@ -2024,10 +2017,10 @@ function TableBody(props) {
     const paddingBottom = virtualRows.length > 0
         ? totalSize - (((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0)
         : 0;
-    return (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) => {
+    return (jsxs("tbody", { className: styles.tBody, children: [paddingTop > 0 && (jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsx("td", { style: { height: `${paddingTop}px` } }) })), virtualRows.map((virtualRow) => {
                 const row = rows[virtualRow.index];
                 return (jsx(TableRow, { row: row, rowSelectionMode: rowSelectionMode }, row.id));
-            }), paddingBottom > 0 && (jsx("tr", Object.assign({ className: styles.tBodyRow, "aria-hidden": true }, { children: jsx("td", { style: { height: `${paddingBottom}px` } }) })))] })));
+            }), paddingBottom > 0 && (jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsx("td", { style: { height: `${paddingBottom}px` } }) }))] }));
 }
 
 const TableContainer = (props) => {
@@ -2039,7 +2032,7 @@ const TableContainer = (props) => {
     const rowVirtualizer = useVirtual({
         parentRef: tableContainerRef,
         size: rows.length,
-        overscan: 10,
+        overscan: 5,
     });
     const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
     const headerGroups = table.getHeaderGroups();
@@ -2047,12 +2040,12 @@ const TableContainer = (props) => {
     const isLoading = props.isLoading && virtualRows.length === 0;
     const noItems = !isLoading && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length) === 0;
     const noSearchResult = !isLoading && ((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.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(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsx(TableBody, { rows: rows, virtualRows: virtualRows, rowSelectionMode: rowSelectionMode, totalSize: totalSize }), rowSelectionMode === 'multiple' &&
+    return (jsxs("div", { ref: tableContainerRef, className: styles.tableContainer, children: [jsxs("table", { className: styles.table, "aria-label": "Data Grid", children: [jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsx(TableBody, { rows: rows, virtualRows: virtualRows, rowSelectionMode: rowSelectionMode, totalSize: totalSize }), 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()
+                        !noSearchResult && (jsx("tfoot", { className: styles.tFoot, children: jsxs("tr", { children: [jsx("td", { 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 })] })));
+                                            : table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), "aria-label": "Select All Current Page Rows", title: 'Select All Current Page Rows' }) }), jsxs("td", { 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) => {
@@ -2061,21 +2054,21 @@ const ViewSaveForm = (props) => {
     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(Fragment, { children: [jsx(MenuList, { children: jsx(MenuItemRadio, { name: 'view-manager', value: 'View Manager', onClick: () => setIsFormOpen(true), icon: jsx(Save20Filled, {}), children: "Save Current View" }) }), jsx(Divider, {})] }));
     }
-    return (jsxs("div", Object.assign({ style: {
+    return (jsxs("div", { 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: {
+        }, children: [jsx(Caption1Stronger, { children: "Enter View Details" }), jsx(Field, { 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, { 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", { style: {
                     display: 'flex',
                     flexWrap: 'wrap',
                     gap: '0.5rem'
-                } }, { children: [jsx(Button, Object.assign({ onClick: () => {
+                }, children: [jsx(Button, { onClick: () => {
                             setIsFormOpen(false);
                             setErrorMessage('');
-                        } }, { children: "Cancel" })), jsx(Button, Object.assign({ appearance: 'primary', onClick: () => {
+                        }, children: "Cancel" }), jsx(Button, { appearance: 'primary', onClick: () => {
                             var _a, _b, _c;
                             if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
                                 setErrorMessage('View name is required');
@@ -2093,7 +2086,7 @@ const ViewSaveForm = (props) => {
                             (_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" }))] }))] })));
+                        }, children: "Save" })] })] }));
 };
 
 const useFilterDrawerStyles = makeStyles({
@@ -2114,7 +2107,7 @@ const useFilterDrawerStyles = makeStyles({
         } }),
 });
 const ViewsDrawer = (props) => {
-    const { drawerState, dispatch, tableViews, applyTableState, resetToGridDefaultView, getTableState, onTableViewSave } = props;
+    const { table, drawerState, dispatch, tableViews, applyTableState, resetToGridDefaultView, onTableViewSave } = props;
     const styles = useFilterDrawerStyles();
     const [checkedValues, setCheckedValues] = React.useState({ font: ["calibri"] });
     const onChange = (e, { name, checkedItems }) => {
@@ -2130,14 +2123,14 @@ const ViewsDrawer = (props) => {
     // const clearAllSelection = React.useCallback(() => {
     //   table.toggleAllRowsSelected(false);
     // }, [table]);
-    return (jsxs(InlineDrawer, Object.assign({ position: "end", open: drawerState.isViewsDrawerOpen, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => dispatch({ type: "CLOSE_VIEW_DRAWER" }) }) }, { 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 (jsxs("div", Object.assign({ style: {
+    return (jsxs(InlineDrawer, { position: "end", open: drawerState.isViewsDrawerOpen, separator: true, children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, { action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => dispatch({ type: "CLOSE_VIEW_DRAWER" }) }), children: "Table Views" }) }), jsxs(DrawerBody, { className: styles.drawerBody, children: [onTableViewSave && jsx(ViewSaveForm, { mode: 'create', getTableState: table.getState, onSave: onTableViewSave }), jsxs(MenuList, { checkedValues: checkedValues, onCheckedValueChange: onChange, children: [jsx(MenuItemRadio, { 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 (jsxs("div", { style: {
                                         display: 'flex',
                                         justifyContent: 'space-between',
                                         alignItems: 'center',
                                         width: '100%',
-                                    } }, { children: [jsx(MenuItemRadio, Object.assign({ name: "table-views", value: view.viewName, onClick: () => applyTableState(view.tableState), icon: jsx(ViewDesktop20Regular, {}) }, { children: view.viewName })), props.onTableViewDelete && (view === null || view === void 0 ? void 0 : view.isViewOwner) && (jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => { var _a; return (_a = props.onTableViewDelete) === null || _a === void 0 ? void 0 : _a.call(props, view); } }))] }), view.id + view.viewName));
-                            })] }))] })), jsx(DrawerFooter, { children: jsxs(MenuList, { children: [jsx(MenuDivider, {}), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetToGridDefaultView }, { children: "Reset to Default View" }))] }) })] })));
+                                    }, children: [jsx(MenuItemRadio, { name: "table-views", value: view.viewName, onClick: () => applyTableState(view.tableState), icon: jsx(ViewDesktop20Regular, {}), children: view.viewName }), props.onTableViewDelete && (view === null || view === void 0 ? void 0 : view.isViewOwner) && (jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => { var _a; return (_a = props.onTableViewDelete) === null || _a === void 0 ? void 0 : _a.call(props, view); } }))] }, view.id + view.viewName));
+                            })] })] }), jsx(DrawerFooter, { children: jsxs(MenuList, { children: [jsx(MenuDivider, {}), jsx(MenuItem, { icon: jsx(ClearFilterIcon, {}), onClick: resetToGridDefaultView, children: "Reset to Default View" })] }) })] }));
 };
 
 const TableActions = {
@@ -2170,12 +2163,12 @@ function tableReducer(state, action) {
 
 function AdvancedTable(props, ref) {
     useStaticStyles();
-    const { table, globalFilter, headerMenu, tableViews, setGlobalFilter, resetToDefaultView, applyTableState, getTableState } = useGridContainer(props, ref);
+    const { table, globalFilter, headerMenu, tableViews, setGlobalFilter, resetToDefaultView, applyTableState } = useGridContainer(props, ref);
     const [drawerState, dispatch] = React.useReducer(tableReducer, {
         isFilterDrawerOpen: false,
         isViewsDrawerOpen: false
     });
-    return (jsxs(DndProvider, Object.assign({ backend: HTML5Backend }, { children: [jsx(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, applyTableState: applyTableState, drawerState: drawerState, dispatch: dispatch }), 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, { drawerState: drawerState, dispatch: dispatch, table: table }), jsx(ViewsDrawer, { table: table, drawerState: drawerState, dispatch: dispatch, tableViews: tableViews, applyTableState: applyTableState, resetToGridDefaultView: resetToDefaultView, getTableState: getTableState, onTableViewSave: props.onTableViewSave, onTableViewDelete: props.onTableViewDelete })] })), jsx(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] })));
+    return (jsxs(DndProvider, { backend: HTML5Backend, children: [jsx(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, applyTableState: applyTableState, drawerState: drawerState, dispatch: dispatch }), jsxs("div", { 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, { drawerState: drawerState, dispatch: dispatch, table: table }), jsx(ViewsDrawer, { table: table, drawerState: drawerState, dispatch: dispatch, tableViews: tableViews, applyTableState: applyTableState, resetToGridDefaultView: resetToDefaultView, onTableViewSave: props.onTableViewSave, onTableViewDelete: props.onTableViewDelete })] }), jsx(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] }));
 }
 const ForwardedAdvancedTable = React.forwardRef(AdvancedTable);
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@prt-ts/fluent-react-table-v2",
-  "version": "9.41.0-build.4.0",
+  "version": "9.44.3-build.1.0",
   "main": "./index.js",
-  "types": "./src\\index.d.ts",
+  "types": "./index.d.ts",
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
-    "@fluentui/react-components": ">=9.41.0",
+    "@fluentui/react-components": ">=9.44.3",
     "@fluentui/react-datepicker-compat": ">=0.4.5"
   },
   "dependencies": {
@@ -24,6 +24,6 @@
     "url": "https://github.com/prt-ts/spfx-workspace.git"
   },
   "homepage": "https://github.com/prt-ts/spfx-workspace.git#readme",
-  "module": "./index.js",
+  "module": "./index.esm.js",
   "type": "module"
 }

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

@@ -7,7 +7,7 @@ type GridHeaderProps<TItem extends object> = {
     headerMenu?: JSX.Element | React.ReactNode;
     globalFilter: string;
     setGlobalFilter: (value: string) => void;
-    applyTableState: (tableState: Partial<TableState>) => boolean;
+    applyTableState: (tableState: TableState) => boolean;
     drawerState: DrawerTableState;
     dispatch: React.Dispatch<ActionType<string>>;
 };

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

@@ -9,6 +9,5 @@ export declare const useGridContainer: <TItem extends object>(props: TableProps<
     headerMenu: JSX.Element | React.ReactNode;
     setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
     resetToDefaultView: () => boolean;
-    applyTableState: (tableState: Partial<TableState>) => boolean;
-    getTableState: () => Partial<TableState>;
+    applyTableState: (tableState: TableState) => boolean;
 };

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

@@ -3,7 +3,7 @@ import { TableState } from '@tanstack/react-table';
 type ViewSaveFormProps<TItem extends object> = {
     mode: 'create' | 'edit';
     onSave: TableProps<TItem>['onTableViewSave'];
-    getTableState: () => Partial<TableState>;
+    getTableState: () => 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

@@ -7,9 +7,8 @@ type ViewsDrawerProps<TItem extends object> = {
     dispatch: React.Dispatch<ActionType<string>>;
     table: Table<TItem>;
     tableViews: TableView[];
-    applyTableState: (tableView: Partial<TableState>) => void;
+    applyTableState: (tableView: TableState) => boolean;
     resetToGridDefaultView: () => boolean;
-    getTableState: () => Partial<TableState>;
     onTableViewSave?: TableProps<TItem>['onTableViewSave'];
     onTableViewDelete?: TableProps<TItem>['onTableViewDelete'];
 };

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

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

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

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

package/vite.config.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vite").UserConfigExport;
+declare const _default: import("vite").UserConfig;
 export default _default;