material-react-table 2.8.0 → 2.9.0

package/dist/index.esm.js

@@ -212,7 +212,7 @@ const createRow = (table, originalRow, rowIndex = -1, depth = 0, subRows, parent
     [getColumnId(col)]: '',
 }))), rowIndex, depth, subRows, parentId);
 
-function defaultDisplayColumnProps({ header, id, size = 60, tableOptions, }) {
+function defaultDisplayColumnProps({ header, id, size, tableOptions, }) {
     const { defaultDisplayColumn, displayColumnDefOptions, localization } = tableOptions;
     return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultDisplayColumn), { header: header ? localization[header] : '', size }), displayColumnDefOptions === null || displayColumnDefOptions === void 0 ? void 0 : displayColumnDefOptions[id]), { id });
 }
@@ -270,6 +270,31 @@ const getDefaultColumnOrderIds = (tableOptions) => {
     return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
 };
 
+const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
+const getValueAndLabel = (option) => {
+    var _a, _b, _c;
+    let label = '';
+    let value = '';
+    if (option) {
+        if (typeof option !== 'object') {
+            label = option;
+            value = option;
+        }
+        else {
+            label = (_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.text) !== null && _b !== void 0 ? _b : option.value;
+            value = (_c = option.value) !== null && _c !== void 0 ? _c : label;
+        }
+    }
+    return { label, value };
+};
+
+const getIsRowSelected = ({ row, table, }) => {
+    const { options: enableRowSelection } = table;
+    return (row.getIsSelected() ||
+        (parseFromValuesOrFunc(enableRowSelection, row) &&
+            row.getCanSelectSubRows() &&
+            row.getIsAllSubRowsSelected()));
+};
 const getCanRankRows = (table) => {
     const { getState, options } = table;
     const { enableGlobalFilterRankedResults, manualExpanding, manualFiltering, manualGrouping, manualSorting, } = options;
@@ -416,24 +441,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
-const getValueAndLabel = (option) => {
-    var _a, _b, _c;
-    let label = '';
-    let value = '';
-    if (option) {
-        if (typeof option !== 'object') {
-            label = option;
-            value = option;
-        }
-        else {
-            label = (_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.text) !== null && _b !== void 0 ? _b : option.value;
-            value = (_c = option.value) !== null && _c !== void 0 ? _c : label;
-        }
-    }
-    return { label, value };
-};
-
 const MRT_EditActionButtons = (_a) => {
     var { row, table, variant = 'icon' } = _a, rest = __rest(_a, ["row", "table", "variant"]);
     const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowCancel, onEditingRowSave, }, refs: { editInputRefs }, setCreatingRow, setEditingRow, } = table;
@@ -493,40 +500,58 @@ const getMRTTheme = (table, theme) => {
             ? darken(theme.palette.warning.dark, 0.25)
             : lighten(theme.palette.warning.light, 0.5), menuBackgroundColor: lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1), selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2) }, themeOverrides);
 };
+const pinnedBeforeAfterStyles = {
+    content: '""',
+    height: '100%',
+    left: 0,
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    zIndex: -1,
+};
+const getCommonPinnedCellStyles = ({ column, table, theme, }) => {
+    const { baseBackgroundColor } = getMRTTheme(table, theme);
+    return {
+        '&[data-pinned="true"]': {
+            '&:before': Object.assign({ backgroundColor: alpha(darken(baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01), 0.97), boxShadow: column
+                    ? getIsLastLeftPinnedColumn(table, column)
+                        ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+                        : getIsFirstRightPinnedColumn(column)
+                            ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+                            : undefined
+                    : undefined }, pinnedBeforeAfterStyles),
+        },
+    };
+};
 const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { options: { layoutMode }, } = table;
+    var _a, _b, _c, _d, _e, _f;
+    const { options: { enableColumnVirtualization, layoutMode }, } = table;
     const { columnDef } = column;
+    const isColumnPinned = columnDef.columnDefType !== 'group' && column.getIsPinned();
     const widthStyles = {
         minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) * 1px), ${(_b = columnDef.minSize) !== null && _b !== void 0 ? _b : 30}px)`,
-        width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_c = header === null || header === void 0 ? void 0 : header.id) !== null && _c !== void 0 ? _c : column.id)}-size) * 1px${header && layoutMode === 'grid-no-grow' ? ` + ${(_e = (_d = header === null || header === void 0 ? void 0 : header.subHeaders) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0}rem` : ''})`,
+        width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_c = header === null || header === void 0 ? void 0 : header.id) !== null && _c !== void 0 ? _c : column.id)}-size) * 1px)`,
     };
     if (layoutMode === 'grid') {
         widthStyles.flex = `${[0, false].includes(columnDef.grow)
             ? 0
-            : `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_f = header === null || header === void 0 ? void 0 : header.id) !== null && _f !== void 0 ? _f : column.id)}-size)`} 0 auto`;
+            : `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_d = header === null || header === void 0 ? void 0 : header.id) !== null && _d !== void 0 ? _d : column.id)}-size)`} 0 auto`;
     }
     else if (layoutMode === 'grid-no-grow') {
         widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
     }
