@prt-ts/fluent-react-table-v2 9.46.8-build.6.0 → 9.46.8-build.7.0

package/index.esm.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Checkbox, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Accordion, AccordionItem, AccordionHeader, Caption1Stronger, AccordionPanel, DrawerFooter, mergeClasses as mergeClasses$1, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, Skeleton, SkeletonItem, Subtitle2Stronger, MenuItemRadio } from '@fluentui/react-components';
+import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Checkbox, mergeClasses as mergeClasses$1, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, Skeleton, SkeletonItem, Subtitle2Stronger, Radio, RadioGroup, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Accordion, AccordionItem, AccordionHeader, Caption1Stronger, AccordionPanel, DrawerFooter, MenuItemRadio } from '@fluentui/react-components';
 import { Show, For, Switch, Case } from '@prt-ts/react-control-flow';
 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';
 import { useSortable, SortableContext, horizontalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { useVirtual } from 'react-virtual';
+import { DatePicker } from '@fluentui/react-datepicker-compat';
 import { useSensor, PointerSensor, MouseSensor, TouchSensor, KeyboardSensor, useSensors, DndContext, closestCenter } from '@dnd-kit/core';
 import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
 
@@ -985,6 +985,7 @@ const ArrowNextFilled = /*#__PURE__*/createFluentIcon('ArrowNextFilled', "1em",
 const ArrowPreviousFilled = /*#__PURE__*/createFluentIcon('ArrowPreviousFilled', "1em", ["M6 4.75c-.38 0-.7.28-.74.65l-.01.1v9a.75.75 0 0 0 1.5.1V5.5A.75.75 0 0 0 6 4.75Zm8.28.22a.75.75 0 0 0-.98-.07l-.08.07-4.5 4.5a.75.75 0 0 0-.07.98l.07.08 4.5 4.5a.75.75 0 0 0 1.13-.98l-.07-.08L10.31 10l3.97-3.97c.3-.3.3-.77 0-1.06Z"], {
   flipInRtl: true
 });
+const ArrowSortFilled = /*#__PURE__*/createFluentIcon('ArrowSortFilled', "1em", ["M14.84 16.72a.76.76 0 0 1-.59.28.73.73 0 0 1-.53-.22l-3-3a.75.75 0 0 1 1.06-1.07l1.72 1.73V3.75a.75.75 0 0 1 1.5 0v10.68l1.72-1.71a.75.75 0 1 1 1.06 1.06l-2.94 2.94ZM6.34 3.28A.76.76 0 0 0 5.75 3c-.2 0-.38.07-.53.22l-3 3A.75.75 0 0 0 3.28 7.3L5 5.56v10.69a.75.75 0 0 0 1.5 0V5.57l1.72 1.71a.75.75 0 1 0 1.06-1.06L6.34 3.28Z"]);
 const ArrowStepInLeftRegular = /*#__PURE__*/createFluentIcon('ArrowStepInLeftRegular', "1em", ["M5 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM4 8a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm14 2a.5.5 0 0 1-.5.5H9.7l3.15 3.15a.5.5 0 0 1-.7.7l-4-4a.5.5 0 0 1 0-.7l4-4a.5.5 0 0 1 .7.7L9.71 9.5h7.79c.28 0 .5.22.5.5Z"]);
 const ArrowStepInRightRegular = /*#__PURE__*/createFluentIcon('ArrowStepInRightRegular', "1em", ["M15 10a1 1 0 1 0 2 0 1 1 0 0 0-2 0Zm1 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4ZM2 10c0-.28.22-.5.5-.5h7.8L7.14 6.35a.5.5 0 1 1 .7-.7l4 4c.2.2.2.5 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H2.5A.5.5 0 0 1 2 10Z"]);
 
@@ -996,6 +997,8 @@ const ColumnEditFilled = /*#__PURE__*/createFluentIcon('ColumnEditFilled', "1em"
 const ColumnEditRegular = /*#__PURE__*/createFluentIcon('ColumnEditRegular', "1em", ["M3 3.5c0-.28.22-.5.5-.5H4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-.5a.5.5 0 0 1 0-1H4a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-.5a.5.5 0 0 1-.5-.5ZM9 4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h.47l-.04.16-.21.84H9a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v6.94l-1 1V5a1 1 0 0 0-1-1H9Zm6 1v4.94l-1 1V5c0-1.1.9-2 2-2h.5a.5.5 0 0 1 0 1H16a1 1 0 0 0-1 1Zm-4.02 10.38 4.83-4.83a1.87 1.87 0 1 1 2.64 2.64l-4.83 4.83a2.2 2.2 0 0 1-1.02.58l-1.5.37a.89.89 0 0 1-1.07-1.07l.37-1.5c.1-.39.3-.74.58-1.02Z"]);
 const DragFilled = /*#__PURE__*/createFluentIcon('DragFilled', "1em", ["M10 2c.2 0 .39.08.53.22l1.5 1.5a.75.75 0 0 1-1.06 1.06l-.22-.22v1.69a.75.75 0 0 1-1.5 0V4.56l-.22.22a.75.75 0 0 1-1.06-1.06l1.5-1.5A.75.75 0 0 1 10 2Zm2 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-9.78-.53a.75.75 0 0 0 0 1.06l1.5 1.5a.75.75 0 0 0 1.06-1.06l-.22-.22h1.69a.75.75 0 0 0 0-1.5H4.56l.22-.22a.75.75 0 0 0-1.06-1.06l-1.5 1.5ZM10 18c.2 0 .39-.08.53-.22l1.5-1.5a.75.75 0 1 0-1.06-1.06l-.22.22v-1.69a.75.75 0 0 0-1.5 0v1.69l-.22-.22a.75.75 0 0 0-1.06 1.06l1.5 1.5c.14.14.33.22.53.22Zm7.78-8.53a.75.75 0 0 1 0 1.06l-1.5 1.5a.75.75 0 1 1-1.06-1.06l.22-.22h-1.69a.75.75 0 0 1 0-1.5h1.69l-.22-.22a.75.75 0 0 1 1.06-1.06l1.5 1.5Z"]);
 const DragRegular = /*#__PURE__*/createFluentIcon('DragRegular', "1em", ["M9.65 2.15c.2-.2.5-.2.7 0l2 2a.5.5 0 0 1-.7.7L10.5 3.71V6.5a.5.5 0 0 1-1 0V3.7L8.35 4.86a.5.5 0 1 1-.7-.7l2-2ZM10 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm5.85 1.35 2-2a.5.5 0 0 0 0-.7l-2-2a.5.5 0 0 0-.7.7l1.14 1.15H13.5a.5.5 0 0 0 0 1h2.8l-1.15 1.15a.5.5 0 0 0 .7.7Zm-5.5 5.5 2-2a.5.5 0 0 0-.7-.7l-1.15 1.14V13.5a.5.5 0 0 0-1 0v2.8l-1.15-1.15a.5.5 0 0 0-.7.7l2 2c.2.2.5.2.7 0Zm-8.2-7.5a.5.5 0 0 1 0-.7l2-2a.5.5 0 1 1 .7.7L3.71 9.5H6.5a.5.5 0 0 1 0 1H3.7l1.15 1.15a.5.5 0 0 1-.7.7l-2-2Z"]);
+const EyeTrackingOffFilled = /*#__PURE__*/createFluentIcon('EyeTrackingOffFilled', "1em", ["M2.41 3.12C2.15 3.52 2 4 2 4.5v3a.5.5 0 0 0 1 0v-3c0-.23.05-.45.15-.65L6.29 7a6.6 6.6 0 0 0-2.23 2.27v.01l.44.23-.45-.22a.5.5 0 0 0 .9.44v-.01a2.39 2.39 0 0 1 .25-.39 5.49 5.49 0 0 1 1.82-1.6l1.3 1.3a3 3 0 1 0 4.16 4.17l3.67 3.66c-.2.1-.42.15-.65.15h-3a.5.5 0 0 0 0 1h3c.5 0 .98-.15 1.38-.41l.27.26a.5.5 0 0 0 .7-.7l-.26-.27-.74-.73-3.93-3.94-3.63-3.63L8.01 7.3l-.78-.78-3.38-3.37-.73-.74-.27-.26a.5.5 0 1 0-.7.7l.26.27Zm15.57 12.73.02-.35v-3a.5.5 0 0 0-1 0v2.38l.98.97Zm-8.81-8.8A7 7 0 0 1 10 7a5.86 5.86 0 0 1 4.8 2.32 4.13 4.13 0 0 1 .24.39l.01.01a.5.5 0 0 0 .9-.44v-.01l-.01-.01a1.7 1.7 0 0 0-.08-.14l-.25-.38A6.85 6.85 0 0 0 10 6c-.63 0-1.2.07-1.7.18l.86.87Zm6.78 2.23-.06.03-.39.19.45-.22ZM5.12 3H7.5a.5.5 0 0 0 0-1h-3c-.12 0-.24 0-.35.02l.97.98ZM3 15.5c0 .83.67 1.5 1.5 1.5h3a.5.5 0 0 1 0 1h-3A2.5 2.5 0 0 1 2 15.5v-3a.5.5 0 0 1 1 0v3Zm14-11c0-.83-.67-1.5-1.5-1.5h-3a.5.5 0 0 1 0-1h3A2.5 2.5 0 0 1 18 4.5v3a.5.5 0 0 1-1 0v-3Z"]);
+const EyeTrackingOffRegular = /*#__PURE__*/createFluentIcon('EyeTrackingOffRegular', "1em", ["M2.41 3.12C2.15 3.52 2 4 2 4.5v3a.5.5 0 0 0 1 0v-3c0-.23.05-.45.15-.65L6.29 7a6.6 6.6 0 0 0-2.23 2.27v.01l.44.23-.45-.22a.5.5 0 0 0 .9.44v-.01a2.39 2.39 0 0 1 .25-.39 5.49 5.49 0 0 1 1.82-1.6l1.3 1.3a3 3 0 1 0 4.16 4.17l3.67 3.66c-.2.1-.42.15-.65.15h-3a.5.5 0 0 0 0 1h3c.5 0 .98-.15 1.38-.41l.27.26a.5.5 0 0 0 .7-.7l-.26-.27-.74-.73-3.93-3.94-3.63-3.63L8.01 7.3l-.78-.78-3.38-3.37-.73-.74-.27-.26a.5.5 0 1 0-.7.7l.26.27Zm9.34 9.34a2 2 0 1 1-2.71-2.71l2.71 2.71Zm6.23 3.4.02-.36v-3a.5.5 0 0 0-1 0v2.38l.98.97ZM9.17 7.04A7 7 0 0 1 10 7a5.86 5.86 0 0 1 4.8 2.32 4.13 4.13 0 0 1 .24.39l.01.01a.5.5 0 0 0 .9-.44v-.01l-.01-.01a1.7 1.7 0 0 0-.08-.14l-.25-.38A6.85 6.85 0 0 0 10 6c-.63 0-1.2.07-1.7.18l.86.87Zm6.78 2.23-.06.03-.39.19.45-.22ZM5.12 3H7.5a.5.5 0 0 0 0-1h-3c-.12 0-.24 0-.35.02l.97.98ZM4.5 17A1.5 1.5 0 0 1 3 15.5v-3a.5.5 0 0 0-1 0v3A2.5 2.5 0 0 0 4.5 18h3a.5.5 0 0 0 0-1h-3Zm11-14c.83 0 1.5.67 1.5 1.5v3a.5.5 0 0 0 1 0v-3A2.5 2.5 0 0 0 15.5 2h-3a.5.5 0 0 0 0 1h3Z"]);
 const FilterFilled = /*#__PURE__*/createFluentIcon('FilterFilled', "1em", ["M12.25 13.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5h4.5Zm2-4.25a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5h8.5Zm2-4.25a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1 0-1.5h12.5Z"]);
 const FilterRegular = /*#__PURE__*/createFluentIcon('FilterRegular', "1em", ["M7.5 13h5a.5.5 0 0 1 .09 1H7.5a.5.5 0 0 1-.09-1h5.09-5Zm-2-4h9a.5.5 0 0 1 .09 1H5.5a.5.5 0 0 1-.09-1h9.09-9Zm-2-4h13a.5.5 0 0 1 .09 1H3.5a.5.5 0 0 1-.09-1H16.5h-13Z"]);
 const FilterDismissFilled = /*#__PURE__*/createFluentIcon('FilterDismissFilled', "1em", ["M11.73 10.25A5.46 5.46 0 0 0 14 11c0 .41-.34.75-.75.75h-8.5a.75.75 0 0 1 0-1.5h6.98ZM9.03 6c.04.52.16 1.03.34 1.5H2.75a.75.75 0 0 1 0-1.5h6.27ZM12 15.25a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h4.5c.41 0 .75-.34.75-.75ZM14.5 10a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm1.85-6.35c.2.2.2.5 0 .7L15.21 5.5l1.14 1.15a.5.5 0 0 1-.7.7L14.5 6.21l-1.15 1.14a.5.5 0 0 1-.7-.7l1.14-1.15-1.14-1.15a.5.5 0 0 1 .7-.7l1.15 1.14 1.15-1.14c.2-.2.5-.2.7 0Z"]);
@@ -1004,6 +1007,8 @@ const GroupFilled = /*#__PURE__*/createFluentIcon('GroupFilled', "1em", ["M7 4.5
 const GroupRegular = /*#__PURE__*/createFluentIcon('GroupRegular', "1em", ["M7 4.5c0 .17-.02.34-.05.5H10a1 1 0 0 1 1 1v2h-1a2 2 0 0 0-2 2v1H6a1 1 0 0 1-1-1V6.95a2.51 2.51 0 0 1-1 0V10c0 1.1.9 2 2 2h2v2c0 1.1.9 2 2 2h3.05a2.51 2.51 0 0 1 0-1H10a1 1 0 0 1-1-1v-2h1a2 2 0 0 0 2-2V9h2a1 1 0 0 1 1 1v3.05a2.51 2.51 0 0 1 1 0V10a2 2 0 0 0-2-2h-2V6a2 2 0 0 0-2-2H6.95c.03.16.05.33.05.5ZM11 9v1a1 1 0 0 1-1 1H9v-1a1 1 0 0 1 1-1h1ZM6 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11 11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0-11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-11 11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"]);
 const GroupDismissFilled = /*#__PURE__*/createFluentIcon('GroupDismissFilled', "1em", ["M7 4.5c0 .36-.07.7-.2 1H10c.28 0 .5.22.5.5v2H10a2 2 0 0 0-2 2v.5H6a.5.5 0 0 1-.5-.5V6.8a2.5 2.5 0 0 1-1.5.15V10c0 1.1.9 2 2 2h2v2a2 2 0 0 0 1.16 1.81 5.51 5.51 0 0 1 .34-3.6V10c0-.28.22-.5.5-.5h2.2a5.48 5.48 0 0 1 3.61-.34A2 2 0 0 0 14 8h-2V6a2 2 0 0 0-2-2H6.95c.03.16.05.33.05.5Zm-1 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-11 11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm13-1a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-2.65-1.15a.5.5 0 0 0-.7-.7l-1.15 1.14-1.15-1.14a.5.5 0 0 0-.7.7l1.14 1.15-1.14 1.15a.5.5 0 0 0 .7.7l1.15-1.14 1.15 1.14a.5.5 0 0 0 .7-.7l-1.14-1.15 1.14-1.15Z"]);
 const GroupListRegular = /*#__PURE__*/createFluentIcon('GroupListRegular', "1em", ["M2.5 3a.5.5 0 0 0-.5.5v5c0 .28.22.5.5.5h2a.5.5 0 0 0 0-1H3V4h1.5a.5.5 0 0 0 0-1h-2Zm0 8a.5.5 0 0 0-.5.5v5c0 .28.22.5.5.5h2a.5.5 0 0 0 0-1H3v-4h1.5a.5.5 0 0 0 0-1h-2ZM6 4.5c0-.28.22-.5.5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5Zm.5 7.5a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11ZM6 7.5c0-.28.22-.5.5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5Zm.5 7.5a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11Z"]);
+const MoreVerticalFilled = /*#__PURE__*/createFluentIcon('MoreVerticalFilled', "1em", ["M10 6.5A1.75 1.75 0 1 1 10 3a1.75 1.75 0 0 1 0 3.5ZM10 17a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5Zm-1.75-7a1.75 1.75 0 1 0 3.5 0 1.75 1.75 0 0 0-3.5 0Z"]);
+const MoreVerticalRegular = /*#__PURE__*/createFluentIcon('MoreVerticalRegular', "1em", ["M10 6a1.25 1.25 0 1 1 0-2.5A1.25 1.25 0 0 1 10 6Zm0 5.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm-1.25 4a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Z"]);
 const NextRegular = /*#__PURE__*/createFluentIcon('NextRegular', "1em", ["M17 3.5a.5.5 0 0 0-1 0v13a.5.5 0 1 0 1 0v-13ZM3 4.25c0-1 1.12-1.6 1.95-1.04l8.5 5.71c.73.5.73 1.57 0 2.07l-8.5 5.8A1.25 1.25 0 0 1 3 15.75V4.25Zm1.39-.2a.25.25 0 0 0-.39.2v11.5c0 .2.23.32.4.2l8.49-5.78a.25.25 0 0 0 0-.42l-8.5-5.7Z"]);
 
 const PinFilled = /*#__PURE__*/createFluentIcon('PinFilled', "1em", ["M13.33 2.62a2 2 0 0 0-3.2.52L8.38 6.6a1.5 1.5 0 0 1-.78.72L4 8.75a1 1 0 0 0-.33 1.64l2.61 2.6L3 16.3v.7h.7L7 13.72l2.61 2.6a1 1 0 0 0 1.64-.33l1.43-3.59c.14-.34.4-.62.72-.78l3.46-1.73a2 2 0 0 0 .52-3.2l-4.05-4.06Z"]);
@@ -1017,6 +1022,7 @@ const SearchRegular = /*#__PURE__*/createFluentIcon('SearchRegular', "1em", ["M8
 
 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 TextClearFormattingFilled = /*#__PURE__*/createFluentIcon('TextClearFormattingFilled', "1em", ["M6 2c.2 0 .4.13.47.32l3.5 8.95a.5.5 0 0 1-.94.37L8.01 9H4l-1.04 2.68a.5.5 0 1 1-.94-.36l3.5-9A.5.5 0 0 1 6 2Zm0 1.88L4.4 8H7.6l-1.6-4.12ZM11.5 2c.28 0 .5.22.5.5v3.52a2.48 2.48 0 0 1 2.26-1.3c.89 0 1.6.34 2.15 1 .55.66.82 1.54.82 2.64l-.01.42-.05-.05a2.49 2.49 0 0 0-1.15-.65 2.86 2.86 0 0 0-.53-1.62c-.36-.47-.86-.7-1.48-.7-.6 0-1.09.24-1.47.72-.3.37-.47.83-.54 1.37v1.03c.05.43.18.8.37 1.12L11 11.37V2.5c0-.28.22-.5.5-.5Zm4.97 7.44 2.1 2.1a1.5 1.5 0 0 1-.01 2.12l-3.6 3.6-4.21-4.22 3.6-3.6a1.5 1.5 0 0 1 2.12 0Zm-2.22 8.52-4.21-4.21-.6.6a1.5 1.5 0 0 0 0 2.12l2.1 2.1c.3.3.71.45 1.12.43h4.09a.5.5 0 1 0 0-1h-2.53l.03-.04Z"]);
 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"]);
 
@@ -1143,7 +1149,9 @@ const useGridHeaderStyles = makeStyles({
 });
 
 const GridHeader = (props) => {
-    const { table, gridTitle, globalFilter, setGlobalFilter, dispatch, drawerState } = props;
+    const { table, gridTitle, globalFilter, setGlobalFilter } = props;
+    /* eslint-disable @typescript-eslint/no-non-null-assertion */
+    const { dispatchDrawerAction, drawerState } = table.options.meta;
     const styles = useGridHeaderStyles();
     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, { className: styles.popoverSurface, children: jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsx(MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
                                             if (column.id === 'select')
@@ -1156,8 +1164,8 @@ const GridHeader = (props) => {
                                                 return null;
                                             return (jsx(Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
                                         })] }) })] }), 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 })] })] }));
