material-react-table 0.9.0 → 0.9.3

package/dist/table/MRT_Table.d.ts

@@ -1,6 +1,7 @@
-import { FC } from 'react';
+import { FC, RefObject } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
+    tableContainerRef: RefObject<HTMLDivElement>;
     tableInstance: MRT_TableInstance;
 }
 export declare const MRT_Table: FC<Props>;

package/dist/table/MRT_TableRoot.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { MaterialReactTableProps } from '../MaterialReactTable';
 export declare const MRT_TableRoot: <D extends Record<string, any> = {}>(props: MaterialReactTableProps<D>) => JSX.Element;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.0",
+  "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.",
@@ -63,14 +63,14 @@
     "@mui/icons-material": "^5.8.2",
     "@mui/material": "^5.8.2",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.5.6",
-    "@storybook/addon-actions": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
+    "@storybook/addon-a11y": "^6.5.7",
+    "@storybook/addon-actions": "^6.5.7",
+    "@storybook/addon-essentials": "^6.5.7",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.6",
-    "@storybook/addons": "^6.5.6",
-    "@storybook/react": "^6.5.6",
-    "@types/react": "^18.0.11",
+    "@storybook/addon-links": "^6.5.7",
+    "@storybook/addons": "^6.5.7",
+    "@storybook/react": "^6.5.7",
+    "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
     "babel-loader": "^8.2.5",
     "eslint": "^8.17.0",
@@ -98,8 +98,9 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
-    "@tanstack/react-table": "^8.0.0-beta.4",
+    "@tanstack/react-table": "^8.0.0-beta.8",
     "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1"
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-virtual": "^2.10.4"
   }
 }

package/src/MaterialReactTable.tsx

@@ -352,6 +352,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enablePersistentState?: boolean;
     enableRowActions?: boolean;
     enableRowNumbers?: boolean;
+    enableRowVirtualization?: boolean;
     enableSelectAll?: boolean;
     enableStickyHeader?: boolean;
     enableTableFooter?: boolean;
@@ -773,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,37 +1,78 @@
-import React, { FC } from 'react';
+import React, { FC, RefObject } from 'react';
+import { useVirtual } from 'react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
-import { MRT_TableInstance } from '..';
+import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   tableInstance: MRT_TableInstance;
+  tableContainerRef: RefObject<HTMLDivElement>;
 }
 
-export const MRT_TableBody: FC<Props> = ({ tableInstance }) => {
+export const MRT_TableBody: FC<Props> = ({
+  tableInstance,
+  tableContainerRef,
+}) => {
   const {
     getPaginationRowModel,
     getPrePaginationRowModel,
-    options: { enablePagination, muiTableBodyProps },
+    getState,
+    options: { enablePagination, enableRowVirtualization, muiTableBodyProps },
   } = tableInstance;
 
-  const rows = enablePagination
-    ? getPaginationRowModel().rows
-    : getPrePaginationRowModel().rows;
+  const { isDensePadding } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
       ? muiTableBodyProps({ tableInstance })
       : muiTableBodyProps;
 
+  const rows = enablePagination
+    ? getPaginationRowModel().rows
+    : getPrePaginationRowModel().rows;
+
+  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 paddingBottom =
+    virtualRows?.length > 0
+      ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
+      : 0;
+
   return (
     <TableBody {...tableBodyProps}>
-      {rows.map((row) => (
-        <MRT_TableBodyRow
-          key={row.id}
-          row={row}
-          tableInstance={tableInstance}
-        />
-      ))}
+      {enableRowVirtualization && paddingTop > 0 && (
+        <tr>
+          <td style={{ height: `${paddingTop}px` }} />
+        </tr>
+      )}
+      {/* @ts-ignore */}
+      {(enableRowVirtualization ? virtualRows : rows).map(
+        (rowOrVirtualRow: any) => {
+          const row = enableRowVirtualization
+            ? (rows[rowOrVirtualRow.index] as MRT_Row)
+            : (rowOrVirtualRow as MRT_Row);
+          return (
+            <MRT_TableBodyRow
+              key={row.id}
+              row={row}
+              tableInstance={tableInstance}
+            />
+          );
+        },
+      )}
+      {enableRowVirtualization && paddingBottom > 0 && (
+        <tr>
+          <td style={{ height: `${paddingBottom}px` }} />
+        </tr>
+      )}
     </TableBody>
   );
 };

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,15 +175,20 @@ 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,
         '&:hover': {
-          backgroundColor: enableHover
-            ? theme.palette.mode === 'dark'
-              ? `${lighten(theme.palette.background.default, 0.13)} !important`
-              : `${darken(theme.palette.background.default, 0.07)} !important`
-            : undefined,
+          backgroundColor:
+            enableHover && enableEditing && editingMode !== 'row'
+              ? theme.palette.mode === 'dark'
+                ? `${lighten(
+                    theme.palette.background.default,
+                    0.13,
+                  )} !important`
+                : `${darken(theme.palette.background.default, 0.07)} !important`
+              : undefined,
         },
         ...(tableCellProps?.sx as any),
       })}

