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

package/index.esm.js

@@ -1,13 +1,16 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { useDrop, useDrag, DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Checkbox, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, 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, 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 { 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 { useSensor, PointerSensor, MouseSensor, TouchSensor, KeyboardSensor, useSensors, DndContext, closestCenter } from '@dnd-kit/core';
+import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
 
 const useStaticStyles = makeStaticStyles({
     "*": {
@@ -15,9 +18,11 @@ const useStaticStyles = makeStaticStyles({
     },
 });
 const useTableStaticStyles = makeStyles({
-    tableContainer: Object.assign(Object.assign({ height: "650px", width: "100%" }, shorthands.overflow("hidden", "auto")), { 
+    tableContainer: Object.assign(Object.assign({ 
+        // height: "650px",
+        width: "100%" }, shorthands.overflow("hidden", "auto")), { 
         /* width */
-        ":hover": Object.assign({}, shorthands.overflow("auto", "auto")), "::-webkit-scrollbar": Object.assign({ width: "6px", height: "4px" }, shorthands.borderRadius("50%")), 
+        ":hover": Object.assign({}, shorthands.overflow("auto", "auto")), "::-webkit-scrollbar": Object.assign({ width: "8px", height: "4px" }, shorthands.borderRadius("50%")), 
         /* Track */
         "::-webkit-scrollbar-track": {
             "background-color": "#f1f1f1",
@@ -1001,6 +1006,7 @@ const GroupDismissFilled = /*#__PURE__*/createFluentIcon('GroupDismissFilled', "
 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 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"]);
 const PinRegular = /*#__PURE__*/createFluentIcon('PinRegular', "1em", ["M10.12 3.14a2 2 0 0 1 3.2-.52l4.06 4.05a2 2 0 0 1-.52 3.2l-3.46 1.74a1.5 1.5 0 0 0-.72.78L11.25 16a1 1 0 0 1-1.64.33L7 13.7 3.7 17H3v-.7L6.3 13l-2.62-2.61a1 1 0 0 1 .34-1.64L7.6 7.32c.34-.14.62-.4.78-.72l1.73-3.46Zm2.5.18a1 1 0 0 0-1.6.26L9.29 7.04a2.5 2.5 0 0 1-1.31 1.2L4.39 9.69l5.93 5.93 1.43-3.59a2.5 2.5 0 0 1 1.2-1.3l3.46-1.74a1 1 0 0 0 .26-1.6l-4.05-4.06Z"]);
 const PinOffRegular = /*#__PURE__*/createFluentIcon('PinOffRegular', "1em", ["M2.85 2.15a.5.5 0 1 0-.7.7L6.9 7.6 4.02 8.75a1 1 0 0 0-.34 1.64L6.3 13 3 16.3v.7h.7L7 13.7l2.61 2.62a1 1 0 0 0 1.64-.34l1.15-2.88 4.75 4.75a.5.5 0 0 0 .7-.7l-15-15Zm8.78 10.18-1.31 3.28-5.93-5.93 3.28-1.3 3.96 3.95Zm1.33-1.62-.08.04.74.75 3.24-1.62a2 2 0 0 0 .52-3.2l-4.05-4.06a2 2 0 0 0-3.2.52L8.5 6.38l.75.74.04-.08 1.73-3.45a1 1 0 0 1 1.6-.26l4.05 4.05a1 1 0 0 1-.26 1.6l-3.45 1.73Z"]);
 const PreviousRegular = /*#__PURE__*/createFluentIcon('PreviousRegular', "1em", ["M3 3.5a.5.5 0 0 1 1 0v13a.5.5 0 0 1-1 0v-13Zm14 .75c0-1-1.12-1.6-1.95-1.04l-8.5 5.71c-.73.5-.73 1.57 0 2.07l8.5 5.8c.83.56 1.95-.03 1.95-1.04V4.25Zm-1.39-.2c.17-.12.39 0 .39.2v11.5c0 .2-.22.32-.4.2l-8.49-5.78a.25.25 0 0 1 0-.42l8.5-5.7Z"]);
@@ -1073,7 +1079,8 @@ const range = (from, to, step = 1) => {
 };
 const DEFAULT_NUMBER_OF_PAGE_BTN = 5;
 const Pagination = (props) => {
-    const { table, pageSizeOptions = [10, 20, 50, 100, 1000] } = props;
+    const { table } = props;
+    const { pageSizeOptions } = table.options.meta || {};
     const pageSizeSelectionId = useId("page-size-selector");
     const styles = usePaginationStyle();
     const totalNumberOfPage = table.getPageCount();
@@ -1096,12 +1103,12 @@ const Pagination = (props) => {
         const currentPageOptions = end - start >= 0 ? range(start, end) : [];
         return (currentPageOptions === null || currentPageOptions === void 0 ? void 0 : currentPageOptions.length) ? [...currentPageOptions] : [1];
     }, [totalNumberOfPage, currentPage]);
-    return (jsx("div", { className: styles.paginationContainer, children: jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.pageSelectionWrapper, children: jsx(Dropdown, { id: pageSizeSelectionId, size: "small", selectedOptions: [`${pageSize}`], placeholder: "Select Page Size", value: table.getState().pagination.pageSize.toString(), onOptionSelect: (_, data) => { var _a; return table.setPageSize(Number(+((_a = data.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]))); }, className: styles.pageSelectionDropdown, "aria-label": "Select Page Size", children: pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions.map((option) => (jsx(Option, { value: `${option}`, children: `${option}` }, option))) }) }), jsxs("div", { className: styles.pageBtnContainer, children: [jsxs("div", { children: [jsxs("span", { children: ["Page", " ", jsxs("strong", { children: [table.getState().pagination.pageIndex + 1, " of", " ", table.getPageCount()] })] }), jsxs("span", { children: [" ", "| Go to page:", " ", jsx(Input, { type: "number", size: "small", value: `${table.getState().pagination.pageIndex + 1}`, onChange: (e, data) => {
+    return (jsx("div", { className: styles.paginationContainer, children: jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.pageSelectionWrapper, children: jsx(Dropdown, { id: pageSizeSelectionId, size: "small", selectedOptions: [`${pageSize}`], placeholder: "Select Page Size", value: table.getState().pagination.pageSize.toString(), onOptionSelect: (_, data) => { var _a; return table.setPageSize(Number(+((_a = data.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]))); }, className: styles.pageSelectionDropdown, "aria-label": "Select Page Size", children: jsx(Show, { when: (pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.length) > 0, children: jsx(For, { each: pageSizeOptions, children: (option) => (jsx(Option, { value: `${option}`, children: `${option}` }, option)) }) }) }) }), jsxs("div", { className: styles.pageBtnContainer, children: [jsxs("div", { children: [jsxs("span", { children: ["Page", " ", jsxs("strong", { children: [table.getState().pagination.pageIndex + 1, " of", " ", table.getPageCount()] })] }), jsxs("span", { children: [" ", "| Go to page:", " ", jsx(Input, { type: "number", size: "small", value: `${table.getState().pagination.pageIndex + 1}`, onChange: (e, data) => {
                                                 const page = data.value ? Number(e.target.value) - 1 : 0;
                                                 if (page >= 0 && page < table.getPageCount()) {
                                                     table.setPageIndex(page);
                                                 }
-                                            }, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: "off", autoCorrect: "off" })] })] }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsx(PreviousRegular, {}), "aria-label": "Go to first page" }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsx(ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.map((option, index) => (jsx(Button, { shape: "circular", appearance: option - 1 === currentPage ? "primary" : undefined, onClick: () => table.setPageIndex(option - 1), "aria-label": `Show Page ${option}`, size: "small", className: styles.pageBtn, children: option }, index))), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), icon: jsx(ArrowNextFilled, {}), "aria-label": "Go to next page" }), jsx(Button, { size: "small", shape: "circular", className: styles.pageBtn, onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), icon: jsx(NextRegular, {}), "aria-label": "Go to last page" })] })] }) }));
+                                            }, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: "off", autoCorrect: "off" })] })] }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsx(PreviousRegular, {}), "aria-label": "Go to first page" }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsx(ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), jsx(For, { each: pageSelectionOptions, children: (option, index) => (jsx(Button, { shape: "circular", appearance: option - 1 === currentPage ? "primary" : undefined, onClick: () => table.setPageIndex(option - 1), "aria-label": `Show Page ${option}`, size: "small", className: styles.pageBtn, children: option }, index)) }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), icon: jsx(ArrowNextFilled, {}), "aria-label": "Go to next page" }), jsx(Button, { size: "small", shape: "circular", className: styles.pageBtn, onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), icon: jsx(NextRegular, {}), "aria-label": "Go to last page" })] })] }) }));
 };
 
 bundleIcon$1(SaveFilled, SaveRegular);
