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

package/index.js

@@ -1,1124 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
-import { useMemo } from 'react';
-import { useDrop, useDrag, DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Checkbox, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, mergeClasses, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, 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({
-    "*": {
-        boxSizing: "border-box",
-    },
-});
-const useTableStaticStyles = makeStyles({
-    tableContainer: Object.assign(Object.assign({ height: "650px", width: "100%" }, 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",
-        } }),
-    table: {
-        width: "100%",
-        borderCollapse: "collapse",
-    },
-    tHead: Object.assign(Object.assign({}, shorthands.padding("0px", "0px", "0px", "0px")), { zIndex: 1, backgroundColor: tokens.colorPaletteAnchorBackground2, color: tokens.colorNeutralForeground1, position: "sticky", top: 0, width: "100%", boxShadow: tokens.shadow2 }),
-    tHeadRow: Object.assign(Object.assign({}, shorthands.padding("0px", "0px", "0px", "0px")), shorthands.borderBottom(tokens.strokeWidthThickest, "solid", tokens.colorNeutralStroke1)),
-    tBody: Object.assign(Object.assign({}, shorthands.padding("0px", "0px", "0px", "0px")), { zIndex: 0 }),
-    tBodyRow: Object.assign(Object.assign(Object.assign({}, shorthands.padding("0px", "0px", "0px", "0px")), shorthands.borderBottom(tokens.strokeWidthThin, "solid", tokens.colorNeutralStroke1)), { ":nth-child(even)": {
-            backgroundColor: tokens.colorNeutralBackground2,
-        }, ":hover": {
-            backgroundColor: tokens.colorNeutralBackground2Hover,
-        } }),
-    tBodySelectedRow: Object.assign(Object.assign({ backgroundColor: tokens.colorBrandBackground2 }, shorthands.borderBottom(tokens.strokeWidthThin, "solid", tokens.colorNeutralStroke1)), { ":hover": {
-            backgroundColor: tokens.colorBrandBackground2Hover,
-        } }),
-    tBodyGroupedRow: Object.assign({ backgroundColor: tokens.colorNeutralBackground2 }, shorthands.borderBottom(tokens.strokeWidthThin, "solid", tokens.colorNeutralStroke1)),
-    tBodyCell: Object.assign(Object.assign({ backgroundColor: "transparent" }, shorthands.padding("2px", "4px")), { minHeight: "35px", height: "35px" }),
-    tFoot: {
-        backgroundColor: tokens.colorNeutralBackground1,
-        color: tokens.colorNeutralForeground1,
-        position: "sticky",
-        bottom: 0,
-        left: 0,
-        width: "100%",
-    },
-});
-
-const usePaginationStyle = makeStyles({
-    paginationContainer: Object.assign({ width: "100%", backgroundColor: tokens.colorNeutralBackground2Hover }, shorthands.padding("5px")),
-    wrapper: {
-        columnGap: "0.2rem",
-        display: "flex",
-        alignItems: "center",
-        alignContent: "center",
-        justifyContent: "space-between",
-        // if smaller size display flex column
-        "@media screen and (max-width: 640px)": {
-            flexDirection: "column",
-            rowGap: "0.2rem",
-        },
-    },
-    pageBtnContainer: {
-        display: "flex",
-        columnGap: "3px",
-    },
-    pageBtn: {
-        minWidth: "1.5rem",
-        minHeight: "1.5rem",
-        alignContent: "center",
-        alignItems: "center",
-    },
-    pageSelectionWrapper: {
-        minWidth: "1.5rem",
-    },
-    pageSelectionDropdown: {
-        minWidth: "100%",
-    },
-    pageSizeInput: {
-        minWidth: "1.5rem",
-        width: "4rem",
-    },
-});
-
-const range = (from, to, step = 1) => {
-    var _a;
-    return (_a = [...Array(Math.floor((to - from) / step) + 1)]) === null || _a === void 0 ? void 0 : _a.map((_, i) => from + i * step);
-};
-const DEFAULT_NUMBER_OF_PAGE_BTN = 5;
-const Pagination = (props) => {
-    const { table, pageSizeOptions = [10, 20, 50, 100, 1000] } = props;
-    const pageSizeSelectionId = useId("page-size-selector");
-    const styles = usePaginationStyle();
-    const totalNumberOfPage = table.getPageCount();
-    const currentPage = table.getState().pagination.pageIndex;
-    const pageSize = table.getState().pagination.pageSize;
-    const pageSelectionOptions = useMemo(() => {
-        let start = currentPage - Math.floor(DEFAULT_NUMBER_OF_PAGE_BTN / 2);
-        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;
-        }
-        else if (end > totalNumberOfPage) {
-            const possibleStart = totalNumberOfPage - DEFAULT_NUMBER_OF_PAGE_BTN + 1;
-            start = possibleStart < 1 ? 1 : possibleStart;
-            end = totalNumberOfPage;
-        }
-        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) => {
-                                                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" })] }))] })) })));
-};
-
-bundleIcon(SaveFilled, SaveRegular);
-bundleIcon(TableSimpleCheckmarkFilled, TableSimpleCheckmarkRegular);
-bundleIcon(SearchFilled, SearchRegular);
-bundleIcon(FilterFilled, FilterRegular);
-const ClearFilterIcon = bundleIcon(CodeTextOff16Filled, CodeTextOff16Regular);
-const ToggleSelectColumnIcon = bundleIcon(ColumnEditFilled, ColumnEditRegular);
-const ToggleGroupColumnIcon = bundleIcon(GroupFilled, GroupRegular);
-const GroupCollapsedIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);
-const GroupExpandedIcon = bundleIcon(ChevronDownRegular, ChevronDownFilled);
-bundleIcon(DragFilled, DragRegular);
-
-const useGridHeaderStyles = makeStyles({
-    tableTopHeaderContainer: Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "flex-end", width: "100%", backgroundColor: tokens.colorBrandBackground2Hover }, shorthands.padding("5px")),
-    tableTopHeaderLeft: {
-        display: "flex",
-        justifyContent: "flex-start",
-    },
-    tableTopHeaderRight: Object.assign({ display: "flex", justifyContent: "flex-end" }, shorthands.gap("3px")),
-    tableTopHeaderColumnTogglePopover: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "flex-start",
-        alignItems: "flex-start",
-        width: "100%",
-        height: "100%",
-    },
-});
-
-const GridHeader = (props) => {
-    const { table, gridTitle, globalFilter, setGlobalFilter } = 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) => {
-                                            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) => {
-                                            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
-                        // appearance="subtle"
-                        , { 
-                            // appearance="subtle"
-                            onClick: () => props.setViewsDrawerOpen((value) => !value), icon: jsx(Album24Regular, {}), "aria-label": "View Menu" }) })), jsx(DebouncedInput, { value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (value) => setGlobalFilter(String(value)), className: "p-2 font-lg shadow border border-block", placeholder: "Search all columns...", openFilterDrawer: props.openFilterDrawer, setFilterDrawerOpen: props.setFilterDrawerOpen })] }))] })));
-};
-// A debounced input react component
-function DebouncedInput({ value: initialValue, onChange, debounce = 500, openFilterDrawer, setFilterDrawerOpen, }) {
-    const [value, setValue] = React.useState('');
-    React.useEffect(() => {
-        setValue(initialValue);
-    }, [initialValue]);
-    React.useEffect(() => {
-        const timeout = setTimeout(() => {
-            onChange(value);
-        }, 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: openFilterDrawer ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label" }, { children: jsx(Button, { appearance: "subtle", icon: openFilterDrawer ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
-                    setFilterDrawerOpen((open) => !open);
-                } }) })) }));
-}
-
-const arrIncludesSome = (row, columnId, value) => {
-    // Rank the item
-    const rowValue = row.getValue(columnId);
-    const passed = Array.isArray(value) &&
-        ((value === null || value === void 0 ? void 0 : value.length) === 0 || value.includes(`${rowValue}`));
-    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;
-    const [pagination, setPagination] = React.useState({
-        pageSize: props.pageSize || 10,
-        pageIndex: 0,
-    });
-    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 [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(() => {
-        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,
-            inDateRange: dateRange,
-            matchDate: date,
-        },
-        initialState: {
-            expanded: true,
-        },
-        state: {
-            pagination,
-            sorting,
-            columnFilters,
-            globalFilter,
-            grouping,
-            expanded,
-            rowSelection,
-            columnOrder,
-            columnVisibility,
-            columnPinning,
-            columnSizing,
-        },
-        columnResizeMode: 'onChange',
-        enableRowSelection: rowSelectionMode !== undefined,
-        enableMultiRowSelection: rowSelectionMode === 'multiple',
-        enableFilters: true,
-        enableGlobalFilter: true,
-        enableColumnFilters: true,
-        filterFromLeafRows: true,
-        autoResetExpanded: false,
-        onRowSelectionChange: setRowSelection,
-        onPaginationChange: setPagination,
-        onSortingChange: setSorting,
-        onColumnFiltersChange: setColumnFilters,
-        onGlobalFilterChange: setGlobalFilter,
-        onGroupingChange: setGrouping,
-        onColumnOrderChange: setColumnOrder,
-        onExpandedChange: setExpanded,
-        onColumnVisibilityChange: setColumnVisibility,
-        onColumnPinningChange: setColumnPinning,
-        onColumnSizingChange: setColumnSizing,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getGroupedRowModel: getGroupedRowModel(),
-        getExpandedRowModel: getExpandedRowModel(),
-        getFacetedUniqueValues: getFacetedUniqueValues(),
-        getFacetedMinMaxValues: getFacetedMinMaxValues(),
-    });
-    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 = {
-            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,
-            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();
-                // 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);
-        };
-    }, [getTableState]);
-    return {
-        table,
-        globalFilter,
-        tableViews,
-        headerMenu,
-        setGlobalFilter,
-        resetToDefaultView,
-        applyTableState,
-        getTableState
-    };
-};
-
-const useCheckboxFilterStyles = 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 FilterMultiSelectCheckbox = ({ column, table, }) => {
-    var _a, _b, _c;
-    const firstValue = (_a = table
-        .getPreFilteredRowModel()
-        .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
-    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))
-            : 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: filterOptionsFiltered.length,
-        overscan: 15,
-    });
-    const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
-    const paddingTop = virtualRows.length > 0 ? ((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _b === void 0 ? void 0 : _b.start) || 0 : 0;
-    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 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: () => {
-                            if ((columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0) {
-                                column.setFilterValue(undefined);
-                                return;
-                            }
-                            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));
-                                    return;
-                                }
-                                column.setFilterValue((old) => [
-                                    ...(old || []),
-                                    value,
-                                ]);
-                            }, label: value }, `${column.id}-${row.index}`));
-                    }), paddingBottom > 0 && (jsx("span", { style: { paddingBottom: `${paddingBottom}px` } }))] }), 'filter-multi-select-checkbox')] }));
-};
-
-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()
-        .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
-    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))
-            : 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: filterOptionsFiltered.length,
-        overscan: 15,
-    });
-    const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
-    const paddingTop = virtualRows.length > 0 ? ((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _b === void 0 ? void 0 : _b.start) || 0 : 0;
-    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 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({
-    searchInput: {
-        width: '100%',
-    },
-    searchInputField: {
-        width: '100%',
-        flexGrow: 1,
-    },
-    searchContainer: {
-        display: 'flex',
-        marginBottom: '8px',
-        marginLeft: '10px',
-        marginRight: '10px',
-    },
-});
-const Filter = ({ column, table, }) => {
-    var _a, _b;
-    const filterFunctionName = column.columnDef.filterFn;
-    const styles = useFilterStyles();
-    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.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: "Advanced 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);
-const SortDescIcon = bundleIcon(ArrowSortUp20Filled, ArrowSortUp20Regular);
-const reorderColumn = (draggedColumnId, targetColumnId, columnOrder) => {
-    columnOrder.splice(columnOrder.indexOf(targetColumnId), 0, columnOrder.splice(columnOrder.indexOf(draggedColumnId), 1)[0]);
-    return [...columnOrder];
-};
-const useTableHeaderCellStyles = makeStyles({
-    tHeadCell: Object.assign({ zIndex: 99, position: 'relative', fontSize: tokens.fontSizeBase300, fontWeight: tokens.fontWeightBold, minWidth: '1rem' }, shorthands.padding('2px', '4px')),
-    tHeadNonLeafCell: Object.assign({}, shorthands.borderBottom('1px', 'solid', tokens.colorNeutralBackground5)),
-    tHeadCellDraggable: {
-        height: '100%',
-    },
-    tHeadCellDragging: {
-        opacity: 0.5,
-        cursor: 'grab',
-    },
-    tHeadCellOver: Object.assign({ backgroundColor: tokens.colorNeutralStroke1 }, shorthands.border(tokens.strokeWidthThin, 'dashed', tokens.colorNeutralBackground5)),
-    tLeafHeadCellContent: Object.assign({ display: 'flex', alignContent: 'space-between', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', width: '100%', height: '100%', minWidth: '1rem' }, shorthands.padding('3px', '4px')),
-    tNonLeafHeadCellContent: Object.assign({ display: 'flex', alignContent: 'center', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', width: '100%', minWidth: '1rem' }, shorthands.padding('3px', '4px')),
-    tHeadContentBtn: Object.assign(Object.assign(Object.assign(Object.assign({}, shorthands.padding('0px', '0px', '0px', '0px')), { display: 'flex' }), shorthands.gap('5px')), { alignContent: 'space-between', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', width: '100%', height: '100%', minWidth: '1rem' }),
-    tHeadMenuPopover: Object.assign(Object.assign({}, shorthands.padding('0px', '0px', '0px', '0px')), { width: '300px' }),
-    resizer: Object.assign(Object.assign({}, shorthands.borderRight('1px', 'solid', tokens.colorNeutralBackground5)), { width: '8px', position: 'absolute', top: 0, right: 0, bottom: 0, cursor: 'col-resize', resize: 'horizontal', ':hover': {
-            borderRightWidth: '4px',
-            borderRightColor: tokens.colorNeutralBackground2Pressed,
-        } }),
-    resizerActive: {
-        borderRightWidth: '4px',
-        borderRightColor: tokens.colorNeutralBackground2Pressed,
-    },
-});
-const HeaderCell = ({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }) => {
-    var _a;
-    const { getState, setColumnOrder } = table;
-    const { columnOrder } = getState();
-    const { column } = header;
-    const [{ isOver }, dropRef] = useDrop({
-        accept: "column",
-        drop: (draggedColumn) => {
-            const newColumnOrder = reorderColumn(draggedColumn.id, column.id, columnOrder);
-            setColumnOrder(newColumnOrder);
-        },
-        collect: (monitor) => ({
-            isOver: monitor.isOver(),
-        }),
-    });
-    const [{ isDragging }, dragRef, previewRef] = useDrag({
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
-        item: () => column,
-        type: "column",
-    });
-    const styles = useTableHeaderCellStyles();
-    const canDragDrop = headerDepth === totalNumberOfHeaderDepth && !header.isPlaceholder;
-    const isLeafHeaders = headerDepth === totalNumberOfHeaderDepth;
-    return (jsxs("th", Object.assign({ colSpan: header.colSpan, className: mergeClasses(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 ? dragRef : undefined }, { children: jsxs("div", Object.assign({ className: isLeafHeaders
-                        ? styles.tLeafHeadCellContent
-                        : styles.tNonLeafHeadCellContent, ref: canDragDrop ? dropRef : undefined }, { children: [jsx("div", Object.assign({ ref: canDragDrop ? previewRef : undefined }, { children: header.isPlaceholder ? null : (jsxs(Button, Object.assign({ style: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'left',
-                                    flex: 1,
-                                }, onClick: (e) => {
-                                    if (!header.column.getCanSort())
-                                        return;
-                                    header.column.toggleSorting(header.column.getIsSorted() === 'asc', e.ctrlKey);
-                                }, onDoubleClick: () => {
-                                    if (!header.column.getCanGroup())
-                                        return;
-                                    header.column.getToggleGroupingHandler()();
-                                }, 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 &&
-                            (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) => {
-                                                                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: () => {
-                                                                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: () => {
-                                                                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: () => {
-                                                                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) }))] })));
-};
-
-const useLoadingStyles = makeStyles({
-    invertedWrapper: {
-        backgroundColor: tokens.colorNeutralBackground1,
-    },
-    row: Object.assign(Object.assign({ alignItems: "center", display: "grid", paddingBottom: "10px", position: "relative" }, shorthands.gap("10px")), { gridTemplateColumns: "min-content 20% 15% 30% 29%" }),
-});
-
-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) => {
-                    if (i === 0) {
-                        return jsx(SkeletonItem, { shape: "circle", size: 24 }, i);
-                    }
-                    return jsx(SkeletonItem, { size: 16 }, i);
-                }) }), i))) }) })));
-};
-
-const useNoItemGridStyles = makeStyles({
-    wrapper: {
-        backgroundColor: tokens.colorNeutralBackground1,
-        display: "flex",
-        flexWrap: "wrap",
-        alignContent: "center",
-        justifyContent: "center",
-        minHeight: "300px",
-    }
-});
-
-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." }) }) })));
-};
-
-const useNoFilterMatchStyles = makeStyles({
-    wrapper: {
-        backgroundColor: tokens.colorNeutralBackground1,
-        display: "flex",
-        flexDirection: "column",
-        flexWrap: "wrap",
-        alignContent: "center",
-        justifyContent: "center",
-        minHeight: "300px",
-    },
-    iconWrapper: {
-        display: "flex",
-        flexWrap: "wrap",
-        alignContent: "center",
-        justifyContent: "center",
-    }
-});
-
-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." }) })] })));
-};
-
-const TableContainer = (props) => {
-    var _a, _b, _c, _d;
-    const styles = useTableStaticStyles();
-    const { table, rowSelectionMode } = props;
-    const tableContainerRef = React.useRef(null);
-    const { rows } = table.getRowModel();
-    const rowVirtualizer = useVirtual({
-        parentRef: tableContainerRef,
-        size: rows.length,
-        overscan: 10,
-    });
-    const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
-    const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _a === void 0 ? void 0 : _a.start) || 0 : 0;
-    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;
-    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 (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: {
-                                                        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 })] })));
-};
-
-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 (jsxs("div", Object.assign({ 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: 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) {
-    useStaticStyles();
-    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);
-
-export { ForwardedAdvancedTable as Table };