material-react-table 2.0.0-beta.0 → 2.0.0-beta.2

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -12,6 +12,7 @@ import {
   type MRT_DefinedTableOptions,
   type MRT_GroupingState,
   type MRT_Row,
+  type MRT_RowData,
 } from '../types';
 
 const blankColProps = {
@@ -23,14 +24,14 @@ const blankColProps = {
   },
 };
 
-interface Params<TData extends Record<string, any>> {
+interface Params<TData extends MRT_RowData> {
   columnOrder: MRT_ColumnOrderState;
   creatingRow: MRT_Row<TData> | null;
   grouping: MRT_GroupingState;
   tableOptions: MRT_DefinedTableOptions<TData>;
 }
 
-export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
+export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
   columnOrder,
   creatingRow,
   grouping,

package/src/hooks/useMRT_Effects.ts

@@ -1,8 +1,12 @@
 import { useEffect, useReducer, useRef } from 'react';
 import { getCanRankRows } from '../column.utils';
-import { type MRT_SortingState, type MRT_TableInstance } from '../types';
+import {
+  type MRT_RowData,
+  type MRT_SortingState,
+  type MRT_TableInstance,
+} from '../types';
 
-export const useMRT_Effects = <TData extends Record<string, any> = {}>(
+export const useMRT_Effects = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
 ) => {
   const {

package/src/hooks/useMRT_TableInstance.ts

@@ -30,6 +30,7 @@ import {
   type MRT_FilterOption,
   type MRT_GroupingState,
   type MRT_Row,
+  type MRT_RowData,
   type MRT_TableInstance,
   type MRT_TableState,
   type MRT_Updater,
@@ -37,9 +38,9 @@ import {
 import { useMRT_DisplayColumns } from './useMRT_DisplayColumns';
 import { useMRT_Effects } from './useMRT_Effects';
 
-export const useMRT_TableInstance: <TData extends Record<string, any>>(
+export const useMRT_TableInstance: <TData extends MRT_RowData>(
   tableOptions: MRT_DefinedTableOptions<TData>,
-) => MRT_TableInstance<TData> = <TData extends Record<string, any>>(
+) => MRT_TableInstance<TData> = <TData extends MRT_RowData>(
   tableOptions: MRT_DefinedTableOptions<TData>,
 ) => {
   const bottomToolbarRef = useRef<HTMLDivElement>(null);

package/src/hooks/useMRT_TableOptions.ts

@@ -5,11 +5,15 @@ import { MRT_FilterFns } from '../filterFns';
 import { MRT_Default_Icons } from '../icons';
 import { MRT_Localization_EN } from '../locales/en';
 import { MRT_SortingFns } from '../sortingFns';
-import { type MRT_DefinedTableOptions, type MRT_TableOptions } from '../types';
+import {
+  type MRT_DefinedTableOptions,
+  type MRT_RowData,
+  type MRT_TableOptions,
+} from '../types';
 
-export const useMRT_TableOptions: <TData extends Record<string, any>>(
+export const useMRT_TableOptions: <TData extends MRT_RowData>(
   tableOptions: MRT_TableOptions<TData>,
-) => MRT_DefinedTableOptions<TData> = <TData extends Record<string, any>>({
+) => MRT_DefinedTableOptions<TData> = <TData extends MRT_RowData>({
   aggregationFns,
   autoResetExpanded = false,
   columnFilterDisplayMode = 'subheader',

package/src/inputs/MRT_EditCellTextField.tsx

@@ -8,14 +8,18 @@ import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
 import { type TextFieldProps } from '@mui/material/TextField';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Cell, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_EditCellTextField = <TData extends Record<string, any>>({
+export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   cell,
   table,
 }: Props<TData>) => {
@@ -100,10 +104,10 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
         }
       }}
       label={
-        ['custom', 'modal'].includes(
+        !['custom', 'modal'].includes(
           (isCreating ? createDisplayMode : editDisplayMode) as string,
         )
-          ? column.columnDef.header
+          ? columnDef.header
           : undefined
       }
       margin="none"
@@ -119,6 +123,14 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
       value={value}
       variant="standard"
       {...textFieldProps}
+      InputProps={{
+        disableUnderline: editDisplayMode === 'table',
+        ...textFieldProps.InputProps,
+      }}
+      inputProps={{
+        autoComplete: 'new-password', // disable autocomplete and autofill
+        ...textFieldProps.inputProps,
+      }}
       onBlur={handleBlur}
       onChange={handleChange}
       onClick={(e) => {

package/src/inputs/MRT_FilterCheckbox.tsx

@@ -2,14 +2,18 @@ import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Column, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
+export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
   column,
   table,
 }: Props<TData>) => {

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -1,13 +1,17 @@
 import Box from '@mui/material/Box';
 import { MRT_FilterTextField } from './MRT_FilterTextField';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterRangeFields = <TData extends Record<string, any>>({
+export const MRT_FilterRangeFields = <TData extends MRT_RowData>({
   header,
   table,
 }: Props<TData>) => {

package/src/inputs/MRT_FilterRangeSlider.tsx

@@ -3,14 +3,18 @@ import FormHelperText from '@mui/material/FormHelperText';
 import Slider from '@mui/material/Slider';
 import Stack from '@mui/material/Stack';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
+export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
   header,
   table,
 }: Props<TData>) => {

package/src/inputs/MRT_FilterTextField.tsx

@@ -23,15 +23,19 @@ import {
 } from '@mui/x-date-pickers/DatePicker';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   header: MRT_Header<TData>;
   rangeFilterIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterTextField = <TData extends Record<string, any>>({
+export const MRT_FilterTextField = <TData extends MRT_RowData>({
   header,
   rangeFilterIndex,
   table,
@@ -329,6 +333,8 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
     sx: (theme) => ({
       minWidth: isDateFilter
         ? '160px'
+        : enableColumnFilterModes && rangeFilterIndex === 0
+        ? '110px'
         : isRangeFilter
         ? '100px'
         : !filterChipLabel

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -14,13 +14,13 @@ import Tooltip from '@mui/material/Tooltip';
 import { debounce } from '@mui/material/utils';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
+export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
   table,
 }: Props<TData>) => {
   const {

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -4,15 +4,19 @@ import Radio, { type RadioProps } from '@mui/material/Radio';
 import Tooltip from '@mui/material/Tooltip';
 import { type Theme } from '@mui/material/styles';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   row?: MRT_Row<TData>;
   selectAll?: boolean;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
+export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   row,
   selectAll,
   table,

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -6,7 +6,11 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
 export const commonMenuItemStyles = {
   alignItems: 'center',
@@ -20,14 +24,14 @@ export const commonListItemStyles = {
   display: 'flex',
 };
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   anchorEl: HTMLElement | null;
   header: MRT_Header<TData>;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
+export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   anchorEl,
   header,
   setAnchorEl,

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -7,6 +7,7 @@ import {
   type MRT_Header,
   type MRT_InternalFilterOption,
   type MRT_Localization,
+  type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
@@ -104,7 +105,7 @@ const emptyModes = ['empty', 'notEmpty'];
 const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
 const rangeVariants = ['range-slider', 'date-range', 'range'];
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   anchorEl: HTMLElement | null;
   header?: MRT_Header<TData>;
   onSelect?: () => void;
@@ -113,7 +114,7 @@ interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
+export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
   anchorEl,
   header,
   onSelect,

package/src/menus/MRT_RowActionMenu.tsx

@@ -8,9 +8,13 @@ import {
   commonMenuItemStyles,
 } from './MRT_ColumnActionMenu';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   anchorEl: HTMLElement | null;
   handleEdit: (event: MouseEvent) => void;
   row: MRT_Row<TData>;
@@ -18,7 +22,7 @@ interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_RowActionMenu = <TData extends Record<string, any>>({
+export const MRT_RowActionMenu = <TData extends MRT_RowData>({
   anchorEl,
   handleEdit,
   row,

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -5,16 +5,20 @@ import Divider from '@mui/material/Divider';
 import Menu from '@mui/material/Menu';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import { getDefaultColumnOrderIds } from '../column.utils';
-import { type MRT_Column, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   anchorEl: HTMLElement | null;
   isSubMenu?: boolean;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsMenu = <TData extends Record<string, any>>({
+export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
   anchorEl,
   setAnchorEl,
   table,

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -14,9 +14,13 @@ import Typography from '@mui/material/Typography';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { reorderColumn } from '../column.utils';
-import { type MRT_Column, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   allColumns: MRT_Column<TData>[];
   column: MRT_Column<TData>;
   hoveredColumn: MRT_Column<TData> | null;
@@ -24,9 +28,7 @@ interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsMenuItems = <
-  TData extends Record<string, any>,
->({
+export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
   allColumns,
   column,
   hoveredColumn,

package/src/modals/MRT_EditRowModal.tsx

@@ -6,14 +6,18 @@ import Stack from '@mui/material/Stack';
 import { MRT_EditActionButtons } from '../buttons/MRT_EditActionButtons';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   open: boolean;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_EditRowModal = <TData extends Record<string, any>>({
+export const MRT_EditRowModal = <TData extends MRT_RowData>({
   open,
   table,
 }: Props<TData>) => {

package/src/sortingFns.ts

@@ -1,8 +1,8 @@
 import { type RankingInfo, compareItems } from '@tanstack/match-sorter-utils';
 import { type Row, sortingFns } from '@tanstack/react-table';
-import { type MRT_Row } from './types';
+import { type MRT_Row, type MRT_RowData } from './types';
 
-const fuzzy = <TData extends Record<string, any>>(
+const fuzzy = <TData extends MRT_RowData>(
   rowA: Row<TData>,
   rowB: Row<TData>,
   columnId: string,
@@ -25,7 +25,7 @@ export const MRT_SortingFns = {
   fuzzy,
 };
 
-export const rankGlobalFuzzy = <TData extends Record<string, any>>(
+export const rankGlobalFuzzy = <TData extends MRT_RowData>(
   rowA: MRT_Row<TData>,
   rowB: MRT_Row<TData>,
 ) =>

package/src/table/MRT_Table.tsx

@@ -13,13 +13,13 @@ import {
 } from '../column.utils';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableHead } from '../head/MRT_TableHead';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_Table = <TData extends Record<string, any>>({
+export const MRT_Table = <TData extends MRT_RowData>({
   table,
 }: Props<TData>) => {
   const {

package/src/table/MRT_TableContainer.tsx

@@ -6,16 +6,16 @@ import { alpha, lighten } from '@mui/material/styles';
 import { MRT_Table } from './MRT_Table';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_EditRowModal } from '../modals';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableContainer = <TData extends Record<string, any>>({
+export const MRT_TableContainer = <TData extends MRT_RowData>({
   table,
 }: Props<TData>) => {
   const {

package/src/table/MRT_TablePaper.tsx

@@ -3,13 +3,13 @@ import { MRT_TableContainer } from './MRT_TableContainer';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TablePaper = <TData extends Record<string, any>>({
+export const MRT_TablePaper = <TData extends MRT_RowData>({
   table,
 }: Props<TData>) => {
   const {
@@ -52,7 +52,7 @@ export const MRT_TablePaper = <TData extends Record<string, any>>({
               right: 0,
               top: 0,
               width: '100vw',
-              zIndex: 10,
+              zIndex: 9999,
             }
           : {}),
         ...tablePaperProps?.style,

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -8,13 +8,13 @@ import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
 import { commonToolbarStyles } from './MRT_TopToolbar';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_BottomToolbar = <TData extends Record<string, any>>({
+export const MRT_BottomToolbar = <TData extends MRT_RowData>({
   table,
 }: Props<TData>) => {
   const {

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -1,14 +1,14 @@
 import Collapse from '@mui/material/Collapse';
 import LinearProgress from '@mui/material/LinearProgress';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   isTopToolbar: boolean;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_LinearProgressBar = <TData extends Record<string, any>>({
+export const MRT_LinearProgressBar = <TData extends MRT_RowData>({
   isTopToolbar,
   table,
 }: Props<TData>) => {

package/src/toolbar/MRT_TablePagination.tsx

@@ -7,16 +7,16 @@ import PaginationItem from '@mui/material/PaginationItem';
 import Select from '@mui/material/Select';
 import Typography from '@mui/material/Typography';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends MRT_RowData> {
   position?: 'bottom' | 'top';
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
+export const MRT_TablePagination = <TData extends MRT_RowData>({
   position = 'bottom',
   table,
 }: Props<TData>) => {
@@ -62,8 +62,9 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
       sx={{
         alignItems: 'center',
         display: 'flex',
+        flexWrap: 'wrap',
         gap: '8px',
-        justifyContent: 'space-between',
+        justifyContent: { md: 'space-between', sm: 'center' },
         justifySelf: 'flex-end',
         mt:
           position === 'top' &&
@@ -83,11 +84,12 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
             {localization.rowsPerPage}
           </InputLabel>
           <Select
+            disableUnderline
             id="mrt-rows-per-page"
             inputProps={{ 'aria-label': localization.rowsPerPage }}
             label={localization.rowsPerPage}
             onChange={(event) => setPageSize(+event.target.value)}
-            sx={{ '&::before': { border: 'none' }, mb: 0 }}
+            sx={{ mb: 0 }}
             value={pageSize}
             variant="standard"
           >
@@ -122,6 +124,7 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
       ) : paginationDisplayMode === 'default' ? (
         <>
           <Typography
+            align="center"
             sx={{ mb: 0, minWidth: '10ch', mx: '4px' }}
             variant="body2"
           >{`${

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -7,14 +7,14 @@ import Collapse from '@mui/material/Collapse';
 import Stack from '@mui/material/Stack';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_SelectCheckbox } from '../inputs';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   stackAlertBanner?: boolean;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
+export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
   stackAlertBanner,
   table,
 }: Props<TData>) => {

package/src/toolbar/MRT_ToolbarDropZone.tsx

@@ -3,13 +3,13 @@ import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
 import Typography from '@mui/material/Typography';
 import { alpha } from '@mui/material/styles';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarDropZone = <TData extends Record<string, any>>({
+export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
   table,
 }: Props<TData>) => {
   const {