material-react-table 1.0.0-beta.0 → 1.0.0-beta.11

package/src/MaterialReactTable.tsx

@@ -1,6 +1,5 @@
 import React, {
   Dispatch,
-  DragEvent,
   MutableRefObject,
   ReactNode,
   SetStateAction,
@@ -45,12 +44,96 @@ import type { Options as VirtualizerOptions, VirtualItem } from 'react-virtual';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_FilterFns } from './filterFns';
-import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
+import { MRT_Localization_EN } from './_locales/en';
 import { MRT_SortingFns } from './sortingFns';
 import { MRT_TableRoot } from './table/MRT_TableRoot';
 
 type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
 
+export interface MRT_Localization {
+  actions: string;
+  and: string;
+  cancel: string;
+  changeFilterMode: string;
+  changeSearchMode: string;
+  clearFilter: string;
+  clearSearch: string;
+  clearSort: string;
+  clickToCopy: string;
+  columnActions: string;
+  copiedToClipboard: string;
+  dropToGroupBy: string;
+  edit: string;
+  expand: string;
+  expandAll: string;
+  filterArrIncludes: string;
+  filterArrIncludesAll: string;
+  filterArrIncludesSome: string;
+  filterBetween: string;
+  filterBetweenInclusive: string;
+  filterByColumn: string;
+  filterContains: string;
+  filterEmpty: string;
+  filterEndsWith: string;
+  filterEquals: string;
+  filterEqualsString: string;
+  filterFuzzy: string;
+  filterGreaterThan: string;
+  filterGreaterThanOrEqualTo: string;
+  filterInNumberRange: string;
+  filterIncludesString: string;
+  filterIncludesStringSensitive: string;
+  filterLessThan: string;
+  filterLessThanOrEqualTo: string;
+  filterMode: string;
+  filterNotEmpty: string;
+  filterNotEquals: string;
+  filterStartsWith: string;
+  filterWeakEquals: string;
+  filteringByColumn: string;
+  grab: string;
+  groupByColumn: string;
+  groupedBy: string;
+  hideAll: string;
+  hideColumn: string;
+  max: string;
+  min: string;
+  move: string;
+  noRecordsToDisplay: string;
+  noResultsFound: string;
+  or: string;
+  pinToLeft: string;
+  pinToRight: string;
+  resetColumnSize: string;
+  resetOrder: string;
+  rowActions: string;
+  rowNumber: string;
+  rowNumbers: string;
+  save: string;
+  search: string;
+  select: string;
+  selectedCountOfRowCountRowsSelected: string;
+  showAll: string;
+  showAllColumns: string;
+  showHideColumns: string;
+  showHideFilters: string;
+  showHideSearch: string;
+  sortByColumnAsc: string;
+  sortByColumnDesc: string;
+  sortedByColumnAsc: string;
+  sortedByColumnDesc: string;
+  thenBy: string;
+  toggleDensity: string;
+  toggleFullScreen: string;
+  toggleSelectAll: string;
+  toggleSelectRow: string;
+  toggleVisibility: string;
+  ungroupByColumn: string;
+  unpin: string;
+  unpinAll: string;
+  unsorted: string;
+}
+
 export interface MRT_RowModel<TData extends Record<string, any> = {}> {
   flatRows: MRT_Row<TData>[];
   rows: MRT_Row<TData>[];
@@ -101,6 +184,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
     filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
     searchInputRef: MutableRefObject<HTMLInputElement>;
     tableContainerRef: MutableRefObject<HTMLDivElement>;
+    tablePaperRef: MutableRefObject<HTMLDivElement>;
     topToolbarRef: MutableRefObject<HTMLDivElement>;
   };
   setColumnFilterFns: Dispatch<