@@ -1130,18 +1137,21 @@ const useGridHeaderStyles = makeStyles({
         width: "100%",
         height: "100%",
     },
+    popoverSurface: {
+        minWidth: "300px"
+    }
 });
 
 const GridHeader = (props) => {
     const { table, gridTitle, globalFilter, setGlobalFilter, dispatch, drawerState } = props;
     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, { children: jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsx(MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
+    return (jsxs("div", { className: styles.tableTopHeaderContainer, children: [jsx("div", { className: styles.tableTopHeaderLeft, children: gridTitle }), jsxs("div", { className: styles.tableTopHeaderRight, children: [props.headerMenu, props.headerMenu && jsx(Divider, { vertical: true }), jsxs(Popover, { withArrow: true, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(Tooltip, { content: 'Toggle Group Column', relationship: "label", children: jsx(Button, { icon: jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) }) }), jsx(PopoverSurface, { className: styles.popoverSurface, children: jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsx(MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
                                             if (column.id === 'select')
                                                 return null;
                                             if (column.id === 'id')
                                                 return null;
                                             return (jsx(Checkbox, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup() || !column.getIsVisible(), label: jsx("span", { children: column.columnDef.id }) }, column.id));
-                                        })] }) })] }), jsxs(Popover, { withArrow: true, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(Tooltip, { content: 'Toggle Column Visibility', relationship: "label", children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) }) }), jsx(PopoverSurface, { children: jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsx(MenuGroupHeader, { children: "Toggle Columns" }), jsx(Checkbox, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsx(Divider, {}), table.getAllLeafColumns().map((column) => {
+                                        })] }) })] }), jsxs(Popover, { withArrow: true, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(Tooltip, { content: 'Toggle Column Visibility', relationship: "label", children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) }) }), jsx(PopoverSurface, { className: styles.popoverSurface, children: jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsx(MenuGroupHeader, { children: "Toggle Columns" }), jsx(Checkbox, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsx(Divider, {}), table.getAllLeafColumns().map((column) => {
                                             if (column.id === 'select')
                                                 return null;
                                             return (jsx(Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
@@ -1225,8 +1235,8 @@ const getLeafColumns = (columns) => {
 };
 
 const useGridContainer = (props, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { columns, data, rowSelectionMode } = props;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData } = props;
     const [pagination, setPagination] = React.useState({
         pageSize: props.pageSize || 10,
         pageIndex: 0,
@@ -1247,7 +1257,12 @@ const useGridContainer = (props, ref) => {
     const [expanded, setExpanded] = React.useState((_g = props.expandedState) !== null && _g !== void 0 ? _g : {});
     const [columnPinning, setColumnPinning] = React.useState((_h = props.columnPinningState) !== null && _h !== void 0 ? _h : {});
     const [columnSizing, setColumnSizing] = React.useState({});
+    const [rowPinning, setRowPinning] = React.useState((_j = props.rowPinningState) !== null && _j !== void 0 ? _j : {
+        top: [],
+        bottom: [],
+    });
     const table = useReactTable({
+        defaultColumn,
         columns: columns,
         data,
         filterFns: {
@@ -1270,6 +1285,11 @@ const useGridContainer = (props, ref) => {
             columnVisibility,
             columnPinning,
             columnSizing,
+            rowPinning
+        },
+        getRowId(originalRow, index, parent) {
+            const keyProps = props.dataPrimaryKye || 'id';
+            return originalRow[keyProps] || `${index}`;
         },
         columnResizeMode: 'onChange',
         enableRowSelection: rowSelectionMode !== undefined,
@@ -1279,6 +1299,8 @@ const useGridContainer = (props, ref) => {
         enableColumnFilters: true,
         filterFromLeafRows: true,
         autoResetExpanded: false,
+        autoResetPageIndex: autoResetPageIndex,
+        keepPinnedRows: true,
         onRowSelectionChange: setRowSelection,
         onPaginationChange: setPagination,
         onSortingChange: setSorting,
@@ -1290,6 +1312,7 @@ const useGridContainer = (props, ref) => {
         onColumnVisibilityChange: setColumnVisibility,
         onColumnPinningChange: setColumnPinning,
         onColumnSizingChange: setColumnSizing,
+        onRowPinningChange: setRowPinning,
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
@@ -1298,10 +1321,18 @@ const useGridContainer = (props, ref) => {
         getExpandedRowModel: getExpandedRowModel(),
         getFacetedUniqueValues: getFacetedUniqueValues(),
         getFacetedMinMaxValues: getFacetedMinMaxValues(),
+        meta: {
+            pageSizeOptions: props.pageSizeOptions || [10, 20, 50, 100, 1000],
+            rowSelectionMode: props.rowSelectionMode,
+            tableHeight: props.tableHeight || "650px",
+            updateData: onUpdateData,
+            onTableViewDelete: props.onTableViewDelete,
+            onTableViewSave: props.onTableViewSave
+        }
     });
     const tableViews = React.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
     const resetToDefaultView = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const defaultTableState = {
             pagination: {
                 pageSize: props.pageSize || 10,
@@ -1323,7 +1354,7 @@ const useGridContainer = (props, ref) => {
             columnVisibility: (_g = props.columnVisibility) !== null && _g !== void 0 ? _g : {},
             columnPinning: (_h = props.columnPinningState) !== null && _h !== void 0 ? _h : {},
             columnSizing: {},
-            rowPinning: {},
+            rowPinning: (_j = props.rowPinningState) !== null && _j !== void 0 ? _j : {},
             columnSizingInfo: {
                 "startOffset": null,
                 "startSize": null,
@@ -1356,6 +1387,7 @@ const useGridContainer = (props, ref) => {
                     pageSize: props.pageSize || 10,
                     pageIndex: 0,
                 });
+                setRowPinning(tableState.rowPinning);
             }, 10);
             return true;
         }
@@ -1421,10 +1453,11 @@ const useTableHeaderStyles = makeStyles({
         boxShadow: tokens.shadow2,
     },
     tHeadRow: {
-        backgroundColor: tokens.colorNeutralStroke2,
+        backgroundColor: tokens.colorNeutralCardBackgroundSelected,
     },
     tHeadCell: Object.assign({ zIndex: 99, position: 'relative', fontSize: tokens.fontSizeBase300, fontWeight: tokens.fontWeightBold, minWidth: '1rem' }, shorthands.padding('2px', '4px')),
-    tHeadNonLeafCell: Object.assign({}, shorthands.borderBottom('1px', 'solid', tokens.colorNeutralBackground1)),
+    tHeadNonLeafCell: Object.assign({}, shorthands.borderBottom(0)),
+    tHeadNonLeafCellFakeBorder: Object.assign({ width: '100%', height: '1px', position: "sticky", bottom: 0 }, shorthands.borderBottom('1px', 'solid', tokens.colorBrandBackgroundInverted)),
     tHeadCellDraggable: {
         height: '100%',
         cursor: 'grab',
@@ -1433,18 +1466,18 @@ const useTableHeaderStyles = makeStyles({
         opacity: 0.5,
         cursor: 'grabbing',
     },
-    tHeadCellOver: Object.assign({ backgroundColor: tokens.colorNeutralStroke1 }, shorthands.border(tokens.strokeWidthThin, 'dashed', tokens.colorBrandBackground2Pressed)),
+    tHeadCellOver: Object.assign({ backgroundColor: tokens.colorNeutralStroke1 }, shorthands.border(tokens.strokeWidthThin, 'dashed', tokens.colorNeutralBackground2Pressed)),
     tLeafHeadCellContent: Object.assign({ display: 'flex', alignContent: 'space-between', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', width: '100%', height: '100%', minWidth: '1rem' }, shorthands.padding('3px', '4px')),
     tNonLeafHeadCellContent: Object.assign({ display: 'flex', alignContent: 'center', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', width: '100%', minWidth: '1rem' }, shorthands.padding('3px', '4px')),
     tHeadContentBtn: Object.assign(Object.assign(Object.assign(Object.assign({}, shorthands.padding('0px', '0px', '0px', '0px')), { display: 'flex' }), shorthands.gap('5px')), { alignContent: 'space-between', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', width: '100%', height: '100%', minWidth: '1rem' }),
     tHeadMenuPopover: Object.assign(Object.assign({}, shorthands.padding('0px', '0px', '0px', '0px')), { width: '300px' }),
-    resizer: Object.assign(Object.assign({}, shorthands.borderRight('1px', 'solid', tokens.colorNeutralBackground1)), { width: '8px', position: 'absolute', top: 0, right: 0, bottom: 0, cursor: 'col-resize', resize: 'horizontal', ':hover': {
-            borderRightWidth: '4px',
-            borderRightColor: tokens.colorNeutralBackground2Pressed,
+    resizer: Object.assign(Object.assign({}, shorthands.borderRight('1px', 'solid', tokens.colorBrandBackgroundInverted)), { width: '8px', position: 'absolute', top: 0, right: 0, bottom: 0, cursor: 'col-resize', resize: 'horizontal', ':hover': {
+            borderRightWidth: '2px',
+            borderRightColor: tokens.colorBrandBackgroundInvertedHover,
         } }),
     resizerActive: {
-        borderRightWidth: '4px',
-        borderRightColor: tokens.colorNeutralBackground2Pressed,
+        borderRightWidth: '2px',
+        borderRightColor: tokens.colorBrandBackgroundInvertedPressed,
     },
 });
 
@@ -1788,75 +1821,102 @@ const FilterDrawer = ({ drawerState, dispatch, table }) => {
         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: 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 (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 (jsx("div", { children: header.column.getCanFilter() && (jsxs("div", { style: {
-                                    marginTop: "20px",
-                                }, children: [jsxs(Caption1Stronger, { children: ["Filter by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(Filter, { column: header.column, table: table })] }, 'filter-group')) }, header.column.id));
-                    });
-                }) }), jsx(DrawerFooter, { children: jsx(Button, { icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters, style: { width: "100%" }, children: "Clear All Filters" }) })] }));
+                        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 reorderColumn = (draggedColumnId, targetColumnId, columnOrder) => {
-    columnOrder.splice(columnOrder.indexOf(targetColumnId), 0, columnOrder.splice(columnOrder.indexOf(draggedColumnId), 1)[0]);
-    return [...columnOrder];
-};
+const PinIcon = bundleIcon$1(PinFilled, PinRegular);
 function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }) {
     var _a;
-    const { getState, setColumnOrder } = table;
-    const { columnOrder } = getState();
     const { column } = header;
-    const [{ isOver }, dropRef] = useDrop({
-        accept: "column",
-        drop: (draggedColumn) => {
-            const newColumnOrder = reorderColumn(draggedColumn.id, column.id, columnOrder);
-            setColumnOrder(newColumnOrder);
-        },
-        collect: (monitor) => ({
-            isOver: monitor.isOver(),
-        }),
-    });
-    const [{ isDragging }, dragRef, previewRef] = useDrag({
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
-        item: () => column,
-        type: "column",
+    const { 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 canDragDrop = headerDepth === totalNumberOfHeaderDepth && !header.isPlaceholder;
     const isLeafHeaders = headerDepth === totalNumberOfHeaderDepth;
     if (header.isPlaceholder) {
-        return (jsx("th", { colSpan: header.colSpan, className: styles.tHeadCell, children: header.column.getCanResize() && (jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) })) }));
+        return (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 || header.isPlaceholder ? undefined
-            : styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging, isOver && isLeafHeaders && styles.tHeadCellOver), children: [jsx("div", { className: styles.tHeadCellDraggable, ref: canDragDrop ? dropRef : undefined, children: jsxs("div", { className: isLeafHeaders
+    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, ref: canDragDrop ? dragRef : undefined, children: [jsx("div", { ref: canDragDrop ? previewRef : undefined, children: header.isPlaceholder ? null : (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()) }), header.column.getIsGrouped() && jsx(GroupListRegular, {}), header.column.getIsFiltered() && (jsx("strong", { children: jsx(FilterFilled, {}) })), header.column.getIsPinned() && jsx(PinRegular, {})] })) }), jsx(HeaderMenu, { header: header, table: table, hideMenu: hideMenu })] }) }), header.column.getCanResize() && (jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }))] }));
+                        : 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;
@@ -1868,24 +1928,24 @@ function HeaderMenu(props) {
         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: [header.column.getCanSort() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Sort by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(MenuItem, { onClick: (e) => {
-                                        var _a;
-                                        const isControlKeySelected = e.ctrlKey;
-                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(false, isControlKeySelected);
-                                    }, icon: jsx(TextSortAscendingFilled, {}), disabled: header.column.getIsSorted() === 'asc', children: "Sort A to Z" }), jsx(MenuItem, { onClick: (e) => {
-                                        var _a;
-                                        const isControlKeySelected = e.ctrlKey;
-                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(true, isControlKeySelected);
-                                    }, icon: jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsx(MenuDivider, {})] }, 'sort-group')), header.column.getCanGroup() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Group by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), !header.column.getIsGrouped() && (jsxs(MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupFilled, {}), children: ["Group by", ' ', flexRender(header.column.columnDef.header, header.getContext())] })), header.column.getIsGrouped() && (jsxs(MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupDismissFilled, {}), children: ["Remove Grouping on", ' ', flexRender(header.column.columnDef.header, header.getContext())] })), jsx(MenuDivider, {})] }, 'grouping-group')), header.column.getCanSort() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Pin Column", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(MenuItem, { onClick: () => {
-                                        var _a;
-                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('left');
-                                    }, icon: jsx(ArrowStepInLeftRegular, {}), disabled: header.column.getIsPinned() === 'left', children: "To Left" }), jsx(MenuItem, { onClick: () => {
-                                        var _a;
-                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('right');
-                                    }, icon: jsx(ArrowStepInRightRegular, {}), disabled: header.column.getIsPinned() === 'right', children: "To Right" }), ['left', 'right'].includes(header.column.getIsPinned()) && (jsx(MenuItem, { onClick: () => {
-                                        var _a;
-                                        (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
-                                    }, icon: jsx(PinOffRegular, {}), children: "Unpin Column" })), jsx(MenuDivider, {})] }, 'pin columns')), header.column.getCanFilter() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Filter by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(Filter, { column: header.column, table: table })] }, 'filter-group'))] }) })] }));
+    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) {
@@ -1901,7 +1961,7 @@ function HeaderRow(props) {
 function TableHeader(props) {
     const styles = useTableHeaderStyles();
     const { table, headerGroups, rowSelectionMode } = props;
-    return (jsx("thead", { className: styles.tHead, children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup) => (jsx(HeaderRow, { table: table, rowSelectionMode: rowSelectionMode, headerGroup: headerGroup, headerGroupsLength: headerGroups.length }, headerGroup.id))) }));
+    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({
@@ -1974,75 +2034,149 @@ const useTableBodyStyles = makeStyles({
             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 { 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 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: tdStyle, className: styles.tBodyCell }, cell.id);
+        return jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef }, cell.id);
     }
     if (cell.getIsGrouped()) {
-        return (jsx("td", { style: tdStyle, className: styles.tBodyCell, children: jsx(Button, { onClick: row.getToggleExpandedHandler(), style: {
+        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: tdStyle, className: styles.tBodyCell, children: jsx("strong", { children: flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
+        return (jsx("td", { style: 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: tdStyle, className: styles.tBodyCell, children: flexRender(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 }) {
+function TableRow({ row, rowSelectionMode, style }) {
     const styles = useTableBodyStyles();
     return (jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
             ? styles.tBodySelectedRow
-            : styles.tBodyRow, children: [rowSelectionMode === 'multiple' && (jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsx(Checkbox, { checked: row.getIsSomeSelected()
-                        ? 'mixed'
-                        : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) })), rowSelectionMode === 'single' && (jsx("td", { 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));
+            : 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));
 }
 
 function TableBody(props) {
-    var _a, _b;
+    var _a, _b, _c;
     const styles = useTableBodyStyles();
-    const { rows, rowSelectionMode, virtualRows, totalSize } = props;
-    const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _a === void 0 ? void 0 : _a.start) || 0 : 0;
+    const { 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 - (((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 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("tbody", { className: styles.tBody, children: [paddingTop > 0 && (jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsx("td", { style: { height: `${paddingTop}px` } }) })), virtualRows.map((virtualRow) => {
-                const row = rows[virtualRow.index];
-                return (jsx(TableRow, { row: row, rowSelectionMode: rowSelectionMode }, row.id));
-            }), paddingBottom > 0 && (jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsx("td", { style: { height: `${paddingBottom}px` } }) }))] }));
+    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, rowSelectionMode } = props;
+    const { table } = props;
+    const { tableHeight, rowSelectionMode } = table.options.meta || {};
     const tableContainerRef = React.useRef(null);
-    const { rows } = table.getRowModel();
-    const rowVirtualizer = useVirtual({
-        parentRef: tableContainerRef,
-        size: rows.length,
-        overscan: 5,
-    });
-    const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
+    const { rows: { length: itemLength } } = table.getRowModel();
     const headerGroups = table.getHeaderGroups();
     // utilities
-    const isLoading = props.isLoading && virtualRows.length === 0;
+    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 && virtualRows.length === 0;
-    return (jsxs("div", { ref: tableContainerRef, className: styles.tableContainer, children: [jsxs("table", { className: styles.table, "aria-label": "Data Grid", children: [jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsx(TableBody, { rows: rows, virtualRows: virtualRows, rowSelectionMode: rowSelectionMode, totalSize: totalSize }), rowSelectionMode === 'multiple' &&
-                        !isLoading &&
-                        !noItems &&
-                        !noSearchResult && (jsx("tfoot", { className: styles.tFoot, children: jsxs("tr", { children: [jsx("td", { className: "p-1", children: jsx(Checkbox, { checked: table.getIsSomePageRowsSelected()
-                                            ? 'mixed'
-                                            : table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), "aria-label": "Select All Current Page Rows", title: 'Select All Current Page Rows' }) }), jsxs("td", { colSpan: 20, children: [table.getIsAllPageRowsSelected() ? 'Unselect' : 'Select', " All Current Page Rows (", table.getRowModel().rows.length, ")"] })] }) }))] }), isLoading && jsx(Loading, {}), noItems && jsx(NoItemGrid, { message: props.noItemPage }), noSearchResult && jsx(NoSearchResult, { message: props.noFilterMatchPage })] }));
+    const 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 ViewSaveForm = (props) => {
@@ -2104,29 +2238,20 @@ const useFilterDrawerStyles = makeStyles({
         } }),
 });
 const ViewsDrawer = (props) => {
-    const { table, drawerState, dispatch, tableViews, applyTableState, resetToGridDefaultView, onTableViewSave } = props;
-    const styles = useFilterDrawerStyles();
+    const { table, drawerState, dispatch, tableViews, applyTableState, resetToGridDefaultView } = props;
+    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 resetAllFilters = React.useCallback(() => {
-    //   table.setGlobalFilter('');
-    //   table.resetColumnFilters();
-    // }, [table]);
-    // const resetAllGrouping = React.useCallback(() => {
-    //   table.resetGrouping();
-    // }, [table]);
-    // const clearAllSelection = React.useCallback(() => {
-    //   table.toggleAllRowsSelected(false);
-    // }, [table]);
+    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("div", { style: {
                                         display: 'flex',
                                         justifyContent: 'space-between',
                                         alignItems: 'center',
                                         width: '100%',
-                                    }, children: [jsx(MenuItemRadio, { name: "table-views", value: view.viewName, onClick: () => applyTableState(view.tableState), icon: jsx(ViewDesktop20Regular, {}), children: view.viewName }), props.onTableViewDelete && (view === null || view === void 0 ? void 0 : view.isViewOwner) && (jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => { var _a; return (_a = props.onTableViewDelete) === null || _a === void 0 ? void 0 : _a.call(props, view); } }))] }, view.id + view.viewName));
+                                    }, children: [jsx(MenuItemRadio, { name: "table-views", value: view.viewName, onClick: () => applyTableState(view.tableState), icon: jsx(ViewDesktop20Regular, {}), children: view.viewName }), onTableViewDelete && (view === null || view === void 0 ? void 0 : view.isViewOwner) && (jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => onTableViewDelete === null || onTableViewDelete === void 0 ? void 0 : onTableViewDelete(view) }))] }, view.id + view.viewName));
                             })] })] }), jsx(DrawerFooter, { children: jsxs(MenuList, { children: [jsx(MenuDivider, {}), jsx(MenuItem, { icon: jsx(ClearFilterIcon, {}), onClick: resetToGridDefaultView, children: "Reset to Default View" })] }) })] }));
 };
 
