@prt-ts/fluent-react-table-v2 9.46.8-build.8.0 → 9.47.1-build-1.0

package/index.cjs.js

@@ -15,25 +15,36 @@ var core = require('@dnd-kit/core');
 var modifiers = require('@dnd-kit/modifiers');
 
 function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
         });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
+    }
+    n["default"] = e;
+    return Object.freeze(n);
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+const disableAllShorthand = {
+    enableGrouping: false,
+    enableHiding: false,
+    enablePinning: false,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableGlobalFilter: false,
+    enableMultiSort: false,
+    enableResizing: false,
+};
+
 const useStaticStyles = reactComponents.makeStaticStyles({
     "*": {
         boxSizing: "border-box",
@@ -1041,10 +1052,17 @@ const SaveFilled = /*#__PURE__*/createFluentIcon('SaveFilled', "1em", ["M3 5c0-1
 const SaveRegular = /*#__PURE__*/createFluentIcon('SaveRegular', "1em", ["M3 5c0-1.1.9-2 2-2h8.38a2 2 0 0 1 1.41.59l1.62 1.62A2 2 0 0 1 17 6.62V15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1v-4.5c0-.83.67-1.5 1.5-1.5h7c.83 0 1.5.67 1.5 1.5V16a1 1 0 0 0 1-1V6.62a1 1 0 0 0-.3-.7L14.1 4.28a1 1 0 0 0-.71-.29H13v2.5c0 .83-.67 1.5-1.5 1.5h-4A1.5 1.5 0 0 1 6 6.5V4H5Zm2 0v2.5c0 .28.22.5.5.5h4a.5.5 0 0 0 .5-.5V4H7Zm7 12v-4.5a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5V16h8Z"]);
 const SearchFilled = /*#__PURE__*/createFluentIcon('SearchFilled', "1em", ["M8.5 3a5.5 5.5 0 0 1 4.38 8.82l4.15 4.15a.75.75 0 0 1-.98 1.13l-.08-.07-4.15-4.15A5.5 5.5 0 1 1 8.5 3Zm0 1.5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"]);
 const SearchRegular = /*#__PURE__*/createFluentIcon('SearchRegular', "1em", ["M8.5 3a5.5 5.5 0 0 1 4.23 9.02l4.12 4.13a.5.5 0 0 1-.63.76l-.07-.06-4.13-4.12A5.5 5.5 0 1 1 8.5 3Zm0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"]);
+const StarRegular = /*#__PURE__*/createFluentIcon('StarRegular', "1em", ["M9.1 2.9a1 1 0 0 1 1.8 0l1.93 3.91 4.31.63a1 1 0 0 1 .56 1.7l-3.12 3.05.73 4.3a1 1 0 0 1-1.45 1.05L10 15.51l-3.86 2.03a1 1 0 0 1-1.45-1.05l.74-4.3L2.3 9.14a1 1 0 0 1 .56-1.7l4.31-.63L9.1 2.9Zm.9.44L8.07 7.25a1 1 0 0 1-.75.55L3 8.43l3.12 3.04a1 1 0 0 1 .3.89l-.75 4.3 3.87-2.03a1 1 0 0 1 .93 0l3.86 2.03-.74-4.3a1 1 0 0 1 .29-.89L17 8.43l-4.32-.63a1 1 0 0 1-.75-.55L10 3.35Z"]);
+const SwipeDownFilled = /*#__PURE__*/createFluentIcon('SwipeDownFilled', "1em", ["M14 6a4 4 0 0 1-2.25 3.6V8.44a3 3 0 1 0-3.5 0V9.6A4 4 0 1 1 14 6ZM9.47 17.78c.3.3.77.3 1.06 0l2.5-2.5a.75.75 0 1 0-1.06-1.06l-1.22 1.22V5.75a.75.75 0 0 0-1.5 0v9.69l-1.22-1.22a.75.75 0 0 0-1.06 1.06l2.5 2.5Z"]);
+const SwipeUpFilled = /*#__PURE__*/createFluentIcon('SwipeUpFilled', "1em", ["M10.53 2.22a.75.75 0 0 0-1.06 0l-2.5 2.5a.75.75 0 0 0 1.06 1.06l1.22-1.22v9.69a.75.75 0 0 0 1.5 0V4.56l1.22 1.22a.75.75 0 1 0 1.06-1.06l-2.5-2.5ZM6 14a4 4 0 0 1 2.25-3.6v1.16a3 3 0 1 0 3.5 0V10.4A4 4 0 1 1 6 14Z"]);
 
 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 TextCollapseFilled = /*#__PURE__*/createFluentIcon('TextCollapseFilled', "1em", ["M5 3.5c0-.41.34-.75.75-.75h11.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 3.5Zm0 12c0-.41.34-.75.75-.75h11.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 15.5Zm6.75-8.75a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5h-5.5ZM11 11.5c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm-2-2a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-6 0c0 .28.22.5.5.5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0-.5.5Z"]);
+const TextCollapseRegular = /*#__PURE__*/createFluentIcon('TextCollapseRegular', "1em", ["M5 3.5c0-.28.22-.5.5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5Zm0 12c0-.28.22-.5.5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5Zm6-8c0-.28.22-.5.5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm0 4c0-.28.22-.5.5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm-2-2a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0ZM3.5 9a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z"]);
+const TextExpandFilled = /*#__PURE__*/createFluentIcon('TextExpandFilled', "1em", ["M4.75 3.5a.75.75 0 0 0 0 1.5h12.5a.75.75 0 0 0 0-1.5H4.75ZM4 16.25c0-.41.34-.75.75-.75h12.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75Zm7-4c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm0-4c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75ZM5.5 14a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM6 8.5V10h1.5a.5.5 0 0 1 0 1H6v1.5a.5.5 0 0 1-1 0V11H3.5a.5.5 0 0 1 0-1H5V8.5a.5.5 0 0 1 1 0Z"]);
+const TextExpandRegular = /*#__PURE__*/createFluentIcon('TextExpandRegular', "1em", ["M4 4.5c0-.28.22-.5.5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 12c0-.28.22-.5.5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm6-4c0-.28.22-.5.5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0-4c0-.28.22-.5.5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5ZM5.5 14a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7ZM6 8.5a.5.5 0 0 0-1 0V10H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V11h1.5a.5.5 0 0 0 0-1H6V8.5Z"]);
 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"]);
 
@@ -1172,10 +1190,11 @@ const useGridHeaderStyles = reactComponents.makeStyles({
 
 const GridHeader = (props) => {
     const { table, gridTitle, globalFilter, setGlobalFilter } = props;
+    const focusAttribute = reactComponents.useArrowNavigationGroup({ axis: "horizontal", circular: true });
     /* eslint-disable @typescript-eslint/no-non-null-assertion */
     const { dispatchDrawerAction, drawerState } = table.options.meta;
     const styles = useGridHeaderStyles();
-    return (jsxRuntime.jsxs("div", { className: styles.tableTopHeaderContainer, children: [jsxRuntime.jsx("div", { className: styles.tableTopHeaderLeft, children: gridTitle }), jsxRuntime.jsxs("div", { className: styles.tableTopHeaderRight, children: [props.headerMenu, props.headerMenu && jsxRuntime.jsx(reactComponents.Divider, { vertical: true }), jsxRuntime.jsxs(reactComponents.Popover, { withArrow: true, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.Tooltip, { content: 'Toggle Group Column', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { icon: jsxRuntime.jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) }) }), jsxRuntime.jsx(reactComponents.PopoverSurface, { className: styles.popoverSurface, children: jsxRuntime.jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
+    return (jsxRuntime.jsxs("div", { className: styles.tableTopHeaderContainer, children: [jsxRuntime.jsx("div", { className: styles.tableTopHeaderLeft, children: gridTitle }), jsxRuntime.jsxs("div", Object.assign({ className: styles.tableTopHeaderRight }, focusAttribute, { children: [props.headerMenu, props.headerMenu && jsxRuntime.jsx(reactComponents.Divider, { vertical: true }), jsxRuntime.jsxs(reactComponents.Popover, { withArrow: true, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.Tooltip, { content: 'Toggle Group Column', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { icon: jsxRuntime.jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) }) }), jsxRuntime.jsx(reactComponents.PopoverSurface, { className: styles.popoverSurface, children: jsxRuntime.jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
                                             if (column.id === 'select')
                                                 return null;
                                             if (column.id === 'id')
@@ -1187,7 +1206,7 @@ const GridHeader = (props) => {
                                             return (jsxRuntime.jsx(reactComponents.Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
                                         })] }) })] }), jsxRuntime.jsx(reactComponents.Tooltip, { content: 'Table Views Management', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { onClick: () => {
                                 dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ type: "TOGGLE_VIEW_DRAWER" });
-                            }, icon: jsxRuntime.jsx(Album24Regular, {}), "aria-label": "View Menu" }) }), jsxRuntime.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 })] })] }));
+                            }, icon: jsxRuntime.jsx(Album24Regular, {}), "aria-label": "View Menu" }) }), jsxRuntime.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, }) {
@@ -1293,7 +1312,7 @@ function tableReducer(state, action) {
 }
 
 const useGridContainer = (props, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData } = props;
     const [drawerState, dispatch] = React__namespace.useReducer(tableReducer, {
         isFilterDrawerOpen: false,
@@ -1350,7 +1369,7 @@ const useGridContainer = (props, ref) => {
             rowPinning
         },
         getRowId(originalRow, index, parent) {
-            const keyProps = props.dataPrimaryKye || 'id';
+            const keyProps = props.dataPrimaryKye;
             return originalRow[keyProps] || `${index}`;
         },
         columnResizeMode: 'onChange',
@@ -1386,6 +1405,7 @@ const useGridContainer = (props, ref) => {
         meta: {
             pageSizeOptions: props.pageSizeOptions || [10, 20, 50, 100, 1000],
             rowSelectionMode: props.rowSelectionMode,
+            isAutoExpandOnGroup: (_k = props.isAutoExpandOnGroup) !== null && _k !== void 0 ? _k : false,
             tableHeight: props.tableHeight || "650px",
             updateData: onUpdateData,
             onTableViewDelete: props.onTableViewDelete,
@@ -1404,7 +1424,8 @@ const useGridContainer = (props, ref) => {
             setExpanded,
             setColumnPinning,
             setColumnSizing,
-            setRowPinning
+            setRowPinning,
+            tableSettings: (_l = props.tableSettings) !== null && _l !== void 0 ? _l : {},
         }
     });
     const tableViews = React__namespace.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
@@ -1580,15 +1601,21 @@ const getBodyCellPinningStyles = (column, isDragging, additionalStyles) => {
                 : 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 ? 2 : (isPinned ? 1 : 0) }, additionalStyles);
     return styles;
 };
+const getRowPinningStyles = (row, bottomRowLength, headerGroupLength, additionalStyles) => {
+    const styles = Object.assign({ backgroundColor: reactComponents.tokens.colorPaletteYellowBackground2, position: 'sticky', top: row.getIsPinned() === 'top' ? `${row.getPinnedIndex() * 35 + (39 * headerGroupLength)}px` : undefined, bottom: row.getIsPinned() === 'bottom' ? `${((bottomRowLength || 0) - 1 - row.getPinnedIndex()) * 35}px` : undefined }, 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 GroupExpandIcon = bundleIcon$1(TextExpandFilled, TextExpandRegular);
+const GroupCollapseIcon = bundleIcon$1(TextCollapseFilled, TextCollapseRegular);
+function HeaderCell({ header, table, tabAttributes }) {
+    var _a, _b, _c;
+    const { column, id } = header;
     const { isDragging, attributes, listeners, setNodeRef, transform, transition, } = sortable.useSortable({
         id: column.id
     });
@@ -1597,13 +1624,13 @@ function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderD
         transition
     };
     const styles = useTableHeaderStyles();
-    const isLeafHeaders = headerDepth === totalNumberOfHeaderDepth;
+    const isLeafHeaders = ((_b = (_a = `${id}`) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b.length) === 1;
     const headerCellCombinedStyles = getHeaderCellPinningStyles(column, isDragging, dndStyle);
     if (header.isPlaceholder) {
         return (jsxRuntime.jsx("th", { colSpan: header.colSpan, className: styles.tHeadCell, style: headerCellCombinedStyles, ref: setNodeRef, children: jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanResize(), children: jsxRuntime.jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: reactComponents.mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }) }));
     }
     const columnName = reactTable.flexRender(header.column.columnDef.header, header.getContext());
-    return (jsxRuntime.jsxs("th", { colSpan: header.colSpan, className: reactComponents.mergeClasses(styles.tHeadCell, isLeafHeaders && styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging), style: headerCellCombinedStyles, ref: setNodeRef, children: [jsxRuntime.jsx("div", Object.assign({ className: styles.tHeadCellDraggable }, attributes, listeners, { children: jsxRuntime.jsxs("div", { className: isLeafHeaders
+    return (jsxRuntime.jsxs("th", Object.assign({ colSpan: header.colSpan, className: reactComponents.mergeClasses(styles.tHeadCell, isLeafHeaders && styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging), style: headerCellCombinedStyles, ref: setNodeRef }, tabAttributes, { tabIndex: 0, children: [jsxRuntime.jsx("div", Object.assign({ className: styles.tHeadCellDraggable }, attributes, listeners, { children: jsxRuntime.jsxs("div", { className: isLeafHeaders
                         ? styles.tLeafHeadCellContent
                         : styles.tNonLeafHeadCellContent, children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(reactControlFlow.Show, { when: !header.isPlaceholder, children: jsxRuntime.jsxs(reactComponents.Button, { style: {
                                         display: 'flex',
@@ -1618,10 +1645,10 @@ function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderD
                                         if (!header.column.getCanGroup())
                                             return;
                                         header.column.getToggleGroupingHandler()();
-                                    }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_a = {
+                                    }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_c = {
                                         asc: (jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(SortAscIcon, {}) })),
                                         desc: (jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(SortDescIcon, {}) })),
-                                    }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : undefined, iconPosition: "after", children: [jsxRuntime.jsx("strong", { children: columnName }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsGrouped(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(GroupListRegular, {}) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsFiltered(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(FilterFilled, {}) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsPinned(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(PinRegular, {}) }) })] }) }) }), jsxRuntime.jsx(HeaderMenu, { header: header, table: table, hideMenu: hideMenu })] }) })), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanResize(), children: jsxRuntime.jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: reactComponents.mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: !isLeafHeaders, children: jsxRuntime.jsx("div", { className: styles.tHeadNonLeafCellFakeBorder }) })] }));
+                                    }[header.column.getIsSorted()]) !== null && _c !== void 0 ? _c : undefined, iconPosition: "after", children: [jsxRuntime.jsx("strong", { children: columnName }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsGrouped(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(GroupListRegular, {}) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsFiltered(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(FilterFilled, {}) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsPinned(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(PinRegular, {}) }) })] }) }) }), jsxRuntime.jsx(HeaderMenu, { header: header, table: table, hideMenu: !isLeafHeaders })] }) })), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanResize(), children: jsxRuntime.jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: reactComponents.mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: !isLeafHeaders, children: jsxRuntime.jsx("div", { className: styles.tHeadNonLeafCellFakeBorder }) })] })));
 }
 function HeaderMenu(props) {
     const { header, table, hideMenu } = props;
@@ -1647,7 +1674,15 @@ function HeaderMenu(props) {
                                             var _a;
                                             const isControlKeySelected = e.ctrlKey;
                                             (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(true, isControlKeySelected);
-                                        }, icon: jsxRuntime.jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'sort-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanGroup(), children: jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [!header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsxRuntime.jsx(GroupFilled, {}), children: ["Group Column (by ", columnName, ")"] })), header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsxRuntime.jsx(GroupDismissFilled, {}), children: ["Remove Grouping (on ", columnName, ")"] })), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'grouping-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanPin(), children: jsxRuntime.jsxs(reactComponents.Menu, { children: [jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsxs(reactComponents.MenuItem, { icon: jsxRuntime.jsx(PinIcon, {}), children: ["Pin Column (", columnName, ")"] }) }), jsxRuntime.jsx(reactComponents.MenuPopover, { children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
+                                        }, icon: jsxRuntime.jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'sort-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanGroup(), children: jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [!header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => {
+                                            header.column.getToggleGroupingHandler()();
+                                            const { isAutoExpandOnGroup } = table.options.meta;
+                                            if (isAutoExpandOnGroup) {
+                                                table.toggleAllRowsExpanded(true);
+                                            }
+                                        }, icon: jsxRuntime.jsx(GroupFilled, {}), children: ["Group Column (by ", columnName, ")"] })), jsxRuntime.jsxs(reactControlFlow.Show, { when: header.column.getIsGrouped(), children: [jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => {
+                                                    header.column.getToggleGroupingHandler()();
+                                                }, icon: jsxRuntime.jsx(GroupDismissFilled, {}), children: ["Remove Grouping (on ", columnName, ")"] }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => table.toggleAllRowsExpanded(), icon: table.getIsAllRowsExpanded() ? jsxRuntime.jsx(GroupCollapseIcon, {}) : jsxRuntime.jsx(GroupExpandIcon, {}), children: jsxRuntime.jsx(reactControlFlow.Show, { when: table.getIsAllRowsExpanded(), fallback: jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Expand All Groups" }), children: "Collapse All Groups" }) })] }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'grouping-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanPin(), children: jsxRuntime.jsxs(reactComponents.Menu, { children: [jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsxs(reactComponents.MenuItem, { icon: jsxRuntime.jsx(PinIcon, {}), children: ["Pin Column (", columnName, ")"] }) }), jsxRuntime.jsx(reactComponents.MenuPopover, { children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
                                                         var _a;
                                                         (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
                                                     }, icon: jsxRuntime.jsx(PinOffRegular, {}), disabled: !(['left', 'right'].includes(header.column.getIsPinned())), children: "No Pin" }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
@@ -1671,19 +1706,24 @@ function HeaderMenu(props) {
 }
 
 function HeaderRow(props) {
+    var _a;
     const styles = useTableHeaderStyles();
-    const { table, headerGroup, rowSelectionMode, headerGroupsLength } = props;
-    return (jsxRuntime.jsxs("tr", { className: styles.tHeadRow, children: [rowSelectionMode === 'multiple' && (jsxRuntime.jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row Column", children: headerGroup.depth === headerGroupsLength - 1 && (jsxRuntime.jsx(reactComponents.Checkbox, { checked: table.getIsSomeRowsSelected()
-                        ? 'mixed'
-                        : table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select All Rows", title: 'Select All Rows' })) })), rowSelectionMode === 'single' && (jsxRuntime.jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row Column", children: ' ' })), headerGroup.headers.map((header) => {
-                return (jsxRuntime.jsx(HeaderCell, { header: header, table: table, hideMenu: headerGroup.depth !== headerGroupsLength - 1, headerDepth: headerGroup.depth, totalNumberOfHeaderDepth: headerGroupsLength - 1 }, header.id));
-            })] }, headerGroup.id));
+    const { table, headerGroup, headerGroupsLength } = props;
+    const { rowSelectionMode, tableSettings } = (_a = table.options.meta) !== null && _a !== void 0 ? _a : {};
+    const headerCellTabAttributes = reactComponents.useFocusableGroup({ tabBehavior: "limited" });
+    const isLeafHeaders = headerGroup.depth === headerGroupsLength - 1;
+    return (jsxRuntime.jsxs("tr", { className: styles.tHeadRow, children: [jsxRuntime.jsx(reactControlFlow.Show, { when: !(tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.enableManualSelection), children: jsxRuntime.jsxs(reactControlFlow.Switch, { when: rowSelectionMode, children: [jsxRuntime.jsx(reactControlFlow.Case, { value: "multiple", children: jsxRuntime.jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row", children: jsxRuntime.jsx(reactControlFlow.Show, { when: isLeafHeaders, children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: table.getIsSomeRowsSelected()
+                                            ? 'mixed'
+                                            : table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select All Rows", title: 'Select All Rows' }) }) }) }), jsxRuntime.jsx(reactControlFlow.Case, { value: "single", children: jsxRuntime.jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row Column", children: ' ' }) })] }) }), jsxRuntime.jsx(reactControlFlow.For, { each: headerGroup.headers, children: (header, index) => {
+                    return (jsxRuntime.jsx(HeaderCell, { header: header, table: table, tabAttributes: headerCellTabAttributes }, `${header.id}_${index}`));
+                } })] }, headerGroup.id));
 }
 
 function TableHeader(props) {
     const styles = useTableHeaderStyles();
     const { table, headerGroups, rowSelectionMode } = props;
-    return (jsxRuntime.jsx("thead", { className: styles.tHead, style: { zIndex: 99 }, children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup) => (jsxRuntime.jsx(HeaderRow, { table: table, rowSelectionMode: rowSelectionMode, headerGroup: headerGroup, headerGroupsLength: headerGroups.length }, headerGroup.id))) }));
+    const focusAttribute = reactComponents.useFocusableGroup({ tabBehavior: "limited-trap-focus" });
+    return (jsxRuntime.jsx("thead", Object.assign({ className: styles.tHead, style: { zIndex: 99 } }, focusAttribute, { tabIndex: 0, children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup) => (jsxRuntime.jsx(HeaderRow, { table: table, rowSelectionMode: rowSelectionMode, headerGroup: headerGroup, headerGroupsLength: headerGroups.length }, headerGroup.id))) })));
 }
 
 const useLoadingStyles = reactComponents.makeStyles({
@@ -1806,31 +1846,51 @@ function TableCell({ cell, row }) {
     return (jsxRuntime.jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
 }
 
-function TableRow({ row, rowSelectionMode, style }) {
+const PinRowAction = ({ row }) => {
+    const isPinned = row.getIsPinned();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactControlFlow.Show, { when: isPinned, children: jsxRuntime.jsx(reactComponents.Button, { size: "small", shape: "circular", onClick: () => row.pin(false, true, false), icon: jsxRuntime.jsx(PinOffRegular, {}) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: !isPinned, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(reactComponents.Menu, { children: [jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.Button, { icon: jsxRuntime.jsx(StarRegular, {}), shape: "circular", size: "small" }) }), jsxRuntime.jsx(reactComponents.MenuPopover, { children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsx(reactComponents.MenuItem, { icon: jsxRuntime.jsx(SwipeUpFilled, {}), onClick: () => row.pin('top', true, false), children: "Top" }), jsxRuntime.jsx(reactComponents.MenuItem, { icon: jsxRuntime.jsx(SwipeDownFilled, {}), onClick: () => row.pin('bottom', true, true), children: "Bottom" })] }) })] }) }) })] }));
+};
+
+const SelectRowCheckbox = ({ row }) => {
+    const canCheck = row.getCanSelect();
+    const isChecked = row.getIsSomeSelected() ? 'mixed' : (row.getIsSelected() || row.getIsAllSubRowsSelected());
+    return (jsxRuntime.jsx(reactComponents.Checkbox, { checked: isChecked, disabled: !canCheck, onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }));
+};
+
+const SelectRowRadio = ({ row }) => {
+    const canCheck = row.getCanSelect();
+    const isChecked = row.getIsSelected();
+    return (jsxRuntime.jsx(reactComponents.Radio, { checked: isChecked, disabled: !canCheck, onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }));
+};
+
+function TableRowRaw({ row, table, style, tabAttributes }) {
+    var _a;
     const styles = useTableBodyStyles();
-    return (jsxRuntime.jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
+    const { rowSelectionMode, tableSettings } = (_a = table.options.meta) !== null && _a !== void 0 ? _a : {};
+    return (jsxRuntime.jsxs("tr", Object.assign({ className: row.getIsSelected() || row.getIsAllSubRowsSelected()
             ? styles.tBodySelectedRow
-            : styles.tBodyRow, style: style, children: [jsxRuntime.jsxs(reactControlFlow.Switch, { when: rowSelectionMode, children: [jsxRuntime.jsx(reactControlFlow.Case, { value: 'multiple', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: row.getIsSomeSelected()
-                                    ? 'mixed'
-                                    : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) }), jsxRuntime.jsx(reactControlFlow.Case, { value: 'single', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(reactComponents.Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) })] }), row.getVisibleCells().map((cell) => (jsxRuntime.jsx(TableCell, { cell: cell, row: row }, cell.id)))] }, row.id));
+            : styles.tBodyRow, style: style }, tabAttributes, { tabIndex: 0, children: [jsxRuntime.jsx(reactControlFlow.Show, { when: !(tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.enableManualSelection), children: jsxRuntime.jsxs(reactControlFlow.Switch, { when: rowSelectionMode, children: [jsxRuntime.jsx(reactControlFlow.Case, { value: 'multiple', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row", children: jsxRuntime.jsx(SelectRowCheckbox, { row: row }) }) }), jsxRuntime.jsx(reactControlFlow.Case, { value: 'single', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row", children: jsxRuntime.jsx(SelectRowRadio, { row: row }) }) })] }) }), row.getVisibleCells().map((cell) => (jsxRuntime.jsx(TableCell, { cell: cell, row: row }, cell.id)))] }), row.id));
 }