@@ -541,6 +625,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     muiExpandButtonProps?:
       | IconButtonProps
       | (({
+          row,
           table,
         }: {
           table: MRT_TableInstance<TData>;
@@ -612,11 +697,15 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     muiTableBodyCellSkeletonProps?:
       | SkeletonProps
       | (({
-          table,
           cell,
+          column,
+          row,
+          table,
         }: {
-          table: MRT_TableInstance<TData>;
           cell: MRT_Cell<TData>;
+          column: MRT_Column<TData>;
+          row: MRT_Row<TData>;
+          table: MRT_TableInstance<TData>;
         }) => SkeletonProps);
     muiTableBodyProps?:
       | TableBodyProps
@@ -748,15 +837,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     muiTopToolbarProps?:
       | ToolbarProps
       | (({ table }: { table: MRT_TableInstance<TData> }) => ToolbarProps);
-    onColumnDrop?: ({
-      event,
-      draggedColumn,
-      targetColumn,
-    }: {
-      event: DragEvent<HTMLButtonElement>;
-      draggedColumn: MRT_Column<TData>;
-      targetColumn: MRT_Column<TData> | { id: string } | null;
-    }) => void;
     onDensityChange?: OnChangeFn<boolean>;
     onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
@@ -778,15 +858,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     onHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
-    onRowDrop?: ({
-      event,
-      draggedRow,
-      targetRow,
-    }: {
-      event: DragEvent<HTMLButtonElement>;
-      draggedRow: MRT_Row<TData>;
-      targetRow: MRT_Row<TData> | { id: string } | null;
-    }) => void;
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
@@ -796,6 +867,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
     positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
+    renderBottomToolbar?:
+      | ReactNode
+      | (({ table }: { table: MRT_TableInstance<TData> }) => ReactNode);
     renderBottomToolbarCustomActions?: ({
       table,
     }: {
@@ -860,6 +934,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     }: {
       table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderTopToolbar?:
+      | ReactNode
+      | (({ table }: { table: MRT_TableInstance<TData> }) => ReactNode);
     renderTopToolbarCustomActions?: ({
       table,
     }: {
@@ -989,7 +1066,7 @@ export default <TData extends Record<string, any> = {}>({
     enableTopToolbar={enableTopToolbar}
     filterFns={{ ...MRT_FilterFns, ...filterFns }}
     icons={{ ...MRT_Default_Icons, ...icons }}
-    localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
+    localization={{ ...MRT_Localization_EN, ...localization }}
     positionActionsColumn={positionActionsColumn}
     positionExpandColumn={positionExpandColumn}
     positionGlobalFilter={positionGlobalFilter}

package/src/{localization.ts → _locales/en.ts}

@@ -1,86 +1,6 @@
-export interface MRT_Localization {
-  actions: string;
-  and: string;
-  cancel: string;
-  changeFilterMode: string;
-  changeSearchMode: string;
-  clearFilter: string;
-  clearSearch: string;
-  clearSort: string;
-  clickToCopy: string;
-  columnActions: string;
-  copiedToClipboard: string;
-  dropToGroupBy: string;
-  edit: string;
-  expand: string;
-  expandAll: string;
-  filterArrIncludes: string;
-  filterArrIncludesAll: string;
-  filterArrIncludesSome: string;
-  filterBetween: string;
-  filterBetweenInclusive: string;
-  filterByColumn: string;
-  filterContains: string;
-  filterEmpty: string;
-  filterEndsWith: string;
-  filterEquals: string;
-  filterEqualsString: string;
-  filterFuzzy: string;
-  filterGreaterThan: string;
-  filterGreaterThanOrEqualTo: string;
-  filterInNumberRange: string;
-  filterIncludesString: string;
-  filterIncludesStringSensitive: string;
-  filterLessThan: string;
-  filterLessThanOrEqualTo: string;
-  filterMode: string;
-  filterNotEmpty: string;
-  filterNotEquals: string;
-  filterStartsWith: string;
-  filterWeakEquals: string;
-  filteringByColumn: string;
-  grab: string;
-  groupByColumn: string;
-  groupedBy: string;
-  hideAll: string;
-  hideColumn: string;
-  max: string;
-  min: string;
-  move: string;
-  or: string;
-  pinToLeft: string;
-  pinToRight: string;
-  resetColumnSize: string;
-  resetOrder: string;
-  rowActions: string;
-  rowNumber: string;
-  rowNumbers: string;
-  save: string;
-  search: string;
-  select: string;
-  selectedCountOfRowCountRowsSelected: string;
-  showAll: string;
-  showAllColumns: string;
-  showHideColumns: string;
-  showHideFilters: string;
-  showHideSearch: string;
-  sortByColumnAsc: string;
-  sortByColumnDesc: string;
-  sortedByColumnAsc: string;
-  sortedByColumnDesc: string;
-  thenBy: string;
-  toggleDensity: string;
-  toggleFullScreen: string;
-  toggleSelectAll: string;
-  toggleSelectRow: string;
-  toggleVisibility: string;
-  ungroupByColumn: string;
-  unpin: string;
-  unpinAll: string;
-  unsorted: string;
-}
+import { MRT_Localization } from '../MaterialReactTable';
 
-export const MRT_DefaultLocalization_EN: MRT_Localization = {
+export const MRT_Localization_EN: MRT_Localization = {
   actions: 'Actions',
   and: 'and',
   cancel: 'Cancel',
@@ -129,6 +49,8 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   max: 'Max',
   min: 'Min',
   move: 'Move',
+  noRecordsToDisplay: 'No records to display',
+  noResultsFound: 'No results found',
   or: 'or',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',

package/src/_locales/es.ts

@@ -0,0 +1,86 @@
+import { MRT_Localization } from '../MaterialReactTable';
+
+export const MRT_Localization_ES: MRT_Localization = {
+  actions: 'Actions',
+  and: 'and',
+  cancel: 'Cancel',
+  changeFilterMode: 'Change filter mode',
+  changeSearchMode: 'Change search mode',
+  clearFilter: 'Clear filter',
+  clearSearch: 'Clear search',
+  clearSort: 'Clear sort',
+  clickToCopy: 'Click to copy',
+  columnActions: 'Column Actions',
+  copiedToClipboard: 'Copied to clipboard',
+  dropToGroupBy: 'Drop to group by {column}',
+  edit: 'Edit',
+  expand: 'Expand',
+  expandAll: 'Expand all',
+  filterArrIncludes: 'Includes',
+  filterArrIncludesAll: 'Includes all',
+  filterArrIncludesSome: 'Includes',
+  filterBetween: 'Between',
+  filterBetweenInclusive: 'Between Inclusive',
+  filterByColumn: 'Filter by {column}',
+  filterContains: 'Contains',
+  filterEmpty: 'Empty',
+  filterEndsWith: 'Ends With',
+  filterEquals: 'Equals',
+  filterEqualsString: 'Equals',
+  filterFuzzy: 'Fuzzy',
+  filterGreaterThan: 'Greater Than',
+  filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
+  filterInNumberRange: 'Between',
+  filterIncludesString: 'Contains',
+  filterIncludesStringSensitive: 'Contains',
+  filterLessThan: 'Less Than',
+  filterLessThanOrEqualTo: 'Less Than Or Equal To',
+  filterMode: 'Filter Mode: {filterType}',
+  filterNotEmpty: 'Not Empty',
+  filterNotEquals: 'Not Equals',
+  filterStartsWith: 'Starts With',
+  filterWeakEquals: 'Equals',
+  filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
+  grab: 'Grab',
+  groupByColumn: 'Group by {column}',
+  groupedBy: 'Grouped by ',
+  hideAll: 'Hide all',
+  hideColumn: 'Hide {column} column',
+  max: 'Max',
+  min: 'Min',
+  move: 'Move',
+  noRecordsToDisplay: 'No records to display',
+  noResultsFound: 'No results found',
+  or: 'or',
+  pinToLeft: 'Pin to left',
+  pinToRight: 'Pin to right',
+  resetColumnSize: 'Reset column size',
+  resetOrder: 'Reset order',
+  rowActions: 'Row Actions',
+  rowNumber: '#',
+  rowNumbers: 'Row Numbers',
+  save: 'Save',
+  search: 'Search',
+  selectedCountOfRowCountRowsSelected:
+    '{selectedCount} of {rowCount} row(s) selected',
+  select: 'Select',
+  showAll: 'Show all',
+  showAllColumns: 'Show all columns',
+  showHideColumns: 'Show/Hide columns',
+  showHideFilters: 'Show/Hide filters',
+  showHideSearch: 'Show/Hide search',
+  sortByColumnAsc: 'Sort by {column} ascending',
+  sortByColumnDesc: 'Sort by {column} descending',
+  sortedByColumnAsc: 'Sorted by {column} ascending',
+  sortedByColumnDesc: 'Sorted by {column} descending',
+  thenBy: ', then by ',
+  toggleDensity: 'Toggle density',
+  toggleFullScreen: 'Toggle full screen',
+  toggleSelectAll: 'Toggle select all',
+  toggleSelectRow: 'Toggle select row',
+  toggleVisibility: 'Toggle visibility',
+  ungroupByColumn: 'Ungroup by {column}',
+  unpin: 'Unpin',
+  unpinAll: 'Unpin all',
+  unsorted: 'Unsorted',
+};

package/src/body/MRT_TableBody.tsx

@@ -1,17 +1,16 @@
-import React, { FC, RefObject, useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 import { useVirtual } from 'react-virtual'; //stuck on v2 for now
 // import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
-import { TableBody } from '@mui/material';
+import { TableBody, Typography } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   table: MRT_TableInstance;
-  tableContainerRef: RefObject<HTMLDivElement>;
 }
 
-export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
+export const MRT_TableBody: FC<Props> = ({ table }) => {
   const {
     getRowModel,
     getPrePaginationRowModel,
@@ -20,14 +19,16 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
       enableGlobalFilterRankedResults,
       enablePagination,
       enableRowVirtualization,
+      localization,
       manualFiltering,
       manualSorting,
       muiTableBodyProps,
       virtualizerInstanceRef,
       virtualizerProps,
     },
+    refs: { tableContainerRef, tablePaperRef },
   } = table;
-  const { globalFilter, pagination, sorting } = getState();
+  const { columnFilters, globalFilter, pagination, sorting } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
@@ -116,33 +117,56 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
 
   return (
     <TableBody {...tableBodyProps}>
-      {enableRowVirtualization && paddingTop > 0 && (
+      {!rows.length ? (
         <tr>
-          <td style={{ height: `${paddingTop}px` }} />
-        </tr>
-      )}
-      {(enableRowVirtualization ? virtualRows : rows).map(
-        (rowOrVirtualRow: any, rowIndex: number) => {
-          const row = enableRowVirtualization
-            ? (rows[rowOrVirtualRow.index] as MRT_Row)
-            : (rowOrVirtualRow as MRT_Row);
-          return (
-            <MRT_TableBodyRow
-              key={row.id}
-              row={row}
-              rowIndex={
-                enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
-              }
-              table={table}
-              virtualRow={enableRowVirtualization ? rowOrVirtualRow : null}
-            />
-          );
-        },
-      )}
-      {enableRowVirtualization && paddingBottom > 0 && (
-        <tr>
-          <td style={{ height: `${paddingBottom}px` }} />
+          <td colSpan={table.getVisibleLeafColumns().length}>
+            <Typography
+              sx={{
+                color: 'text.secondary',
+                fontStyle: 'italic',
+                maxWidth: `min(100vw, ${tablePaperRef.current?.clientWidth}px)`,
+                py: '2rem',
+                textAlign: 'center',
+                width: '100%',
+              }}
+            >
+              {globalFilter || columnFilters.length
+                ? localization.noResultsFound
+                : localization.noRecordsToDisplay}
+            </Typography>
+          </td>
         </tr>
+      ) : (
+        <>
+          {enableRowVirtualization && paddingTop > 0 && (
+            <tr>
+              <td style={{ height: `${paddingTop}px` }} />
+            </tr>
+          )}
+          {(enableRowVirtualization ? virtualRows : rows).map(
+            (rowOrVirtualRow: any, rowIndex: number) => {
+              const row = enableRowVirtualization
+                ? (rows[rowOrVirtualRow.index] as MRT_Row)
+                : (rowOrVirtualRow as MRT_Row);
+              return (
+                <MRT_TableBodyRow
+                  key={row.id}
+                  row={row}
+                  rowIndex={
+                    enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
+                  }
+                  table={table}
+                  virtualRow={enableRowVirtualization ? rowOrVirtualRow : null}
+                />
+              );
+            },
+          )}
+          {enableRowVirtualization && paddingBottom > 0 && (
+            <tr>
+              <td style={{ height: `${paddingBottom}px` }} />
+            </tr>
+          )}
+        </>
       )}
     </TableBody>
   );

package/src/body/MRT_TableBodyCell.tsx

@@ -6,19 +6,13 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import {
-  alpha,
-  darken,
-  lighten,
-  Skeleton,
-  TableCell,
-  useTheme,
-} from '@mui/material';
+import { darken, lighten, Skeleton, TableCell, useTheme } from '@mui/material';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
-import type { MRT_Cell, MRT_TableInstance } from '..';
 import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
 import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
+import { getCommonCellStyles } from '../column.utils';
+import type { MRT_Cell, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
@@ -82,6 +76,11 @@ export const MRT_TableBodyCell: FC<Props> = ({
     ...mcTableCellBodyProps,
   };
 
+  const skeletonProps =
+    muiTableBodyCellSkeletonProps instanceof Function
+      ? muiTableBodyCellSkeletonProps({ cell, column, row, table })
+      : muiTableBodyCellSkeletonProps;
+
   const isEditable =
     (enableEditing || columnDef.enableEditing) &&
     columnDef.enableEditing !== false;
@@ -127,23 +126,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
     }
   };
 
-  const getIsLastLeftPinnedColumn = () => {
-    return (
-      column.getIsPinned() === 'left' &&
-      table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
-    );
-  };
-
-  const getIsFirstRightPinnedColumn = () => {
-    return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
-  };
-
-  const getTotalRight = () => {
-    return (
-      (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150
-    );
-  };
-
   const handleDragEnter = (e: DragEvent<HTMLTableCellElement>) => {
     tableCellProps?.onDragEnter?.(e);
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
@@ -185,23 +167,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       onDragEnter={handleDragEnter}
       onDoubleClick={handleDoubleClick}
       sx={(theme) => ({
-        backgroundColor: column.getIsPinned()
-          ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
-          : undefined,
-        boxShadow: getIsLastLeftPinnedColumn()
-          ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
-          : getIsFirstRightPinnedColumn()
-          ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
-          : undefined,
         cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
-        left:
-          column.getIsPinned() === 'left'
-            ? `${column.getStart('left')}px`
-            : undefined,
-        opacity:
-          draggingColumn?.id === column.id || hoveredColumn?.id === column.id
-            ? 0.5
-            : 1,
         overflow: 'hidden',
         p:
           density === 'compact'
@@ -226,18 +192,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
                   : 1.25)
               }rem`
             : undefined,
-        position: column.getIsPinned() ? 'sticky' : 'relative',
-        right:
-          column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
-        transition: 'all 0.2s ease-in-out',
         whiteSpace: density === 'compact' ? 'nowrap' : 'normal',
         zIndex:
-          draggingColumn?.id === column.id
-            ? 2
-            : column.getIsPinned()
-            ? 1
-            : undefined,
+          draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
         '&:hover': {
           backgroundColor:
             enableHover &&
@@ -249,13 +207,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
                 : `${darken(theme.palette.background.default, 0.1)} !important`
               : undefined,
         },
-        ...(tableCellProps?.sx instanceof Function
-          ? tableCellProps.sx(theme)
-          : (tableCellProps?.sx as any)),
+        ...getCommonCellStyles({ column, table, theme, tableCellProps }),
         ...draggingBorders,
-        maxWidth: `min(${column.getSize()}px, fit-content)`,
-        minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
-        width: column.getSize(),
       })}
     >
       <>
@@ -264,7 +217,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
             animation="wave"
             height={20}
             width={skeletonWidth}
-            {...muiTableBodyCellSkeletonProps}
+            {...skeletonProps}
           />
         ) : enableRowNumbers &&
           rowNumberMode === 'static' &&

package/src/body/MRT_TableBodyCellValue.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { MRT_Cell, MRT_TableInstance } from '..';
 
 interface Props {
@@ -6,7 +6,7 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_TableBodyCellValue: FC<Props> = ({ cell, table }) => {
+const _MRT_TableBodyCellValue: FC<Props> = ({ cell, table }) => {
   const { column, row } = cell;
   const { columnDef } = column;
 
@@ -32,3 +32,8 @@ export const MRT_TableBodyCellValue: FC<Props> = ({ cell, table }) => {
     </>
   );
 };
+
+export const MRT_TableBodyCellValue = memo(
+  _MRT_TableBodyCellValue,
+  (prev, next) => prev.cell.getValue() === next.cell.getValue(),
+);