material-react-table 2.11.3 → 2.12.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.11.3",
+  "version": "2.12.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.",
@@ -71,17 +71,17 @@
     "@mui/x-date-pickers": "^6.19.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.0.2",
-    "@storybook/addon-a11y": "^7.6.15",
-    "@storybook/addon-essentials": "^7.6.15",
-    "@storybook/addon-interactions": "^7.6.15",
-    "@storybook/addon-links": "^7.6.15",
-    "@storybook/addon-storysource": "^7.6.15",
-    "@storybook/blocks": "^7.6.15",
-    "@storybook/react": "^7.6.15",
-    "@storybook/react-vite": "^7.6.15",
+    "@storybook/addon-a11y": "^7.6.16",
+    "@storybook/addon-essentials": "^7.6.16",
+    "@storybook/addon-interactions": "^7.6.16",
+    "@storybook/addon-links": "^7.6.16",
+    "@storybook/addon-storysource": "^7.6.16",
+    "@storybook/blocks": "^7.6.16",
+    "@storybook/react": "^7.6.16",
+    "@storybook/react-vite": "^7.6.16",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.11.17",
-    "@types/react": "^18.2.55",
+    "@types/node": "^20.11.19",
+    "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
     "@typescript-eslint/parser": "^7.0.1",
@@ -99,11 +99,11 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^11.0.2",
-    "storybook": "^7.6.15",
+    "storybook": "^7.6.16",
     "storybook-dark-mode": "^3.0.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.1.1"
+    "vite": "^5.1.3"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",
@@ -111,13 +111,13 @@
     "@mui/icons-material": ">=5.11",
     "@mui/material": ">=5.13",
     "@mui/x-date-pickers": ">=6.15.0",
-    "react": ">=18.0",
-    "react-dom": ">=18.0"
+    "react": ">=17.0",
+    "react-dom": ">=17.0"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.11.8",
     "@tanstack/react-table": "8.12.0",
-    "@tanstack/react-virtual": "3.0.4",
+    "@tanstack/react-virtual": "3.1.1",
     "highlight-words": "1.2.2"
   }
 }

package/src/components/body/MRT_TableBodyCell.tsx

@@ -210,6 +210,12 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     }
   };
 
