material-react-table 2.0.0-beta.4 → 2.0.0-beta.5

package/src/body/MRT_TableBodyRow.tsx

@@ -11,6 +11,7 @@ import {
 import { MRT_TableBodyCell, Memo_MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Cell,
   type MRT_Row,
@@ -118,6 +119,12 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
 
   const rowRef = useRef<HTMLTableRowElement | null>(null);
 
+  const {
+    baseBackgroundColor,
+    pinnedRowBackgroundColor,
+    selectedRowBackgroundColor,
+  } = getMRTTheme(table, theme)
+
   return (
     <>
       <TableRow
@@ -142,16 +149,13 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             backgroundColor:
               tableRowProps?.hover !== false
                 ? row.getIsSelected()
-                  ? `${alpha(theme.palette.primary.main, 0.2)}`
+                  ? `${alpha(selectedRowBackgroundColor, 0.3)}`
                   : theme.palette.mode === 'dark'
-                  ? `${lighten(theme.palette.background.default, 0.12)}`
-                  : `${darken(theme.palette.background.default, 0.05)}`
+                  ? `${lighten(baseBackgroundColor, 0.05)}`
+                  : `${darken(baseBackgroundColor, 0.05)}`
                 : undefined,
           },
-          backgroundColor: `${lighten(
-            theme.palette.background.default,
-            0.05,
-          )} !important`,
+          backgroundColor: `${baseBackgroundColor} !important`,
           bottom:
             !virtualRow && bottomPinnedIndex !== undefined && isPinned
               ? `${
@@ -173,9 +177,9 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             : undefined,
           td: {
             backgroundColor: row.getIsSelected()
-              ? alpha(theme.palette.primary.main, 0.2)
+              ? selectedRowBackgroundColor
               : isPinned
-              ? alpha(theme.palette.primary.main, 0.1)
+              ? pinnedRowBackgroundColor
               : undefined,
           },
           top: virtualRow

package/src/body/MRT_TableDetailPanel.tsx

@@ -3,8 +3,8 @@ import { type VirtualItem } from '@tanstack/react-virtual';
 import Collapse from '@mui/material/Collapse';
 import TableCell, { type TableCellProps } from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
-import { lighten } from '@mui/material/styles';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Row,
   type MRT_RowData,
@@ -78,7 +78,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
         {...tableCellProps}
         sx={(theme) => ({
           backgroundColor: virtualRow
-            ? lighten(theme.palette.background.default, 0.05)
+            ? getMRTTheme(table, theme).baseBackgroundColor
             : undefined,
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           display: layoutMode?.startsWith('grid') ? 'flex' : undefined,

package/src/column.utils.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import {
   createRow as _createRow,
   flexRender as _flexRender,
@@ -6,9 +6,6 @@ import {
   type Row,
 } from '@tanstack/react-table';
 import { type Range, defaultRangeExtractor } from '@tanstack/react-virtual';
-import { type TableCellProps } from '@mui/material/TableCell';
-import { alpha, lighten } from '@mui/material/styles';
-import { type Theme } from '@mui/material/styles';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
 import { type MRT_SortingFns } from './sortingFns';
@@ -23,7 +20,6 @@ import {
   type MRT_FilterOption,
   type MRT_GroupColumnDef,
   type MRT_GroupingState,
-  type MRT_Header,
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
@@ -288,126 +284,11 @@ export const getCanRankRows = <TData extends MRT_RowData>(
   );
 };
 
-export const getCommonCellStyles = <TData extends MRT_RowData>({
-  column,
-  header,
-  table,
-  tableCellProps,
-  theme,
-}: {
-  column: MRT_Column<TData>;
-  header?: MRT_Header<TData>;
-  table: MRT_TableInstance<TData>;
-  tableCellProps: TableCellProps;
-  theme: Theme;
-}) => {
-  const {
-    options: { layoutMode },
-  } = table;
-  const widthStyles: CSSProperties = {
-    minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
-    width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) * 1px)`,
-  };
-
-  if (layoutMode === 'grid') {
-    widthStyles.flex = `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) 0 auto`;
-  } else if (layoutMode === 'grid-no-grow') {
-    widthStyles.flex = '0 0 auto';
-  }
-
-  return {
-    backgroundColor:
-      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-        ? alpha(lighten(theme.palette.background.default, 0.04), 0.97)
-        : '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,
-    display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-    left:
-      column.getIsPinned() === 'left'
-        ? `${column.getStart('left')}px`
-        : undefined,
-    ml:
-      table.options.enableColumnVirtualization &&
-      column.getIsPinned() === 'left' &&
-      column.getPinnedIndex() === 0
-        ? `-${
-            column.getSize() *
-            (table.getState().columnPinning.left?.length ?? 1)
-          }px`
-        : undefined,
-    mr:
-      table.options.enableColumnVirtualization &&
-      column.getIsPinned() === 'right' &&
-      column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
-        ? `-${
-            column.getSize() *
-            (table.getState().columnPinning.right?.length ?? 1) *
-            1.2
-          }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: table.options.enableColumnVirtualization
-      ? 'none'
-      : `padding 150ms ease-in-out`,
-    ...widthStyles,
-    // ...(!table.options.enableColumnResizing && widthStyles), //let devs pass in width styles if column resizing is disabled
-    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
-    // ...(table.options.enableColumnResizing && widthStyles), //don't let devs pass in width styles if column resizing is enabled
-  };
-};
-
-export const MRT_DefaultColumn = {
-  filterVariant: 'text',
-  maxSize: 1000,
-  minSize: 40,
-  size: 180,
-} as const;
-
-export const MRT_DefaultDisplayColumn = {
-  columnDefType: 'display',
-  enableClickToCopy: false,
-  enableColumnActions: false,
-  enableColumnDragging: false,
-  enableColumnFilter: false,
-  enableColumnOrdering: false,
-  enableEditing: false,
-  enableGlobalFilter: false,
-  enableGrouping: false,
-  enableHiding: false,
-  enableResizing: false,
-  enableSorting: false,
-} as const;
-
 export const parseFromValuesOrFunc = <T, U>(
   fn: ((arg: U) => T) | T | undefined,
   arg: U,
 ): T | undefined => (fn instanceof Function ? fn(arg) : fn);
 
-export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
-
 export const flexRender = _flexRender as (
   Comp: Renderable<any>,
   props: any,

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,5 +1,6 @@
 import TableCell, { type TableCellProps } from '@mui/material/TableCell';
-import { getCommonCellStyles, parseFromValuesOrFunc } from '../column.utils';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { getCommonMRTCellStyles } from '../style.utils';
 import {
   type MRT_Header,
   type MRT_RowData,
@@ -50,7 +51,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
             : '1.5rem',
         verticalAlign: 'top',
         zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1,
-        ...getCommonCellStyles({
+        ...getCommonMRTCellStyles({
           column,
           table,
           tableCellProps,

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,8 +1,8 @@
 import { type VirtualItem } from '@tanstack/react-virtual';
 import TableRow, { type TableRowProps } from '@mui/material/TableRow';
-import { lighten } from '@mui/material/styles';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Header,
   type MRT_HeaderGroup,
@@ -53,7 +53,7 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        backgroundColor: lighten(theme.palette.background.default, 0.05),
+        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         width: '100%',
         ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),

package/src/head/MRT_TableHeadCell.tsx

@@ -9,8 +9,8 @@ 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 { parseFromValuesOrFunc } from '../column.utils';
+import { getCommonMRTCellStyles, getMRTTheme } from '../style.utils';
 import {
   type MRT_Header,
   type MRT_RowData,
@@ -64,6 +64,8 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     ...rest,
   };
 
+  const { draggingBorderColor } = getMRTTheme(table, theme);
+
   const showColumnActions =
     (enableColumnActions || columnDef.enableColumnActions) &&
     columnDef.enableColumnActions !== false;
@@ -89,11 +91,11 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     const borderStyle =
       columnSizingInfo.isResizingColumn === column.id &&
       !header.subHeaders.length
-        ? `2px solid ${theme.palette.primary.main} !important`
+        ? `2px solid ${draggingBorderColor} !important`
         : draggingColumn?.id === column.id
-        ? `1px dashed ${theme.palette.text.secondary}`
+        ? `1px dashed ${theme.palette.grey[500]}`
         : hoveredColumn?.id === column.id
-        ? `2px dashed ${theme.palette.primary.main}`
+        ? `2px dashed ${draggingBorderColor}`
         : undefined;
 
     if (columnSizingInfo.isResizingColumn === column.id) {
@@ -178,7 +180,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
             : column.getIsPinned() && columnDefType !== 'group'
             ? 2
             : 1,
-        ...getCommonCellStyles({
+        ...getCommonMRTCellStyles({
           column,
           header,
           table,
@@ -252,11 +254,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                   <MRT_TableHeadCellFilterLabel header={header} table={table} />
                 )}
                 {column.getCanSort() && (
-                  <MRT_TableHeadCellSortLabel
-                    header={header}
-                    table={table}
-                    tableCellProps={tableCellProps}
-                  />
+                  <MRT_TableHeadCellSortLabel header={header} table={table} />
                 )}
               </Box>
               {columnDefType !== 'group' && (

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -23,7 +23,6 @@ export const MRT_TableHeadCellColumnActionsButton = <
 }: Props<TData>) => {
   const {
     options: {
-      columnFilterDisplayMode,
       icons: { MoreVertIcon },
       localization,
       muiColumnActionsButtonProps,
@@ -71,18 +70,15 @@ export const MRT_TableHeadCellColumnActionsButton = <
               opacity: 1,
             },
             height: '2rem',
-            m: '-4px',
+            m: '-8px -4px',
             opacity: 0.3,
-            transform: `scale(0.8) ${
-              columnFilterDisplayMode !== 'popover' ? 'translateX(-4px)' : ''
-            }`,
-            transition: 'opacity 150ms',
+            transition: 'all 150ms',
             width: '2rem',
             ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}
         >
-          <MoreVertIcon />
+          <MoreVertIcon style={{ transform: 'scale(0.9)' }} />
         </IconButton>
       </Tooltip>
       {anchorEl && (

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -36,7 +36,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
       column,
       table,
     }),
-    ...rest
+    ...rest,
   };
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -1,5 +1,4 @@
 import Badge from '@mui/material/Badge';
-import { type TableCellProps } from '@mui/material/TableCell';
 import TableSortLabel, {
   type TableSortLabelProps,
 } from '@mui/material/TableSortLabel';
@@ -14,7 +13,6 @@ import {
 interface Props<TData extends MRT_RowData> extends TableSortLabelProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
-  tableCellProps?: TableCellProps;
 }
 
 export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
@@ -58,7 +56,9 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
               ? (props) => (
                   <SyncAltIcon
                     {...props}
-                    style={{ transform: 'rotate(-90deg) scaleX(0.8)' }}
+                    style={{
+                      transform: 'rotate(-90deg) scaleX(0.9) translateX(-1px)',
+                    }}
                   />
                 )
               : ArrowDownwardIcon

package/src/head/MRT_TableHeadRow.tsx

@@ -1,8 +1,9 @@
 import { type VirtualItem } from '@tanstack/react-virtual';
+import { alpha } from '@mui/material';
 import TableRow, { type TableRowProps } from '@mui/material/TableRow';
-import { alpha, lighten } from '@mui/material/styles';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Header,
   type MRT_HeaderGroup,
@@ -42,7 +43,7 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        backgroundColor: lighten(theme.palette.background.default, 0.05),
+        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         top: 0,

package/src/hooks/useMRT_TableOptions.ts

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { MRT_AggregationFns } from '../aggregationFns';
-import { MRT_DefaultColumn, MRT_DefaultDisplayColumn } from '../column.utils';
 import { MRT_FilterFns } from '../filterFns';
 import { MRT_Default_Icons } from '../icons';
 import { MRT_Localization_EN } from '../locales/en';
@@ -11,6 +10,28 @@ import {
   type MRT_TableOptions,
 } from '../types';
 
+const MRT_DefaultColumn = {
+  filterVariant: 'text',
+  maxSize: 1000,
+  minSize: 40,
+  size: 180,
+} as const;
+
+const MRT_DefaultDisplayColumn = {
+  columnDefType: 'display',
+  enableClickToCopy: false,
+  enableColumnActions: false,
+  enableColumnDragging: false,
+  enableColumnFilter: false,
+  enableColumnOrdering: false,
+  enableEditing: false,
+  enableGlobalFilter: false,
+  enableGrouping: false,
+  enableHiding: false,
+  enableResizing: false,
+  enableSorting: false,
+} as const;
+
 export const useMRT_TableOptions: <TData extends MRT_RowData>(
   tableOptions: MRT_TableOptions<TData>,
 ) => MRT_DefinedTableOptions<TData> = <TData extends MRT_RowData>({

package/src/index.ts

@@ -10,6 +10,7 @@ export * from './inputs';
 export * from './menus';
 export * from './modals';
 export * from './sortingFns';
+export * from './style.utils';
 export * from './table';
 export * from './toolbar';
 export * from './types';

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -125,11 +125,24 @@ export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
           ) : (
             <SearchIcon style={{ marginRight: '4px' }} />
           ),
+          ...textFieldProps.InputProps,
+          sx: (theme) => ({
+            mb: 0,
+            ...(parseFromValuesOrFunc(
+              textFieldProps?.InputProps?.sx,
+              theme,
+            ) as any),
+          }),
+        }}
+        inputProps={{
+          autoComplete: 'new-password', // disable autocomplete and autofill
+          ...textFieldProps.inputProps,
         }}
         onChange={handleChange}
         placeholder={localization.search}
+        size="small"
         value={searchValue ?? ''}
-        variant="standard"
+        variant="outlined"
         {...textFieldProps}
         inputRef={(inputRef) => {
           searchInputRef.current = inputRef;

package/src/locales/az.ts

@@ -0,0 +1,94 @@
+import { type MRT_Localization } from '..';
+
+export const MRT_Localization_AZ: MRT_Localization = {
+  actions: 'Əməliyyatlar',
+  and: 'və',
+  cancel: 'Ləğv Et',
+  changeFilterMode: 'Filter Rejimini Dəyiş',
+  changeSearchMode: 'Axtarış Rejimini Dəyiş',
+  clearFilter: 'Filteri təmizlə',
+  clearSearch: 'Axtarışı təmizlə',
+  clearSort: 'Sıralamanı sıfırla',
+  clickToCopy: 'Köçür',
+  columnActions: 'Sütun Əməliyyatları',
+  copiedToClipboard: 'Panelə Köçürüldü',
+  collapse: 'Daralt',
+  collapseAll: 'Hamısını Daralt',
+  dropToGroupBy: '{column} İlə Qruplandırmaq Üçün Buraxın',
+  edit: 'Düzəliş Et',
+  expand: 'Genişlət',
+  expandAll: 'Hamısını Genişlət',
+  filterArrIncludes: 'Daxil Et',
+  filterArrIncludesAll: 'Hamısını Daxil Et',
+  filterArrIncludesSome: 'Daxildir',
+  filterBetween: 'Arasında',
+  filterBetweenInclusive: 'Daxildir Arasında',
+  filterByColumn: '{column} Filteri',
+  filterContains: 'Daxildir',
+  filterEmpty: 'Boş',
+  filterEndsWith: 'Sonu',
+  filterEquals: 'Bərabər',
+  filterEqualsString: 'Bərabər',
+  filterFuzzy: 'Təxmini',
+  filterGreaterThan: 'Böyükdür',
+  filterGreaterThanOrEqualTo: 'Böyük Bərabərdir',
+  filterInNumberRange: 'Arasında',
+  filterIncludesString: 'Daxil',
+  filterIncludesStringSensitive: 'Daxil',
+  filterLessThan: 'Kiçikdir',
+  filterLessThanOrEqualTo: 'Kiçik Bərabərdir',
+  filterMode: 'Filter Rejimi: {filterType}',
+  filterNotEmpty: 'Boş Deyil',
+  filterNotEquals: 'Bərabər Deyil',
+  filterStartsWith: 'Başlanğıcı',
+  filterWeakEquals: 'Bərabərdir',
+  filteringByColumn: 'Filter Rejimi - {filterType} {filterValue}',
+  goToFirstPage: 'İlk Səhifəyə Get',
+  goToLastPage: 'Son Səhifəyə Get',
+  goToNextPage: 'Sonrakı Səhifəyə Get',
+  goToPreviousPage: 'Əvvəlki Səhifəyə Get',
+  grab: 'Tut',
+  groupByColumn: "{column}'a Görə Qruplandır",
+  groupedBy: 'Qruplandı ',
+  hideAll: 'Hamısını Gizlə',
+  hideColumn: '{column} Sütununu Gizlə',
+  max: 'Maksimum',
+  min: 'Minimum',
+  move: 'Daşı',
+  noRecordsToDisplay: 'Göstəriləcək Qeyd Yoxdur',
+  noResultsFound: 'Heç Bir Nəticə Tapılmadı',
+  of: 'of',
+  or: 'və ya',
+  pin: 'Sabitlə',
+  pinToLeft: 'Sola Sabitlə',
+  pinToRight: 'Sağa Sabitlə',
+  resetColumnSize: 'Sütun Ölçüsünü Sıfırla',
+  resetOrder: 'Sıranı Temizlə',
+  rowActions: 'Sətir Əməliyyatları',
+  rowNumber: '#',
+  rowNumbers: 'Sətir Sayl',
+  rowsPerPage: 'Səhifə Başına Sətirlər',
+  save: 'Yadda Saxla',
+  search: 'Axtar',
+  selectedCountOfRowCountRowsSelected:
+    '{rowCount} Sətir Arasında {selectedCount} Ədəd Seçildi',
+  select: 'Seç',
+  showAll: 'Hamısını Göstər',
+  showAllColumns: 'Bütün Sütunları Göstər',
+  showHideColumns: 'Sütunları Göstər/Gizlə',
+  showHideFilters: 'Filterləri Göstər/Gizlə',
+  showHideSearch: 'Axtarışı Göstər/Gizlə',
+  sortByColumnAsc: 'Artan Şəkildə Sırala',
+  sortByColumnDesc: 'Azalan Şəkildə Sırala',
+  sortedByColumnAsc: 'Artan Şəkildə Sıralandı',
+  sortedByColumnDesc: 'Azalan Şəkildə Sıralandı',
+  thenBy: ', sonra ',
+  toggleDensity: 'Sıxlığı Dəyiş',
+  toggleFullScreen: 'Tam Ekranı Dəyiş',
+  toggleSelectAll: 'Hamısını Seç',
+  toggleSelectRow: 'Sətir Seç',
+  toggleVisibility: 'Görünməni Dəyiş',
+  ungroupByColumn: '{column} Sütununu Ayır',
+  unpin: 'Ayır',
+  unpinAll: 'Hamısını Ayır',
+};

package/src/locales/no.ts

@@ -1,4 +1,4 @@
-import { type MRT_Localization } from '../types';
+import { type MRT_Localization } from '..';
 
 export const MRT_Localization_NO: MRT_Localization = {
   cancel: 'Avbryt',

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -14,6 +14,7 @@ import Typography from '@mui/material/Typography';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { parseFromValuesOrFunc, reorderColumn } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Column,
   type MRT_RowData,
@@ -101,9 +102,9 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
           my: 0,
           opacity: isDragging ? 0.5 : 1,
           outline: isDragging
-            ? `2px dashed ${theme.palette.divider}`
+            ? `2px dashed ${theme.palette.grey[500]}`
             : hoveredColumn?.id === column.id
-            ? `2px dashed ${theme.palette.primary.main}`
+            ? `2px dashed ${getMRTTheme(table, theme).draggingBorderColor}`
             : 'none',
           outlineOffset: '-2px',
           pl: `${(column.depth + 0.5) * 2}rem`,