+                                dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ 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...", dispatch: dispatchDrawerAction, drawerState: drawerState })] })] }));
 };
 // A debounced input react component
 function DebouncedInput({ value: initialValue, onChange, debounce = 500, drawerState, dispatch, }) {
@@ -1171,8 +1179,8 @@ 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, { 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" });
+    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 === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label", children: jsx(Button, { appearance: "subtle", icon: (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
+                    dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: "TOGGLE_FILTER_DRAWER" });
                 } }) }) }));
 }
 
@@ -1234,9 +1242,41 @@ const getLeafColumns = (columns) => {
     }, []);
 };
 
+const TableActions = {
+    TOGGLE_FILTER_DRAWER: 'TOGGLE_FILTER_DRAWER',
+    TOGGLE_VIEW_DRAWER: 'TOGGLE_VIEW_DRAWER',
+    OPEN_FILTER_DRAWER: 'OPEN_FILTER_DRAWER',
+    OPEN_VIEW_DRAWER: 'OPEN_VIEW_DRAWER',
+    CLOSE_FILTER_DRAWER: 'CLOSE_FILTER_DRAWER',
+    CLOSE_VIEW_DRAWER: 'CLOSE_VIEW_DRAWER',
+};
+// write a reducer function to handle the state of the table
+function tableReducer(state, action) {
+    switch (action.type) {
+        case TableActions.TOGGLE_FILTER_DRAWER:
+            return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: !state.isFilterDrawerOpen });
+        case TableActions.TOGGLE_VIEW_DRAWER:
+            return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: !state.isViewsDrawerOpen });
+        case TableActions.OPEN_FILTER_DRAWER:
+            return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: true });
+        case TableActions.OPEN_VIEW_DRAWER:
+            return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: true });
+        case TableActions.CLOSE_FILTER_DRAWER:
+            return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: false });
+        case TableActions.CLOSE_VIEW_DRAWER:
+            return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: false });
+        default:
+            return state;
+    }
+}
+
 const useGridContainer = (props, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData } = props;