-    return Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && columnDef.columnDefType !== 'group'
-            ? alpha(darken(getMRTTheme(table, theme).baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01), 0.97)
-            : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
-            ? `-4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
-            : getIsFirstRightPinnedColumn(column)
-                ? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
-                : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, left: column.getIsPinned() === 'left'
-            ? `${column.getStart('left')}px`
-            : undefined, opacity: ((_g = table.getState().draggingColumn) === null || _g === void 0 ? void 0 : _g.id) === column.id ||
-            ((_h = table.getState().hoveredColumn) === null || _h === void 0 ? void 0 : _h.id) === column.id
+    const pinnedStyles = isColumnPinned
+        ? Object.assign(Object.assign({}, getCommonPinnedCellStyles({ column, table, theme })), { left: isColumnPinned === 'left'
+                ? `${column.getStart('left')}px`
+                : undefined, opacity: 0.97, position: 'sticky', right: isColumnPinned === 'right'
+                ? `${getTotalRight(table, column)}px`
+                : undefined, zIndex: 1 }) : {};
+    return Object.assign(Object.assign(Object.assign({ backgroundColor: 'inherit', backgroundImage: 'inherit', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, opacity: ((_e = table.getState().draggingColumn) === null || _e === void 0 ? void 0 : _e.id) === column.id ||
+            ((_f = table.getState().hoveredColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id
             ? 0.5
-            : 1, position: column.getIsPinned() && columnDef.columnDefType !== 'group'
-            ? 'sticky'
-            : undefined, right: column.getIsPinned() === 'right'
-            ? `${getTotalRight(table, column)}px`
-            : undefined, transition: table.options.enableColumnVirtualization
+            : 1, position: 'relative', transition: enableColumnVirtualization
             ? 'none'
-            : `padding 150ms ease-in-out` }, widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
+            : `padding 150ms ease-in-out`, zIndex: 0 }, pinnedStyles), widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
 };
 const getCommonToolbarStyles = ({ table, theme, }) => ({
     alignItems: 'flex-start',
@@ -961,6 +986,7 @@ const getMRT_RowActionsColumnDef = (tableOptions) => {
     return Object.assign({ Cell: ({ cell, row, staticRowIndex, table }) => (jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, staticRowIndex: staticRowIndex, table: table })) }, defaultDisplayColumnProps({
         header: 'actions',
         id: 'mrt-row-actions',
+        size: 70,
         tableOptions,
     }));
 };
@@ -1016,6 +1042,7 @@ const getMRT_RowDragColumnDef = (tableOptions) => {
     return Object.assign({ Cell: ({ row, rowRef, table }) => (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), grow: false }, defaultDisplayColumnProps({
         header: 'move',
         id: 'mrt-row-drag',
+        size: 60,
         tableOptions,
     }));
 };
@@ -1070,6 +1097,7 @@ const MRT_ExpandButton = ({ row, staticRowIndex, table, }) => {
 };
 
 const getMRT_RowExpandColumnDef = (tableOptions) => {
+    var _a;
     if (!showRowExpandColumn(tableOptions)) {
         return null;
     }
@@ -1099,9 +1127,11 @@ const getMRT_RowExpandColumnDef = (tableOptions) => {
         header: 'expand',
         id: 'mrt-row-expand',
         size: groupedColumnMode === 'remove'
-            ? defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.size
+            ? (_a = defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.size) !== null && _a !== void 0 ? _a : 180
             : renderDetailPanel
-                ? 60
+                ? enableExpandAll
+                    ? 60
+                    : 70
                 : 100,
         tableOptions,
     }));
@@ -1121,6 +1151,7 @@ const getMRT_RowNumbersColumnDef = (tableOptions) => {
         }, Header: () => localization.rowNumber, grow: false }, defaultDisplayColumnProps({
         header: 'rowNumbers',
         id: 'mrt-row-numbers',
+        size: 50,
         tableOptions,
     }));
 };
@@ -1169,15 +1200,17 @@ const getMRT_RowPinningColumnDef = (tableOptions) => {
     return Object.assign({ Cell: ({ row, table }) => (jsx(MRT_TableBodyRowPinButton, { row: row, table: table })), grow: false }, defaultDisplayColumnProps({
         header: 'pin',
         id: 'mrt-row-pin',
+        size: 60,
         tableOptions,
     }));
 };
 
 const MRT_SelectCheckbox = (_a) => {
     var _b;
-    var { row, selectAll, staticRowIndex, table } = _a, rest = __rest(_a, ["row", "selectAll", "staticRowIndex", "table"]);
+    var { row, staticRowIndex, table } = _a, rest = __rest(_a, ["row", "staticRowIndex", "table"]);
     const { getState, options: { enableMultiRowSelection, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, } = table;
     const { density, isLoading } = getState();
+    const selectAll = !row;
     const checkboxProps = Object.assign(Object.assign({}, (!row
         ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
         : parseFromValuesOrFunc(muiSelectCheckboxProps, {
@@ -1215,10 +1248,7 @@ const MRT_SelectCheckbox = (_a) => {
     };
     const commonProps = Object.assign(Object.assign({ 'aria-label': selectAll
             ? localization.toggleSelectAll
-            : localization.toggleSelectRow, checked: selectAll
-            ? allRowsSelected
-            : (row === null || row === void 0 ? void 0 : row.getIsSelected()) ||
-                ((row === null || row === void 0 ? void 0 : row.getIsAllSubRowsSelected()) && row.getCanSelectSubRows()), disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
+            : localization.toggleSelectRow, checked: selectAll ? allRowsSelected : getIsRowSelected({ row, table }), disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
             'aria-label': selectAll
                 ? localization.toggleSelectAll
                 : localization.toggleSelectRow,
@@ -1243,10 +1273,11 @@ const getMRT_RowSelectColumnDef = (tableOptions) => {
     }
     const { enableMultiRowSelection, enableSelectAll } = tableOptions;
     return Object.assign({ Cell: ({ row, staticRowIndex, table }) => (jsx(MRT_SelectCheckbox, { row: row, staticRowIndex: staticRowIndex, table: table })), Header: enableSelectAll && enableMultiRowSelection
-            ? ({ table }) => jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
+            ? ({ table }) => jsx(MRT_SelectCheckbox, { table: table })
             : undefined, grow: false }, defaultDisplayColumnProps({
         header: 'select',
         id: 'mrt-row-select',
+        size: enableSelectAll ? 60 : 70,
         tableOptions,
     }));
 };
@@ -1401,25 +1432,27 @@ const MRT_DefaultDisplayColumn = {
 };
 const useMRT_TableOptions = (_a) => {
     var _b;
-    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
+    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
     const theme = useTheme();
-    const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
-    const _localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
-    const _aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
-    const _filterFns = useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
-    const _sortingFns = useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
-    const _defaultColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), [defaultColumn]);
-    const _defaultDisplayColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [defaultDisplayColumn]);
+    icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
+    localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
+    aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
+    filterFns = useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
+    sortingFns = useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
+    defaultColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), [defaultColumn]);
+    defaultDisplayColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [defaultDisplayColumn]);
+    //cannot be changed after initialization
+    [enableColumnVirtualization, enableRowVirtualization] = useMemo(() => [enableColumnVirtualization, enableRowVirtualization], []);
     if (!columnResizeDirection) {
         columnResizeDirection = theme.direction || 'ltr';
     }
     layoutMode =
         layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
     if (layoutMode === 'semantic' &&
-        (rest.enableRowVirtualization || rest.enableColumnVirtualization)) {
+        (enableRowVirtualization || enableColumnVirtualization)) {
         layoutMode = 'grid';
     }
-    if (rest.enableRowVirtualization) {
+    if (enableRowVirtualization) {
         enableStickyHeader = true;
     }
     if (enablePagination === false && manualPagination === undefined) {
@@ -1431,17 +1464,22 @@ const useMRT_TableOptions = (_a) => {
         manualPagination = true;
         manualSorting = true;
     }
-    return Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded,
+    return Object.assign({ aggregationFns,
+        autoResetExpanded,
         columnFilterDisplayMode,
         columnResizeDirection,
         columnResizeMode,
-        createDisplayMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editDisplayMode,
+        createDisplayMode,
+        defaultColumn,
+        defaultDisplayColumn,
+        editDisplayMode,
         enableBottomToolbar,
         enableColumnActions,
         enableColumnFilters,
         enableColumnOrdering,
         enableColumnPinning,
         enableColumnResizing,
+        enableColumnVirtualization,
         enableDensityToggle,
         enableExpandAll,
         enableExpanding,
@@ -1457,13 +1495,19 @@ const useMRT_TableOptions = (_a) => {
         enablePagination,
         enableRowPinning,
         enableRowSelection,
+        enableRowVirtualization,
         enableSelectAll,
         enableSorting,
         enableStickyHeader,
         enableTableFooter,
         enableTableHead,
         enableToolbarInternalActions,
-        enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode, localization: _localization, manualFiltering,
+        enableTopToolbar,
+        filterFns,
+        icons,
+        layoutMode,
+        localization,
+        manualFiltering,
         manualGrouping,
         manualPagination,
         manualSorting,
@@ -1477,7 +1521,8 @@ const useMRT_TableOptions = (_a) => {
         positionToolbarDropZone,
         rowNumberDisplayMode,
         rowPinningDisplayMode,
-        selectAllMode, sortingFns: _sortingFns }, rest);
+        selectAllMode,
+        sortingFns }, rest);
 };
 
 const blankColProps = {
@@ -1767,68 +1812,60 @@ const extraIndexRangeExtractor = (range, draggingIndex) => {
 };
 
 const useMRT_ColumnVirtualizer = (table) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization, }, refs: { tableContainerRef }, } = table;
-    const { columnPinning, columnVisibility, draggingColumn } = getState();
+    var _a, _b, _c, _d;
+    const { getLeftLeafColumns, getRightLeafColumns, getState, getVisibleLeafColumns, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization, }, refs: { tableContainerRef }, } = table;
+    const { columnPinning, draggingColumn } = getState();
+    if (!enableColumnVirtualization)
+        return undefined;
     const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, {
         table,
     });
-    const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnVirtualization && enableColumnPinning
+    const visibleColumns = getVisibleLeafColumns();
+    const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnPinning
         ? [
-            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
-            table
-                .getRightLeafColumns()
-                .map((c) => table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1)
+            getLeftLeafColumns().map((c) => c.getPinnedIndex()),
+            getRightLeafColumns()
+                .map((column) => visibleColumns.length - column.getPinnedIndex() - 1)
                 .sort((a, b) => a - b),
         ]
-        : [[], []], [columnPinning, enableColumnVirtualization, enableColumnPinning]);
-    //get first 16 column widths and average them if calc is needed
-    const averageColumnWidth = useMemo(() => {
-        var _a, _b, _c, _d;
-        if (!enableColumnVirtualization || (columnVirtualizerProps === null || columnVirtualizerProps === void 0 ? void 0 : columnVirtualizerProps.estimateSize)) {
-            return 0;
-        }
-        const columnsWidths = (_d = (_c = (_b = (_a = table
-            .getRowModel()
-            .rows[0]) === null || _a === void 0 ? void 0 : _a.getCenterVisibleCells()) === null || _b === void 0 ? void 0 : _b.slice(0, 16)) === null || _c === void 0 ? void 0 : _c.map((cell) => cell.column.getSize() * 1.2)) !== null && _d !== void 0 ? _d : [];
-        return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
-    }, [table.getRowModel().rows, columnPinning, columnVisibility]);
-    const draggingColumnIndex = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)
-        ? table
-            .getVisibleLeafColumns()
-            .findIndex((c) => c.id === (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id))
-        : undefined;
-    const columnVirtualizer = enableColumnVirtualization
-        ? useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: useCallback((range) => {
-                const newIndexes = extraIndexRangeExtractor(range, draggingColumnIndex);
-                return [
-                    ...new Set([
-                        ...leftPinnedIndexes,
-                        ...newIndexes,
-                        ...rightPinnedIndexes,
-                    ]),
-                ];
-            }, [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex]) }, columnVirtualizerProps))
-        : undefined;
-    if (columnVirtualizer) {
-        const virtualColumns = columnVirtualizer.getVirtualItems();
-        columnVirtualizer.virtualColumns = virtualColumns;
-        if (virtualColumns.length) {
-            columnVirtualizer.virtualPaddingLeft =
-                ((_b = (_a = virtualColumns[leftPinnedIndexes.length]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0) -
-                    ((_d = (_c = virtualColumns[leftPinnedIndexes.length - 1]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0);
-            columnVirtualizer.virtualPaddingRight =
-                columnVirtualizer.getTotalSize() -
-                    ((_f = (_e = virtualColumns[virtualColumns.length - rightPinnedIndexes.length - 1]) === null || _e === void 0 ? void 0 : _e.end) !== null && _f !== void 0 ? _f : 0) -
-                    (rightPinnedIndexes.length
-                        ? columnVirtualizer.getTotalSize() -
-                            ((_h = (_g = virtualColumns[virtualColumns.length - rightPinnedIndexes.length]) === null || _g === void 0 ? void 0 : _g.start) !== null && _h !== void 0 ? _h : 0)
-                        : 0);
-        }
-        if (columnVirtualizerInstanceRef) {
-            //@ts-ignore
-            columnVirtualizerInstanceRef.current = columnVirtualizer;
-        }
+        : [[], []], [columnPinning, enableColumnPinning]);
+    const numPinnedLeft = leftPinnedIndexes.length;
+    const numPinnedRight = rightPinnedIndexes.length;
+    const draggingColumnIndex = useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)
+        ? visibleColumns.findIndex((c) => c.id === (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id))
+        : undefined, [draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id]);
+    const columnVirtualizer = useVirtualizer(Object.assign({ count: visibleColumns.length, estimateSize: (index) => visibleColumns[index].getSize(), getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: useCallback((range) => {
+            const newIndexes = extraIndexRangeExtractor(range, draggingColumnIndex);
+            if (!numPinnedLeft && !numPinnedRight) {
+                return newIndexes;
+            }
+            return [
+                ...new Set([
+                    ...leftPinnedIndexes,
+                    ...newIndexes,
+                    ...rightPinnedIndexes,
+                ]),
+            ];
+        }, [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex]) }, columnVirtualizerProps));
+    const virtualColumns = columnVirtualizer.getVirtualItems();
+    columnVirtualizer.virtualColumns = virtualColumns;
+    const numColumns = virtualColumns.length;
+    if (numColumns) {
+        const totalSize = columnVirtualizer.getTotalSize();
+        const leftNonPinnedStart = ((_a = virtualColumns[numPinnedLeft]) === null || _a === void 0 ? void 0 : _a.start) || 0;
+        const leftNonPinnedEnd = ((_b = virtualColumns[leftPinnedIndexes.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0;
+        const rightNonPinnedStart = ((_c = virtualColumns[numColumns - numPinnedRight]) === null || _c === void 0 ? void 0 : _c.start) || 0;
+        const rightNonPinnedEnd = ((_d = virtualColumns[numColumns - numPinnedRight - 1]) === null || _d === void 0 ? void 0 : _d.end) || 0;
+        columnVirtualizer.virtualPaddingLeft =
+            leftNonPinnedStart - leftNonPinnedEnd;
+        columnVirtualizer.virtualPaddingRight =
+            totalSize -
+                rightNonPinnedEnd -
+                (numPinnedRight ? totalSize - rightNonPinnedStart : 0);
+    }
+    if (columnVirtualizerInstanceRef) {
+        //@ts-ignore
+        columnVirtualizerInstanceRef.current = columnVirtualizer;
     }
     return columnVirtualizer;
 };
@@ -1837,31 +1874,28 @@ const useMRT_RowVirtualizer = (table, rows) => {
     var _a;
     const { getRowModel, getState, options: { enableRowVirtualization, renderDetailPanel, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef }, } = table;
     const { density, draggingRow, expanded } = getState();
+    if (!enableRowVirtualization)
+        return undefined;
     const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
         table,
     });
     const rowCount = (_a = rows === null || rows === void 0 ? void 0 : rows.length) !== null && _a !== void 0 ? _a : getRowModel().rows.length;
     const normalRowHeight = density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73;
-    const rowVirtualizer = enableRowVirtualization
-        ? useVirtualizer(Object.assign({ count: renderDetailPanel ? rowCount * 2 : rowCount, estimateSize: (index) => renderDetailPanel && index % 2 === 1
-                ? expanded === true
-                    ? 100
-                    : 0
-                : normalRowHeight, getScrollElement: () => tableContainerRef.current, measureElement: typeof window !== 'undefined' &&
-                navigator.userAgent.indexOf('Firefox') === -1
-                ? (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height
-                : undefined, overscan: 4, rangeExtractor: useCallback((range) => {
-                var _a;
-                return extraIndexRangeExtractor(range, (_a = draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.index) !== null && _a !== void 0 ? _a : 0);
-            }, [draggingRow]) }, rowVirtualizerProps))
-        : undefined;
-    if (rowVirtualizer) {
-        const virtualRows = rowVirtualizer.getVirtualItems();
-        rowVirtualizer.virtualRows = virtualRows;
-        if (rowVirtualizerInstanceRef) {
-            //@ts-ignore
-            rowVirtualizerInstanceRef.current = rowVirtualizer;
-        }
+    const rowVirtualizer = useVirtualizer(Object.assign({ count: renderDetailPanel ? rowCount * 2 : rowCount, estimateSize: (index) => renderDetailPanel && index % 2 === 1
+            ? expanded === true
+                ? 100
+                : 0
+            : normalRowHeight, getScrollElement: () => tableContainerRef.current, measureElement: typeof window !== 'undefined' &&
+            navigator.userAgent.indexOf('Firefox') === -1
+            ? (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height
+            : undefined, overscan: 4, rangeExtractor: useCallback((range) => {
+            var _a;
+            return extraIndexRangeExtractor(range, (_a = draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.index) !== null && _a !== void 0 ? _a : 0);
+        }, [draggingRow]) }, rowVirtualizerProps));
+    rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems();
+    if (rowVirtualizerInstanceRef) {
+        //@ts-ignore
+        rowVirtualizerInstanceRef.current = rowVirtualizer;
     }
     return rowVirtualizer;
 };
@@ -2035,10 +2069,9 @@ const MRT_EditCellTextField = (_a) => {
     const { column, row } = cell;
     const { columnDef } = column;
     const { creatingRow, editingRow } = getState();
-    const { editSelectOptions } = columnDef;
+    const { editSelectOptions, editVariant } = columnDef;
     const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
     const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
-    const isSelectEdit = columnDef.editVariant === 'select';
     const [value, setValue] = useState(() => cell.getValue());
     const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditTextFieldProps, {
         cell,
@@ -2057,6 +2090,7 @@ const MRT_EditCellTextField = (_a) => {
         row,
         table,
     });
+    const isSelectEdit = editVariant === 'select' || (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.select);
     const saveInputValueToRowCache = (newValue) => {
         //@ts-ignore
         row._valuesCache[column.id] = newValue;
@@ -2071,7 +2105,7 @@ const MRT_EditCellTextField = (_a) => {
         var _a;
         (_a = textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
         setValue(event.target.value);
-        if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.select) {
+        if (isSelectEdit) {
             saveInputValueToRowCache(event.target.value);
         }
     };
@@ -2124,9 +2158,9 @@ const MRT_EditCellTextField = (_a) => {
 
 const MRT_TableBodyCell = (_a) => {
     var _b, _c, _d, _e, _f;
-    var { cell, measureElement, numRows, rowRef, staticRowIndex, table, virtualColumnIndex } = _a, rest = __rest(_a, ["cell", "measureElement", "numRows", "rowRef", "staticRowIndex", "table", "virtualColumnIndex"]);
+    var { cell, measureElement, numRows, rowRef, staticColumnIndex, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "measureElement", "numRows", "rowRef", "staticColumnIndex", "staticRowIndex", "table"]);
     const theme = useTheme();
-    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, layoutMode, muiSkeletonProps, muiTableBodyCellProps, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
+    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableEditing, enableGrouping, layoutMode, muiSkeletonProps, muiTableBodyCellProps, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
     const { columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
@@ -2197,6 +2231,9 @@ const MRT_TableBodyCell = (_a) => {
         hoveredRow,
         staticRowIndex,
     ]);
+    const isColumnPinned = enableColumnPinning &&
+        columnDef.columnDefType !== 'group' &&
+        column.getIsPinned();
     const isEditable = !cell.getIsPlaceholder() &&
         parseFromValuesOrFunc(enableEditing, row) &&
         parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
@@ -2236,7 +2273,7 @@ const MRT_TableBodyCell = (_a) => {
         cell,
         table,
     };
-    return (jsx(TableCell, Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": virtualColumnIndex, ref: (node) => {
+    return (jsx(TableCell, Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, ref: (node) => {
             if (node) {
                 measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
             }
@@ -2318,8 +2355,10 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
     const theme = useTheme();
     const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
     const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
+    const visibleCells = row.getVisibleCells();
     const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
-    const isPinned = enableRowPinning && row.getIsPinned();
+    const isRowSelected = getIsRowSelected({ row, table });
+    const isRowPinned = enableRowPinning && row.getIsPinned();
     const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
     const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
     const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
@@ -2355,47 +2394,49 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
     };
     const rowRef = useRef(null);
     const { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, } = getMRTTheme(table, theme);
-    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isPinned || undefined, "data-selected": (row === null || row === void 0 ? void 0 : row.getIsSelected()) ||
-                    ((row === null || row === void 0 ? void 0 : row.getIsAllSubRowsSelected()) && row.getCanSelectSubRows()) ||
-                    undefined, onDragEnter: handleDragEnter, ref: (node) => {
+    const cellHighlightColor = isRowSelected
+        ? selectedRowBackgroundColor
+        : isRowPinned
+            ? pinnedRowBackgroundColor
+            : undefined;
+    const cellHighlightColorHover = (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
+        ? isRowSelected
+            ? cellHighlightColor
+            : theme.palette.mode === 'dark'
+                ? `${lighten(baseBackgroundColor, 0.3)}`
+                : `${darken(baseBackgroundColor, 0.3)}`
+        : undefined;
+    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isRowPinned || undefined, "data-selected": isRowSelected || undefined, onDragEnter: handleDragEnter, ref: (node) => {
                     if (node) {
                         rowRef.current = node;
                         rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement(node);
                     }
-                }, selected: row.getIsSelected() }, tableRowProps, { style: Object.assign({ transform: virtualRow
+                }, selected: isRowSelected }, tableRowProps, { style: Object.assign({ transform: virtualRow
                         ? `translateY(${virtualRow.start}px)`
                         : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), sx: (theme) => (Object.assign({ '&:hover td': {
-                        backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
-                            ? row.getIsSelected()
-                                ? `${alpha(selectedRowBackgroundColor, 0.3)}`
-                                : theme.palette.mode === 'dark'
-                                    ? `${lighten(baseBackgroundColor, 0.05)}`
-                                    : `${darken(baseBackgroundColor, 0.05)}`
-                            : undefined,
-                    }, backgroundColor: `${baseBackgroundColor} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isPinned
+                        '&:after': Object.assign({ backgroundColor: cellHighlightColorHover
+                                ? alpha(cellHighlightColorHover, 0.3)
+                                : undefined }, pinnedBeforeAfterStyles),
+                    }, backgroundColor: `${baseBackgroundColor} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
                         ? `${bottomPinnedIndex * rowHeight +
                             (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
-                        : undefined, boxSizing: 'border-box', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, opacity: isPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1, position: virtualRow
+                        : undefined, boxSizing: 'border-box', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, opacity: isRowPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1, position: virtualRow
                         ? 'absolute'
-                        : (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
+                        : (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isRowPinned
                             ? 'sticky'
-                            : undefined, td: {
-                        backgroundColor: row.getIsSelected()
-                            ? selectedRowBackgroundColor
-                            : isPinned
-                                ? pinnedRowBackgroundColor
-                                : undefined,
-                    }, top: virtualRow
+                            : undefined, td: Object.assign({ '&:after': Object.assign({ backgroundColor: cellHighlightColor }, pinnedBeforeAfterStyles) }, getCommonPinnedCellStyles({ table, theme })), top: virtualRow
                         ? 0
-                        : topPinnedIndex !== undefined && isPinned
+                        : topPinnedIndex !== undefined && isRowPinned
                             ? `${topPinnedIndex * rowHeight +
                                 (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)}px`
-                            : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
+                            : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isRowPinned
                         ? 2
-                        : undefined }, sx)), children: [virtualPaddingLeft ? (jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
-                        const cell = columnVirtualizer
-                            ? row.getVisibleCells()[cellOrVirtualCell.index]
-                            : cellOrVirtualCell;
+                        : undefined }, sx)), children: [virtualPaddingLeft ? (jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : visibleCells).map((cellOrVirtualCell, staticColumnIndex) => {
+                        let cell = cellOrVirtualCell;
+                        if (columnVirtualizer) {
+                            staticColumnIndex = cellOrVirtualCell.index;
+                            cell = visibleCells[staticColumnIndex];
+                        }
                         const props = {
                             cell,
                             measureElement: !isDraggingRow && !isHoveredRow
@@ -2403,11 +2444,9 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
                                 : undefined,
                             numRows,
                             rowRef,
+                            staticColumnIndex,
                             staticRowIndex,
                             table,
-                            virtualColumnIndex: columnVirtualizer
-                                ? cellOrVirtualCell.index
-                                : undefined,
                         };
                         return cell ? (memoMode === 'cells' &&
                             cell.column.columnDef.columnDefType === 'data' &&
@@ -2466,6 +2505,7 @@ const MRT_TableBody = (_a) => {
                             }, children: globalFilter || columnFilters.length
                                 ? localization.noResultsFound
                                 : localization.noRecordsToDisplay })) }) })) : (jsx(Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, staticRowIndex) => {
+                        let row = rowOrVirtualRow;
                         if (rowVirtualizer) {
                             if (renderDetailPanel) {
                                 if (rowOrVirtualRow.index % 2 === 1) {
@@ -2478,10 +2518,8 @@ const MRT_TableBody = (_a) => {
                             else {
                                 staticRowIndex = rowOrVirtualRow.index;
                             }
+                            row = rows[staticRowIndex];
                         }
-                        const row = rowVirtualizer
-                            ? rows[staticRowIndex]
-                            : rowOrVirtualRow;
                         const props = Object.assign(Object.assign({}, commonRowProps), { pinnedRowIds,
                             row,
                             rowVirtualizer,
@@ -2501,20 +2539,23 @@ const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.option
 
 const MRT_TableFooterCell = (_a) => {
     var _b, _c, _d;
-    var { footer, table } = _a, rest = __rest(_a, ["footer", "table"]);
+    var { footer, staticColumnIndex, table } = _a, rest = __rest(_a, ["footer", "staticColumnIndex", "table"]);
     const theme = useTheme();
-    const { getState, options: { layoutMode, muiTableFooterCellProps }, } = table;
+    const { getState, options: { enableColumnPinning, layoutMode, muiTableFooterCellProps }, } = table;
     const { density } = getState();
     const { column } = footer;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
+    const isColumnPinned = enableColumnPinning &&
+        columnDef.columnDefType !== 'group' &&
+        column.getIsPinned();
     const args = { column, table };
     const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args)), rest);
     return (jsx(TableCell, Object.assign({ align: columnDefType === 'group'
             ? 'center'
             : theme.direction === 'rtl'
                 ? 'right'
-                : 'left', colSpan: footer.colSpan, variant: "footer" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
+                : 'left', colSpan: footer.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, variant: "footer" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
@@ -2546,11 +2587,14 @@ const MRT_TableFooterRow = (_a) => {
         footerGroup,
         table,
     })), rest);
-    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
-                const footer = virtualColumns
-                    ? footerGroup.headers[footerOrVirtualFooter.index]
-                    : footerOrVirtualFooter;
-                return footer ? (jsx(MRT_TableFooterCell, { footer: footer, table: table }, footer.id)) : null;
+    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter, staticColumnIndex) => {
+                let footer = footerOrVirtualFooter;
+                if (columnVirtualizer) {
+                    staticColumnIndex = footerOrVirtualFooter
+                        .index;
+                    footer = footerGroup.headers[staticColumnIndex];
+                }
+                return footer ? (jsx(MRT_TableFooterCell, { footer: footer, staticColumnIndex: staticColumnIndex, table: table }, footer.id)) : null;
             }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
@@ -3049,6 +3093,7 @@ const MRT_TableHeadCellResizeHandle = (_a) => {
     const { getState, options: { columnResizeDirection, columnResizeMode }, setColumnSizingInfo, } = table;
     const { density } = getState();
     const { column } = header;
+    const handler = header.getResizeHandler();
     const mx = density === 'compact'
         ? '-8px'
         : density === 'comfortable'
@@ -3058,7 +3103,7 @@ const MRT_TableHeadCellResizeHandle = (_a) => {
     return (jsx(Box, { className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
             setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
             column.resetSize();
-        }, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
+        }, onMouseDown: handler, onTouchStart: handler, style: {
             transform: column.getIsResizing() && columnResizeMode === 'onEnd'
                 ? `translateX(${(columnResizeDirection === 'rtl' ? -1 : 1) *
                     ((_b = getState().columnSizingInfo.deltaOffset) !== null && _b !== void 0 ? _b : 0)}px)`
@@ -3116,9 +3161,9 @@ const MRT_TableHeadCellSortLabel = (_a) => {
 
 const MRT_TableHeadCell = (_a) => {
     var _b, _c, _d, _f, _g, _h;
-    var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
+    var { header, staticColumnIndex, table } = _a, rest = __rest(_a, ["header", "staticColumnIndex", "table"]);
     const theme = useTheme();
-    const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
+    const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
     const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     const { columnDef } = column;
@@ -3128,6 +3173,9 @@ const MRT_TableHeadCell = (_a) => {
         table,
     })), rest);
     const { draggingBorderColor } = getMRTTheme(table, theme);
+    const isColumnPinned = enableColumnPinning &&
+        columnDef.columnDefType !== 'group' &&
+        column.getIsPinned();
     const showColumnActions = (enableColumnActions || columnDef.enableColumnActions) &&
         columnDef.enableColumnActions !== false;
     const showDragHandle = enableColumnDragging !== false &&
@@ -3189,7 +3237,7 @@ const MRT_TableHeadCell = (_a) => {
             ? 'center'
             : theme.direction === 'rtl'
                 ? 'right'
-                : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
+                : 'left', colSpan: header.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, onDragEnter: handleDragEnter, ref: (node) => {
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
             }
@@ -3273,11 +3321,14 @@ const MRT_TableHeadRow = (_a) => {
         headerGroup,
         table,
     })), rest);
-    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
-                const header = virtualColumns
-                    ? headerGroup.headers[headerOrVirtualHeader.index]
-                    : headerOrVirtualHeader;
-                return header ? (jsx(MRT_TableHeadCell, { header: header, table: table }, header.id)) : null;
+    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
+                let header = headerOrVirtualHeader;
+                if (columnVirtualizer) {
+                    staticColumnIndex = headerOrVirtualHeader
+                        .index;
+                    header = headerGroup.headers[staticColumnIndex];
+                }
+                return header ? (jsx(MRT_TableHeadCell, { header: header, staticColumnIndex: staticColumnIndex, table: table }, header.id)) : null;
             }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
@@ -3321,7 +3372,7 @@ const MRT_ToolbarAlertBanner = (_a) => {
                                         : '0.25rem 0.5rem',
                         }, children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectedAlert || groupedAlert) && (jsx("br", {})), jsxs(Box, { sx: { display: 'flex' }, children: [enableRowSelection &&
                                         enableSelectAll &&
-                                        positionToolbarAlertBanner === 'head-overlay' && (jsx(MRT_SelectCheckbox, { selectAll: true, table: table })), ' ', selectedAlert] }), selectedAlert && groupedAlert && jsx("br", {}), groupedAlert] })] })) })) }));
+                                        positionToolbarAlertBanner === 'head-overlay' && (jsx(MRT_SelectCheckbox, { table: table })), ' ', selectedAlert] }), selectedAlert && groupedAlert && jsx("br", {}), groupedAlert] })] })) })) }));
 };
 
 const MRT_TableHead = (_a) => {
@@ -3347,9 +3398,10 @@ const MRT_TableHead = (_a) => {
 
 const MRT_Table = (_a) => {
     var { table } = _a, rest = __rest(_a, ["table"]);
-    const { getFlatHeaders, getState, options: { columns, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, } = table;
+    const { getFlatHeaders, getState, options: { columns, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, renderCaption, }, } = table;
     const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } = getState();
     const tableProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableProps, { table })), rest);
+    const Caption = parseFromValuesOrFunc(renderCaption, { table });
     const columnSizeVars = useMemo(() => {
         const headers = getFlatHeaders();
         const colSizes = {};
@@ -3366,7 +3418,7 @@ const MRT_Table = (_a) => {
         columnVirtualizer,
         table,
     };
-    return (jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, commonTableGroupProps)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({}, commonTableGroupProps))) : (jsx(MRT_TableBody, Object.assign({}, commonTableGroupProps))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
+    return (jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [!!Caption && jsx("caption", { children: Caption }), enableTableHead && jsx(MRT_TableHead, Object.assign({}, commonTableGroupProps)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({}, commonTableGroupProps))) : (jsx(MRT_TableBody, Object.assign({}, commonTableGroupProps))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
 };
 
 const MRT_TableLoadingOverlay = (_a) => {
@@ -3922,5 +3974,5 @@ const MaterialReactTable = (props) => {
     return jsx(MRT_TablePaper, { table: table });
 };
 
-export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, commonListItemStyles, commonMenuItemStyles, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
+export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, commonListItemStyles, commonMenuItemStyles, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getIsRowSelected, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
 //# sourceMappingURL=index.esm.js.map