material-react-table 0.9.5 → 0.9.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.5",
+  "version": "0.9.6",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -43,6 +43,7 @@ import {
   UseTableInstanceOptions,
   VisibilityState,
 } from '@tanstack/react-table';
+import { Options as VirtualizerOptions } from 'react-virtual';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_FILTER_OPTION } from './enums';
@@ -770,12 +771,13 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     tableId?: string;
+    virtualizerProps?: VirtualizerOptions<HTMLDivElement>;
   };
 
 export default <D extends Record<string, any> = {}>({
   autoResetExpanded = false,
   columnResizeMode = 'onEnd',
-  defaultColumn = { minSize: 30, maxSize: 1000, size: 180 },
+  defaultColumn = { minSize: 40, maxSize: 1000, size: 180 },
   editingMode = 'row',
   enableColumnActions = true,
   enableColumnFilters = true,

package/src/body/MRT_TableBody.tsx

@@ -17,7 +17,12 @@ export const MRT_TableBody: FC<Props> = ({
     getPaginationRowModel,
     getPrePaginationRowModel,
     getState,
-    options: { enablePagination, enableRowVirtualization, muiTableBodyProps },
+    options: {
+      enablePagination,
+      enableRowVirtualization,
+      muiTableBodyProps,
+      virtualizerProps,
+    },
   } = tableInstance;
 
   const { isDensePadding } = getState();
@@ -36,6 +41,7 @@ export const MRT_TableBody: FC<Props> = ({
         overscan: isDensePadding ? 15 : 5,
         size: rows.length,
         parentRef: tableContainerRef,
+        ...virtualizerProps,
       })
     : ({} as any);
 

package/src/body/MRT_TableBodyCell.tsx

@@ -184,12 +184,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
               : undefined,
         },
         ...(tableCellProps?.sx as any),
-      })}
-      style={{
         maxWidth: `min(${column.getSize()}px, fit-content)`,
         minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
         width: column.getSize(),
-      }}
+      })}
     >
       <>
         {isLoading || showSkeletons ? (

package/src/body/MRT_TableDetailPanel.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 export const MRT_TableDetailPanel: FC<Props> = ({ row, tableInstance }) => {
   const {
-    getVisibleFlatColumns,
+    getVisibleLeafColumns,
     options: {
       muiTableBodyRowProps,
       muiTableDetailPanelProps,
@@ -31,7 +31,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, tableInstance }) => {
   return (
     <TableRow {...tableRowProps}>
       <TableCell
-        colSpan={getVisibleFlatColumns().length + 10}
+        colSpan={getVisibleLeafColumns().length}
         onClick={(event: MouseEvent<HTMLTableCellElement>) =>
           onMrtDetailPanelClick?.({ event, row, tableInstance })
         }
@@ -41,6 +41,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, tableInstance }) => {
           pb: row.getIsExpanded() ? '1rem' : 0,
           pt: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 0.2s ease-in-out',
+          width: `${tableInstance.getTotalSize()}px`,
           ...tableCellProps?.sx,
         }}
       >

package/src/head/MRT_TableHeadCell.tsx

@@ -136,12 +136,10 @@ export const MRT_TableHeadCell: FC<Props> = ({
           ? 2
           : 1,
         ...(tableCellProps?.sx as any),
-      })}
-      style={{
         maxWidth: `min(${column.getSize()}px, fit-content)`,
         minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
         width: header.getSize(),
-      }}
+      })}
     >
       {header.isPlaceholder ? null : columnDefType === 'display' ? (
         headerElement

package/src/table/MRT_Table.tsx

@@ -33,7 +33,7 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, tableInstance }) => {
       {...tableProps}
       sx={{
         tableLayout:
-          enableColumnResizing || enableRowVirtualization ? 'fixed' : undefined,
+          enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto',
         ...tableProps?.sx,
       }}
     >