material-react-table 0.9.6 → 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.6",
+  "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,
@@ -568,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,
@@ -709,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';
@@ -795,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_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/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,7 +32,9 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, tableInstance }) => {
 
   return (
     <Table
-      stickyHeader={enableStickyHeader}
+      stickyHeader={
+        enableStickyHeader || enableRowVirtualization || isFullScreen
+      }
       {...tableProps}
       sx={{
         tableLayout:

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',