material-react-table 0.22.2 → 0.23.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.22.2",
2
+ "version": "0.23.2",
3
3
  "license": "MIT",
4
4
  "name": "material-react-table",
5
5
  "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -8,7 +8,8 @@
8
8
  "react-table",
9
9
  "material-ui",
10
10
  "material-table",
11
- "tanstack table"
11
+ "tanstack table",
12
+ "data table"
12
13
  ],
13
14
  "repository": {
14
15
  "type": "git",
@@ -68,6 +69,7 @@
68
69
  "@storybook/addon-essentials": "^6.5.9",
69
70
  "@storybook/addon-info": "^5.3.21",
70
71
  "@storybook/addon-links": "^6.5.9",
72
+ "@storybook/addon-storysource": "^6.5.9",
71
73
  "@storybook/addons": "^6.5.9",
72
74
  "@storybook/react": "^6.5.9",
73
75
  "@types/react": "^18.0.15",
@@ -98,7 +100,7 @@
98
100
  },
99
101
  "dependencies": {
100
102
  "@tanstack/match-sorter-utils": "8.1.1",
101
- "@tanstack/react-table": "8.1.4",
103
+ "@tanstack/react-table": "8.2.2",
102
104
  "react-virtual": "^2.10.4"
103
105
  }
104
106
  }
@@ -106,6 +106,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
106
106
  tableId: string;
107
107
  localization: MRT_Localization;
108
108
  };
109
+ setCurrentDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
109
110
  setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
110
111
  setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
111
112
  setCurrentFilterFns: Dispatch<
@@ -114,6 +115,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
114
115
  }>
115
116
  >;
116
117
  setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
118
+ setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
117
119
  setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
118
120
  setIsFullScreen: Dispatch<SetStateAction<boolean>>;
119
121
  setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
@@ -123,13 +125,15 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
123
125
 
124
126
  export type MRT_TableState<TData extends Record<string, any> = {}> =
125
127
  TableState & {
128
+ currentDraggingColumn: MRT_Column<TData> | null;
126
129
  currentEditingCell: MRT_Cell<TData> | null;
127
130
  currentEditingRow: MRT_Row<TData> | null;
128
131
  currentFilterFns: Record<string, MRT_FilterOption>;
129
132
  currentGlobalFilterFn: Record<string, MRT_FilterOption>;
133
+ currentHoveredColumn: MRT_Column<TData> | null;
130
134
  density: 'comfortable' | 'compact' | 'spacious';
131
- isLoading: boolean;
132
135
  isFullScreen: boolean;
136
+ isLoading: boolean;
133
137
  showAlertBanner: boolean;
134
138
  showColumnFilters: boolean;
135
139
  showGlobalFilter: boolean;
@@ -338,7 +342,7 @@ export type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<
338
342
  };
339
343
 
340
344
  export type MRT_Column<TData extends Record<string, any> = {}> = Omit<
341
- Column<TData>,
345
+ Column<TData, unknown>,
342
346
  'header' | 'footer' | 'columns' | 'columnDef' | 'filterFn'
343
347
  > & {
344
348
  columnDef: MRT_DefinedColumnDef<TData>;
@@ -349,7 +353,7 @@ export type MRT_Column<TData extends Record<string, any> = {}> = Omit<
349
353
  };
350
354
 
351
355
  export type MRT_Header<TData extends Record<string, any> = {}> = Omit<
352
- Header<TData>,
356
+ Header<TData, unknown>,
353
357
  'column'
354
358
  > & {
355
359
  column: MRT_Column<TData>;
@@ -374,7 +378,7 @@ export type MRT_Row<TData extends Record<string, any> = {}> = Omit<
374
378
  };
375
379
 
376
380
  export type MRT_Cell<TData extends Record<string, any> = {}> = Omit<
377
- Cell<TData>,
381
+ Cell<TData, unknown>,
378
382
  'column' | 'row'