-function PinnedRow({ row, rowSelectionMode, style, bottomRowLength }) {
+function PinnedRowRaw({ row, table, style, bottomRowLength, tabAttributes }) {
+    var _a;
     const styles = useTableBodyStyles();
-    const pinnedRowRawStyle = Object.assign({ backgroundColor: reactComponents.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 (jsxRuntime.jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
+    const headerGroupLength = table.getHeaderGroups().length;
+    const pinnedRowRawStyle = getRowPinningStyles(row, bottomRowLength || 0, headerGroupLength, style || {});
+    const { rowSelectionMode, tableSettings } = (_a = table.options.meta) !== null && _a !== void 0 ? _a : {};
+    return (jsxRuntime.jsxs("tr", Object.assign({ className: row.getIsSelected() || row.getIsAllSubRowsSelected()
             ? styles.tBodySelectedRow
-            : styles.tBodyRow, style: pinnedRowRawStyle, children: [jsxRuntime.jsxs(reactControlFlow.Switch, { when: rowSelectionMode, children: [jsxRuntime.jsx(reactControlFlow.Case, { value: 'multiple', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: row.getIsSomeSelected()
-                                    ? 'mixed'
-                                    : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) }), jsxRuntime.jsx(reactControlFlow.Case, { value: 'single', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(reactComponents.Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) })] }), row.getVisibleCells().map(cell => {
+            : styles.tBodyRow, style: pinnedRowRawStyle }, tabAttributes, { tabIndex: 0, children: [jsxRuntime.jsx(reactControlFlow.Show, { when: !(tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.enableManualSelection), children: jsxRuntime.jsxs(reactControlFlow.Switch, { when: rowSelectionMode, children: [jsxRuntime.jsx(reactControlFlow.Case, { value: 'multiple', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(SelectRowCheckbox, { row: row }) }) }), jsxRuntime.jsx(reactControlFlow.Case, { value: 'single', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(SelectRowRadio, { row: row }) }) })] }) }), row.getVisibleCells().map(cell => {
                 return (jsxRuntime.jsx(TableCell, { cell: cell, row: row }, cell.id));
-            })] }, row.id));
+            })] }), row.id));
 }