@@ -2165,8 +2290,43 @@ function AdvancedTable(props, ref) {
         isFilterDrawerOpen: false,
         isViewsDrawerOpen: false
     });
-    return (jsxs(DndProvider, { backend: HTML5Backend, children: [jsx(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, applyTableState: applyTableState, drawerState: drawerState, dispatch: dispatch }), jsxs("div", { style: { display: 'flex' }, children: [jsx(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, rowSelectionMode: props.rowSelectionMode, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsx(FilterDrawer, { drawerState: drawerState, dispatch: dispatch, table: table }), jsx(ViewsDrawer, { table: table, drawerState: drawerState, dispatch: dispatch, tableViews: tableViews, applyTableState: applyTableState, resetToGridDefaultView: resetToDefaultView, onTableViewSave: props.onTableViewSave, onTableViewDelete: props.onTableViewDelete })] }), jsx(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] }));
+    const { getState, setColumnOrder } = table;
+    const { columnOrder } = getState();
+    function handleDragEnd(event) {
+        const { active, over } = event;
+        if (active && over && (active === null || active === void 0 ? void 0 : active.id) !== (over === null || over === void 0 ? void 0 : over.id)) {
+            setColumnOrder((items) => {
+                const oldIndex = items.indexOf(active === null || active === void 0 ? void 0 : active.id);
+                const newIndex = items.indexOf(over === null || over === void 0 ? void 0 : over.id);
+                return arrayMove(items, oldIndex, newIndex);
+            });
+        }
+    }
+    const pointerSensor = useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 0.01
+        }
+    });
+    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 })] }) }));
 }
 const ForwardedAdvancedTable = React.forwardRef(AdvancedTable);
 
-export { ForwardedAdvancedTable as Table };
+/* eslint-disable */
+function useSkipper() {
+    const shouldSkipRef = React.useRef(true);
+    const shouldSkip = shouldSkipRef.current;
+    // Wrap a function with this to skip a pagination reset temporarily
+    const skip = React.useCallback(() => {
+        shouldSkipRef.current = false;
+    }, []);
+    React.useEffect(() => {
+        shouldSkipRef.current = true;
+    });
+    return [shouldSkip, skip];
+}
+
+export { ForwardedAdvancedTable as Table, useSkipper };