material-react-table 1.14.0 → 2.0.0-alpha.0

package/package.json

@@ -1,9 +1,9 @@
 {
-  "version": "1.14.0",
+  "version": "2.0.0-alpha.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.",
-  "author": "Kevin Vandy",
+  "author": "KevinVandy",
   "keywords": [
     "react-table",
     "material-ui",
@@ -60,61 +60,63 @@
     "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/preset-react": "^7.22.5",
+    "@babel/core": "^7.23.0",
+    "@babel/preset-react": "^7.22.15",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@faker-js/faker": "^8.0.2",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.4",
+    "@faker-js/faker": "^8.1.0",
+    "@mui/icons-material": "^5.14.9",
+    "@mui/material": "^5.14.10",
+    "@mui/x-date-pickers": "^6.15.0",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-typescript": "^11.1.1",
-    "@size-limit/preset-small-lib": "^8.2.4",
-    "@storybook/addon-a11y": "^7.0.20",
-    "@storybook/addon-essentials": "^7.0.20",
-    "@storybook/addon-interactions": "^7.0.20",
-    "@storybook/addon-links": "^7.0.20",
-    "@storybook/addon-storysource": "^7.0.20",
-    "@storybook/blocks": "^7.0.20",
-    "@storybook/react": "^7.0.20",
-    "@storybook/react-vite": "^7.0.20",
-    "@storybook/testing-library": "^0.1.0",
-    "@types/node": "^20.3.0",
-    "@types/react": "^18.2.11",
-    "@types/react-dom": "^18.2.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.9",
-    "@vitejs/plugin-react": "^4.0.0",
-    "eslint": "^8.42.0",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-typescript": "^11.1.4",
+    "@size-limit/preset-small-lib": "^9.0.0",
+    "@storybook/addon-a11y": "^7.4.5",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-storysource": "^7.4.5",
+    "@storybook/blocks": "^7.4.5",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-vite": "^7.4.5",
+    "@storybook/testing-library": "^0.2.1",
+    "@types/node": "^20.7.0",
+    "@types/react": "^18.2.22",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
+    "@vitejs/plugin-react": "^4.1.0",
+    "eslint": "^8.50.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rollup": "^2.79.1",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-dts": "^6.0.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "size-limit": "^8.2.4",
-    "storybook": "^7.0.20",
-    "storybook-dark-mode": "^3.0.0",
-    "tslib": "^2.5.3",
-    "typescript": "^5.1.3",
-    "vite": "^4.3.9"
+    "size-limit": "^9.0.0",
+    "storybook": "^7.4.5",
+    "storybook-dark-mode": "^3.0.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
   },
   "peerDependencies": {
-    "@emotion/react": ">=11",
-    "@emotion/styled": ">=11",
-    "@mui/icons-material": ">=5",
-    "@mui/material": ">=5",
-    "react": ">=17.0",
-    "react-dom": ">=17.0"
+    "@emotion/react": ">=11.11",
+    "@emotion/styled": ">=11.11",
+    "@mui/icons-material": ">=5.11",
+    "@mui/material": ">=5.13",
+    "@mui/x-date-pickers": ">=6.8.0",
+    "react": ">=18.0",
+    "react-dom": ">=18.0"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.9.2",
-    "@tanstack/react-virtual": "3.0.0-beta.54",
+    "@tanstack/react-table": "8.10.3",
+    "@tanstack/react-virtual": "3.0.0-beta.60",
     "highlight-words": "1.2.2"
   }
 }

package/src/MaterialReactTable.tsx

