material-react-table 1.0.0-beta.3 → 1.0.0-beta.6

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

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
-    stackAlertBanner?: boolean;
+    stackAlertBanner: boolean;
     table: MRT_TableInstance;
 }
 export declare const MRT_ToolbarAlertBanner: FC<Props>;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, Dispatch, SetStateAction, ReactNode, DragEvent } from 'react';
+import { MutableRefObject, Dispatch, SetStateAction, ReactNode } from 'react';
 import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, ToolbarProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, ChipProps, AlertProps } from '@mui/material';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
 import { Options, VirtualItem } from 'react-virtual';
@@ -154,6 +154,8 @@ interface MRT_Localization {
     max: string;
     min: string;
     move: string;
+    noRecordsToDisplay: string;
+    noResultsFound: string;
     or: string;
     pinToLeft: string;
     pinToRight: string;
@@ -231,6 +233,7 @@ declare type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Ta
         filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
         searchInputRef: MutableRefObject<HTMLInputElement>;
         tableContainerRef: MutableRefObject<HTMLDivElement>;
+        tablePaperRef: MutableRefObject<HTMLDivElement>;
         topToolbarRef: MutableRefObject<HTMLDivElement>;
     };
     setColumnFilterFns: Dispatch<SetStateAction<{
@@ -630,13 +633,6 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     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>;
@@ -655,13 +651,6 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     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>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.6",
   "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

@@ -1,6 +1,5 @@
 import React, {
   Dispatch,
-  DragEvent,
   MutableRefObject,
   ReactNode,
   SetStateAction,
@@ -101,6 +100,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<
@@ -753,15 +753,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>;
@@ -783,15 +774,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>;

package/src/body/MRT_TableBody.tsx

@@ -1,7 +1,7 @@
 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 '..';
@@ -19,15 +19,16 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
       enableGlobalFilterRankedResults,
       enablePagination,
       enableRowVirtualization,
+      localization,
       manualFiltering,
       manualSorting,
       muiTableBodyProps,
       virtualizerInstanceRef,
       virtualizerProps,
     },
-    refs: { tableContainerRef },
+    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 }) => {
 
   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;
@@ -132,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()) * 160
-    );
-  };
-
   const handleDragEnter = (e: DragEvent<HTMLTableCellElement>) => {
     tableCellProps?.onDragEnter?.(e);
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
@@ -190,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 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-          : getIsFirstRightPinnedColumn()
-          ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-          : 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'
@@ -231,11 +192,7 @@ 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 : 0,
@@ -250,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(),
       })}
     >
       <>

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -14,7 +14,7 @@ export const MRT_TableBodyRowGrabHandle: FC<Props> = ({
   table,
 }) => {
   const {
-    options: { muiTableBodyRowDragHandleProps, onRowDrop },
+    options: { muiTableBodyRowDragHandleProps },
   } = table;
   const { row } = cell;
 
@@ -23,17 +23,14 @@ export const MRT_TableBodyRowGrabHandle: FC<Props> = ({
       ? muiTableBodyRowDragHandleProps({ row, table })
       : muiTableBodyRowDragHandleProps;
 
-  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
-    e.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
+  const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
+    iconButtonProps?.onDragStart?.(event);
+    event.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
     table.setDraggingRow(row as any);
   };
 
   const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
-    onRowDrop?.({
-      event,
-      draggedRow: table.getState().draggingRow as any,
-      targetRow: table.getState().hoveredRow as any,
-    });
+    iconButtonProps?.onDragEnd?.(event);
     table.setDraggingRow(null);
     table.setHoveredRow(null);
   };

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -33,14 +33,14 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
       <IconButton
         disableRipple
         draggable="true"
-        onDragStart={onDragStart}
-        onDragEnd={onDragEnd}
         size="small"
         {...iconButtonProps}
         onClick={(e) => {
           e.stopPropagation();
           iconButtonProps?.onClick?.(e);
         }}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
         sx={(theme) => ({
           cursor: 'grab',
           m: 0,

package/src/column.utils.ts

@@ -1,4 +1,5 @@
 import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
+import { alpha, lighten, TableCellProps, Theme } from '@mui/material';
 import {
   MaterialReactTableProps,
   MRT_Column,
@@ -6,6 +7,8 @@ import {
   MRT_DefinedColumnDef,
   MRT_DisplayColumnIds,
   MRT_FilterOption,
+  MRT_Header,
+  MRT_TableInstance,
 } from '.';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
@@ -165,3 +168,72 @@ export const getDefaultColumnFilterFn = <
   if (columnDef.filterVariant === 'range') return 'betweenInclusive';
   return 'fuzzy';
 };
+
+export const getIsLastLeftPinnedColumn = (
+  table: MRT_TableInstance,
+  column: MRT_Column,
+) => {
+  return (
+    column.getIsPinned() === 'left' &&
+    table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
+  );
+};
+
+export const getIsFirstRightPinnedColumn = (column: MRT_Column) => {
+  return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
+};
+
+export const getTotalRight = (table: MRT_TableInstance, column: MRT_Column) => {
+  return (
+    (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 160
+  );
+};
+
+export const getCommonCellStyles = ({
+  column,
+  header,
+  table,
+  tableCellProps,
+  theme,
+}: {
+  column: MRT_Column;
+  header?: MRT_Header;
+  table: MRT_TableInstance;
+  tableCellProps: TableCellProps;
+  theme: Theme;
+}) => ({
+  backgroundColor:
+    column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+      ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
+      : 'inherit',
+  backgroundImage: 'inherit',
+  boxShadow: getIsLastLeftPinnedColumn(table, column)
+    ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
+    : getIsFirstRightPinnedColumn(column)
+    ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
+    : undefined,
+  left:
+    column.getIsPinned() === 'left'
+      ? `${column.getStart('left')}px`
+      : undefined,
+  opacity:
+    table.getState().draggingColumn?.id === column.id ||
+    table.getState().hoveredColumn?.id === column.id
+      ? 0.5
+      : 1,
+  position:
+    column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+      ? 'sticky'
+      : undefined,
+  right:
+    column.getIsPinned() === 'right'
+      ? `${getTotalRight(table, column)}px`
+      : undefined,
+  transition: `all ${column.getIsResizing() ? 0 : '0.2s'} ease-in-out`,
+  ...(tableCellProps?.sx instanceof Function
+    ? tableCellProps.sx(theme)
+    : (tableCellProps?.sx as any)),
+  maxWidth: `min(${column.getSize()}px, fit-content)`,
+  minWidth: `max(${column.getSize()}px, ${column.columnDef.minSize ?? 30}px)`,
+  width: header?.getSize() ?? column.getSize(),
+});

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
-import { alpha, TableCell } from '@mui/material';
+import { TableCell } from '@mui/material';
+import { getCommonCellStyles } from '../column.utils';
 import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
@@ -10,7 +11,7 @@ interface Props {
 export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
   const {
     getState,
-    options: { muiTableFooterCellProps, enableColumnResizing },
+    options: { muiTableFooterCellProps },
   } = table;
   const { density } = getState();
   const { column } = footer;
@@ -39,26 +40,15 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
       variant="head"
       {...tableCellProps}
       sx={(theme) => ({
-        backgroundColor: theme.palette.background.default,
-        backgroundImage: `linear-gradient(${alpha(
-          theme.palette.common.white,
-          0.05,
-        )},${alpha(theme.palette.common.white, 0.05)})`,
         fontWeight: 'bold',
-        maxWidth: `${column.getSize()}px`,
-        minWidth: `${column.getSize()}px`,
         p:
           density === 'compact'
             ? '0.5rem'
             : density === 'comfortable'
             ? '1rem'
             : '1.5rem',
-        transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
-        width: column.getSize(),
-        verticalAlign: 'text-top',
-        ...(tableCellProps?.sx instanceof Function
-          ? tableCellProps.sx(theme)
-          : (tableCellProps?.sx as any)),
+        verticalAlign: 'top',
+        ...getCommonCellStyles({ column, table, theme, tableCellProps }),
       })}
     >
       <>

package/src/head/MRT_TableHeadCell.tsx

@@ -1,11 +1,12 @@
 import React, { DragEvent, FC, ReactNode } from 'react';
-import { Box, TableCell, Theme, alpha, lighten, useTheme } from '@mui/material';
+import { Box, TableCell, Theme, useTheme } from '@mui/material';
 import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
 import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
+import { getCommonCellStyles } from '../column.utils';
 import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
@@ -21,7 +22,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
       enableColumnActions,
       enableColumnDragging,
       enableColumnOrdering,
-      enableColumnResizing,
       enableGrouping,
       enableMultiSort,
       muiTableHeadCellProps,
@@ -54,23 +54,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     ...mcTableHeadCellProps,
   };
 
-  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()) * 160
-    );
-  };
-
   const handleDragEnter = (_e: DragEvent) => {
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
       setHoveredColumn(null);
@@ -115,26 +98,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
       ref={tableHeadCellRef}
       {...tableCellProps}
       sx={(theme: Theme) => ({
-        backgroundColor:
-          column.getIsPinned() && columnDefType !== 'group'
-            ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
-            : 'inherit',
-        backgroundImage: 'inherit',
-        boxShadow: getIsLastLeftPinnedColumn()
-          ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-          : getIsFirstRightPinnedColumn()
-          ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-          : undefined,
         fontWeight: 'bold',
-        left:
-          column.getIsPinned() === 'left'
-            ? `${column.getStart('left')}px`
-            : undefined,
         overflow: 'visible',
-        opacity:
-          draggingColumn?.id === column.id || hoveredColumn?.id === column.id
-            ? 0.5
-            : 1,
         p:
           density === 'compact'
             ? '0.5rem'
@@ -151,19 +116,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             : showColumnFilters || density === 'compact'
             ? '0.4rem'
             : '0.6rem',
-        position:
-          column.getIsPinned() && columnDefType !== 'group'
-            ? 'sticky'
-            : undefined,
         pt:
           columnDefType === 'group' || density === 'compact'
             ? '0.25rem'
             : density === 'comfortable'
             ? '.75rem'
             : '1.25rem',
-        right:
-          column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
-        transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
         verticalAlign: 'top',
         zIndex:
@@ -172,13 +130,14 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             : column.getIsPinned() && columnDefType !== 'group'
             ? 2
             : 1,
-        ...(tableCellProps?.sx instanceof Function
-          ? tableCellProps.sx(theme)
-          : (tableCellProps?.sx as any)),
+        ...getCommonCellStyles({
+          column,
+          header,
+          table,
+          tableCellProps,
+          theme,
+        }),
         ...draggingBorders,
-        maxWidth: `min(${column.getSize()}px, fit-content)`,
-        minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
-        width: header.getSize(),
       })}
     >
       {header.isPlaceholder ? null : (

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -16,11 +16,7 @@ export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: {
-      enableColumnOrdering,
-      muiTableHeadCellDragHandleProps,
-      onColumnDrop,
-    },
+    options: { enableColumnOrdering, muiTableHeadCellDragHandleProps },
     setColumnOrder,
     setDraggingColumn,
     setHoveredColumn,
@@ -43,17 +39,14 @@ export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
     ...mcIconButtonProps,
   };
 
-  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
+  const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
+    iconButtonProps?.onDragStart?.(event);
     setDraggingColumn(column);
-    e.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
+    event.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
   };
 
   const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
-    onColumnDrop?.({
-      event,
-      draggedColumn: column,
-      targetColumn: hoveredColumn,
-    });
+    iconButtonProps?.onDragEnd?.(event);
     if (hoveredColumn?.id === 'drop-zone') {
       column.toggleGrouping();
     } else if (

package/src/localization.ts

@@ -47,6 +47,8 @@ export interface MRT_Localization {
   max: string;
   min: string;
   move: string;
+  noRecordsToDisplay: string;
+  noResultsFound: string;
   or: string;
   pinToLeft: string;
   pinToRight: string;
@@ -129,6 +131,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',