+    const [drawerState, dispatch] = React.useReducer(tableReducer, {
+        isFilterDrawerOpen: false,
+        isViewsDrawerOpen: false
+    });
     const [pagination, setPagination] = React.useState({
         pageSize: props.pageSize || 10,
         pageIndex: 0,
@@ -1327,7 +1367,22 @@ const useGridContainer = (props, ref) => {
             tableHeight: props.tableHeight || "650px",
             updateData: onUpdateData,
             onTableViewDelete: props.onTableViewDelete,
-            onTableViewSave: props.onTableViewSave
+            onTableViewSave: props.onTableViewSave,
+            drawerState: drawerState,
+            dispatchDrawerAction: dispatch,
+            // all the table state modifiers
+            setPagination,
+            setSorting,
+            setColumnFilters,
+            setGlobalFilter,
+            setGrouping,
+            setRowSelection,
+            setColumnVisibility,
+            setColumnOrder,
+            setExpanded,
+            setColumnPinning,
+            setColumnSizing,
+            setRowPinning
         }
     });
     const tableViews = React.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
@@ -1481,120 +1536,365 @@ const useTableHeaderStyles = makeStyles({
     },
 });
 
-const useCheckboxFilterStyles = makeStyles({
-    searchInput: {
-        width: '90%',
-        marginBottom: '8px',
-        marginLeft: '10px',
-        marginRight: '10px',
+const getHeaderCellPinningStyles = (column, isDragging, additionalStyles) => {
+    const isPinned = column.getIsPinned();
+    const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+    const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
+    const styles = Object.assign({ width: column.getSize(), boxShadow: isLastLeftPinnedColumn
+            ? '-4px 0 4px -4px gray inset'
+            : isFirstRightPinnedColumn
+                ? '4px 0 4px -4px gray inset'
+                : undefined, left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined, right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined, opacity: isDragging ? 0.8 : (isPinned ? 0.95 : 1), position: isPinned ? 'sticky' : 'relative', zIndex: isDragging ? 100 : (isPinned ? 99 : 1), backgroundColor: tokens.colorNeutralCardBackgroundSelected, whiteSpace: 'wrap' }, additionalStyles);
+    return styles;
+};
+const getBodyCellPinningStyles = (column, isDragging, additionalStyles) => {
+    const isPinned = column.getIsPinned();
+    const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+    const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
+    const styles = Object.assign({ width: column.getSize(), boxShadow: isLastLeftPinnedColumn
+            ? '-4px 0 4px -4px gray inset'
+            : isFirstRightPinnedColumn
+                ? '4px 0 4px -4px gray inset'
+                : undefined, left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined, right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined, position: isPinned ? 'sticky' : 'relative', opacity: isDragging ? 0.85 : (isPinned ? 0.95 : 1), zIndex: isDragging ? 100 : (isPinned ? 1 : 0) }, additionalStyles);
+    return styles;
+};
+
+const MoreIcon = bundleIcon$1(MoreVerticalFilled, MoreVerticalRegular);
+const SortAscIcon = bundleIcon$1(ArrowSortDown20Filled, ArrowSortDown20Regular);
+const SortDescIcon = bundleIcon$1(ArrowSortUp20Filled, ArrowSortUp20Regular);
+const PinIcon = bundleIcon$1(PinFilled, PinRegular);
+const HideColumnIcon = bundleIcon$1(EyeTrackingOffFilled, EyeTrackingOffRegular);
+function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }) {
+    var _a;
+    const { column } = header;
+    const { isDragging, attributes, listeners, setNodeRef, transform, transition, } = useSortable({
+        id: column.id
+    });
+    const dndStyle = {
+        transform: CSS.Translate.toString(transform),
+        transition
+    };
+    const styles = useTableHeaderStyles();
+    const isLeafHeaders = headerDepth === totalNumberOfHeaderDepth;
+    const headerCellCombinedStyles = getHeaderCellPinningStyles(column, isDragging, dndStyle);
+    if (header.isPlaceholder) {
+        return (jsx("th", { colSpan: header.colSpan, className: styles.tHeadCell, style: headerCellCombinedStyles, ref: setNodeRef, children: jsx(Show, { when: header.column.getCanResize(), children: jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }) }));
+    }
+    const columnName = flexRender(header.column.columnDef.header, header.getContext());
+    return (jsxs("th", { colSpan: header.colSpan, className: mergeClasses$1(styles.tHeadCell, isLeafHeaders && styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging), style: headerCellCombinedStyles, ref: setNodeRef, children: [jsx("div", Object.assign({ className: styles.tHeadCellDraggable }, attributes, listeners, { children: jsxs("div", { className: isLeafHeaders
+                        ? styles.tLeafHeadCellContent
+                        : styles.tNonLeafHeadCellContent, children: [jsx("div", { children: jsx(Show, { when: !header.isPlaceholder, children: jsxs(Button, { 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: columnName }), jsx(Show, { when: header.column.getIsGrouped(), children: jsx("strong", { children: jsx(GroupListRegular, {}) }) }), jsx(Show, { when: header.column.getIsFiltered(), children: jsx("strong", { children: jsx(FilterFilled, {}) }) }), jsx(Show, { when: header.column.getIsPinned(), children: jsx("strong", { children: jsx(PinRegular, {}) }) })] }) }) }), jsx(HeaderMenu, { header: header, table: table, hideMenu: hideMenu })] }) })), jsx(Show, { when: header.column.getCanResize(), children: jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }), jsx(Show, { when: !isLeafHeaders, children: jsx("div", { className: styles.tHeadNonLeafCellFakeBorder }) })] }));
+}
+function HeaderMenu(props) {
+    const { header, table, hideMenu } = props;
+    /* eslint-disable @typescript-eslint/no-non-null-assertion */
+    const { dispatchDrawerAction, drawerState } = table.options.meta;
+    const styles = useTableHeaderStyles();
+    if (hideMenu || header.isPlaceholder)
+        return (jsx(Fragment, { children: " " }));
+    const canHavePopOver = header.column.getCanSort() ||
+        header.column.getCanGroup() ||
+        header.column.getCanFilter();
+    if (!canHavePopOver)
+        return (jsx(Fragment, { children: " " }));
+    const columnName = flexRender(header.column.columnDef.header, header.getContext());
+    return (jsxs(Menu, { positioning: { align: "end" }, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(Tooltip, { relationship: "label", content: jsxs(Fragment, { children: ["More actions for ", columnName] }), children: jsx(MenuButton, { appearance: "subtle", "aria-label": "View Column Actions", icon: jsx(MoreIcon, {}) }) }) }), jsx(MenuPopover, { className: styles.tHeadMenuPopover, children: jsxs(MenuList, { children: [jsx(Show, { when: header.column.getCanSort(), children: jsxs(MenuGroup, { children: [jsx(MenuItem, { onClick: (e) => {
+                                            var _a;
+                                            (_a = header.column) === null || _a === void 0 ? void 0 : _a.clearSorting();
+                                        }, icon: jsx(ArrowSortFilled, {}), disabled: !header.column.getIsSorted(), children: "Clear Sorting" }), 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, { 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') }), jsx(Show, { when: header.column.getCanGroup(), children: jsxs(MenuGroup, { children: [!header.column.getIsGrouped() && (jsxs(MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupFilled, {}), children: ["Group Column (by ", columnName, ")"] })), header.column.getIsGrouped() && (jsxs(MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupDismissFilled, {}), children: ["Remove Grouping (on ", columnName, ")"] })), jsx(MenuDivider, {})] }, 'grouping-group') }), jsx(Show, { when: header.column.getCanPin(), children: jsxs(Menu, { children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsxs(MenuItem, { icon: jsx(PinIcon, {}), children: ["Pin Column (", columnName, ")"] }) }), jsx(MenuPopover, { children: jsxs(MenuList, { children: [jsx(MenuItem, { onClick: () => {
+                                                        var _a;
+                                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
+                                                    }, icon: jsx(PinOffRegular, {}), disabled: !(['left', 'right'].includes(header.column.getIsPinned())), children: "No Pin" }), 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: "Pin 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: "Pin Right" })] }) })] }) }), jsx(Show, { when: header.column.getCanHide(), children: jsxs(Menu, { children: [jsx(MenuList, { children: jsxs(MenuItem, { onClick: header.column.getToggleVisibilityHandler(), disabled: !header.column.getCanHide(), icon: jsx(HideColumnIcon, {}), children: ["Hide Column (", columnName, ")"] }) }), jsx(MenuDivider, {})] }) }), jsxs(Show, { when: header.column.getCanFilter(), children: [jsx(MenuDivider, {}), jsx(MenuGroup, { children: jsxs(MenuList, { children: [jsxs(Menu, { children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(MenuItem, { icon: jsx(ClearFilterIcon, {}), children: "Clear Filters" }) }), jsx(MenuPopover, { children: jsxs(MenuList, { children: [jsxs(MenuItem, { onClick: () => {
+                                                                        header.column.setFilterValue(undefined);
+                                                                    }, icon: jsx(TextClearFormattingFilled, {}), disabled: !header.column.getIsFiltered(), children: ["Clear for ", columnName] }), jsx(MenuItem, { onClick: () => {
+                                                                        table.resetColumnFilters();
+                                                                    }, icon: jsx(ClearFilterIcon, {}), children: "Clear for All Columns" })] }) })] }), jsx(MenuItem, { icon: (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), onClick: () => {
+                                                    if (drawerState.isFilterDrawerOpen) {
+                                                        dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ type: "CLOSE_FILTER_DRAWER" });
+                                                    }
+                                                    else {
+                                                        dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ type: "OPEN_FILTER_DRAWER" });
+                                                    }
+                                                }, children: jsx(Show, { when: drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen, fallback: jsx(Fragment, { children: "Open Column Filter" }), children: "Close Column Filter" }) })] }) }, 'filter-group')] })] }) })] }));
+}
+
+function HeaderRow(props) {
+    const styles = useTableHeaderStyles();
+    const { table, headerGroup, rowSelectionMode, headerGroupsLength } = props;
+    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", { 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));
+}
+
+function TableHeader(props) {
+    const styles = useTableHeaderStyles();
+    const { table, headerGroups, rowSelectionMode } = props;
+    return (jsx("thead", { className: styles.tHead, style: { zIndex: 99 }, 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({
+    invertedWrapper: {
+        backgroundColor: tokens.colorNeutralBackground1,
     },
-    searchContainer: Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, shorthands.overflow('auto', 'auto')), shorthands.padding('0px', "0px", "2px", '0px')), { '::-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',
-        } }),
+    row: Object.assign(Object.assign({ alignItems: "center", display: "grid", paddingBottom: "10px", position: "relative" }, shorthands.gap("10px")), { gridTemplateColumns: "min-content 20% 15% 30% 29%" }),
 });
