material-react-table 0.9.2 → 0.9.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.2",
+  "version": "0.9.3",
   "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

@@ -774,7 +774,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
 export default <D extends Record<string, any> = {}>({
   autoResetExpanded = false,
   columnResizeMode = 'onEnd',
-  defaultColumn = { minSize: 50, maxSize: 1000, size: 150 },
+  defaultColumn = { minSize: 30, maxSize: 1000, size: 180 },
   editingMode = 'row',
   enableColumnActions = true,
   enableColumnFilters = true,

package/src/body/MRT_TableBody.tsx

@@ -1,8 +1,8 @@
 import React, { FC, RefObject } from 'react';
+import { useVirtual } from 'react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
-import { MRT_Row, MRT_TableInstance } from '..';
-import { useVirtual } from 'react-virtual';
+import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   tableInstance: MRT_TableInstance;
@@ -31,16 +31,18 @@ export const MRT_TableBody: FC<Props> = ({
     ? getPaginationRowModel().rows
     : getPrePaginationRowModel().rows;
 
-  const rowVirtualizer = useVirtual({
-    overscan: isDensePadding ? 15 : 5,
-    size: rows.length,
-    parentRef: tableContainerRef,
-  });
+  const rowVirtualizer = enableRowVirtualization
+    ? useVirtual({
+        overscan: isDensePadding ? 15 : 5,
+        size: rows.length,
+        parentRef: tableContainerRef,
+      })
+    : ({} as any);
 
   const { virtualItems: virtualRows } = rowVirtualizer;
-  const paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+  const paddingTop = virtualRows?.length > 0 ? virtualRows[0].start : 0;
   const paddingBottom =
-    virtualRows.length > 0
+    virtualRows?.length > 0
       ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
       : 0;
 

package/src/body/MRT_TableBodyCell.tsx

@@ -23,11 +23,13 @@ export const MRT_TableBodyCell: FC<Props> = ({
       editingMode,
       enableClickToCopy,
       enableColumnOrdering,
+      enableColumnResizing,
       enableEditing,
-      tableId,
+      enableRowVirtualization,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       onMrtCellClick,
+      tableId,
     },
     setColumnOrder,
     setCurrentEditingCell,
@@ -131,6 +133,15 @@ export const MRT_TableBodyCell: FC<Props> = ({
         onMrtCellClick?.({ event, cell, tableInstance })
       }
       onDoubleClick={handleDoubleClick}
+      title={
+        (enableRowVirtualization || enableColumnResizing) &&
+        !columnDef?.Cell &&
+        !cell.getIsGrouped() &&
+        !columnDef.enableClickToCopy &&
+        typeof cell.getValue() === 'string'
+          ? (cell.getValue() as string)
+          : ''
+      }
       {...tableCellProps}
       ref={
         columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined
@@ -149,6 +160,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined,
+        overflow: 'hidden',
         p: isDensePadding
           ? columnDefType === 'display'
             ? '0 0.5rem'
@@ -163,6 +175,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
         position: column.getIsPinned() ? 'sticky' : 'relative',
         right:
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
+        textOverflow: 'ellipsis',
         transition: 'all 0.2s ease-in-out',
         whiteSpace: isDensePadding ? 'nowrap' : 'normal',
         zIndex: column.getIsPinned() ? 1 : undefined,

package/src/table/MRT_Table.tsx

@@ -10,12 +10,11 @@ interface Props {
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_Table: FC<Props> = ({
-  tableContainerRef,
-  tableInstance
-}) => {
+export const MRT_Table: FC<Props> = ({ tableContainerRef, tableInstance }) => {
   const {
     options: {
+      enableColumnResizing,
+      enableRowVirtualization,
       enableStickyHeader,
       enableTableFooter,
       enableTableHead,
@@ -29,7 +28,15 @@ export const MRT_Table: FC<Props> = ({
       : muiTableProps;
 
   return (
-    <Table stickyHeader={enableStickyHeader} {...tableProps}>
+    <Table
+      stickyHeader={enableStickyHeader}
+      {...tableProps}
+      sx={{
+        tableLayout:
+          enableColumnResizing || enableRowVirtualization ? 'fixed' : undefined,
+        ...tableProps?.sx,
+      }}
+    >
       {enableTableHead && <MRT_TableHead tableInstance={tableInstance} />}
       <MRT_TableBody
         tableContainerRef={tableContainerRef}

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -58,7 +58,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
         } as any)
       }
     >
-      <MRT_LinearProgressBar alignTo='top' tableInstance={tableInstance} />
+      <MRT_LinearProgressBar alignTo="top" tableInstance={tableInstance} />
       {positionToolbarAlertBanner === 'bottom' && (
         <MRT_ToolbarAlertBanner tableInstance={tableInstance} />
       )}