material-react-table 1.5.0-beta.1 → 1.5.0

package/dist/cjs/index.js

@@ -305,10 +305,10 @@ const getIsFirstRightPinnedColumn = (column) => {
     return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
 };
 const getTotalRight = (table, column) => {
-    return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 160);
+    return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 200);
 };
 const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     return (Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
             ? styles.alpha(styles.lighten(theme.palette.background.default, 0.04), 0.97)
             : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
@@ -317,8 +317,18 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
                 ? `4px 0 8px -6px ${styles.alpha(theme.palette.common.black, 0.2)} inset`
                 : undefined, display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell', left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
-            : undefined, opacity: ((_a = table.getState().draggingColumn) === null || _a === void 0 ? void 0 : _a.id) === column.id ||
-            ((_b = table.getState().hoveredColumn) === null || _b === void 0 ? void 0 : _b.id) === column.id
+            : undefined, ml: table.options.enableColumnVirtualization &&
+            column.getIsPinned() === 'left' &&
+            column.getPinnedIndex() === 0
+            ? `-${column.getSize() * ((_b = (_a = table.getState().columnPinning.left) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 1)}px`
+            : undefined, mr: table.options.enableColumnVirtualization &&
+            column.getIsPinned() === 'right' &&
+            column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
+            ? `-${column.getSize() *
+                ((_d = (_c = table.getState().columnPinning.right) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 1) *
+                1.2}px`
+            : 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() && column.columnDef.columnDefType !== 'group'
             ? 'sticky'
@@ -330,7 +340,7 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
         ? tableCellProps.sx(theme)
         : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { flex: table.options.layoutMode === 'grid'
             ? `${column.getSize()} 0 auto`
-            : undefined, minWidth: `max(${column.getSize()}px, ${(_c = column.columnDef.minSize) !== null && _c !== void 0 ? _c : 30}px)`, width: (_d = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _d !== void 0 ? _d : column.getSize() }));
+            : undefined, minWidth: `max(${column.getSize()}px, ${(_g = column.columnDef.minSize) !== null && _g !== void 0 ? _g : 30}px)`, width: (_h = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _h !== void 0 ? _h : column.getSize() }));
 };
 const MRT_DefaultColumn = {
     minSize: 40,
@@ -2594,7 +2604,7 @@ const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPad
 };
 
 const MRT_Table = ({ table }) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { getState, options: { columnVirtualizerInstanceRef, columnVirtualizerProps, enableColumnResizing, enableColumnVirtualization, enablePinning, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, refs: { tableContainerRef }, } = table;
     const { isFullScreen, columnPinning, columnVisibility } = getState();
     const tableProps = muiTableProps instanceof Function
@@ -2606,28 +2616,29 @@ const MRT_Table = ({ table }) => {
     //get first 16 column widths and average them
     const averageColumnWidth = React.useMemo(() => {
         var _a, _b, _c, _d;
+        if (!enableColumnVirtualization)
+            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.25)) !== null && _d !== void 0 ? _d : [];
+            .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 pinnedColumnIndexes = React.useMemo(() => enableColumnVirtualization && enablePinning
+    const [leftPinnedIndexes, rightPinnedIndexes] = React.useMemo(() => enableColumnVirtualization && enablePinning
         ? [
-            ...table.getLeftFlatHeaders().map((h) => h.column.getPinnedIndex()),
-            ...table
-                .getRightFlatHeaders()
-                .map((h) => table.getVisibleFlatColumns().length -
-                h.column.getPinnedIndex() -
-                1),
+            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
+            table
+                .getRightLeafColumns()
+                .map((c) => table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1),
         ]
-        : [], [columnPinning, enableColumnVirtualization, enablePinning]);
+        : [[], []], [columnPinning, enableColumnVirtualization, enablePinning]);
     const columnVirtualizer = enableColumnVirtualization
-        ? reactVirtual.useVirtualizer(Object.assign({ count: table.getRowModel().rows[0].getVisibleCells().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, measureElement: (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().width, overscan: 3, rangeExtractor: React.useCallback((range) => [
+        ? reactVirtual.useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: React.useCallback((range) => [
                 ...new Set([
-                    ...pinnedColumnIndexes,
+                    ...leftPinnedIndexes,
                     ...reactVirtual.defaultRangeExtractor(range),
+                    ...rightPinnedIndexes,
                 ]),
-            ].sort((a, b) => a - b), [pinnedColumnIndexes]) }, vProps))
+            ], [leftPinnedIndexes, rightPinnedIndexes]) }, vProps))
         : undefined;
     if (columnVirtualizerInstanceRef && columnVirtualizer) {
         columnVirtualizerInstanceRef.current = columnVirtualizer;
@@ -2638,13 +2649,10 @@ const MRT_Table = ({ table }) => {
     let virtualPaddingLeft;
     let virtualPaddingRight;
     if (columnVirtualizer && (virtualColumns === null || virtualColumns === void 0 ? void 0 : virtualColumns.length)) {
-        virtualPaddingLeft = (virtualColumns === null || virtualColumns === void 0 ? void 0 : virtualColumns.length)
-            ? ((_a = virtualColumns[0]) === null || _a === void 0 ? void 0 : _a.start) || 0
-            : 0;
-        virtualPaddingRight = (virtualColumns === null || virtualColumns === void 0 ? void 0 : virtualColumns.length)
-            ? columnVirtualizer.getTotalSize() -
-                (((_b = virtualColumns[virtualColumns.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0)
-            : 0;
+        virtualPaddingLeft = (_b = (_a = virtualColumns[leftPinnedIndexes.length]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0;
+        virtualPaddingRight =
+            columnVirtualizer.getTotalSize() -
+                ((_d = (_c = virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes.length]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0);
     }
     const props = {
         table,