+const TableRow = TableRowRaw;
+const PinnedRow = PinnedRowRaw;
 
 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;
+    const { rowSelectionMode } = (_a = table.options.meta) !== null && _a !== void 0 ? _a : {};
     let rows = [];
     let topRows = [];
     let bottomRows = [];
@@ -1854,13 +1914,14 @@ function TableBody(props) {
     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 tabAttributes = reactComponents.useFocusableGroup({ tabBehavior: "limited" });
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactControlFlow.Show, { when: (topRows === null || topRows === void 0 ? void 0 : topRows.length) > 0, children: jsxRuntime.jsx("thead", { style: {
                         position: "sticky",
                         top: 0,
                         zIndex: 9
-                    }, children: jsxRuntime.jsx(reactControlFlow.For, { each: topRows, children: (row, index) => (jsxRuntime.jsx(PinnedRow, { row: row, rowSelectionMode: rowSelectionMode, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length }, row.id)) }) }) }), jsxRuntime.jsxs("tbody", { className: styles.tBody, children: [paddingTop > 0 && (jsxRuntime.jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsxRuntime.jsx("td", { style: { height: `${paddingTop}px` } }) })), jsxRuntime.jsx(reactControlFlow.For, { each: virtualRows || [], children: (virtualRow) => {
+                    }, children: jsxRuntime.jsx(reactControlFlow.For, { each: topRows, children: (row, index) => (jsxRuntime.jsx(PinnedRow, { row: row, table: table, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length, tabAttributes: tabAttributes }, `${row.id}_${index}`)) }) }) }), jsxRuntime.jsxs("tbody", { className: styles.tBody, children: [paddingTop > 0 && (jsxRuntime.jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsxRuntime.jsx("td", { style: { height: `${paddingTop}px` } }) })), jsxRuntime.jsx(reactControlFlow.For, { each: virtualRows || [], children: (virtualRow) => {
                             const row = rows[virtualRow.index];
-                            return (jsxRuntime.jsx(TableRow, { row: row, rowSelectionMode: rowSelectionMode }, row.id));
+                            return (jsxRuntime.jsx(TableRow, { row: row, table: table, tabAttributes: tabAttributes }, row.id));
                         } }), paddingBottom > 0 && (jsxRuntime.jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsxRuntime.jsx("td", { style: { height: `${paddingBottom}px` } }) }))] }), jsxRuntime.jsx(reactControlFlow.Show, { when: rowSelectionMode === 'multiple' && (rows === null || rows === void 0 ? void 0 : rows.length) > 0, children: jsxRuntime.jsx("tfoot", { style: {
                         position: "sticky",
                         bottom: 0,
@@ -1871,7 +1932,7 @@ function TableBody(props) {
                         position: "sticky",
                         bottom: 0,
                         zIndex: 9
-                    }, children: jsxRuntime.jsx(reactControlFlow.For, { each: bottomRows, children: (row) => (jsxRuntime.jsx(PinnedRow, { row: row, rowSelectionMode: rowSelectionMode, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length }, row.id)) }) }) })] }));
+                    }, children: jsxRuntime.jsx(reactControlFlow.For, { each: bottomRows, children: (row) => (jsxRuntime.jsx(PinnedRow, { row: row, table: table, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length, tabAttributes: tabAttributes }, row.id)) }) }) })] }));
 }
 
 const TableContainer = (props) => {
@@ -2365,8 +2426,12 @@ function useSkipper() {
 }
 
 Object.defineProperty(exports, 'createColumnHelper', {
-  enumerable: true,
-  get: function () { return reactTable.createColumnHelper; }
+    enumerable: true,
+    get: function () { return reactTable.createColumnHelper; }
 });
+exports.PinRowAction = PinRowAction;
+exports.SelectRowCheckbox = SelectRowCheckbox;
+exports.SelectRowRadio = SelectRowRadio;
 exports.Table = ForwardedAdvancedTable;
+exports.disableAllShorthand = disableAllShorthand;
 exports.useSkipper = useSkipper;

package/index.esm.js

@@ -1,7 +1,7 @@
 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, 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 { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, useArrowNavigationGroup, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Checkbox, mergeClasses as mergeClasses$1, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, useFocusableGroup, 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';
@@ -12,6 +12,17 @@ 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';
 
+const disableAllShorthand = {
+    enableGrouping: false,
+    enableHiding: false,
+    enablePinning: false,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableGlobalFilter: false,
+    enableMultiSort: false,
+    enableResizing: false,
+};
+
 const useStaticStyles = makeStaticStyles({
     "*": {
         boxSizing: "border-box",
@@ -1019,10 +1030,17 @@ const SaveFilled = /*#__PURE__*/createFluentIcon('SaveFilled', "1em", ["M3 5c0-1
 const SaveRegular = /*#__PURE__*/createFluentIcon('SaveRegular', "1em", ["M3 5c0-1.1.9-2 2-2h8.38a2 2 0 0 1 1.41.59l1.62 1.62A2 2 0 0 1 17 6.62V15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1v-4.5c0-.83.67-1.5 1.5-1.5h7c.83 0 1.5.67 1.5 1.5V16a1 1 0 0 0 1-1V6.62a1 1 0 0 0-.3-.7L14.1 4.28a1 1 0 0 0-.71-.29H13v2.5c0 .83-.67 1.5-1.5 1.5h-4A1.5 1.5 0 0 1 6 6.5V4H5Zm2 0v2.5c0 .28.22.5.5.5h4a.5.5 0 0 0 .5-.5V4H7Zm7 12v-4.5a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5V16h8Z"]);
 const SearchFilled = /*#__PURE__*/createFluentIcon('SearchFilled', "1em", ["M8.5 3a5.5 5.5 0 0 1 4.38 8.82l4.15 4.15a.75.75 0 0 1-.98 1.13l-.08-.07-4.15-4.15A5.5 5.5 0 1 1 8.5 3Zm0 1.5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"]);
 const SearchRegular = /*#__PURE__*/createFluentIcon('SearchRegular', "1em", ["M8.5 3a5.5 5.5 0 0 1 4.23 9.02l4.12 4.13a.5.5 0 0 1-.63.76l-.07-.06-4.13-4.12A5.5 5.5 0 1 1 8.5 3Zm0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"]);
+const StarRegular = /*#__PURE__*/createFluentIcon('StarRegular', "1em", ["M9.1 2.9a1 1 0 0 1 1.8 0l1.93 3.91 4.31.63a1 1 0 0 1 .56 1.7l-3.12 3.05.73 4.3a1 1 0 0 1-1.45 1.05L10 15.51l-3.86 2.03a1 1 0 0 1-1.45-1.05l.74-4.3L2.3 9.14a1 1 0 0 1 .56-1.7l4.31-.63L9.1 2.9Zm.9.44L8.07 7.25a1 1 0 0 1-.75.55L3 8.43l3.12 3.04a1 1 0 0 1 .3.89l-.75 4.3 3.87-2.03a1 1 0 0 1 .93 0l3.86 2.03-.74-4.3a1 1 0 0 1 .29-.89L17 8.43l-4.32-.63a1 1 0 0 1-.75-.55L10 3.35Z"]);
+const SwipeDownFilled = /*#__PURE__*/createFluentIcon('SwipeDownFilled', "1em", ["M14 6a4 4 0 0 1-2.25 3.6V8.44a3 3 0 1 0-3.5 0V9.6A4 4 0 1 1 14 6ZM9.47 17.78c.3.3.77.3 1.06 0l2.5-2.5a.75.75 0 1 0-1.06-1.06l-1.22 1.22V5.75a.75.75 0 0 0-1.5 0v9.69l-1.22-1.22a.75.75 0 0 0-1.06 1.06l2.5 2.5Z"]);
+const SwipeUpFilled = /*#__PURE__*/createFluentIcon('SwipeUpFilled', "1em", ["M10.53 2.22a.75.75 0 0 0-1.06 0l-2.5 2.5a.75.75 0 0 0 1.06 1.06l1.22-1.22v9.69a.75.75 0 0 0 1.5 0V4.56l1.22 1.22a.75.75 0 1 0 1.06-1.06l-2.5-2.5ZM6 14a4 4 0 0 1 2.25-3.6v1.16a3 3 0 1 0 3.5 0V10.4A4 4 0 1 1 6 14Z"]);
 
 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 TextCollapseFilled = /*#__PURE__*/createFluentIcon('TextCollapseFilled', "1em", ["M5 3.5c0-.41.34-.75.75-.75h11.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 3.5Zm0 12c0-.41.34-.75.75-.75h11.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 15.5Zm6.75-8.75a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5h-5.5ZM11 11.5c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm-2-2a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-6 0c0 .28.22.5.5.5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0-.5.5Z"]);
+const TextCollapseRegular = /*#__PURE__*/createFluentIcon('TextCollapseRegular', "1em", ["M5 3.5c0-.28.22-.5.5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5Zm0 12c0-.28.22-.5.5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5Zm6-8c0-.28.22-.5.5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm0 4c0-.28.22-.5.5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm-2-2a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0ZM3.5 9a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z"]);
+const TextExpandFilled = /*#__PURE__*/createFluentIcon('TextExpandFilled', "1em", ["M4.75 3.5a.75.75 0 0 0 0 1.5h12.5a.75.75 0 0 0 0-1.5H4.75ZM4 16.25c0-.41.34-.75.75-.75h12.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75Zm7-4c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm0-4c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75ZM5.5 14a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM6 8.5V10h1.5a.5.5 0 0 1 0 1H6v1.5a.5.5 0 0 1-1 0V11H3.5a.5.5 0 0 1 0-1H5V8.5a.5.5 0 0 1 1 0Z"]);
+const TextExpandRegular = /*#__PURE__*/createFluentIcon('TextExpandRegular', "1em", ["M4 4.5c0-.28.22-.5.5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 12c0-.28.22-.5.5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm6-4c0-.28.22-.5.5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0-4c0-.28.22-.5.5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5ZM5.5 14a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7ZM6 8.5a.5.5 0 0 0-1 0V10H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V11h1.5a.5.5 0 0 0 0-1H6V8.5Z"]);
 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"]);
 
@@ -1150,10 +1168,11 @@ const useGridHeaderStyles = makeStyles({
 
 const GridHeader = (props) => {
     const { table, gridTitle, globalFilter, setGlobalFilter } = props;
+    const focusAttribute = useArrowNavigationGroup({ axis: "horizontal", circular: true });
     /* 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) => {
+    return (jsxs("div", { className: styles.tableTopHeaderContainer, children: [jsx("div", { className: styles.tableTopHeaderLeft, children: gridTitle }), jsxs("div", Object.assign({ className: styles.tableTopHeaderRight }, focusAttribute, { 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')
@@ -1165,7 +1184,7 @@ const GridHeader = (props) => {
                                             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: () => {
                                 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 })] })] }));
+                            }, 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, }) {
@@ -1271,7 +1290,7 @@ function tableReducer(state, action) {
 }
 
 const useGridContainer = (props, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData } = props;
     const [drawerState, dispatch] = React.useReducer(tableReducer, {
         isFilterDrawerOpen: false,
@@ -1328,7 +1347,7 @@ const useGridContainer = (props, ref) => {
             rowPinning
         },
         getRowId(originalRow, index, parent) {
-            const keyProps = props.dataPrimaryKye || 'id';
+            const keyProps = props.dataPrimaryKye;
             return originalRow[keyProps] || `${index}`;
         },
         columnResizeMode: 'onChange',
@@ -1364,6 +1383,7 @@ const useGridContainer = (props, ref) => {
         meta: {
             pageSizeOptions: props.pageSizeOptions || [10, 20, 50, 100, 1000],
             rowSelectionMode: props.rowSelectionMode,
+            isAutoExpandOnGroup: (_k = props.isAutoExpandOnGroup) !== null && _k !== void 0 ? _k : false,
             tableHeight: props.tableHeight || "650px",
             updateData: onUpdateData,
             onTableViewDelete: props.onTableViewDelete,
@@ -1382,7 +1402,8 @@ const useGridContainer = (props, ref) => {
             setExpanded,
             setColumnPinning,
             setColumnSizing,
-            setRowPinning
+            setRowPinning,
+            tableSettings: (_l = props.tableSettings) !== null && _l !== void 0 ? _l : {},
         }
     });
     const tableViews = React.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
@@ -1558,15 +1579,21 @@ const getBodyCellPinningStyles = (column, isDragging, additionalStyles) => {
                 : 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 ? 2 : (isPinned ? 1 : 0) }, additionalStyles);
     return styles;
 };
+const getRowPinningStyles = (row, bottomRowLength, headerGroupLength, additionalStyles) => {
+    const styles = Object.assign({ backgroundColor: tokens.colorPaletteYellowBackground2, position: 'sticky', top: row.getIsPinned() === 'top' ? `${row.getPinnedIndex() * 35 + (39 * headerGroupLength)}px` : undefined, bottom: row.getIsPinned() === 'bottom' ? `${((bottomRowLength || 0) - 1 - row.getPinnedIndex()) * 35}px` : undefined }, 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 GroupExpandIcon = bundleIcon$1(TextExpandFilled, TextExpandRegular);
+const GroupCollapseIcon = bundleIcon$1(TextCollapseFilled, TextCollapseRegular);
+function HeaderCell({ header, table, tabAttributes }) {
+    var _a, _b, _c;
+    const { column, id } = header;
     const { isDragging, attributes, listeners, setNodeRef, transform, transition, } = useSortable({
         id: column.id
     });
@@ -1575,13 +1602,13 @@ function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderD
         transition
     };
     const styles = useTableHeaderStyles();
-    const isLeafHeaders = headerDepth === totalNumberOfHeaderDepth;
+    const isLeafHeaders = ((_b = (_a = `${id}`) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b.length) === 1;
     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
+    return (jsxs("th", Object.assign({ colSpan: header.colSpan, className: mergeClasses$1(styles.tHeadCell, isLeafHeaders && styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging), style: headerCellCombinedStyles, ref: setNodeRef }, tabAttributes, { tabIndex: 0, 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',
@@ -1596,10 +1623,10 @@ function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderD
                                         if (!header.column.getCanGroup())
                                             return;
                                         header.column.getToggleGroupingHandler()();
-                                    }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_a = {
+                                    }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_c = {
                                         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 }) })] }));
+                                    }[header.column.getIsSorted()]) !== null && _c !== void 0 ? _c : 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: !isLeafHeaders })] }) })), 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;
@@ -1625,7 +1652,15 @@ function HeaderMenu(props) {
                                             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: () => {
+                                        }, 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()();
+                                            const { isAutoExpandOnGroup } = table.options.meta;
+                                            if (isAutoExpandOnGroup) {
+                                                table.toggleAllRowsExpanded(true);
+                                            }
+                                        }, icon: jsx(GroupFilled, {}), children: ["Group Column (by ", columnName, ")"] })), jsxs(Show, { when: header.column.getIsGrouped(), children: [jsxs(MenuItem, { onClick: () => {
+                                                    header.column.getToggleGroupingHandler()();
+                                                }, icon: jsx(GroupDismissFilled, {}), children: ["Remove Grouping (on ", columnName, ")"] }), jsx(MenuItem, { onClick: () => table.toggleAllRowsExpanded(), icon: table.getIsAllRowsExpanded() ? jsx(GroupCollapseIcon, {}) : jsx(GroupExpandIcon, {}), children: jsx(Show, { when: table.getIsAllRowsExpanded(), fallback: jsx(Fragment, { children: "Expand All Groups" }), children: "Collapse All Groups" }) })] }), 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: () => {
@@ -1649,19 +1684,24 @@ function HeaderMenu(props) {
 }
 
 function HeaderRow(props) {
+    var _a;
     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));
+    const { table, headerGroup, headerGroupsLength } = props;
+    const { rowSelectionMode, tableSettings } = (_a = table.options.meta) !== null && _a !== void 0 ? _a : {};
+    const headerCellTabAttributes = useFocusableGroup({ tabBehavior: "limited" });
+    const isLeafHeaders = headerGroup.depth === headerGroupsLength - 1;
+    return (jsxs("tr", { className: styles.tHeadRow, children: [jsx(Show, { when: !(tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.enableManualSelection), children: jsxs(Switch, { when: rowSelectionMode, children: [jsx(Case, { value: "multiple", children: jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row", children: jsx(Show, { when: isLeafHeaders, children: jsx(Checkbox, { checked: table.getIsSomeRowsSelected()
+                                            ? 'mixed'
+                                            : table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select All Rows", title: 'Select All Rows' }) }) }) }), jsx(Case, { value: "single", children: jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row Column", children: ' ' }) })] }) }), jsx(For, { each: headerGroup.headers, children: (header, index) => {
+                    return (jsx(HeaderCell, { header: header, table: table, tabAttributes: headerCellTabAttributes }, `${header.id}_${index}`));
+                } })] }, 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 focusAttribute = useFocusableGroup({ tabBehavior: "limited-trap-focus" });
+    return (jsx("thead", Object.assign({ className: styles.tHead, style: { zIndex: 99 } }, focusAttribute, { tabIndex: 0, 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({
@@ -1784,31 +1824,51 @@ function TableCell({ cell, row }) {
     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 PinRowAction = ({ row }) => {
+    const isPinned = row.getIsPinned();
+    return (jsxs(Fragment, { children: [jsx(Show, { when: isPinned, children: jsx(Button, { size: "small", shape: "circular", onClick: () => row.pin(false, true, false), icon: jsx(PinOffRegular, {}) }) }), jsx(Show, { when: !isPinned, children: jsx("div", { children: jsxs(Menu, { children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(Button, { icon: jsx(StarRegular, {}), shape: "circular", size: "small" }) }), jsx(MenuPopover, { children: jsxs(MenuList, { children: [jsx(MenuItem, { icon: jsx(SwipeUpFilled, {}), onClick: () => row.pin('top', true, false), children: "Top" }), jsx(MenuItem, { icon: jsx(SwipeDownFilled, {}), onClick: () => row.pin('bottom', true, true), children: "Bottom" })] }) })] }) }) })] }));
+};
+
+const SelectRowCheckbox = ({ row }) => {
+    const canCheck = row.getCanSelect();
+    const isChecked = row.getIsSomeSelected() ? 'mixed' : (row.getIsSelected() || row.getIsAllSubRowsSelected());
+    return (jsx(Checkbox, { checked: isChecked, disabled: !canCheck, onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }));
+};
+
+const SelectRowRadio = ({ row }) => {
+    const canCheck = row.getCanSelect();
+    const isChecked = row.getIsSelected();
+    return (jsx(Radio, { checked: isChecked, disabled: !canCheck, onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }));
+};
+
+function TableRowRaw({ row, table, style, tabAttributes }) {
+    var _a;
     const styles = useTableBodyStyles();
-    return (jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
+    const { rowSelectionMode, tableSettings } = (_a = table.options.meta) !== null && _a !== void 0 ? _a : {};
+    return (jsxs("tr", Object.assign({ 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));
+            : styles.tBodyRow, style: style }, tabAttributes, { tabIndex: 0, children: [jsx(Show, { when: !(tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.enableManualSelection), children: jsxs(Switch, { when: rowSelectionMode, children: [jsx(Case, { value: 'multiple', children: jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row", children: jsx(SelectRowCheckbox, { row: row }) }) }), jsx(Case, { value: 'single', children: jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row", children: jsx(SelectRowRadio, { row: row }) }) })] }) }), row.getVisibleCells().map((cell) => (jsx(TableCell, { cell: cell, row: row }, cell.id)))] }), row.id));
 }
-function PinnedRow({ row, rowSelectionMode, style, bottomRowLength }) {
+function PinnedRowRaw({ row, table, style, bottomRowLength, tabAttributes }) {
+    var _a;
     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()
+    const headerGroupLength = table.getHeaderGroups().length;
+    const pinnedRowRawStyle = getRowPinningStyles(row, bottomRowLength || 0, headerGroupLength, style || {});
+    const { rowSelectionMode, tableSettings } = (_a = table.options.meta) !== null && _a !== void 0 ? _a : {};
+    return (jsxs("tr", Object.assign({ 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 => {
+            : styles.tBodyRow, style: pinnedRowRawStyle }, tabAttributes, { tabIndex: 0, children: [jsx(Show, { when: !(tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.enableManualSelection), children: jsxs(Switch, { when: rowSelectionMode, children: [jsx(Case, { value: 'multiple', children: jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsx(SelectRowCheckbox, { row: row }) }) }), jsx(Case, { value: 'single', children: jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsx(SelectRowRadio, { row: row }) }) })] }) }), row.getVisibleCells().map(cell => {
                 return (jsx(TableCell, { cell: cell, row: row }, cell.id));
-            })] }, row.id));
+            })] }), row.id));
 }
+const TableRow = TableRowRaw;
+const PinnedRow = PinnedRowRaw;
 
 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;
+    const { rowSelectionMode } = (_a = table.options.meta) !== null && _a !== void 0 ? _a : {};
     let rows = [];
     let topRows = [];
     let bottomRows = [];
@@ -1832,13 +1892,14 @@ function TableBody(props) {
     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 tabAttributes = useFocusableGroup({ tabBehavior: "limited" });
     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: 9
-                    }, 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) => {
+                    }, children: jsx(For, { each: topRows, children: (row, index) => (jsx(PinnedRow, { row: row, table: table, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length, tabAttributes: tabAttributes }, `${row.id}_${index}`)) }) }) }), 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));
+                            return (jsx(TableRow, { row: row, table: table, tabAttributes: tabAttributes }, 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,
@@ -1849,7 +1910,7 @@ function TableBody(props) {
                         position: "sticky",
                         bottom: 0,
                         zIndex: 9
-                    }, 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)) }) }) })] }));
+                    }, children: jsx(For, { each: bottomRows, children: (row) => (jsx(PinnedRow, { row: row, table: table, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length, tabAttributes: tabAttributes }, row.id)) }) }) })] }));
 }
 
 const TableContainer = (props) => {
@@ -2342,4 +2403,4 @@ function useSkipper() {
     return [shouldSkip, skip];
 }
 
-export { ForwardedAdvancedTable as Table, useSkipper };
+export { PinRowAction, SelectRowCheckbox, SelectRowRadio, ForwardedAdvancedTable as Table, disableAllShorthand, useSkipper };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@prt-ts/fluent-react-table-v2",
-  "version": "9.46.8-build.8.0",
+  "version": "9.47.1-build-1.0",
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
-    "@fluentui/react-components": ">=9.46.8",
+    "@fluentui/react-components": ">=9.47.1",
     "@fluentui/react-datepicker-compat": ">=0.4.5"
   },
   "dependencies": {

package/src/lib/components/extensions/PinRowAction.d.ts

@@ -0,0 +1,6 @@
+import { Row, RowData } from "@tanstack/react-table";
+type PinRowActionProps<TData extends RowData> = {
+    row: Row<TData>;
+};
+export declare const PinRowAction: <TData extends unknown>({ row }: PinRowActionProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/components/extensions/SelectRowCheckbox.d.ts

@@ -0,0 +1,6 @@
+import { Row, RowData } from "@tanstack/react-table";
+type SelectRowCheckboxProps<TData extends RowData> = {
+    row: Row<TData>;
+};
+export declare const SelectRowCheckbox: <TData extends unknown>({ row }: SelectRowCheckboxProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/components/extensions/SelectRowRadio.d.ts

@@ -0,0 +1,6 @@
+import { Row, RowData } from "@tanstack/react-table";
+type SelectRowRadioProps<TData extends RowData> = {
+    row: Row<TData>;
+};
+export declare const SelectRowRadio: <TData extends unknown>({ row }: SelectRowRadioProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/components/extensions/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./PinRowAction";
+export * from "./SelectRowCheckbox";
+export * from "./SelectRowRadio";

package/src/lib/components/filters/Filter.d.ts

@@ -1,4 +1,4 @@
-import { Column, Table } from '@tanstack/react-table';
+import { Column, RowData, Table } from '@tanstack/react-table';
 export declare const Filter: <TItem extends unknown>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;

package/src/lib/components/filters/FilterMultiSelectCheckbox.d.ts

@@ -1,5 +1,5 @@
 import { Column, Table } from '@tanstack/react-table';
-export declare const FilterMultiSelectCheckbox: <TItem extends object>({ column, table, }: {
+export declare const FilterMultiSelectCheckbox: <TItem extends unknown>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filters/FilterSelectRadio.d.ts

@@ -1,5 +1,5 @@
 import { Column, Table } from "@tanstack/react-table";
-export declare const FilterSelectRadio: <TItem extends object>({ column, table, }: {
+export declare const FilterSelectRadio: <TItem extends unknown>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/tbody/TableRow.d.ts

@@ -1,12 +1,14 @@
 /// <reference types="react" />
-import { Row, RowData } from '@tanstack/react-table';
-import { TableProps } from '../../types';
+import { Row, RowData, Table } from '@tanstack/react-table';
 type TableRowProps<TItem extends RowData> = {
+    table: Table<TItem>;
     row: Row<TItem>;
-    rowSelectionMode?: TableProps<TItem>['rowSelectionMode'];
     bottomRowLength?: number;
     style?: React.CSSProperties;
+    tabAttributes: any;
 };
-export declare function TableRow<TItem extends RowData>({ row, rowSelectionMode, style }: TableRowProps<TItem>): import("react/jsx-runtime").JSX.Element;
-export declare function PinnedRow<TItem extends RowData>({ row, rowSelectionMode, style, bottomRowLength }: TableRowProps<TItem>): import("react/jsx-runtime").JSX.Element;
+declare function TableRowRaw<TItem extends RowData>({ row, table, style, tabAttributes }: TableRowProps<TItem>): import("react/jsx-runtime").JSX.Element;
+declare function PinnedRowRaw<TItem extends RowData>({ row, table, style, bottomRowLength, tabAttributes }: TableRowProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare const TableRow: typeof TableRowRaw;
+export declare const PinnedRow: typeof PinnedRowRaw;
 export {};

package/src/lib/components/thead/HeaderCell.d.ts

@@ -2,9 +2,7 @@ import { Header, RowData, Table } from "@tanstack/react-table";
 type HeaderCellProps<TItem extends RowData> = {
     header: Header<TItem, unknown>;
     table: Table<TItem>;
-    hideMenu?: boolean;
-    headerDepth: number;
-    totalNumberOfHeaderDepth: number;
+    tabAttributes: any;
 };
-export declare function HeaderCell<TItem extends RowData>({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }: HeaderCellProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderCell<TItem extends RowData>({ header, table, tabAttributes }: HeaderCellProps<TItem>): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/thead/HeaderRow.d.ts

@@ -1,8 +1,6 @@
 import { HeaderGroup, RowData, Table } from '@tanstack/react-table';
-import { TableProps } from '../../types';
 type HeaderRowProps<TItem extends RowData> = {
     table: Table<TItem>;
-    rowSelectionMode?: TableProps<TItem>['rowSelectionMode'];
     headerGroup: HeaderGroup<TItem>;
     headerGroupsLength: number;
 };

package/src/lib/helpers/Shorthands.d.ts

@@ -0,0 +1,10 @@
+export declare const disableAllShorthand: {
+    enableGrouping: boolean;
+    enableHiding: boolean;
+    enablePinning: boolean;
+    enableSorting: boolean;
+    enableColumnFilter: boolean;
+    enableGlobalFilter: boolean;
+    enableMultiSort: boolean;
+    enableResizing: boolean;
+};

package/src/lib/helpers/StylesHelper.d.ts

@@ -1,4 +1,5 @@
-import { Column } from "@tanstack/react-table";
+import { Column, Row } from "@tanstack/react-table";
 import { CSSProperties } from "react";
 export declare const getHeaderCellPinningStyles: <TItem extends unknown>(column: Column<TItem, unknown>, isDragging: boolean, additionalStyles: CSSProperties) => CSSProperties;
 export declare const getBodyCellPinningStyles: <TItem extends unknown>(column: Column<TItem, unknown>, isDragging: boolean, additionalStyles: CSSProperties) => CSSProperties;
+export declare const getRowPinningStyles: <TItem extends unknown>(row: Row<TItem>, bottomRowLength: number, headerGroupLength: number, additionalStyles: CSSProperties) => CSSProperties;

package/src/lib/index.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
 import { ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingState, ExpandedState, FilterFn, GroupingState, PaginationState, RowData, RowPinningState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
-import { TableProps } from "./types";
+import { TableProps, TableSettings } from "./types";
 import { ActionType, DrawerTableState } from "./components/reducer";
+export { disableAllShorthand } from "./helpers/Shorthands";
+export { Table, useSkipper } from "./components";
+export * from "./components/extensions";
 declare module '@tanstack/table-core' {
     interface FilterFns {
         arrIncludesSome: FilterFn<unknown>;
@@ -18,6 +21,7 @@ declare module '@tanstack/react-table' {
     interface TableMeta<TData extends RowData> {
         rowSelectionMode: TableProps<TData>["rowSelectionMode"];
         pageSizeOptions: TableProps<TData>["pageSizeOptions"];
+        isAutoExpandOnGroup: TableProps<TData>["isAutoExpandOnGroup"];
         tableHeight: string;
         updateData?: (rowIndex: number, columnId: string, value: unknown) => void;
         onTableViewSave?: TableProps<TData>["onTableViewSave"];
@@ -36,9 +40,9 @@ declare module '@tanstack/react-table' {
         setColumnPinning: React.Dispatch<React.SetStateAction<ColumnPinningState>>;
         setColumnSizing: React.Dispatch<React.SetStateAction<ColumnSizingState>>;
         setRowPinning: React.Dispatch<React.SetStateAction<RowPinningState>>;
+        tableSettings: TableSettings;
     }
 }
-export { Table, useSkipper } from "./components";
 export type { TableProps, TableRef, TableView } from "./types";
-export type { TableState, ColumnDef } from '@tanstack/react-table';
+export type { TableState, ColumnDef, Column as ColumnType, Row as RowType, RowData as RowDataType, Table as TableType } from '@tanstack/react-table';
 export { createColumnHelper } from "@tanstack/react-table";

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

@@ -16,6 +16,11 @@ export type TableProps<TItem extends RowData> = {
      * Table loading state.
      */
     isLoading?: boolean;
+    /**
+     * While grouping isExpanded will use to make default expand state.
+     * @default false
+     */
+    isAutoExpandOnGroup?: boolean;
     /**
      * Grid title
      */
@@ -108,4 +113,11 @@ export type TableProps<TItem extends RowData> = {
      * disable table header
      */
     disableTableHeader?: boolean;
+    tableSettings?: TableSettings;
+};
+export type TableSettings = {
+    /**
+     * Enable manual selection of table view
+     */
+    enableManualSelection?: boolean;
 };