material-react-table 0.33.3 → 0.33.4

package/dist/index.d.ts

@@ -443,12 +443,12 @@ declare type MRT_DisplayColumnIds = 'mrt-row-drag' | 'mrt-row-actions' | 'mrt-ro
  * @link https://www.material-react-table.com/docs/api/props
  */
 declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'expandRowsFn' | 'initialState' | 'onStateChange' | 'state'> & {
-    displayColumnDefOptions?: Partial<{
-        [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
-    }>;
     columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
+    displayColumnDefOptions?: Partial<{
+        [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
+    }>;
     editingMode?: 'table' | 'row' | 'cell';
     enableBottomToolbar?: boolean;
     enableClickToCopy?: boolean;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.33.3",
+  "version": "0.33.4",
   "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/MaterialReactTable.tsx

@@ -450,12 +450,12 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     | 'onStateChange'
     | 'state'
   > & {
-    displayColumnDefOptions?: Partial<{
-      [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
-    }>;
     columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
+    displayColumnDefOptions?: Partial<{
+      [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
+    }>;
     editingMode?: 'table' | 'row' | 'cell';
     enableBottomToolbar?: boolean;
     enableClickToCopy?: boolean;

package/src/body/MRT_TableBody.tsx

@@ -66,7 +66,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
         count: rows.length,
         estimateSize: () => (density === 'compact' ? 25 : 50),
         getScrollElement: () => tableContainerRef.current as HTMLDivElement,
-        overscan: density === 'compact' ? 30 : 10,
+        overscan: 10,
         ...vProps,
       })
     : ({} as any);

package/src/body/MRT_TableBodyCell.tsx

@@ -1,4 +1,11 @@
-import React, { DragEvent, FC, MouseEvent, RefObject, useMemo } from 'react';
+import React, {
+  DragEvent,
+  FC,
+  MouseEvent,
+  RefObject,
+  useEffect,
+  useState,
+} from 'react';
 import {
   alpha,
   darken,
@@ -74,15 +81,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
     ...mcTableCellBodyProps,
   };
 
-  const skeletonWidth = useMemo(
-    () =>
-      columnDefType === 'display'
-        ? column.getSize() / 2
-        : Math.random() * (column.getSize() - column.getSize() / 3) +
-          column.getSize() / 3,
-    [],
-  );
-
   const isEditable =
     (enableEditing || columnDef.enableEditing) &&
     columnDef.enableEditing !== false;
@@ -93,6 +91,22 @@ export const MRT_TableBodyCell: FC<Props> = ({
       currentEditingRow?.id === row.id ||
       currentEditingCell?.id === cell.id);
 
+  const [skeletonWidth, setSkeletonWidth] = useState(0);
+  useEffect(
+    () =>
+      setSkeletonWidth(
+        isLoading || showSkeletons
+          ? columnDefType === 'display'
+            ? column.getSize() / 2
+            : Math.round(
+                Math.random() * (column.getSize() - column.getSize() / 3) +
+                  column.getSize() / 3,
+              )
+          : 100,
+      ),
+    [isLoading, showSkeletons],
+  );
+
   const handleDoubleClick = (_event: MouseEvent<HTMLTableCellElement>) => {
     if (
       (enableEditing || columnDef.enableEditing) &&

package/src/table/MRT_TableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useLayoutEffect, useState } from 'react';
+import React, { FC, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { TableContainer } from '@mui/material';
 import { MRT_Table } from './MRT_Table';
 import type { MRT_TableInstance } from '..';
@@ -45,7 +45,7 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
 
-  const tableContainerRef = React.useRef<HTMLDivElement>(null);
+  const tableContainerRef = useRef<HTMLDivElement>(null);
 
   return (
     <TableContainer

package/src/table/MRT_TableRoot.tsx

@@ -211,7 +211,13 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     () =>
       (props.state?.isLoading || props.state?.showSkeletons) &&
       !props.data.length
-        ? [...Array(5).fill(null)].map(() =>
+        ? [
+            ...Array(
+              props.state?.pagination?.pageSize ||
+                initialState?.pagination?.pageSize ||
+                10,
+            ).fill(null),
+          ].map(() =>
             Object.assign(
               {},
               ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map(