@@ -1,172 +1,35 @@
-import { useMemo } from 'react';
-import { MRT_AggregationFns } from './aggregationFns';
-import { MRT_FilterFns } from './filterFns';
-import { MRT_SortingFns } from './sortingFns';
-import { MRT_DefaultColumn, MRT_DefaultDisplayColumn } from './column.utils';
-import { MRT_Default_Icons } from './icons';
-import { MRT_Localization_EN } from './_locales/en';
-import { MRT_TableRoot } from './table/MRT_TableRoot';
-import { type MaterialReactTableProps } from './types';
-
-export { MRT_AggregationFns, MRT_FilterFns, MRT_SortingFns };
-
-export const MaterialReactTable = <TData extends Record<string, any> = {}>({
-  aggregationFns,
-  autoResetExpanded = false,
-  columnResizeMode = 'onChange',
-  defaultColumn,
-  defaultDisplayColumn,
-  editingMode = 'modal',
-  enableBottomToolbar = true,
-  enableColumnActions = true,
-  enableColumnFilters = true,
-  enableColumnOrdering = false,
-  enableColumnResizing = false,
-  enableDensityToggle = true,
-  enableExpandAll = true,
-  enableExpanding,
-  enableFilterMatchHighlighting = true,
-  enableFilters = true,
-  enableFullScreenToggle = true,
-  enableGlobalFilter = true,
-  enableGlobalFilterRankedResults = true,
-  enableGrouping = false,
-  enableHiding = true,
-  enableMultiRowSelection = true,
-  enableMultiSort = true,
-  enablePagination = true,
-  enablePinning = false,
-  enableRowSelection = false,
-  enableSelectAll = true,
-  enableSorting = true,
-  enableStickyHeader = false,
-  enableTableFooter = true,
-  enableTableHead = true,
-  enableToolbarInternalActions = true,
-  enableTopToolbar = true,
-  filterFns,
-  icons,
-  layoutMode = 'semantic',
-  localization,
-  manualFiltering,
-  manualGrouping,
-  manualPagination,
-  manualSorting,
-  positionActionsColumn = 'first',
-  positionExpandColumn = 'first',
-  positionGlobalFilter = 'right',
-  positionPagination = 'bottom',
-  positionToolbarAlertBanner = 'top',
-  positionToolbarDropZone = 'top',
-  rowNumberMode = 'original',
-  selectAllMode = 'page',
-  sortingFns,
-  ...rest
-}: MaterialReactTableProps<TData>) => {
-  const _icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), [icons]);
-  const _localization = useMemo(
-    () => ({
-      ...MRT_Localization_EN,
-      ...localization,
-    }),
-    [localization],
-  );
-  const _aggregationFns = useMemo(
-    () => ({ ...MRT_AggregationFns, ...aggregationFns }),
-    [],
-  );
-  const _filterFns = useMemo(() => ({ ...MRT_FilterFns, ...filterFns }), []);
-  const _sortingFns = useMemo(() => ({ ...MRT_SortingFns, ...sortingFns }), []);
-  const _defaultColumn = useMemo(
-    () => ({ ...MRT_DefaultColumn, ...defaultColumn }),
-    [defaultColumn],
-  );
-  const _defaultDisplayColumn = useMemo(
-    () => ({
-      ...MRT_DefaultDisplayColumn,
-      ...defaultDisplayColumn,
-    }),
-    [defaultDisplayColumn],
-  );
-
-  if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
-    layoutMode = 'grid';
-  }
-
-  if (rest.enableRowVirtualization) {
-    enableStickyHeader = true;
-  }
-
-  if (enablePagination === false && manualPagination === undefined) {
-    manualPagination = true;
-  }
+import { useMaterialReactTable } from './useMaterialReactTable';
+import { MRT_TablePaper } from './table/MRT_TablePaper';
+import {
+  type MRT_TableOptions,
+  type MRT_TableInstance,
+  type Xor,
+} from './types';
+
+type TableInstanceProp<TData extends Record<string, any> = {}> = {
+  table: MRT_TableInstance<TData>;
+};
 