-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", { 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 Loading = (props) => {
+    const { numberOfItems = 16, numberOfColumns = 5 } = props;
+    const styles = useLoadingStyles();
+    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))) }) }));
 };
 
-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 useNoItemGridStyles = makeStyles({
+    wrapper: {
+        backgroundColor: tokens.colorNeutralBackground1,
+        display: "flex",
+        flexWrap: "wrap",
+        alignContent: "center",
+        justifyContent: "center",
+        minHeight: "300px",
+    }
 });
-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([]);
+
+const NoItemGrid = ({ message }) => {
+    const styles = useNoItemGridStyles();
+    return (jsx("div", { 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", { 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({
+    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,
+        } }),
+    tBodyCell: Object.assign(Object.assign({ backgroundColor: "transparent" }, shorthands.padding("2px", "4px")), { minHeight: "35px", height: "35px" }),
+    tBodyRowPinnedCell: {
+        backgroundColor: tokens.colorPaletteYellowBackground2,
+        ":hover": {
+            backgroundColor: tokens.colorPaletteMarigoldBackground2,
+        }
+    },
+    tBodyPinnedCell: {
+        backgroundColor: tokens.colorNeutralBackground3,
+        ":hover": {
+            backgroundColor: tokens.colorNeutralBackground3Hover,
+        }
+    },
+    tBodySelectedCell: {
+        backgroundColor: tokens.colorBrandBackground2,
+        ":hover": {
+            backgroundColor: tokens.colorBrandBackground2Hover,
+        }
+    },
+});
+
+function TableCell({ cell, row }) {
+    var _a;
+    const styles = useTableBodyStyles();
+    const isSelected = row.getIsSelected();
+    const isRowPinned = row.getIsPinned();
+    const isCellPinned = cell.column.getIsPinned();
+    const cellClassNames = mergeClasses$1(styles.tBodyCell, isCellPinned && styles.tBodyPinnedCell, isSelected && styles.tBodySelectedCell, isRowPinned && styles.tBodyRowPinnedCell);
+    const { isDragging, transition, setNodeRef, transform } = useSortable({
+        id: cell.column.id,
+    });
+    const tdStyle = {
+        transform: CSS.Translate.toString(transform),
+        transition
+    };
+    const styleStyles = getBodyCellPinningStyles(cell.column, isDragging, tdStyle);
+    if (cell.getIsPlaceholder()) {
+        return jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef }, cell.id);
+    }
+    if (cell.getIsGrouped()) {
+        return (jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef, 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));
+    }
+    if (cell.getIsAggregated()) {
+        return (jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef, 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: styleStyles, className: cellClassNames, ref: setNodeRef, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+}
+
+function TableRow({ row, rowSelectionMode, style }) {
+    const styles = useTableBodyStyles();
+    return (jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
+            ? styles.tBodySelectedRow
+            : styles.tBodyRow, style: style, children: [jsxs(Switch, { when: rowSelectionMode, children: [jsx(Case, { value: 'multiple', children: 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" }) }) }), jsx(Case, { value: 'single', children: 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 PinnedRow({ row, rowSelectionMode, style, bottomRowLength }) {
+    const styles = useTableBodyStyles();
+    const pinnedRowRawStyle = Object.assign({ backgroundColor: tokens.colorPaletteYellowBackground2, position: 'sticky', top: row.getIsPinned() === 'top' ? `${row.getPinnedIndex() * 35 + 48}px` : undefined, bottom: row.getIsPinned() === 'bottom' ? `${((bottomRowLength || 0) - 1 - row.getPinnedIndex()) * 35}px` : undefined }, style);
+    return (jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
+            ? styles.tBodySelectedRow
+            : styles.tBodyRow, style: pinnedRowRawStyle, children: [jsxs(Switch, { when: rowSelectionMode, children: [jsx(Case, { value: 'multiple', children: 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" }) }) }), jsx(Case, { value: 'single', children: 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 => {
+                return (jsx(TableCell, { cell: cell, row: row }, cell.id));
+            })] }, row.id));
+}
+
+function TableBody(props) {
+    var _a, _b, _c;
+    const styles = useTableBodyStyles();
+    const { table, tableContainerRef } = props;
+    const rowSelectionMode = (_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.rowSelectionMode;
+    let rows = [];
+    let topRows = [];
+    let bottomRows = [];
+    try {
+        rows = table.getCenterRows();
+        topRows = table.getTopRows();
+        bottomRows = table.getBottomRows();
+    }
+    catch (error) {
+        rows = [];
+        topRows = [];
+        bottomRows = [];
+    }
+    const rowVirtualizer = useVirtual({
+        parentRef: tableContainerRef,
+        size: rows.length,
+        overscan: 10,
+    });
+    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;
+    return (jsxs(Fragment, { children: [jsx(Show, { when: (topRows === null || topRows === void 0 ? void 0 : topRows.length) > 0, children: jsx("thead", { style: {
+                        position: "sticky",
+                        top: 0,
+                        zIndex: 99
+                    }, children: jsx(For, { each: topRows, children: (row, index) => (jsx(PinnedRow, { row: row, rowSelectionMode: rowSelectionMode, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length }, row.id)) }) }) }), jsxs("tbody", { className: styles.tBody, children: [paddingTop > 0 && (jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsx("td", { style: { height: `${paddingTop}px` } }) })), jsx(For, { each: virtualRows || [], children: (virtualRow) => {
+                            const row = rows[virtualRow.index];
+                            return (jsx(TableRow, { row: row, rowSelectionMode: rowSelectionMode }, row.id));
+                        } }), paddingBottom > 0 && (jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsx("td", { style: { height: `${paddingBottom}px` } }) }))] }), jsx(Show, { when: rowSelectionMode === 'multiple' && (rows === null || rows === void 0 ? void 0 : rows.length) > 0, children: jsx("tfoot", { style: {
+                        position: "sticky",
+                        bottom: 0,
+                        zIndex: 99
+                    }, children: jsxs("tr", { style: { backgroundColor: "white" }, 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", { colSpan: 20, children: [table.getIsAllPageRowsSelected() ? 'Unselect' : 'Select', " All Current Page Rows (", table.getRowModel().rows.length, ")"] })] }) }) }), jsx(Show, { when: (bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length) > 0, children: jsx("tfoot", { style: {
+                        position: "sticky",
+                        bottom: 0,
+                        zIndex: 99
+                    }, children: jsx(For, { each: bottomRows, children: (row) => (jsx(PinnedRow, { row: row, rowSelectionMode: rowSelectionMode, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length }, row.id)) }) }) })] }));
+}
+
+const TableContainer = (props) => {
+    var _a, _b;
+    const styles = useTableStaticStyles();
+    const { table } = props;
+    const { tableHeight, rowSelectionMode } = table.options.meta || {};
+    const tableContainerRef = React.useRef(null);
+    const { rows: { length: itemLength } } = table.getRowModel();
+    const headerGroups = table.getHeaderGroups();
+    // utilities
+    const isLoading = props.isLoading && itemLength === 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 && itemLength === 0;
+    return (jsxs("div", { ref: tableContainerRef, className: styles.tableContainer, style: { height: tableHeight }, children: [jsxs("table", { className: styles.table, "aria-label": "Data Grid", style: { width: table.getTotalSize(), minWidth: "100%" }, children: [jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsx(TableBody, { table: table, tableContainerRef: tableContainerRef })] }), jsxs(Switch, { when: true, children: [jsx(Case, { value: isLoading, children: jsx(Loading, {}) }), jsx(Case, { value: noItems, children: jsx(NoItemGrid, { message: props.noItemPage }) }), jsx(Case, { value: noSearchResult, children: jsx(NoSearchResult, { message: props.noFilterMatchPage }) })] })] }));
+};
+
+const useCheckboxFilterStyles = makeStyles({
+    searchInput: {
+        width: '90%',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
+    },
+    searchContainer: Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, shorthands.overflow('auto', 'auto')), shorthands.padding('0px', "0px", "2px", '0px')), { '::-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))
@@ -1623,42 +1923,128 @@ const FilterSelectRadio = ({ column, table, }) => {
     const paddingBottom = virtualRows.length > 0
         ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
         : 0;
-    const 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", { 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([]);
+    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", { 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([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` } }))] })] }));
+                            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 useNumberRangeFilterStyles$2 = makeStyles({
+const useRadioFilterStyles = makeStyles({
     searchInput: {
-        width: '100%',
-    },
-    searchInputField: {
-        width: '100%',
-        flexGrow: 1,
-    },
-    searchContainer: {
-        display: 'flex',
+        width: '90%',
         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);
+    },
+    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", { 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) => {
+                                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) => {
@@ -1707,476 +2093,133 @@ const FilterDateRange = (props) => {
             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", { 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({
-    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", { 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", { 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 }) }) }));
-};
-
-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 = ({ drawerState, dispatch, table }) => {
-    const headerGroups = table.getHeaderGroups();
-    const styles = useFilterDrawerStyles$1();
-    const resetAllFilters = React.useCallback(() => {
-        table.setGlobalFilter('');
-        table.resetColumnFilters();
-    }, [table]);
-    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: jsx(Accordion, { multiple: true, collapsible: true, 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(Show, { when: header.column.getCanFilter(), children: jsxs(AccordionItem, { value: header.column.id, children: [jsx(AccordionHeader, { expandIconPosition: 'end', children: jsxs(Caption1Stronger, { children: ["Filter by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }) }), jsx(AccordionPanel, { children: jsx(Filter, { column: header.column, table: table }) })] }, header.column.id) }, header.column.id));
-                        });
-                    }) }) }), jsx(DrawerFooter, { children: jsx(Button, { icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters, style: { width: "100%" }, children: "Clear All Filters" }) })] }));
-};
-
-const getHeaderCellPinningStyles = (column) => {
-    const isPinned = column.getIsPinned();
-    const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
-    const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
-    const styles = {
-        boxShadow: isLastLeftPinnedColumn
-            ? '-4px 0 4px -4px gray inset'
-            : isFirstRightPinnedColumn
-                ? '4px 0 4px -4px gray inset'
-                : undefined,
-        left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
-        right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
-        opacity: isPinned ? 0.95 : 1,
-        position: isPinned ? 'sticky' : 'relative',
-        width: column.getSize(),
-        zIndex: isPinned ? 99 : 1,
-        backgroundColor: tokens.colorNeutralCardBackgroundSelected,
-    };
-    return styles;
-};
-const getBodyCellPinningStyles = (column) => {
-    const isPinned = column.getIsPinned();
-    const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
-    const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
-    const styles = {
-        boxShadow: isLastLeftPinnedColumn
-            ? '-4px 0 4px -4px gray inset'
-            : isFirstRightPinnedColumn
-                ? '4px 0 4px -4px gray inset'
-                : undefined,
-        left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
-        right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
-        opacity: isPinned ? 0.95 : 1,
-        position: isPinned ? 'sticky' : 'relative',
-        width: column.getSize(),
-        zIndex: isPinned ? 1 : 0,
-    };
-    return styles;
-};
-
-const SortAscIcon = bundleIcon$1(ArrowSortDown20Filled, ArrowSortDown20Regular);
-const SortDescIcon = bundleIcon$1(ArrowSortUp20Filled, ArrowSortUp20Regular);
-const PinIcon = bundleIcon$1(PinFilled, PinRegular);
-function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }) {
-    var _a;
-    const { column } = header;
-    const { isDragging, attributes, listeners, setNodeRef, transform, transition, } = useSortable({
-        id: column.id
-    });
-    const dndStyle = {
-        width: header.column.getSize(),
-        opacity: isDragging ? 0.8 : 1,
-        // position: isDragging ? 'relative' : "sticky",
-        transform: CSS.Translate.toString(transform), // translate instead of transform to avoid squishing
-        // transition: 'width transform 0.2s ease-in-out',
-        whiteSpace: 'wrap',
-        zIndex: isDragging ? 100 : 99,
-        transition
-    };
-    const styles = useTableHeaderStyles();
-    const isLeafHeaders = headerDepth === totalNumberOfHeaderDepth;
-    if (header.isPlaceholder) {
-        return (jsx("th", { colSpan: header.colSpan, className: styles.tHeadCell, style: Object.assign(Object.assign({}, dndStyle), getHeaderCellPinningStyles(column)), ref: setNodeRef, children: jsx(Show, { when: header.column.getCanResize(), children: jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }) }));
-    }
-    return (jsxs("th", { colSpan: header.colSpan, className: mergeClasses$1(styles.tHeadCell, isLeafHeaders && styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging), style: Object.assign(Object.assign({}, dndStyle), getHeaderCellPinningStyles(column)), ref: setNodeRef, children: [jsx("div", Object.assign({ className: styles.tHeadCellDraggable }, attributes, listeners, { children: jsxs("div", { className: isLeafHeaders
-                        ? styles.tLeafHeadCellContent
-                        : styles.tNonLeafHeadCellContent, children: [jsx("div", { children: jsx(Show, { when: !header.isPlaceholder, children: jsxs(Button, { 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()) }), jsx(Show, { when: header.column.getIsGrouped(), children: jsx("strong", { children: jsx(GroupListRegular, {}) }) }), jsx(Show, { when: header.column.getIsFiltered(), children: jsx("strong", { children: jsx(FilterFilled, {}) }) }), jsx(Show, { when: header.column.getIsPinned(), children: jsx("strong", { children: jsx(PinRegular, {}) }) })] }) }) }), jsx(HeaderMenu, { header: header, table: table, hideMenu: hideMenu })] }) })), jsx(Show, { when: header.column.getCanResize(), children: jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }), jsx(Show, { when: !isLeafHeaders, children: jsx("div", { className: styles.tHeadNonLeafCellFakeBorder }) })] }));
-}
-function HeaderMenu(props) {
-    const { header, table, hideMenu } = props;
-    const styles = useTableHeaderStyles();
-    if (hideMenu || header.isPlaceholder)
-        return (jsx(Fragment, { children: " " }));
-    const canHavePopOver = header.column.getCanSort() ||
-        header.column.getCanGroup() ||
-        header.column.getCanFilter();
-    if (!canHavePopOver)
-        return (jsx(Fragment, { children: " " }));
-    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: [jsx(Show, { when: header.column.getCanSort(), children: jsxs(MenuGroup, { children: [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, { 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') }), jsx(Show, { when: header.column.getCanGroup(), children: jsxs(MenuGroup, { children: [!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') }), jsxs(Show, { when: header.column.getCanPin(), children: [jsxs(Menu, { children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(MenuItem, { icon: jsx(PinIcon, {}), children: "Pin Column" }) }), jsx(MenuPopover, { children: jsxs(MenuList, { children: [jsx(Show, { when: ['left', 'right'].includes(header.column.getIsPinned()), children: jsx(MenuItem, { onClick: () => {
-                                                                var _a;
-                                                                (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
-                                                            }, icon: jsx(PinOffRegular, {}), children: "No Pin" }) }), 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: "Pin 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: "Pin Right" })] }) })] }), jsx(MenuDivider, {})] }), jsx(Show, { when: header.column.getCanFilter(), children: 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", { 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", { 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));
-}
-
-function TableHeader(props) {
-    const styles = useTableHeaderStyles();
-    const { table, headerGroups, rowSelectionMode } = props;
-    return (jsx("thead", { className: styles.tHead, style: { zIndex: 99 }, 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({
-    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", { 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))) }) }));
-};
-
-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", { 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", { 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({
-    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,
-        } }),
-    tBodyCell: Object.assign(Object.assign({ backgroundColor: "transparent" }, shorthands.padding("2px", "4px")), { minHeight: "35px", height: "35px" }),
-    tBodyRowPinnedCell: {
-        backgroundColor: tokens.colorPaletteYellowBackground2,
-        ":hover": {
-            backgroundColor: tokens.colorPaletteMarigoldBackground2,
-        }
-    },
-    tBodyPinnedCell: {
-        backgroundColor: tokens.colorNeutralBackground3,
-        ":hover": {
-            backgroundColor: tokens.colorNeutralBackground3Hover,
-        }
+        column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], date]);
+    };
+    const styles = useNumberRangeFilterStyles$1();
+    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({
+    searchInput: {
+        width: '100%',
     },
-    tBodySelectedCell: {
-        backgroundColor: tokens.colorBrandBackground2,
-        ":hover": {
-            backgroundColor: tokens.colorBrandBackground2Hover,
-        }
+    searchInputField: {
+        width: '100%',
+        flexGrow: 1,
+    },
+    searchContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: '8px',
+        marginLeft: '10px',
+        marginRight: '10px',
     },
 });
-
-function TableCell({ cell, row }) {
-    var _a;
-    const styles = useTableBodyStyles();
-    const isSelected = row.getIsSelected();
-    const isRowPinned = row.getIsPinned();
-    const isCellPinned = cell.column.getIsPinned();
-    const { isDragging, transition, setNodeRef, transform } = useSortable({
-        id: cell.column.id,
-    });
-    const tdStyle = {
-        width: cell.column.getSize(),
-        opacity: isDragging ? "0.8" : "1",
-        transform: CSS.Translate.toString(transform),
-        // transition: 'width transform 0.2s ease-in-out', 
-        zIndex: isDragging ? 1 : 0,
-        transition
+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 cellClassNames = mergeClasses$1(styles.tBodyCell, isCellPinned && styles.tBodyPinnedCell, isSelected && styles.tBodySelectedCell, isRowPinned && styles.tBodyRowPinnedCell);
-    const styleStyles = Object.assign(Object.assign({}, tdStyle), getBodyCellPinningStyles(cell.column));
-    if (cell.getIsPlaceholder()) {
-        return jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef }, cell.id);
-    }
-    if (cell.getIsGrouped()) {
-        return (jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef, 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));
-    }
-    if (cell.getIsAggregated()) {
-        return (jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef, 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: styleStyles, className: cellClassNames, ref: setNodeRef, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
-}
-
-function TableRow({ row, rowSelectionMode, style }) {
-    const styles = useTableBodyStyles();
-    return (jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
-            ? styles.tBodySelectedRow
-            : styles.tBodyRow, style: style, children: [jsxs(Switch, { when: rowSelectionMode, children: [jsx(Case, { value: 'multiple', children: 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" }) }) }), jsx(Case, { value: 'single', children: 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 PinnedRow({ row, rowSelectionMode, style, bottomRowLength }) {
-    const styles = useTableBodyStyles();
-    return (jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
-            ? styles.tBodySelectedRow
-            : styles.tBodyRow, style: {
-            backgroundColor: 'goldenrod',
-            position: 'sticky',
-            top: row.getIsPinned() === 'top'
-                ? `${row.getPinnedIndex() * 35 + 48}px`
-                : undefined,
-            bottom: row.getIsPinned() === 'bottom'
-                ? `${((bottomRowLength || 0) - 1 - row.getPinnedIndex()) * 35}px`
-                : undefined
-        }, children: [jsxs(Switch, { when: rowSelectionMode, children: [jsx(Case, { value: 'multiple', children: 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" }) }) }), jsx(Case, { value: 'single', children: 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 => {
-                return (jsx(TableCell, { cell: cell, row: row }, cell.id));
-            })] }, row.id));
-}
+    const styles = useNumberRangeFilterStyles();
+    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 }) }));
+};
 
-function TableBody(props) {
-    var _a, _b, _c;
-    const styles = useTableBodyStyles();
-    const { table, tableContainerRef } = props;
-    const rowSelectionMode = (_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.rowSelectionMode;
-    let rows = [];
-    let topRows = [];
-    let bottomRows = [];
-    try {
-        rows = table.getCenterRows();
-        topRows = table.getTopRows();
-        bottomRows = table.getBottomRows();
-    }
-    catch (error) {
-        rows = [];
-        topRows = [];
-        bottomRows = [];
+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;
+        }
     }
-    const rowVirtualizer = useVirtual({
-        parentRef: tableContainerRef,
-        size: rows.length,
-        overscan: 10,
-    });
-    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;
-    return (jsxs(Fragment, { children: [jsx(Show, { when: (topRows === null || topRows === void 0 ? void 0 : topRows.length) > 0, children: jsx("thead", { style: {
-                        position: "sticky",
-                        top: 0,
-                        zIndex: 99
-                    }, children: jsx(For, { each: topRows, children: (row, index) => (jsx(PinnedRow, { row: row, rowSelectionMode: rowSelectionMode, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length }, row.id)) }) }) }), jsxs("tbody", { className: styles.tBody, children: [paddingTop > 0 && (jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsx("td", { style: { height: `${paddingTop}px` } }) })), jsx(For, { each: virtualRows || [], children: (virtualRow) => {
-                            const row = rows[virtualRow.index];
-                            return (jsx(TableRow, { row: row, rowSelectionMode: rowSelectionMode }, row.id));
-                        } }), paddingBottom > 0 && (jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsx("td", { style: { height: `${paddingBottom}px` } }) }))] }), jsx(Show, { when: rowSelectionMode === 'multiple' && (rows === null || rows === void 0 ? void 0 : rows.length) > 0, children: jsx("tfoot", { style: {
-                        position: "sticky",
-                        bottom: 0,
-                        zIndex: 99
-                    }, children: jsxs("tr", { style: { backgroundColor: "white" }, 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", { colSpan: 20, children: [table.getIsAllPageRowsSelected() ? 'Unselect' : 'Select', " All Current Page Rows (", table.getRowModel().rows.length, ")"] })] }) }) }), jsx(Show, { when: (bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length) > 0, children: jsx("tfoot", { style: {
-                        position: "sticky",
-                        bottom: 0,
-                        zIndex: 99
-                    }, children: jsx(For, { each: bottomRows, children: (row) => (jsx(PinnedRow, { row: row, rowSelectionMode: rowSelectionMode, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length }, row.id)) }) }) })] }));
-}
+    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 }) }) }));
+};
 
-const TableContainer = (props) => {
-    var _a, _b;
-    const styles = useTableStaticStyles();
-    const { table } = props;
-    const { tableHeight, rowSelectionMode } = table.options.meta || {};
-    const tableContainerRef = React.useRef(null);
-    const { rows: { length: itemLength } } = table.getRowModel();
+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 = ({ table }) => {
     const headerGroups = table.getHeaderGroups();
-    // utilities
-    const isLoading = props.isLoading && itemLength === 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 && itemLength === 0;
-    return (jsxs("div", { ref: tableContainerRef, className: styles.tableContainer, style: { height: tableHeight }, children: [jsxs("table", { className: styles.table, "aria-label": "Data Grid", style: { width: table.getTotalSize(), minWidth: "100%" }, children: [jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsx(TableBody, { table: table, tableContainerRef: tableContainerRef })] }), jsxs(Switch, { when: true, children: [jsx(Case, { value: isLoading, children: jsx(Loading, {}) }), jsx(Case, { value: noItems, children: jsx(NoItemGrid, { message: props.noItemPage }) }), jsx(Case, { value: noSearchResult, children: jsx(NoSearchResult, { message: props.noFilterMatchPage }) })] })] }));
+    const styles = useFilterDrawerStyles$1();
+    const resetAllFilters = React.useCallback(() => {
+        table.setGlobalFilter('');
+        table.resetColumnFilters();
+    }, [table]);
+    /* eslint-disable @typescript-eslint/no-non-null-assertion */
+    const { dispatchDrawerAction, drawerState } = table.options.meta;
+    return (jsxs(InlineDrawer, { position: "end", open: drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen, separator: true, children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, { action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ type: "CLOSE_FILTER_DRAWER" }) }), children: "Column Filters" }) }), jsx(DrawerBody, { className: styles.drawerBody, children: jsx(Accordion, { multiple: true, collapsible: true, 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(Show, { when: header.column.getCanFilter(), children: jsxs(AccordionItem, { value: header.column.id, children: [jsx(AccordionHeader, { expandIconPosition: 'end', children: jsxs(Caption1Stronger, { children: ["Filter by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }) }), jsx(AccordionPanel, { children: jsx(Filter, { column: header.column, table: table }) })] }, header.column.id) }, header.column.id));
+                        });
+                    }) }) }), jsx(DrawerFooter, { children: jsx(Button, { icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters, style: { width: "100%" }, children: "Clear All Filters" }) })] }));
 };
 
 const ViewSaveForm = (props) => {
@@ -2238,14 +2281,16 @@ const useFilterDrawerStyles = makeStyles({
         } }),
 });
 const ViewsDrawer = (props) => {
-    const { table, drawerState, dispatch, tableViews, applyTableState, resetToGridDefaultView } = props;
+    const { table, tableViews, applyTableState, resetToGridDefaultView } = props;
+    /* eslint-disable @typescript-eslint/no-non-null-assertion */
+    const { dispatchDrawerAction, drawerState } = table.options.meta;
     const { onTableViewDelete, onTableViewSave } = table.options.meta || {};
     const [checkedValues, setCheckedValues] = React.useState({ font: ["calibri"] });
     const onChange = (e, { name, checkedItems }) => {
         setCheckedValues((s) => (Object.assign(Object.assign({}, s), { [name]: checkedItems })));
     };
     const styles = useFilterDrawerStyles();
-    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(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: () => dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ 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',
@@ -2255,41 +2300,9 @@ const ViewsDrawer = (props) => {
                             })] })] }), jsx(DrawerFooter, { children: jsxs(MenuList, { children: [jsx(MenuDivider, {}), jsx(MenuItem, { icon: jsx(ClearFilterIcon, {}), onClick: resetToGridDefaultView, children: "Reset to Default View" })] }) })] }));
 };
 