+  const handleDragOver = (e: DragEvent) => {
+    if (columnDef.enableColumnOrdering !== false) {
+      e.preventDefault();
+    }
+  };
+
   const handleContextMenu = (e: MouseEvent<HTMLTableCellElement>) => {
     tableCellProps?.onContextMenu?.(e);
     if (isRightClickable) {
@@ -228,6 +234,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       onContextMenu={handleContextMenu}
       onDoubleClick={handleDoubleClick}
       onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
       sx={(theme) => ({
         '&:hover': {
           outline:

package/src/components/body/MRT_TableBodyRow.tsx

@@ -140,6 +140,10 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     }
   };
 
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+  };
+
   const rowRef = useRef<HTMLTableRowElement | null>(null);
 
   const cellHighlightColor = isRowSelected
@@ -164,6 +168,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         data-pinned={!!isRowPinned || undefined}
         data-selected={isRowSelected || undefined}
         onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
         ref={(node: HTMLTableRowElement) => {
           if (node) {
             rowRef.current = node;

package/src/components/body/MRT_TableDetailPanel.tsx

@@ -34,7 +34,6 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
     getState,
     getVisibleLeafColumns,
     options: {
-      enableRowVirtualization,
       layoutMode,
       mrtTheme: { baseBackgroundColor },
       muiDetailPanelProps,
@@ -93,14 +92,12 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
           py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0,
-          transition: !enableRowVirtualization
-            ? 'all 150ms ease-in-out'
-            : undefined,
+          transition: !virtualRow ? 'all 150ms ease-in-out' : undefined,
           width: `100%`,
           ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
         })}
       >
-        {enableRowVirtualization ? (
+        {virtualRow ? (
           row.getIsExpanded() && DetailPanel
         ) : (
           <Collapse in={row.getIsExpanded()} mountOnEnter unmountOnExit>

package/src/components/head/MRT_TableHead.tsx

@@ -20,8 +20,6 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableHeadProps<TData>) => {
   const {
-    getHeaderGroups,
-    getSelectedRowModel,
     getState,
     options: {
       enableStickyHeader,
@@ -60,7 +58,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
       })}
     >
       {positionToolbarAlertBanner === 'head-overlay' &&
-      (showAlertBanner || getSelectedRowModel().rows.length > 0) ? (
+      (showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? (
         <tr
           style={{
             display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
@@ -77,14 +75,16 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
           </th>
         </tr>
       ) : (
-        getHeaderGroups().map((headerGroup) => (
-          <MRT_TableHeadRow
-            columnVirtualizer={columnVirtualizer}
-            headerGroup={headerGroup as any}
-            key={headerGroup.id}
-            table={table}
-          />
-        ))
+        table
+          .getHeaderGroups()
+          .map((headerGroup) => (
+            <MRT_TableHeadRow
+              columnVirtualizer={columnVirtualizer}
+              headerGroup={headerGroup as any}
+              key={headerGroup.id}
+              table={table}
+            />
+          ))
       )}
     </TableHead>
   );

package/src/components/head/MRT_TableHeadCell.tsx

@@ -141,6 +141,12 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     }
   };
 
+  const handleDragOver = (e: DragEvent) => {
+    if (columnDef.enableColumnOrdering !== false) {
+      e.preventDefault();
+    }
+  };
+
   const HeaderElement =
     parseFromValuesOrFunc(columnDef.Header, {
       column,
@@ -161,6 +167,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       data-index={staticColumnIndex}
       data-pinned={!!isColumnPinned || undefined}
       onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
       ref={(node: HTMLTableCellElement) => {
         if (node) {
           tableHeadCellRefs.current[column.id] = node;

package/src/components/head/MRT_TableHeadCellFilterContainer.tsx

@@ -4,6 +4,7 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import { getColumnFilterInfo } from '../../utils/column.utils';
 import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
 import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
@@ -28,6 +29,7 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
   const { showColumnFilters } = getState();
   const { column } = header;
   const { columnDef } = column;
+  const { isRangeFilter } = getColumnFilterInfo({ header, table });
 
   return (
     <Collapse
@@ -40,10 +42,7 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
         <MRT_FilterCheckbox column={column} table={table} />
       ) : columnDef.filterVariant === 'range-slider' ? (
         <MRT_FilterRangeSlider header={header} table={table} />
-      ) : columnDef.filterVariant?.includes('range') ||
-        ['between', 'betweenInclusive', 'inNumberRange'].includes(
-          columnDef._filterFn,
-        ) ? (
+      ) : isRangeFilter ? (
         <MRT_FilterRangeFields header={header} table={table} />
       ) : (
         <MRT_FilterTextField header={header} table={table} />

package/src/components/head/MRT_TableHeadCellFilterLabel.tsx

@@ -10,7 +10,11 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { parseFromValuesOrFunc } from '../../utils/utils';
+import {
+  getColumnFilterInfo,
+  useDropdownOptions,
+} from '../../utils/column.utils';
+import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_TableHeadCellFilterLabelProps<TData extends MRT_RowData>
   extends IconButtonProps {
@@ -35,20 +39,32 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
   const { column } = header;
   const { columnDef } = column;
 
-  const filterValue = column.getFilterValue();
+  const filterValue = column.getFilterValue() as [string, string] | string;
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
+  const {
+    currentFilterOption,
+    isMultiSelectFilter,
+    isRangeFilter,
+    isSelectFilter,
+  } = getColumnFilterInfo({ header, table });
+
+  const dropdownOptions = useDropdownOptions({ header, table });
+
+  const getSelectLabel = (index?: number) =>
+    getValueAndLabel(
+      dropdownOptions?.find(
+        (option) =>
+          getValueAndLabel(option).value ===
+          (index !== undefined ? filterValue[index] : filterValue),
+      ),
+    ).label;
+
   const isFilterActive =
     (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
     (!!filterValue && !Array.isArray(filterValue));
 
-  const isRangeFilter =
-    columnDef.filterVariant?.includes('range') ||
-    ['between', 'betweenInclusive', 'inNumberRange'].includes(
-      columnDef._filterFn,
-    );
-  const currentFilterOption = columnDef._filterFn;
   const filterTooltip =
     columnFilterDisplayMode === 'popover' && !isFilterActive
       ? localization.filterByColumn?.replace(
@@ -73,10 +89,16 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
             '{filterValue}',
             `"${
               Array.isArray(filterValue)
-                ? (filterValue as [string, string]).join(
-                    `" ${isRangeFilter ? localization.and : localization.or} "`,
-                  )
-                : (filterValue as string)
+                ? (filterValue as [string, string])
+                    .map((value, index) =>
+                      isMultiSelectFilter ? getSelectLabel(index) : value,
+                    )
+                    .join(
+                      `" ${isRangeFilter ? localization.and : localization.or} "`,
+                    )
+                : isSelectFilter
+                  ? getSelectLabel()
+                  : (filterValue as string)
             }"`,
           )
           .replace('" "', '');
@@ -126,31 +148,33 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
           </Tooltip>
         </Box>
       </Grow>
-      <Popover
-        anchorEl={anchorEl}
-        anchorOrigin={{
-          horizontal: 'center',
-          vertical: 'top',
-        }}
-        disableScrollLock
-        onClick={(event) => event.stopPropagation()}
-        onClose={(event) => {
-          //@ts-ignore
-          event.stopPropagation();
-          setAnchorEl(null);
-        }}
-        onKeyDown={(event) => event.key === 'Enter' && setAnchorEl(null)}
-        open={!!anchorEl}
-        slotProps={{ paper: { sx: { overflow: 'visible' } } }}
-        transformOrigin={{
-          horizontal: 'center',
-          vertical: 'bottom',
-        }}
-      >
-        <Box sx={{ p: '1rem' }}>
-          <MRT_TableHeadCellFilterContainer header={header} table={table} />
-        </Box>
-      </Popover>
+      {columnFilterDisplayMode === 'popover' && (
+        <Popover
+          anchorEl={anchorEl}
+          anchorOrigin={{
+            horizontal: 'center',
+            vertical: 'top',
+          }}
+          disableScrollLock
+          onClick={(event) => event.stopPropagation()}
+          onClose={(event) => {
+            //@ts-ignore
+            event.stopPropagation();
+            setAnchorEl(null);
+          }}
+          onKeyDown={(event) => event.key === 'Enter' && setAnchorEl(null)}
+          open={!!anchorEl}
+          slotProps={{ paper: { sx: { overflow: 'visible' } } }}
+          transformOrigin={{
+            horizontal: 'center',
+            vertical: 'bottom',
+          }}
+        >
+          <Box sx={{ p: '1rem' }}>
+            <MRT_TableHeadCellFilterContainer header={header} table={table} />
+          </Box>
+        </Popover>
+      )}
     </>
   );
 };

package/src/components/inputs/MRT_FilterRangeFields.tsx

@@ -28,8 +28,14 @@ export const MRT_FilterRangeFields = <TData extends MRT_RowData>({
         ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
       })}
     >
-      <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />
-      <MRT_FilterTextField header={header} rangeFilterIndex={1} table={table} />
+      {[0, 1].map((rangeFilterIndex) => (
+        <MRT_FilterTextField
+          header={header}
+          key={rangeFilterIndex}
+          rangeFilterIndex={rangeFilterIndex}
+          table={table}
+        />
+      ))}
     </Box>
   );
 };

package/src/components/inputs/MRT_FilterTextField.tsx

@@ -3,7 +3,6 @@ import {
   type MouseEvent,
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -35,6 +34,10 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import {
+  getColumnFilterInfo,
+  useDropdownOptions,
+} from '../../utils/column.utils';
 import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 
@@ -53,7 +56,6 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
 }: MRT_FilterTextFieldProps<TData>) => {
   const {
     options: {
-      columnFilterModeOptions,
       enableColumnFilterModes,
       icons: { CloseIcon, FilterListIcon },
       localization,
@@ -112,17 +114,20 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     }),
   };
 
-  const isDateFilter =
-    filterVariant?.startsWith('date') || filterVariant?.startsWith('time');
-  const isAutocompleteFilter = filterVariant === 'autocomplete';
-  const isRangeFilter =
-    filterVariant?.includes('range') || rangeFilterIndex !== undefined;
-  const isSelectFilter = filterVariant === 'select';
-  const isMultiSelectFilter = filterVariant === 'multi-select';
-  const isTextboxFilter =
-    ['autocomplete', 'text'].includes(filterVariant!) ||
-    (!isSelectFilter && !isMultiSelectFilter);
-  const currentFilterOption = columnDef._filterFn;
+  const {
+    allowedColumnFilterOptions,
+    currentFilterOption,
+    facetedUniqueValues,
+    isAutocompleteFilter,
+    isDateFilter,
+    isMultiSelectFilter,
+    isRangeFilter,
+    isSelectFilter,
+    isTextboxFilter,
+  } = getColumnFilterInfo({ header, table });
+
+  const dropdownOptions = useDropdownOptions({ header, table });
+
   const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
     ? //@ts-ignore
       localization[
@@ -132,6 +137,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         }`
       ]
     : '';
+
   const filterPlaceholder = !isRangeFilter
     ? textFieldProps?.placeholder ??
       localization.filterByColumn?.replace('{column}', String(columnDef.header))
@@ -140,16 +146,14 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       : rangeFilterIndex === 1
         ? localization.max
         : '';
-  const allowedColumnFilterOptions =
-    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
-  const showChangeModeButton =
+
+  const showChangeModeButton = !!(
     enableColumnFilterModes &&
     columnDef.enableColumnFilterModes !== false &&
     !rangeFilterIndex &&
     (allowedColumnFilterOptions === undefined ||
-      !!allowedColumnFilterOptions?.length);
-
-  const facetedUniqueValues = column.getFacetedUniqueValues();
+      !!allowedColumnFilterOptions?.length)
+  );
 
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [filterValue, setFilterValue] = useState<string | string[]>(() =>
@@ -257,23 +261,6 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     );
   }
 
-  const dropdownOptions = useMemo(
-    () =>
-      columnDef.filterSelectOptions ??
-      ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
-      facetedUniqueValues
-        ? Array.from(facetedUniqueValues.keys())
-            .filter((value) => value !== null && value !== undefined)
-            .sort((a, b) => a.localeCompare(b))
-        : undefined),
-    [
-      columnDef.filterSelectOptions,
-      facetedUniqueValues,
-      isMultiSelectFilter,
-      isSelectFilter,
-    ],
-  );
-
   const endAdornment =
     !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (
       <InputAdornment
@@ -447,8 +434,12 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       ) : isAutocompleteFilter ? (
         <Autocomplete
           freeSolo
-          getOptionLabel={(option) => getValueAndLabel(option).label}
-          onChange={(_e, newValue) => handleAutocompleteChange(newValue)}
+          getOptionLabel={(option: DropdownOption) =>
+            getValueAndLabel(option).label
+          }
+          onChange={(_e, newValue: DropdownOption) =>
+            handleAutocompleteChange(newValue)
+          }
           options={
             dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []
           }

package/src/components/table/MRT_TablePaper.tsx

@@ -48,16 +48,16 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
         ...(isFullScreen
           ? {
               bottom: 0,
-              height: '100vh',
+              height: '100dvh',
               left: 0,
               margin: 0,
-              maxHeight: '100vh',
-              maxWidth: '100vw',
+              maxHeight: '100dvh',
+              maxWidth: '100dvw',
               padding: 0,
               position: 'fixed',
               right: 0,
               top: 0,
-              width: '100vw',
+              width: '100dvw',
               zIndex: 999,
             }
           : {}),

package/src/components/toolbar/MRT_ToolbarDropZone.tsx

@@ -29,6 +29,10 @@ export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
     setHoveredColumn({ id: 'drop-zone' });
   };
 
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+  };
+
   useEffect(() => {
     if (table.options.state?.showToolbarDropZone !== undefined) {
       setShowToolbarDropZone(
@@ -45,6 +49,7 @@ export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
       <Box
         className="Mui-ToolbarDropZone"
         onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
         {...rest}
         sx={(theme) => ({
           alignItems: 'center',

package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx

@@ -8,7 +8,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   return {
     Cell: ({ cell, row, staticRowIndex, table }) => (
       <MRT_ToggleRowActionMenuButton

package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx

@@ -9,7 +9,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   return {
     Cell: ({ row, rowRef, table }) => (
       <MRT_TableBodyRowGrabHandle

package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx

@@ -13,7 +13,7 @@ import { getCommonTooltipProps } from '../../utils/style.utils';
 
 export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   const {
     defaultColumn,
     enableExpandAll,

package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx

@@ -7,7 +7,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   const { localization, rowNumberDisplayMode } = tableOptions;
   const {
     pagination: { pageIndex, pageSize },

package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx

@@ -8,7 +8,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   return {
     Cell: ({ row, table }) => (
       <MRT_TableBodyRowPinButton row={row} table={table} />

package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx

@@ -8,7 +8,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   const { enableMultiRowSelection, enableSelectAll } = tableOptions;
 
   return {

package/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx

@@ -17,7 +17,7 @@ const blankColProps = {
 
 export const getMRT_RowSpacerColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   return {
     ...defaultDisplayColumnProps({
       id: 'mrt-row-spacer',