-  if (!rest.data?.length) {
-    manualFiltering = true;
-    manualGrouping = true;
-    manualPagination = true;
-    manualSorting = true;
+type Props<TData extends Record<string, any> = {}> = Xor<
+  TableInstanceProp<TData>,
+  MRT_TableOptions<TData>
+>;
+
+const isTableInstanceProp = <TData extends Record<string, any> = {}>(
+  props: Props<TData>,
+): props is TableInstanceProp<TData> =>
+  (props as TableInstanceProp<TData>).table !== undefined;
+
+export const MaterialReactTable = <TData extends Record<string, any> = {}>(
+  props: Props<TData>,
+) => {
+  let table: MRT_TableInstance<TData>;
+
+  if (isTableInstanceProp(props)) {
+    table = props.table;
+  } else {
+    table = useMaterialReactTable(props);
   }
 
-  return (
-    <MRT_TableRoot
-      aggregationFns={_aggregationFns}
-      autoResetExpanded={autoResetExpanded}
-      columnResizeMode={columnResizeMode}
-      defaultColumn={_defaultColumn}
-      defaultDisplayColumn={_defaultDisplayColumn}
-      editingMode={editingMode}
-      enableBottomToolbar={enableBottomToolbar}
-      enableColumnActions={enableColumnActions}
-      enableColumnFilters={enableColumnFilters}
-      enableColumnOrdering={enableColumnOrdering}
-      enableColumnResizing={enableColumnResizing}
-      enableDensityToggle={enableDensityToggle}
-      enableExpandAll={enableExpandAll}
-      enableExpanding={enableExpanding}
-      enableFilterMatchHighlighting={enableFilterMatchHighlighting}
-      enableFilters={enableFilters}
-      enableFullScreenToggle={enableFullScreenToggle}
-      enableGlobalFilter={enableGlobalFilter}
-      enableGlobalFilterRankedResults={enableGlobalFilterRankedResults}
-      enableGrouping={enableGrouping}
-      enableHiding={enableHiding}
-      enableMultiRowSelection={enableMultiRowSelection}
-      enableMultiSort={enableMultiSort}
-      enablePagination={enablePagination}
-      enablePinning={enablePinning}
-      enableRowSelection={enableRowSelection}
-      enableSelectAll={enableSelectAll}
-      enableSorting={enableSorting}
-      enableStickyHeader={enableStickyHeader}
-      enableTableFooter={enableTableFooter}
-      enableTableHead={enableTableHead}
-      enableToolbarInternalActions={enableToolbarInternalActions}
-      enableTopToolbar={enableTopToolbar}
-      filterFns={_filterFns}
-      icons={_icons}
-      layoutMode={layoutMode}
-      localization={_localization}
-      manualFiltering={manualFiltering}
-      manualGrouping={manualGrouping}
-      manualPagination={manualPagination}
-      manualSorting={manualSorting}
-      positionActionsColumn={positionActionsColumn}
-      positionExpandColumn={positionExpandColumn}
-      positionGlobalFilter={positionGlobalFilter}
-      positionPagination={positionPagination}
-      positionToolbarAlertBanner={positionToolbarAlertBanner}
-      positionToolbarDropZone={positionToolbarDropZone}
-      rowNumberMode={rowNumberMode}
-      selectAllMode={selectAllMode}
-      sortingFns={_sortingFns}
-      {...rest}
-    />
-  );
+  return <MRT_TablePaper table={table} />;
 };
-
-/**
- * @deprecated Use named exports instead of default export (will be removed in v2)
- * @example import { MaterialReactTable } from 'material-react-table';
- */
-export default MaterialReactTable;

package/src/body/MRT_TableBody.tsx

@@ -10,21 +10,21 @@ import { Memo_MRT_TableBodyRow, MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
-interface Props {
+interface Props<TData extends Record<string, any>> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableBody = ({
+export const MRT_TableBody = <TData extends Record<string, any>>({
   columnVirtualizer,
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
-}: Props) => {
+}: Props<TData>) => {
   const {
     getRowModel,
     getPrePaginationRowModel,
@@ -44,9 +44,7 @@ export const MRT_TableBody = ({
       muiTableBodyProps,
       renderEmptyRowsFallback,
       rowVirtualizerInstanceRef,
-      rowVirtualizerProps,
-      virtualizerInstanceRef,
-      virtualizerProps,
+      rowVirtualizerOptions,
     },
     refs: { tableContainerRef, tablePaperRef },
   } = table;
@@ -65,15 +63,10 @@ export const MRT_TableBody = ({
       ? muiTableBodyProps({ table })
       : muiTableBodyProps;
 
-  const vProps_old =
-    virtualizerProps instanceof Function
-      ? virtualizerProps({ table })
-      : virtualizerProps;
-
   const vProps =
-    rowVirtualizerProps instanceof Function
-      ? rowVirtualizerProps({ table })
-      : rowVirtualizerProps;
+    rowVirtualizerOptions instanceof Function
+      ? rowVirtualizerOptions({ table })
+      : rowVirtualizerOptions;
 
   const shouldRankResults = useMemo(
     () =>
@@ -130,7 +123,6 @@ export const MRT_TableBody = ({
             ? (element) => element?.getBoundingClientRect().height
             : undefined,
         overscan: 4,
-        ...vProps_old,
         ...vProps,
       })
     : undefined;
@@ -139,11 +131,6 @@ export const MRT_TableBody = ({
     rowVirtualizerInstanceRef.current = rowVirtualizer;
   }
 
-  //deprecated
-  if (virtualizerInstanceRef && rowVirtualizer) {
-    virtualizerInstanceRef.current = rowVirtualizer;
-  }
-
   const virtualRows = rowVirtualizer
     ? rowVirtualizer.getVirtualItems()
     : undefined;
@@ -197,7 +184,7 @@ export const MRT_TableBody = ({
             {(virtualRows ?? rows).map((rowOrVirtualRow, rowIndex) => {
               const row = rowVirtualizer
                 ? rows[rowOrVirtualRow.index]
-                : (rowOrVirtualRow as MRT_Row);
+                : (rowOrVirtualRow as MRT_Row<TData>);
               const props = {
                 columnVirtualizer,
                 measureElement: rowVirtualizer?.measureElement,
@@ -227,4 +214,4 @@ export const MRT_TableBody = ({
 export const Memo_MRT_TableBody = memo(
   MRT_TableBody,
   (prev, next) => prev.table.options.data === next.table.options.data,
-);
+) as typeof MRT_TableBody;

package/src/body/MRT_TableBodyCell.tsx

@@ -1,6 +1,6 @@
 import {
-  type DragEvent,
   memo,
+  type DragEvent,
   type MouseEvent,
   type RefObject,
   useEffect,
@@ -22,17 +22,17 @@ import {
 import { type VirtualItem } from '@tanstack/react-virtual';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
-interface Props {
-  cell: MRT_Cell;
+interface Props<TData extends Record<string, any>> {
+  cell: MRT_Cell<TData>;
   measureElement?: (element: HTMLTableCellElement) => void;
   numRows: number;
   rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
   virtualCell?: VirtualItem;
 }
 
-export const MRT_TableBodyCell = ({
+export const MRT_TableBodyCell = <TData extends Record<string, any>>({
   cell,
   measureElement,
   numRows,
@@ -40,12 +40,13 @@ export const MRT_TableBodyCell = ({
   rowRef,
   table,
   virtualCell,
-}: Props) => {
+}: Props<TData>) => {
   const theme = useTheme();
   const {
     getState,
     options: {
-      editingMode,
+      createDisplayMode,
+      editDisplayMode,
       enableClickToCopy,
       enableColumnOrdering,
       enableEditing,
@@ -53,7 +54,7 @@ export const MRT_TableBodyCell = ({
       enableRowNumbers,
       layoutMode,
       muiTableBodyCellProps,
-      muiTableBodyCellSkeletonProps,
+      muiSkeletonProps,
       rowNumberMode,
     },
     refs: { editInputRefs },
@@ -61,6 +62,7 @@ export const MRT_TableBodyCell = ({
     setHoveredColumn,
   } = table;
   const {
+    creatingRow,
     draggingColumn,
     draggingRow,
     editingCell,
@@ -91,25 +93,20 @@ export const MRT_TableBodyCell = ({
   };
 
   const skeletonProps =
-    muiTableBodyCellSkeletonProps instanceof Function
-      ? muiTableBodyCellSkeletonProps({ cell, column, row, table })
-      : muiTableBodyCellSkeletonProps;
+    muiSkeletonProps instanceof Function
+      ? muiSkeletonProps({ cell, column, row, table })
+      : muiSkeletonProps;
 
-  const [skeletonWidth, setSkeletonWidth] = useState(0);
-  useEffect(
-    () =>
-      setSkeletonWidth(
-        isLoading || showSkeletons
-          ? columnDefType === 'display'
-            ? column.getSize() / 2
-            : Math.round(
-                Math.random() * (column.getSize() - column.getSize() / 3) +
-                  column.getSize() / 3,
-              )
-          : 100,
-      ),
-    [],
-  );
+  const [skeletonWidth, setSkeletonWidth] = useState(100);
+  useEffect(() => {
+    if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
+    const size = column.getSize();
+    setSkeletonWidth(
+      columnDefType === 'display'
+        ? size / 2
+        : Math.round(Math.random() * (size - size / 3) + size / 3),
+    );
+  }, [isLoading, showSkeletons]);
 
   const draggingBorders = useMemo(() => {
     const isDraggingColumn = draggingColumn?.id === column.id;
@@ -158,15 +155,18 @@ export const MRT_TableBodyCell = ({
 
   const isEditing =
     isEditable &&
-    editingMode !== 'modal' &&
-    (editingMode === 'table' ||
+    !['modal', 'custom'].includes(editDisplayMode as string) &&
+    (editDisplayMode === 'table' ||
       editingRow?.id === row.id ||
       editingCell?.id === cell.id) &&
     !row.getIsGrouped();
 
+  const isCreating =
+    isEditable && createDisplayMode === 'row' && creatingRow?.id === row.id;
+
   const handleDoubleClick = (event: MouseEvent<HTMLTableCellElement>) => {
     tableCellProps?.onDoubleClick?.(event);
-    if (isEditable && editingMode === 'cell') {
+    if (isEditable && editDisplayMode === 'cell') {
       setEditingCell(cell);
       queueMicrotask(() => {
         const textField = editInputRefs.current[column.id];
@@ -203,7 +203,8 @@ export const MRT_TableBodyCell = ({
       onDoubleClick={handleDoubleClick}
       sx={(theme) => ({
         alignItems: layoutMode === 'grid' ? 'center' : undefined,
-        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit',
+        cursor:
+          isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit',
         justifyContent:
           layoutMode === 'grid' ? tableCellProps.align : undefined,
         overflow: 'hidden',
@@ -235,7 +236,7 @@ export const MRT_TableBodyCell = ({
         zIndex:
           draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
         '&:hover': {
-          outline: ['table', 'cell'].includes(editingMode ?? '')
+          outline: ['table', 'cell'].includes(editDisplayMode ?? '')
             ? `1px solid ${theme.palette.text.secondary}`
             : undefined,
           outlineOffset: '-1px',
@@ -253,7 +254,7 @@ export const MRT_TableBodyCell = ({
       <>
         {cell.getIsPlaceholder() ? (
           columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
-        ) : isLoading || showSkeletons ? (
+        ) : (isLoading || showSkeletons) && cell.getValue() === null ? (
           <Skeleton
             animation="wave"
             height={20}
@@ -265,11 +266,7 @@ export const MRT_TableBodyCell = ({
           column.id === 'mrt-row-numbers' ? (
           rowIndex + 1
         ) : column.id === 'mrt-row-drag' ? (
-          <MRT_TableBodyRowGrabHandle
-            cell={cell}
-            rowRef={rowRef}
-            table={table}
-          />
+          <MRT_TableBodyRowGrabHandle row={row} rowRef={rowRef} table={table} />
         ) : columnDefType === 'display' &&
           (column.id === 'mrt-row-select' ||
             column.id === 'mrt-row-expand' ||
@@ -281,7 +278,7 @@ export const MRT_TableBodyCell = ({
             row,
             table,
           })
-        ) : isEditing ? (
+        ) : isCreating || isEditing ? (
           <MRT_EditCellTextField cell={cell} table={table} />
         ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
           columnDef.enableClickToCopy !== false ? (
@@ -302,4 +299,4 @@ export const MRT_TableBodyCell = ({
 export const Memo_MRT_TableBodyCell = memo(
   MRT_TableBodyCell,
   (prev, next) => next.cell === prev.cell,
-);
+) as typeof MRT_TableBodyCell;

package/src/body/MRT_TableBodyCellValue.tsx

@@ -6,12 +6,15 @@ import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
 const allowedTypes = ['string', 'number'];
 
-interface Props {
-  cell: MRT_Cell;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  cell: MRT_Cell<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableBodyCellValue = ({ cell, table }: Props) => {
+export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
+  cell,
+  table,
+}: Props<TData>) => {
   const {
     getState,
     options: { enableFilterMatchHighlighting },

package/src/body/MRT_TableBodyRow.tsx

@@ -6,20 +6,20 @@ import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
 import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 
-interface Props {
+interface Props<TData extends Record<string, any>> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   measureElement?: (element: HTMLTableRowElement) => void;
   numRows: number;
-  row: MRT_Row;
+  row: MRT_Row<TData>;
   rowIndex: number;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
   virtualRow?: VirtualItem;
 }
 
-export const MRT_TableBodyRow = ({
+export const MRT_TableBodyRow = <TData extends Record<string, any>>({
   columnVirtualizer,
   measureElement,
   numRows,
@@ -30,7 +30,7 @@ export const MRT_TableBodyRow = ({
   virtualPaddingLeft,
   virtualPaddingRight,
   virtualRow,
-}: Props) => {
+}: Props<TData>) => {
   const {
     getState,
     options: {
@@ -108,7 +108,7 @@ export const MRT_TableBodyRow = ({
         {(virtualColumns ?? row.getVisibleCells()).map((cellOrVirtualCell) => {
           const cell = columnVirtualizer
             ? row.getVisibleCells()[(cellOrVirtualCell as VirtualItem).index]
-            : (cellOrVirtualCell as MRT_Cell);
+            : (cellOrVirtualCell as MRT_Cell<TData>);
           const props = {
             cell,
             measureElement: columnVirtualizer?.measureElement,
@@ -151,4 +151,4 @@ export const MRT_TableBodyRow = ({
 export const Memo_MRT_TableBodyRow = memo(
   MRT_TableBodyRow,
   (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex,
-);
+) as typeof MRT_TableBodyRow;