-const TableActions = {
-    TOGGLE_FILTER_DRAWER: 'TOGGLE_FILTER_DRAWER',
-    TOGGLE_VIEW_DRAWER: 'TOGGLE_VIEW_DRAWER',
-    OPEN_FILTER_DRAWER: 'OPEN_FILTER_DRAWER',
-    OPEN_VIEW_DRAWER: 'OPEN_VIEW_DRAWER',
-    CLOSE_FILTER_DRAWER: 'CLOSE_FILTER_DRAWER',
-    CLOSE_VIEW_DRAWER: 'CLOSE_VIEW_DRAWER',
-};
-// write a reducer function to handle the state of the table
-function tableReducer(state, action) {
-    switch (action.type) {
-        case TableActions.TOGGLE_FILTER_DRAWER:
-            return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: !state.isFilterDrawerOpen });
-        case TableActions.TOGGLE_VIEW_DRAWER:
-            return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: !state.isViewsDrawerOpen });
-        case TableActions.OPEN_FILTER_DRAWER:
-            return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: true });
-        case TableActions.OPEN_VIEW_DRAWER:
-            return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: true });
-        case TableActions.CLOSE_FILTER_DRAWER:
-            return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: false });
-        case TableActions.CLOSE_VIEW_DRAWER:
-            return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: false });
-        default:
-            return state;
-    }
-}
-
 function AdvancedTable(props, ref) {
     useStaticStyles();
     const { table, globalFilter, headerMenu, tableViews, setGlobalFilter, resetToDefaultView, applyTableState } = useGridContainer(props, ref);
-    const [drawerState, dispatch] = React.useReducer(tableReducer, {
-        isFilterDrawerOpen: false,
-        isViewsDrawerOpen: false
-    });
     const { getState, setColumnOrder } = table;
     const { columnOrder } = getState();
     function handleDragEnd(event) {
@@ -2304,14 +2317,14 @@ function AdvancedTable(props, ref) {
     }
     const pointerSensor = useSensor(PointerSensor, {
         activationConstraint: {
-            distance: 0.01
+            distance: 0.0001
         }
     });
     const mouseSensor = useSensor(MouseSensor);
     const touchSensor = useSensor(TouchSensor);
     const keyboardSensor = useSensor(KeyboardSensor);
     const sensors = useSensors(mouseSensor, touchSensor, keyboardSensor, pointerSensor);
-    return (jsx(DndContext, { collisionDetection: closestCenter, modifiers: [restrictToHorizontalAxis], onDragEnd: handleDragEnd, sensors: sensors, children: jsxs(SortableContext, { items: columnOrder, strategy: horizontalListSortingStrategy, children: [jsx(Show, { when: !props.disableTableHeader, 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, 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 })] }), jsx(Pagination, { table: table })] }) }));
+    return (jsx(DndContext, { collisionDetection: closestCenter, modifiers: [restrictToHorizontalAxis], onDragEnd: handleDragEnd, sensors: sensors, children: jsxs(SortableContext, { items: columnOrder, strategy: horizontalListSortingStrategy, children: [jsx(Show, { when: !props.disableTableHeader, children: jsx(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, applyTableState: applyTableState }) }), jsxs("div", { style: { display: 'flex' }, children: [jsx(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsx(FilterDrawer, { table: table }), jsx(ViewsDrawer, { table: table, tableViews: tableViews, applyTableState: applyTableState, resetToGridDefaultView: resetToDefaultView })] }), jsx(Pagination, { table: table })] }) }));
 }
 const ForwardedAdvancedTable = React.forwardRef(AdvancedTable);