material-react-table 0.39.0 → 0.40.0

package/dist/index.d.ts

@@ -697,6 +697,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
+    tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
     virtualizerProps?: Partial<Options<HTMLDivElement>> | (({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => Partial<Options<HTMLDivElement>>);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.39.0",
+  "version": "0.40.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -841,6 +841,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
+    tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
     virtualizerProps?:
       | Partial<VirtualizerOptions<HTMLDivElement>>
       | (({

package/src/body/MRT_TableBodyCell.tsx

@@ -109,7 +109,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
     [isLoading, showSkeletons],
   );
 
-  const handleDoubleClick = (_event: MouseEvent<HTMLTableCellElement>) => {
+  const handleDoubleClick = (event: MouseEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onDoubleClick?.(event);
     if (
       (enableEditing || columnDef.enableEditing) &&
       columnDef.enableEditing !== false &&
@@ -143,7 +144,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
     );
   };
 
-  const handleDragEnter = (_e: DragEvent) => {
+  const handleDragEnter = (e: DragEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onDragEnter?.(e);
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
       setHoveredColumn(null);
     }
@@ -179,9 +181,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   return (
     <TableCell
-      onDoubleClick={handleDoubleClick}
-      onDragEnter={handleDragEnter}
       {...tableCellProps}
+      onDragEnter={handleDragEnter}
+      onDoubleClick={handleDoubleClick}
       sx={(theme) => ({
         backgroundColor: column.getIsPinned()
           ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)

package/src/table/MRT_TableRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   TableState,
   getCoreRowModel,
@@ -134,7 +134,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
               <MRT_ToggleRowActionMenuButton
                 cell={cell as any}
                 row={row as any}
-                table={table}
+                table={table as any}
               />
             ),
             header: props.localization?.actions,
@@ -146,11 +146,11 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
           columnOrder.includes('mrt-row-expand') &&
             showExpandColumn(props, grouping) && {
               Cell: ({ row }) => (
-                <MRT_ExpandButton row={row as any} table={table} />
+                <MRT_ExpandButton row={row as any} table={table as any} />
               ),
               Header: () =>
                 props.enableExpandAll ? (
-                  <MRT_ExpandAllButton table={table} />
+                  <MRT_ExpandAllButton table={table as any} />
                 ) : null,
               header: props.localization?.expand,
               size: 60,
@@ -160,11 +160,11 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             },
           columnOrder.includes('mrt-row-select') && {
             Cell: ({ row }) => (
-              <MRT_SelectCheckbox row={row as any} table={table} />
+              <MRT_SelectCheckbox row={row as any} table={table as any} />
             ),
             Header: () =>
               props.enableSelectAll ? (
-                <MRT_SelectCheckbox selectAll table={table} />
+                <MRT_SelectCheckbox selectAll table={table as any} />
               ) : null,
             header: props.localization?.select,
             size: 60,
@@ -301,7 +301,13 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,
     setShowFilters: props.onShowFiltersChange ?? setShowFilters,
     setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
-  } as MRT_TableInstance;
+  } as MRT_TableInstance<TData>;
+
+  useEffect(() => {
+    if (props.tableInstanceRef) {
+      props.tableInstanceRef.current = table;
+    }
+  }, []);
 
   return (
     <>
@@ -315,9 +321,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         open={isFullScreen}
         transitionDuration={400}
       >
-        <MRT_TablePaper table={table} />
+        <MRT_TablePaper table={table as any} />
       </Dialog>
-      {!isFullScreen && <MRT_TablePaper table={table} />}
+      {!isFullScreen && <MRT_TablePaper table={table as any} />}
       {editingRow && props.editingMode === 'modal' && (
         <MRT_EditRowModal row={editingRow as any} table={table} open />
       )}