379
383
  > & {
380
384
  column: MRT_Column<TData>;
@@ -618,10 +622,12 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
618
622
  cell: MRT_Cell<TData>;
619
623
  table: MRT_TableInstance<TData>;
620
624
  }) => void;
621
- onCurrentEditingCellChange?: OnChangeFn<MRT_Cell>;
622
- onCurrentEditingRowChange?: OnChangeFn<MRT_Row>;
625
+ onCurrentDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
626
+ onCurrentEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
627
+ onCurrentEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
623
628
  onCurrentFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
624
629
  onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
630
+ onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
625
631
  onEditRowSubmit?: ({
626
632
  row,
627
633
  table,
@@ -703,6 +709,15 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
703
709
  virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
704
710
  };
705
711
 
712
+ /**
713
+ * `columns` and `data` props are the only required props, but there are over 150 other optional props.
714
+ *
715
+ * See more info on creating columns and data on the official docs site:
716
+ * @link https://www.material-react-table.com/docs/usage
717
+ *
718
+ * See the full props list on the official docs site:
719
+ * @link https://www.material-react-table.com/docs/api/props
720
+ */
706
721
  export default <TData extends Record<string, any> = {}>({
707
722
  autoResetExpanded = false,
708
723
  columnResizeMode = 'onEnd',
@@ -1,21 +1,16 @@
1
- import React, { Dispatch, FC, RefObject, SetStateAction, useMemo } from 'react';
1
+ import React, { FC, RefObject, useMemo } from 'react';
2
2
  import { useVirtual } from 'react-virtual';
3
3
  import { TableBody } from '@mui/material';
4
4
  import { MRT_TableBodyRow } from './MRT_TableBodyRow';
5
5
  import { rankGlobalFuzzy } from '../sortingFns';
6
- import type { MRT_Column, MRT_Row, MRT_TableInstance } from '..';
6
+ import type { MRT_Row, MRT_TableInstance } from '..';
7
7
 
8
8
  interface Props {
9
9
  table: MRT_TableInstance;
10
- setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
11
10
  tableContainerRef: RefObject<HTMLDivElement>;
12
11
  }
13
12
 
14
- export const MRT_TableBody: FC<Props> = ({
15
- setCurrentHoveredColumn,
16
- table,
17
- tableContainerRef,
18
- }) => {
13
+ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
19
14
  const {
20
15
  getRowModel,
21
16
  getPrePaginationRowModel,
@@ -108,7 +103,6 @@ export const MRT_TableBody: FC<Props> = ({
108
103
  rowIndex={
109
104
  enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
110
105
  }
111
- setCurrentHoveredColumn={setCurrentHoveredColumn}
112
106
  table={table}
113
107
  />
114
108
  );
@@ -1,21 +1,20 @@
1
- import React, {
2
- Dispatch,
3
- DragEvent,
4
- FC,
5
- MouseEvent,
6
- SetStateAction,
7
- useMemo,
8
- } from 'react';
9
- import { alpha, darken, lighten, Skeleton, TableCell } from '@mui/material';
1
+ import React, { DragEvent, FC, MouseEvent, useMemo } from 'react';
2
+ import {
3
+ alpha,
4
+ darken,
5
+ lighten,
6
+ Skeleton,
7
+ TableCell,
8
+ useTheme,
9
+ } from '@mui/material';
10
10
  import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
11
11
  import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
12
- import type { MRT_Cell, MRT_Column, MRT_TableInstance } from '..';
12
+ import type { MRT_Cell, MRT_TableInstance } from '..';
13
13
 
14
14
  interface Props {
15
15
  cell: MRT_Cell;
16
16
  enableHover?: boolean;
17
17
  rowIndex: number;
18
- setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
19
18
  table: MRT_TableInstance;
20
19
  }
21
20
 
@@ -23,9 +22,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
23
22
  cell,
24
23
  enableHover,
25
24
  rowIndex,
26
- setCurrentHoveredColumn,
27
25
  table,
28
26
  }) => {
27
+ const theme = useTheme();
29
28
  const {
30
29
  getState,
31
30
  options: {
@@ -39,10 +38,13 @@ export const MRT_TableBodyCell: FC<Props> = ({
39
38
  tableId,
40
39
  },
41
40
  setCurrentEditingCell,
41
+ setCurrentHoveredColumn,
42
42
  } = table;
43
43
  const {
44
+ currentDraggingColumn,
44
45
  currentEditingCell,
45
46
  currentEditingRow,
47
+ currentHoveredColumn,
46
48
  density,
47
49
  isLoading,
48
50
  showSkeletons,
@@ -122,9 +124,25 @@ export const MRT_TableBodyCell: FC<Props> = ({
122
124
  };
123
125
 
124
126
  const handleDragEnter = (_e: DragEvent) => {
125
- setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
127
+ if (currentDraggingColumn) {
128
+ setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
129
+ }
126
130
  };
127
131
 
132
+ const draggingBorder =
133
+ currentDraggingColumn?.id === column.id
134
+ ? `1px dashed ${theme.palette.divider}`
135
+ : currentHoveredColumn?.id === column.id
136
+ ? `2px dashed ${theme.palette.primary.main}`
137
+ : undefined;
138
+
139
+ const draggingBorders = draggingBorder
140
+ ? {
141
+ borderLeft: draggingBorder,
142
+ borderRight: draggingBorder,
143
+ }
144
+ : undefined;
145
+
128
146
  return (
129
147
  <TableCell
130
148
  onDoubleClick={handleDoubleClick}
@@ -144,6 +162,11 @@ export const MRT_TableBodyCell: FC<Props> = ({
144
162
  column.getIsPinned() === 'left'
145
163
  ? `${column.getStart('left')}px`
146
164
  : undefined,
165
+ opacity:
166
+ currentDraggingColumn?.id === column.id ||
167
+ currentHoveredColumn?.id === column.id
168
+ ? 0.5
169
+ : 1,
147
170
  overflow: 'hidden',
148
171
  p:
149
172
  density === 'compact'
@@ -174,7 +197,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
174
197
  textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
175
198
  transition: 'all 0.2s ease-in-out',
176
199
  whiteSpace: density === 'compact' ? 'nowrap' : 'normal',
177
- zIndex: column.getIsPinned() ? 1 : undefined,
200
+ zIndex:
201
+ currentDraggingColumn?.id === column.id
202
+ ? 2
203
+ : column.getIsPinned()
204
+ ? 1
205
+ : undefined,
178
206
  '&:hover': {
179
207
  backgroundColor:
180
208
  enableHover && enableEditing && editingMode !== 'row'
@@ -187,6 +215,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
187
215
  : undefined,
188
216
  },
189
217
  ...(tableCellProps?.sx as any),
218
+ ...draggingBorders,
190
219
  maxWidth: `min(${column.getSize()}px, fit-content)`,
191
220
  minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
192
221
  width: column.getSize(),
@@ -1,22 +1,16 @@
1
- import React, { Dispatch, FC, SetStateAction } from 'react';
1
+ import React, { FC } from 'react';
2
2
  import { darken, lighten, TableRow } from '@mui/material';
3
3
  import { MRT_TableBodyCell } from './MRT_TableBodyCell';
4
4
  import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
5
- import type { MRT_Column, MRT_Row, MRT_TableInstance } from '..';
5
+ import type { MRT_Row, MRT_TableInstance } from '..';
6
6
 
7
7
  interface Props {
8
8
  row: MRT_Row;
9
9
  rowIndex: number;
10
- setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
11
10
  table: MRT_TableInstance;
12
11
  }
13
12
 
14
- export const MRT_TableBodyRow: FC<Props> = ({
15
- row,
16
- rowIndex,
17
- setCurrentHoveredColumn,
18
- table,
19
- }) => {
13
+ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
20
14
  const {
21
15
  getIsSomeColumnsPinned,
22
16
  options: { muiTableBodyRowProps, renderDetailPanel },
@@ -53,7 +47,6 @@ export const MRT_TableBodyRow: FC<Props> = ({
53
47
  key={cell.id}
54
48
  enableHover={tableRowProps?.hover !== false}
55
49
  rowIndex={rowIndex}
56
- setCurrentHoveredColumn={setCurrentHoveredColumn}
57
50
  table={table}
58
51
  />
59
52
  ))}
package/src/filtersFns.ts CHANGED
@@ -22,7 +22,7 @@ export const contains = <TData extends Record<string, any> = {}>(
22
22
  filterValue: string | number,
23
23
  ) =>
24
24
  row
25
- .getValue(id)
25
+ .getValue<string | number>(id)
26
26
  .toString()
27
27
  .toLowerCase()
28
28
  .trim()
@@ -36,7 +36,7 @@ export const startsWith = <TData extends Record<string, any> = {}>(
36
36
  filterValue: string | number,
37
37
  ) =>
38
38
  row
39
- .getValue(id)
39
+ .getValue<string | number>(id)
40
40
  .toString()
41
41
  .toLowerCase()
42
42
  .trim()
@@ -50,7 +50,7 @@ export const endsWith = <TData extends Record<string, any> = {}>(
50
50
  filterValue: string | number,
51
51
  ) =>
52
52
  row
53
- .getValue(id)
53
+ .getValue<string | number>(id)
54
54
  .toString()
55
55
  .toLowerCase()
56
56
  .trim()
@@ -63,7 +63,7 @@ export const equals = <TData extends Record<string, any> = {}>(
63
63
  id: string,
64
64
  filterValue: string | number,
65
65
  ) =>
66
- row.getValue(id).toString().toLowerCase().trim() ===
66
+ row.getValue<string | number>(id).toString().toLowerCase().trim() ===
67
67
  filterValue.toString().toLowerCase().trim();
68
68
 
69
69
  equals.autoRemove = (val: any) => !val;
@@ -73,7 +73,7 @@ export const notEquals = <TData extends Record<string, any> = {}>(
73
73
  id: string,
74
74
  filterValue: string | number,
75
75
  ) =>
76
- row.getValue(id).toString().toLowerCase().trim() !==
76
+ row.getValue<string | number>(id).toString().toLowerCase().trim() !==
77
77
  filterValue.toString().toLowerCase().trim();
78
78
 
79
79
  notEquals.autoRemove = (val: any) => !val;
@@ -83,9 +83,9 @@ export const greaterThan = <TData extends Record<string, any> = {}>(
83
83
  id: string,
84
84
  filterValue: string | number,
85
85
  ) =>
86
- !isNaN(+filterValue) && !isNaN(+row.getValue(id))
87
- ? +row.getValue(id) >= +filterValue
88
- : row.getValue(id).toString().toLowerCase().trim() >
86
+ !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
87
+ ? +row.getValue<string | number>(id) >= +filterValue
88
+ : row.getValue<string | number>(id).toString().toLowerCase().trim() >
89
89
  filterValue.toString().toLowerCase().trim();
90
90
 
91
91
  greaterThan.autoRemove = (val: any) => !val;
@@ -95,9 +95,9 @@ export const lessThan = <TData extends Record<string, any> = {}>(
95
95
  id: string,
96
96
  filterValue: string | number,
97
97
  ) =>
98
- !isNaN(+filterValue) && !isNaN(+row.getValue(id))
99
- ? +row.getValue(id) <= +filterValue
100
- : row.getValue(id).toString().toLowerCase().trim() <
98
+ !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
99
+ ? +row.getValue<string | number>(id) <= +filterValue
100
+ : row.getValue<string | number>(id).toString().toLowerCase().trim() <
101
101
  filterValue.toString().toLowerCase().trim();
102
102
 
103
103
  lessThan.autoRemove = (val: any) => !val;
@@ -121,7 +121,7 @@ export const empty = <TData extends Record<string, any> = {}>(
121
121
  row: Row<TData>,
122
122
  id: string,
123
123
  _filterValue: string | number,
124
- ) => !row.getValue(id).toString().trim();
124
+ ) => !row.getValue<string | number>(id).toString().trim();
125
125
 
126
126
  empty.autoRemove = (val: any) => !val;
127
127
 
@@ -129,7 +129,7 @@ export const notEmpty = <TData extends Record<string, any> = {}>(
129
129
  row: Row<TData>,
130
130
  id: string,
131
131
  _filterValue: string | number,
132
- ) => !!row.getValue(id).toString().trim();
132
+ ) => !!row.getValue<string | number>(id).toString().trim();
133
133
 
134
134
  notEmpty.autoRemove = (val: any) => !val;
135
135
 
@@ -1,19 +1,13 @@
1
- import React, { Dispatch, FC, SetStateAction } from 'react';
1
+ import React, { FC } from 'react';
2
2
  import { TableHead } from '@mui/material';
3
3
  import { MRT_TableHeadRow } from './MRT_TableHeadRow';
4
- import type { MRT_Column, MRT_TableInstance } from '..';
4
+ import type { MRT_TableInstance } from '..';
5
5
 
6
6
  interface Props {
7
- currentHoveredColumn: MRT_Column | null;
8
- setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
9
7
  table: MRT_TableInstance;
10
8
  }
11
9
 
12
- export const MRT_TableHead: FC<Props> = ({
13
- currentHoveredColumn,
14
- setCurrentHoveredColumn,
15
- table,
16
- }) => {
10
+ export const MRT_TableHead: FC<Props> = ({ table }) => {
17
11
  const {
18
12
  getHeaderGroups,
19
13
  options: { muiTableHeadProps },
@@ -28,8 +22,6 @@ export const MRT_TableHead: FC<Props> = ({
28
22
  <TableHead {...tableHeadProps}>
29
23
  {getHeaderGroups().map((headerGroup) => (
30
24
  <MRT_TableHeadRow
31
- currentHoveredColumn={currentHoveredColumn}
32
- setCurrentHoveredColumn={setCurrentHoveredColumn}
33
25
  headerGroup={headerGroup as any}
34
26
  key={headerGroup.id}
35
27
  table={table}
@@ -1,34 +1,21 @@
1
- import React, {
2
- Dispatch,
3
- DragEvent,
4
- FC,
5
- ReactNode,
6
- SetStateAction,
7
- useState,
8
- } from 'react';
9
- import { Box, TableCell, Theme, alpha, lighten } from '@mui/material';
1
+ import React, { DragEvent, FC, ReactNode } from 'react';
2
+ import { Box, TableCell, Theme, alpha, lighten, useTheme } from '@mui/material';
10
3
  import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
11
4
  import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
12
5
  import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
13
6
  import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
14
7
  import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
15
8
  import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
16
- import type { MRT_Column, MRT_Header, MRT_TableInstance } from '..';
17
9
  import { reorderColumn } from '../utils';
10
+ import type { MRT_Header, MRT_TableInstance } from '..';
18
11
 
19
12
  interface Props {
20
- currentHoveredColumn: MRT_Column | null;
21
- setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
22
13
  header: MRT_Header;
23
14
  table: MRT_TableInstance;
24
15
  }
25
16
 
26
- export const MRT_TableHeadCell: FC<Props> = ({
27
- currentHoveredColumn,
28
- setCurrentHoveredColumn,
29
- header,
30
- table,
31
- }) => {
17
+ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
18
+ const theme = useTheme();
32
19
  const {
33
20
  getState,
34
21
  options: {
@@ -40,8 +27,11 @@ export const MRT_TableHeadCell: FC<Props> = ({
40
27
  muiTableHeadCellProps,
41
28
  },
42
29
  setColumnOrder,
30
+ setCurrentDraggingColumn,
31
+ setCurrentHoveredColumn,
43
32
  } = table;
44
- const { columnOrder, density } = getState();
33
+ const { columnOrder, density, currentDraggingColumn, currentHoveredColumn } =
34
+ getState();
45
35
  const { column } = header;
46
36
  const { columnDef } = column;
47
37
  const { columnDefType } = columnDef;
@@ -87,25 +77,43 @@ export const MRT_TableHeadCell: FC<Props> = ({
87
77
 
88
78
  const tableHeadCellRef = React.useRef<HTMLElement>(null);
89
79
 
90
- const [isDragging, setIsDragging] = useState(false);
91
-
92
80
  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
93
- setIsDragging(true);
81
+ setCurrentDraggingColumn(column);
94
82
  e.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
95
83
  };
96
84
 
97
85
  const handleDragEnd = (_e: DragEvent<HTMLButtonElement>) => {
98
- setIsDragging(false);
86
+ setCurrentDraggingColumn(null);
99
87
  setCurrentHoveredColumn(null);
100
- if (currentHoveredColumn) {
88
+ if (
89
+ currentHoveredColumn &&
90
+ currentHoveredColumn?.id !== currentDraggingColumn?.id
91
+ ) {
101
92
  setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
102
93
  }
103
94
  };
104
95
 
105
96
  const handleDragEnter = (_e: DragEvent) => {
106
- setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
97
+ if (currentDraggingColumn) {
98
+ setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
99
+ }
107
100
  };
108
101
 
102
+ const draggingBorder =
103
+ currentDraggingColumn?.id === column.id
104
+ ? `1px dashed ${theme.palette.divider}`
105
+ : currentHoveredColumn?.id === column.id
106
+ ? `2px dashed ${theme.palette.primary.main}`
107
+ : undefined;
108
+
109
+ const draggingBorders = draggingBorder
110
+ ? {
111
+ borderLeft: draggingBorder,
112
+ borderRight: draggingBorder,
113
+ borderTop: draggingBorder,
114
+ }
115
+ : undefined;
116
+
109
117
  return (
110
118
  <TableCell
111
119
  align={columnDefType === 'group' ? 'center' : 'left'}
@@ -119,11 +127,6 @@ export const MRT_TableHeadCell: FC<Props> = ({
119
127
  ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
120
128
  : 'inherit',
121
129
  backgroundImage: 'inherit',
122
- border: isDragging
123
- ? `2px dashed ${theme.palette.divider}`
124
- : currentHoveredColumn?.id === column.id
125
- ? `2px dashed ${theme.palette.primary.main}`
126
- : undefined,
127
130
  boxShadow: getIsLastLeftPinnedColumn()
128
131
  ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
129
132
  : getIsFirstRightPinnedColumn()
@@ -135,7 +138,11 @@ export const MRT_TableHeadCell: FC<Props> = ({
135
138
  ? `${column.getStart('left')}px`
136
139
  : undefined,
137
140
  overflow: 'visible',
138
- opacity: isDragging ? 0.5 : 1,
141
+ opacity:
142
+ currentDraggingColumn?.id === column.id ||
143
+ currentHoveredColumn?.id === column.id
144
+ ? 0.5
145
+ : 1,
139
146
  p:
140
147
  density === 'compact'
141
148
  ? columnDefType === 'display'
@@ -166,12 +173,14 @@ export const MRT_TableHeadCell: FC<Props> = ({
166
173
  transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
167
174
  userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
168
175
  verticalAlign: 'text-top',
169
- zIndex: column.getIsResizing()
170
- ? 3
171
- : column.getIsPinned() && columnDefType !== 'group'
172
- ? 2
173
- : 1,
176
+ zIndex:
177
+ column.getIsResizing() || currentDraggingColumn?.id === column.id
178
+ ? 3
179
+ : column.getIsPinned() && columnDefType !== 'group'
180
+ ? 2
181
+ : 1,
174
182
  ...(tableCellProps?.sx as any),
183
+ ...draggingBorders,
175
184
  maxWidth: `min(${column.getSize()}px, fit-content)`,
176
185
  minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
177
186
  width: header.getSize(),
@@ -186,7 +195,6 @@ export const MRT_TableHeadCell: FC<Props> = ({
186
195
  display: 'flex',
187
196
  justifyContent:
188
197
  columnDefType === 'group' ? 'center' : 'space-between',
189
- opacity: isDragging ? 0.5 : 1,
190
198
  position: 'relative',
191
199
  width: '100%',
192
200
  }}
@@ -1,26 +1,14 @@
1
- import React, { Dispatch, FC, SetStateAction } from 'react';
1
+ import React, { FC } from 'react';
2
2
  import { alpha, lighten, TableRow } from '@mui/material';
3
3
  import { MRT_TableHeadCell } from './MRT_TableHeadCell';
4
- import type {
5
- MRT_Column,
6
- MRT_Header,
7
- MRT_HeaderGroup,
8
- MRT_TableInstance,
9
- } from '..';
4
+ import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
10
5
 
11
6
  interface Props {
12
- currentHoveredColumn: MRT_Column | null;
13
- setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
14
7
  headerGroup: MRT_HeaderGroup;
15
8
  table: MRT_TableInstance;
16
9
  }
17
10
 
18
- export const MRT_TableHeadRow: FC<Props> = ({
19
- currentHoveredColumn,
20
- setCurrentHoveredColumn,
21
- headerGroup,
22
- table,
23
- }) => {
11
+ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, table }) => {
24
12
  const {
25
13
  options: { muiTableHeadRowProps },
26
14
  } = table;
@@ -41,8 +29,6 @@ export const MRT_TableHeadRow: FC<Props> = ({
41
29
  >
42
30
  {headerGroup.headers.map((header: MRT_Header, index) => (
43
31
  <MRT_TableHeadCell
44
- currentHoveredColumn={currentHoveredColumn}
45
- setCurrentHoveredColumn={setCurrentHoveredColumn}
46
32
  header={header}
47
33
  key={header.id || index}
48
34
  table={table}
@@ -29,7 +29,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
29
29
  const { column, row } = cell;
30
30
  const { columnDef } = column;
31
31
 
32
- const [value, setValue] = useState(cell.getValue());
32
+ const [value, setValue] = useState(cell.getValue<string>());
33
33
 
34
34
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
35
35
  setValue(event.target.value);
@@ -1,9 +1,9 @@
1
- import React, { FC, RefObject, useState } from 'react';
1
+ import React, { FC, RefObject } from 'react';
2
2
  import { Table } from '@mui/material';
3
3
  import { MRT_TableHead } from '../head/MRT_TableHead';
4
4
  import { MRT_TableBody } from '../body/MRT_TableBody';
5
5
  import { MRT_TableFooter } from '../footer/MRT_TableFooter';
6
- import { MRT_Column, MRT_TableInstance } from '..';
6
+ import { MRT_TableInstance } from '..';
7
7
 
8
8
  interface Props {
9
9
  tableContainerRef: RefObject<HTMLDivElement>;
@@ -29,9 +29,6 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, table }) => {
29
29
  ? muiTableProps({ table })
30
30
  : muiTableProps;
31
31
 
32
- const [currentHoveredColumn, setCurrentHoveredColumn] =
33
- useState<MRT_Column | null>(null);
34
-
35
32
  return (
36
33
  <Table
37
34
  stickyHeader={
@@ -44,18 +41,8 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, table }) => {
44
41
  ...tableProps?.sx,
45
42
  }}
46
43
  >
47
- {enableTableHead && (
48
- <MRT_TableHead
49
- currentHoveredColumn={currentHoveredColumn}
50
- setCurrentHoveredColumn={setCurrentHoveredColumn}
51
- table={table}
52
- />
53
- )}
54
- <MRT_TableBody
55
- setCurrentHoveredColumn={setCurrentHoveredColumn}
56
- tableContainerRef={tableContainerRef}
57
- table={table}
58
- />
44
+ {enableTableHead && <MRT_TableHead table={table} />}
45
+ <MRT_TableBody tableContainerRef={tableContainerRef} table={table} />
59
46
  {enableTableFooter && <MRT_TableFooter table={table} />}
60
47
  </Table>
61
48
  );