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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.1",
+  "version": "1.5.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/column.utils.ts

@@ -221,7 +221,7 @@ export const getIsFirstRightPinnedColumn = (column: MRT_Column) => {
 
 export const getTotalRight = (table: MRT_TableInstance, column: MRT_Column) => {
   return (
-    (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 160
+    (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 200
   );
 };
 
@@ -253,6 +253,24 @@ export const getCommonCellStyles = ({
     column.getIsPinned() === 'left'
       ? `${column.getStart('left')}px`
       : undefined,
+  ml:
+    table.options.enableColumnVirtualization &&
+    column.getIsPinned() === 'left' &&
+    column.getPinnedIndex() === 0
+      ? `-${
+          column.getSize() * (table.getState().columnPinning.left?.length ?? 1)
+        }px`
+      : undefined,
+  mr:
+    table.options.enableColumnVirtualization &&
+    column.getIsPinned() === 'right' &&
+    column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
+      ? `-${
+          column.getSize() *
+          (table.getState().columnPinning.right?.length ?? 1) *
+          1.2
+        }px`
+      : undefined,
   opacity:
     table.getState().draggingColumn?.id === column.id ||
     table.getState().hoveredColumn?.id === column.id

package/src/table/MRT_Table.tsx

@@ -47,30 +47,29 @@ export const MRT_Table: FC<Props> = ({ table }) => {
 
   //get first 16 column widths and average them
   const averageColumnWidth = useMemo(() => {
+    if (!enableColumnVirtualization) return 0;
     const columnsWidths =
       table
         .getRowModel()
         .rows[0]?.getCenterVisibleCells()
         ?.slice(0, 16)
-        ?.map((cell) => cell.column.getSize() * 1.25) ?? [];
+        ?.map((cell) => cell.column.getSize() * 1.2) ?? [];
     return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
   }, [table.getRowModel().rows, columnPinning, columnVisibility]);
 
-  const pinnedColumnIndexes = useMemo(
+  const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
     () =>
       enableColumnVirtualization && enablePinning
         ? [
-            ...table.getLeftFlatHeaders().map((h) => h.column.getPinnedIndex()),
-            ...table
-              .getRightFlatHeaders()
+            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
+            table
+              .getRightLeafColumns()
               .map(
-                (h) =>
-                  table.getVisibleFlatColumns().length -
-                  h.column.getPinnedIndex() -
-                  1,
+                (c) =>
+                  table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1,
               ),
           ]
-        : [],
+        : [[], []],
     [columnPinning, enableColumnVirtualization, enablePinning],
   );
 
@@ -78,21 +77,20 @@ export const MRT_Table: FC<Props> = ({ table }) => {
     | Virtualizer<HTMLDivElement, HTMLTableCellElement>
     | undefined = enableColumnVirtualization
     ? useVirtualizer({
-        count: table.getRowModel().rows[0].getVisibleCells().length,
+        count: table.getVisibleLeafColumns().length,
         estimateSize: () => averageColumnWidth,
         getScrollElement: () => tableContainerRef.current,
         horizontal: true,
-        measureElement: (element) => element?.getBoundingClientRect().width,
         overscan: 3,
         rangeExtractor: useCallback(
-          (range: Range) =>
-            [
-              ...new Set([
-                ...pinnedColumnIndexes,
-                ...defaultRangeExtractor(range),
-              ]),
-            ].sort((a, b) => a - b),
-          [pinnedColumnIndexes],
+          (range: Range) => [
+            ...new Set([
+              ...leftPinnedIndexes,
+              ...defaultRangeExtractor(range),
+              ...rightPinnedIndexes,
+            ]),
+          ],
+          [leftPinnedIndexes, rightPinnedIndexes],
         ),
         ...vProps,
       })
@@ -110,13 +108,11 @@ export const MRT_Table: FC<Props> = ({ table }) => {
   let virtualPaddingRight: number | undefined;
 
   if (columnVirtualizer && virtualColumns?.length) {
-    virtualPaddingLeft = virtualColumns?.length
-      ? virtualColumns[0]?.start || 0
-      : 0;
-    virtualPaddingRight = virtualColumns?.length
-      ? columnVirtualizer.getTotalSize() -
-        (virtualColumns[virtualColumns.length - 1]?.end || 0)
-      : 0;
+    virtualPaddingLeft = virtualColumns[leftPinnedIndexes.length]?.start ?? 0;
+    virtualPaddingRight =
+      columnVirtualizer.getTotalSize() -
+      (virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes.length]
+        ?.end ?? 0);
   }
 
   const props = {