material-react-table 0.9.4 → 0.9.7

package/dist/table/MRT_TablePaper.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_TableInstance } from '..';
+import type { MRT_TableInstance } from '..';
 interface Props {
     tableInstance: MRT_TableInstance;
 }

package/package.json

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

@@ -34,6 +34,7 @@ import {
   FilterFnOption,
   Header,
   HeaderGroup,
+  OnChangeFn,
   Overwrite,
   ReactTableGenerics,
   Row,
@@ -43,6 +44,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';
@@ -567,6 +569,12 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
         }: {
           tableInstance: MRT_TableInstance;
         }) => ToolbarProps);
+    onCurrentEditingCellChange?: OnChangeFn<MRT_Cell>;
+    onCurrentEditingRowChange?: OnChangeFn<MRT_Row>;
+    onCurrentFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterFn<D> }>;
+    onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterFn<D>>;
+    onIsDensePaddingChange?: OnChangeFn<boolean>;
+    onIsFullScreenChange?: OnChangeFn<boolean>;
     onMrtCellClick?: ({
       cell,
       event,
@@ -708,6 +716,8 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       showGlobalFilter: boolean;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
+    onShowFiltersChange?: OnChangeFn<boolean>;
+    onShowGlobalFilterChange?: OnChangeFn<boolean>;
     persistentStateMode?: 'localStorage' | 'sessionStorage';
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
@@ -770,12 +780,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,
@@ -793,7 +804,7 @@ export default <D extends Record<string, any> = {}>({
   enablePinning = false,
   enableSelectAll = true,
   enableSorting = true,
-  enableStickyHeader = true,
+  enableStickyHeader = false,
   enableTableFooter = true,
   enableTableHead = true,
   enableToolbarBottom = 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

@@ -25,10 +25,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
       editingMode,
       enableClickToCopy,
       enableColumnOrdering,
-      enableColumnResizing,
       enableEditing,
       enableRowNumbers,
-      enableRowVirtualization,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       onMrtCellClick,
@@ -137,15 +135,6 @@ 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
@@ -179,7 +168,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
         position: column.getIsPinned() ? 'sticky' : 'relative',
         right:
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
-        textOverflow: 'ellipsis',
+        textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
         transition: 'all 0.2s ease-in-out',
         whiteSpace: isDensePadding ? 'nowrap' : 'normal',
         zIndex: column.getIsPinned() ? 1 : undefined,
@@ -195,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_TableBodyRow.tsx

@@ -10,7 +10,11 @@ interface Props {
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, tableInstance }) => {
+export const MRT_TableBodyRow: FC<Props> = ({
+  row,
+  rowIndex,
+  tableInstance,
+}) => {
   const {
     getIsSomeColumnsPinned,
     options: { muiTableBodyRowProps, onMrtRowClick, renderDetailPanel },

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

@@ -12,6 +12,7 @@ interface Props {
 
 export const MRT_Table: FC<Props> = ({ tableContainerRef, tableInstance }) => {
   const {
+    getState,
     options: {
       enableColumnResizing,
       enableRowVirtualization,
@@ -22,6 +23,8 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, tableInstance }) => {
     },
   } = tableInstance;
 
+  const { isFullScreen } = getState();
+
   const tableProps =
     muiTableProps instanceof Function
       ? muiTableProps({ tableInstance })
@@ -29,11 +32,13 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, tableInstance }) => {
 
   return (
     <Table
-      stickyHeader={enableStickyHeader}
+      stickyHeader={
+        enableStickyHeader || enableRowVirtualization || isFullScreen
+      }
       {...tableProps}
       sx={{
         tableLayout:
-          enableColumnResizing || enableRowVirtualization ? 'fixed' : undefined,
+          enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto',
         ...tableProps?.sx,
       }}
     >

package/src/table/MRT_TableContainer.tsx

@@ -13,7 +13,12 @@ interface Props {
 export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
   const {
     getState,
-    options: { enableStickyHeader, muiTableContainerProps, tableId },
+    options: {
+      enableStickyHeader,
+      enableRowVirtualization,
+      muiTableContainerProps,
+      tableId,
+    },
   } = tableInstance;
 
   const { isFullScreen } = getState();
@@ -49,9 +54,10 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
       ref={tableContainerRef}
       sx={{
         maxWidth: '100%',
-        maxHeight: enableStickyHeader
-          ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 2000px)`
-          : undefined,
+        maxHeight:
+          enableStickyHeader || enableRowVirtualization
+            ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
+            : undefined,
         overflow: 'auto',
         ...tableContainerProps?.sx,
       }}
@@ -59,6 +65,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
         maxHeight: isFullScreen
           ? `calc(100vh - ${totalToolbarHeight}px)`
           : undefined,
+        ...tableContainerProps?.style,
       }}
     >
       <MRT_Table

package/src/table/MRT_TablePaper.tsx

@@ -5,7 +5,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
 import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
 import { MRT_TableContainer } from './MRT_TableContainer';
-import { MRT_TableInstance } from '..';
+import type { MRT_TableInstance } from '..';
 
 interface Props {
   tableInstance: MRT_TableInstance;
@@ -22,10 +22,8 @@ export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
   useEffect(() => {
     if (typeof window !== 'undefined') {
       if (isFullScreen) {
-        document.body.style.overflow = 'hidden';
         document.body.style.height = '100vh';
       } else {
-        document.body.style.overflow = 'auto';
         document.body.style.height = 'auto';
       }
     }
@@ -44,8 +42,6 @@ export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
         sx={{
           transition: 'all 0.2s ease-in-out',
           ...tablePaperProps?.sx,
-        }}
-        style={{
           height: isFullScreen ? '100vh' : undefined,
           margin: isFullScreen ? '0' : undefined,
           maxHeight: isFullScreen ? '100vh' : undefined,

package/src/table/MRT_TableRoot.tsx

@@ -170,7 +170,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             id: 'mrt-row-actions',
             muiTableBodyCellProps: props.muiTableBodyCellProps,
             muiTableHeadCellProps: props.muiTableHeadCellProps,
-            size: 60,
+            size: 70,
           }),
         showExpandColumn &&
           createDisplayColumn(table, {
@@ -286,14 +286,17 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         ...props.state,
       } as TableState,
     }),
-    setCurrentEditingCell,
-    setCurrentEditingRow,
-    setCurrentFilterFns,
-    setCurrentGlobalFilterFn,
-    setIsDensePadding,
-    setIsFullScreen,
-    setShowFilters,
-    setShowGlobalFilter,
+    setCurrentEditingCell:
+      props.onCurrentEditingCellChange ?? setCurrentEditingCell,
+    setCurrentEditingRow:
+      props.onCurrentEditingRowChange ?? setCurrentEditingRow,
+    setCurrentFilterFns: props.onCurrentFilterFnsChange ?? setCurrentFilterFns,
+    setCurrentGlobalFilterFn:
+      props.onCurrentGlobalFilterFnChange ?? setCurrentGlobalFilterFn,
+    setIsDensePadding: props.onIsDensePaddingChange ?? setIsDensePadding,
+    setIsFullScreen: props.onIsFullScreenChange ?? setIsFullScreen,
+    setShowFilters: props.onShowFiltersChange ?? setShowFilters,
+    setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
   } as MRT_TableInstance;
 
   useEffect(() => {

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -76,6 +76,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
       )}
       <Box
         sx={{
+          alignItems: 'flex-start',
           display: 'flex',
           justifyContent: 'space-between',
           p: '0.5rem',