package/src/body/MRT_TableBodyRow.tsx

@@ -11,6 +11,7 @@ interface Props {
 
 export const MRT_TableBodyRow: FC<Props> = ({ row, tableInstance }) => {
   const {
+    getIsSomeColumnsPinned,
     options: { muiTableBodyRowProps, onMrtRowClick, renderDetailPanel },
   } = tableInstance;
 
@@ -33,7 +34,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, tableInstance }) => {
           transition: 'all 0.2s ease-in-out',
           '&:hover td': {
             backgroundColor:
-              tableRowProps?.hover !== false
+              tableRowProps?.hover !== false && getIsSomeColumnsPinned()
                 ? theme.palette.mode === 'dark'
                   ? `${lighten(theme.palette.background.default, 0.12)}`
                   : `${darken(theme.palette.background.default, 0.05)}`

package/src/table/MRT_Table.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, RefObject } from 'react';
 import { Table } from '@mui/material';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { MRT_TableBody } from '../body/MRT_TableBody';
@@ -6,12 +6,15 @@ import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableInstance } from '..';
 
 interface Props {
+  tableContainerRef: RefObject<HTMLDivElement>;
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_Table: FC<Props> = ({ tableInstance }) => {
+export const MRT_Table: FC<Props> = ({ tableContainerRef, tableInstance }) => {
   const {
     options: {
+      enableColumnResizing,
+      enableRowVirtualization,
       enableStickyHeader,
       enableTableFooter,
       enableTableHead,
@@ -25,9 +28,20 @@ export const MRT_Table: FC<Props> = ({ tableInstance }) => {
       : 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 tableInstance={tableInstance} />
+      <MRT_TableBody
+        tableContainerRef={tableContainerRef}
+        tableInstance={tableInstance}
+      />
       {enableTableFooter && <MRT_TableFooter tableInstance={tableInstance} />}
     </Table>
   );

package/src/table/MRT_TableContainer.tsx

@@ -13,7 +13,7 @@ interface Props {
 export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
   const {
     getState,
-    options: { enableStickyHeader, tableId, muiTableContainerProps },
+    options: { enableStickyHeader, muiTableContainerProps, tableId },
   } = tableInstance;
 
   const { isFullScreen } = getState();
@@ -41,9 +41,12 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
 
+  const tableContainerRef = React.useRef<HTMLDivElement>(null);
+
   return (
     <TableContainer
       {...tableContainerProps}
+      ref={tableContainerRef}
       sx={{
         maxWidth: '100%',
         maxHeight: enableStickyHeader
@@ -58,7 +61,10 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
           : undefined,
       }}
     >
-      <MRT_Table tableInstance={tableInstance} />
+      <MRT_Table
+        tableContainerRef={tableContainerRef}
+        tableInstance={tableInstance}
+      />
     </TableContainer>
   );
 };

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} />
       )}