material-react-table 1.4.0 → 1.4.2

package/dist/esm/types/MaterialReactTable.d.ts

@@ -541,9 +541,10 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Om
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => IconButtonProps);
-    muiTableBodyRowProps?: TableRowProps | (({ table, row, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyRowProps?: TableRowProps | (({ isDetailPanel, row, table, }: {
+        isDetailPanel?: boolean;
         row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => TableRowProps);
     muiTableContainerProps?: TableContainerProps | (({ table, }: {
         table: MRT_TableInstance<TData>;

package/dist/esm/types/body/MRT_TableDetailPanel.d.ts

@@ -1,8 +1,11 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
+import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
+    parentRowRef: React.RefObject<HTMLTableRowElement>;
     row: MRT_Row;
     table: MRT_TableInstance;
+    virtualRow?: VirtualItem;
 }
 export declare const MRT_TableDetailPanel: FC<Props>;
 export {};

package/dist/esm/types/index.d.ts

@@ -12,5 +12,7 @@ import { MRT_TablePagination } from './toolbar/MRT_TablePagination';
 import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterButton';
+import { MRT_ToolbarAlertBanner } from './toolbar/MRT_ToolbarAlertBanner';
+import { MRT_ToolbarDropZone } from './toolbar/MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './toolbar/MRT_ToolbarInternalButtons';
-export { MRT_CopyButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarInternalButtons, };
+export { MRT_CopyButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, };

package/dist/esm/types/table/MRT_TableRoot.d.ts

@@ -104,9 +104,10 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
-    muiTableBodyRowProps?: import("@mui/material").TableRowProps<"tr", {}> | (({ table, row, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyRowProps?: import("@mui/material").TableRowProps<"tr", {}> | (({ isDetailPanel, row, table, }: {
+        isDetailPanel?: boolean | undefined;
         row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => import("@mui/material").TableRowProps<"tr", {}>) | undefined;
     muiTableContainerProps?: import("@mui/material").TableContainerProps<"div", {}> | (({ table, }: {
         table: MRT_TableInstance<TData>;

package/dist/esm/types/toolbar/MRT_ToolbarAlertBanner.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import { MRT_TableInstance } from '..';
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
     stackAlertBanner: boolean;
-    table: MRT_TableInstance;
+    table: MRT_TableInstance<TData>;
 }
-export declare const MRT_ToolbarAlertBanner: FC<Props>;
+export declare const MRT_ToolbarAlertBanner: <TData extends Record<string, any> = {}>({ stackAlertBanner, table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/esm/types/toolbar/MRT_ToolbarDropZone.d.ts

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import { MRT_TableInstance } from '..';
-interface Props {
-    table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+    table: MRT_TableInstance<TData>;
 }
-export declare const MRT_ToolbarDropZone: FC<Props>;
+export declare const MRT_ToolbarDropZone: <TData extends Record<string, any> = {}>({ table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/index.d.ts

@@ -664,9 +664,10 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Part
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => IconButtonProps);
-    muiTableBodyRowProps?: TableRowProps | (({ table, row, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyRowProps?: TableRowProps | (({ isDetailPanel, row, table, }: {
+        isDetailPanel?: boolean;
         row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => TableRowProps);
     muiTableContainerProps?: TableContainerProps | (({ table, }: {
         table: MRT_TableInstance<TData>;
@@ -820,14 +821,14 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Part
 };
 declare const MaterialReactTable: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, layoutMode, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 
-interface Props$9<TData extends Record<string, any> = {}> {
+interface Props$b<TData extends Record<string, any> = {}> {
     cell: MRT_Cell<TData>;
     children: ReactNode;
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_CopyButton: <TData extends Record<string, any> = {}>({ cell, children, table, }: Props$9<TData>) => JSX.Element;
+declare const MRT_CopyButton: <TData extends Record<string, any> = {}>({ cell, children, table, }: Props$b<TData>) => JSX.Element;
 
-interface Props$8<TData extends Record<string, any> = {}> {
+interface Props$a<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;
     header?: MRT_Header<TData>;
     onSelect?: () => void;
@@ -835,47 +836,58 @@ interface Props$8<TData extends Record<string, any> = {}> {
     setFilterValue?: (filterValue: any) => void;
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_FilterOptionMenu: <TData extends Record<string, any> = {}>({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, }: Props$8<TData>) => JSX.Element;
+declare const MRT_FilterOptionMenu: <TData extends Record<string, any> = {}>({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, }: Props$a<TData>) => JSX.Element;
+
+interface Props$9<TData extends Record<string, any> = {}> extends IconButtonProps {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_FullScreenToggleButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$9<TData>) => JSX.Element;
+
+interface Props$8<TData extends Record<string, any> = {}> {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_GlobalFilterTextField: <TData extends Record<string, any> = {}>({ table, }: Props$8<TData>) => JSX.Element;
 
 interface Props$7<TData extends Record<string, any> = {}> extends IconButtonProps {
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_FullScreenToggleButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$7<TData>) => JSX.Element;
+declare const MRT_ShowHideColumnsButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$7<TData>) => JSX.Element;
 
 interface Props$6<TData extends Record<string, any> = {}> {
+    position: 'top' | 'bottom';
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_GlobalFilterTextField: <TData extends Record<string, any> = {}>({ table, }: Props$6<TData>) => JSX.Element;
+declare const MRT_TablePagination: <TData extends Record<string, any> = {}>({ table, position, }: Props$6<TData>) => JSX.Element;
 
 interface Props$5<TData extends Record<string, any> = {}> extends IconButtonProps {
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_ShowHideColumnsButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$5<TData>) => JSX.Element;
+declare const MRT_ToggleDensePaddingButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$5<TData>) => JSX.Element;
 
-interface Props$4<TData extends Record<string, any> = {}> {
-    position: 'top' | 'bottom';
+interface Props$4<TData extends Record<string, any> = {}> extends IconButtonProps {
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_TablePagination: <TData extends Record<string, any> = {}>({ table, position, }: Props$4<TData>) => JSX.Element;
+declare const MRT_ToggleFiltersButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$4<TData>) => JSX.Element;
 
 interface Props$3<TData extends Record<string, any> = {}> extends IconButtonProps {
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_ToggleDensePaddingButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$3<TData>) => JSX.Element;
+declare const MRT_ToggleGlobalFilterButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$3<TData>) => JSX.Element;
 
-interface Props$2<TData extends Record<string, any> = {}> extends IconButtonProps {
+interface Props$2<TData extends Record<string, any> = {}> {
+    stackAlertBanner: boolean;
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_ToggleFiltersButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$2<TData>) => JSX.Element;
+declare const MRT_ToolbarAlertBanner: <TData extends Record<string, any> = {}>({ stackAlertBanner, table, }: Props$2<TData>) => JSX.Element;
 
-interface Props$1<TData extends Record<string, any> = {}> extends IconButtonProps {
+interface Props$1<TData extends Record<string, any> = {}> {
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_ToggleGlobalFilterButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$1<TData>) => JSX.Element;
+declare const MRT_ToolbarDropZone: <TData extends Record<string, any> = {}>({ table, }: Props$1<TData>) => JSX.Element;
 
 interface Props<TData extends Record<string, any> = {}> {
     table: MRT_TableInstance<TData>;
 }
 declare const MRT_ToolbarInternalButtons: <TData extends Record<string, any> = {}>({ table, }: Props<TData>) => JSX.Element;
 
-export { DensityState, MRT_AggregationFn, MRT_AggregationOption, MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_InternalFilterOption, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TablePagination, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarInternalButtons, MaterialReactTableProps, MaterialReactTable as default };
+export { DensityState, MRT_AggregationFn, MRT_AggregationOption, MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_InternalFilterOption, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TablePagination, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MaterialReactTableProps, MaterialReactTable as default };

package/package.json

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

@@ -813,11 +813,13 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     muiTableBodyRowProps?:
       | TableRowProps
       | (({
-          table,
+          isDetailPanel = false,
           row,
+          table,
         }: {
-          table: MRT_TableInstance<TData>;
+          isDetailPanel?: boolean;
           row: MRT_Row<TData>;
+          table: MRT_TableInstance<TData>;
         }) => TableRowProps);
     muiTableContainerProps?:
       | TableContainerProps

package/src/body/MRT_TableBody.tsx

@@ -87,7 +87,7 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
           density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73,
         getScrollElement: () => tableContainerRef.current,
         measureElement: (element) => element?.getBoundingClientRect().height,
-        overscan: 10,
+        overscan: 4,
         ...vProps,
       })
     : undefined;
@@ -104,63 +104,65 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
       sx={(theme) => ({
         display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
         height: virtualizer ? `${virtualizer.getTotalSize()}px` : 'inherit',
+        minHeight: !rows.length ? '100px' : undefined,
         position: 'relative',
         ...(tableBodyProps?.sx instanceof Function
           ? tableBodyProps?.sx(theme)
           : (tableBodyProps?.sx as any)),
       })}
     >
-      {tableBodyProps?.children ?? !rows.length ? (
-        <tr style={{ display: layoutMode === 'grid' ? 'grid' : 'table-row' }}>
-          <td
-            colSpan={table.getVisibleLeafColumns().length}
-            style={{ display: layoutMode === 'grid' ? 'grid' : 'table-cell' }}
-          >
-            <Typography
-              sx={{
-                color: 'text.secondary',
-                fontStyle: 'italic',
-                maxWidth: `min(100vw, ${
-                  tablePaperRef.current?.clientWidth ?? 360
-                }px)`,
-                py: '2rem',
-                textAlign: 'center',
-                width: '100%',
-              }}
+      {tableBodyProps?.children ??
+        (!rows.length ? (
+          <tr style={{ display: layoutMode === 'grid' ? 'grid' : 'table-row' }}>
+            <td
+              colSpan={table.getVisibleLeafColumns().length}
+              style={{ display: layoutMode === 'grid' ? 'grid' : 'table-cell' }}
             >
-              {globalFilter || columnFilters.length
-                ? localization.noResultsFound
-                : localization.noRecordsToDisplay}
-            </Typography>
-          </td>
-        </tr>
-      ) : (
-        <>
-          {(virtualRows ?? rows).map((rowOrVirtualRow, rowIndex) => {
-            const row = virtualizer
-              ? rows[rowOrVirtualRow.index]
-              : (rowOrVirtualRow as MRT_Row);
-            const props = {
-              key: row.id,
-              measureElement: virtualizer
-                ? virtualizer.measureElement
-                : undefined,
-              numRows: rows.length,
-              row,
-              rowIndex: virtualizer ? rowOrVirtualRow.index : rowIndex,
-              table,
-              virtualRow: virtualizer
-                ? (rowOrVirtualRow as VirtualItem)
-                : undefined,
-            };
-            return memoMode === 'rows' ? (
-              <Memo_MRT_TableBodyRow {...props} />
-            ) : (
-              <MRT_TableBodyRow {...props} />
-            );
-          })}
-        </>
-      )}
+              <Typography
+                sx={{
+                  color: 'text.secondary',
+                  fontStyle: 'italic',
+                  maxWidth: `min(100vw, ${
+                    tablePaperRef.current?.clientWidth ?? 360
+                  }px)`,
+                  py: '2rem',
+                  textAlign: 'center',
+                  width: '100%',
+                }}
+              >
+                {globalFilter || columnFilters.length
+                  ? localization.noResultsFound
+                  : localization.noRecordsToDisplay}
+              </Typography>
+            </td>
+          </tr>
+        ) : (
+          <>
+            {(virtualRows ?? rows).map((rowOrVirtualRow, rowIndex) => {
+              const row = virtualizer
+                ? rows[rowOrVirtualRow.index]
+                : (rowOrVirtualRow as MRT_Row);
+              const props = {
+                key: row.id,
+                measureElement: virtualizer
+                  ? virtualizer.measureElement
+                  : undefined,
+                numRows: rows.length,
+                row,
+                rowIndex: virtualizer ? rowOrVirtualRow.index : rowIndex,
+                table,
+                virtualRow: virtualizer
+                  ? (rowOrVirtualRow as VirtualItem)
+                  : undefined,
+              };
+              return memoMode === 'rows' ? (
+                <Memo_MRT_TableBodyRow {...props} />
+              ) : (
+                <MRT_TableBodyRow {...props} />
+              );
+            })}
+          </>
+        ))}
     </TableBody>
   );
 };

package/src/body/MRT_TableBodyRow.tsx

@@ -131,7 +131,12 @@ export const MRT_TableBodyRow: FC<Props> = ({
         })}
       </TableRow>
       {renderDetailPanel && !row.getIsGrouped() && (
-        <MRT_TableDetailPanel row={row} table={table} />
+        <MRT_TableDetailPanel
+          parentRowRef={rowRef}
+          row={row}
+          table={table}
+          virtualRow={virtualRow}
+        />
       )}
     </>
   );

package/src/body/MRT_TableDetailPanel.tsx

@@ -2,14 +2,23 @@ import React, { FC } from 'react';
 import Collapse from '@mui/material/Collapse';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
+import { lighten } from '@mui/material/styles';
+import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
+  parentRowRef: React.RefObject<HTMLTableRowElement>;
   row: MRT_Row;
   table: MRT_TableInstance;
+  virtualRow?: VirtualItem;
 }
 
-export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
+export const MRT_TableDetailPanel: FC<Props> = ({
+  parentRowRef,
+  row,
+  table,
+  virtualRow,
+}) => {
   const {
     getVisibleLeafColumns,
     getState,
@@ -24,7 +33,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ row, table })
+      ? muiTableBodyRowProps({ isDetailPanel: true, row, table })
       : muiTableBodyRowProps;
 
   const tableCellProps =
@@ -34,16 +43,34 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
 
   return (
     <TableRow
-      sx={{
-        display: layoutMode === 'grid' ? 'flex' : 'table-row',
-      }}
+      className="Mui-TableBodyCell-DetailPanel"
       {...tableRowProps}
+      sx={(theme) => ({
+        display: layoutMode === 'grid' ? 'flex' : 'table-row',
+        position: virtualRow ? 'absolute' : undefined,
+        top: virtualRow
+          ? `${parentRowRef.current?.getBoundingClientRect()?.height}px`
+          : undefined,
+        transform: virtualRow
+          ? `translateY(${virtualRow?.start}px)`
+          : undefined,
+        width: '100%',
+        zIndex: virtualRow ? 2 : undefined,
+        ...(tableRowProps?.sx instanceof Function
+          ? tableRowProps.sx(theme)
+          : (tableRowProps?.sx as any)),
+      })}
     >
       <TableCell
+        className="Mui-TableBodyCell-DetailPanel"
         colSpan={getVisibleLeafColumns().length}
         {...tableCellProps}
         sx={(theme) => ({
+          backgroundColor: virtualRow
+            ? lighten(theme.palette.background.default, 0.06)
+            : undefined,
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
+          display: layoutMode === 'grid' ? 'flex' : 'table-cell',
           pb: row.getIsExpanded() ? '1rem' : 0,
           pt: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 150ms ease-in-out',

package/src/index.tsx

@@ -14,6 +14,8 @@ import { MRT_TablePagination } from './toolbar/MRT_TablePagination';
 import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterButton';
+import { MRT_ToolbarAlertBanner } from './toolbar/MRT_ToolbarAlertBanner';
+import { MRT_ToolbarDropZone } from './toolbar/MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './toolbar/MRT_ToolbarInternalButtons';
 
 export {
@@ -26,5 +28,7 @@ export {
   MRT_ToggleDensePaddingButton,
   MRT_ToggleFiltersButton,
   MRT_ToggleGlobalFilterButton,
+  MRT_ToolbarAlertBanner,
+  MRT_ToolbarDropZone,
   MRT_ToolbarInternalButtons,
 };

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import Box from '@mui/material/Box';
@@ -6,15 +6,15 @@ import Chip from '@mui/material/Chip';
 import Collapse from '@mui/material/Collapse';
 import { MRT_TableInstance } from '..';
 
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
   stackAlertBanner: boolean;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarAlertBanner: FC<Props> = ({
+export const MRT_ToolbarAlertBanner = <TData extends Record<string, any> = {}>({
   stackAlertBanner,
   table,
-}) => {
+}: Props<TData>) => {
   const {
     getPrePaginationRowModel,
     getSelectedRowModel,

package/src/toolbar/MRT_ToolbarDropZone.tsx

@@ -1,15 +1,17 @@
-import React, { DragEvent, FC } from 'react';
+import React, { DragEvent } from 'react';
 import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
 import Typography from '@mui/material/Typography';
 import { MRT_TableInstance } from '..';
 
-interface Props {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarDropZone: FC<Props> = ({ table }) => {
+export const MRT_ToolbarDropZone = <TData extends Record<string, any> = {}>({
+  table,
+}: Props<TData>) => {
   const {
     getState,
     options: { enableGrouping, localization },