material-react-table 2.8.0 → 2.9.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.ts +17 -9
- package/dist/index.esm.js +260 -218
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +259 -216
- package/dist/index.js.map +1 -1
- package/locales/ja/index.esm.js +4 -4
- package/locales/ja/index.js +4 -4
- package/package.json +6 -4
- package/src/components/body/MRT_TableBody.tsx +2 -3
- package/src/components/body/MRT_TableBodyCell.tsx +10 -3
- package/src/components/body/MRT_TableBodyRow.tsx +77 -57
- package/src/components/footer/MRT_TableFooterCell.tsx +10 -1
- package/src/components/footer/MRT_TableFooterRow.tsx +19 -8
- package/src/components/head/MRT_TableHeadCell.tsx +10 -0
- package/src/components/head/MRT_TableHeadCellResizeHandle.tsx +4 -2
- package/src/components/head/MRT_TableHeadRow.tsx +19 -8
- package/src/components/inputs/MRT_EditCellTextField.tsx +4 -3
- package/src/components/inputs/MRT_SelectCheckbox.tsx +4 -6
- package/src/components/table/MRT_Table.tsx +4 -0
- package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx +1 -1
- package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx +1 -0
- package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx +1 -0
- package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx +4 -2
- package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx +1 -0
- package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx +1 -0
- package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx +2 -1
- package/src/hooks/useMRT_ColumnVirtualizer.ts +77 -76
- package/src/hooks/useMRT_RowVirtualizer.ts +30 -32
- package/src/hooks/useMRT_TableInstance.ts +1 -42
- package/src/hooks/useMRT_TableOptions.ts +60 -17
- package/src/locales/ja.ts +4 -4
- package/src/types.ts +3 -0
- package/src/utils/displayColumn.utils.ts +2 -2
- package/src/utils/row.utils.ts +25 -1
- package/src/utils/style.utils.ts +70 -30
- package/src/utils.ts +0 -0
package/locales/ja/index.esm.js
CHANGED
@@ -75,10 +75,10 @@ const MRT_Localization_JA = {
|
|
75
75
|
showHideColumns: '列の表示状態',
|
76
76
|
showHideFilters: '検索バーを表示',
|
77
77
|
showHideSearch: '検索',
|
78
|
-
sortByColumnAsc: '{column}
|
79
|
-
sortByColumnDesc: '{column}
|
80
|
-
sortedByColumnAsc: '{column}
|
81
|
-
sortedByColumnDesc: '{column}
|
78
|
+
sortByColumnAsc: '{column}を昇順で並べ替え',
|
79
|
+
sortByColumnDesc: '{column}を降順で並べ替え',
|
80
|
+
sortedByColumnAsc: '{column}を昇順で並べ替え',
|
81
|
+
sortedByColumnDesc: '{column}を降順で並べ替え',
|
82
82
|
thenBy: 'さらに',
|
83
83
|
toggleDensity: 'テーブルの高さを変更',
|
84
84
|
toggleFullScreen: 'フルスクリーン切り替え',
|
package/locales/ja/index.js
CHANGED
@@ -79,10 +79,10 @@ const MRT_Localization_JA = {
|
|
79
79
|
showHideColumns: '列の表示状態',
|
80
80
|
showHideFilters: '検索バーを表示',
|
81
81
|
showHideSearch: '検索',
|
82
|
-
sortByColumnAsc: '{column}
|
83
|
-
sortByColumnDesc: '{column}
|
84
|
-
sortedByColumnAsc: '{column}
|
85
|
-
sortedByColumnDesc: '{column}
|
82
|
+
sortByColumnAsc: '{column}を昇順で並べ替え',
|
83
|
+
sortByColumnDesc: '{column}を降順で並べ替え',
|
84
|
+
sortedByColumnAsc: '{column}を昇順で並べ替え',
|
85
|
+
sortedByColumnDesc: '{column}を降順で並べ替え',
|
86
86
|
thenBy: 'さらに',
|
87
87
|
toggleDensity: 'テーブルの高さを変更',
|
88
88
|
toggleFullScreen: 'フルスクリーン切り替え',
|
package/package.json
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
{
|
2
|
-
"version": "2.
|
2
|
+
"version": "2.9.1",
|
3
3
|
"license": "MIT",
|
4
4
|
"name": "material-react-table",
|
5
5
|
"description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
|
@@ -50,8 +50,8 @@
|
|
50
50
|
"build-locales": "pnpm lib:build-locales",
|
51
51
|
"build-lib": "pnpm lib:build-lib",
|
52
52
|
"dev": "pnpm lib:dev",
|
53
|
-
"lib:build": "
|
54
|
-
"lib:build-locales": "
|
53
|
+
"lib:build": "pnpm build-lib && pnpm build-locales",
|
54
|
+
"lib:build-locales": "node build-locales.mjs",
|
55
55
|
"lib:build-lib": "rm -rf dist && rollup -c rollup.config.mjs && size-limit",
|
56
56
|
"lib:dev": "rollup -c rollup.config.mjs --watch",
|
57
57
|
"lint": "eslint .",
|
@@ -94,6 +94,8 @@
|
|
94
94
|
"react-dom": "^18.2.0",
|
95
95
|
"react-is": "^18.2.0",
|
96
96
|
"rollup": "^2.79.1",
|
97
|
+
"rollup-plugin-copy": "^3.5.0",
|
98
|
+
"rollup-plugin-delete": "^2.0.0",
|
97
99
|
"rollup-plugin-dts": "^6.1.0",
|
98
100
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
99
101
|
"size-limit": "^11.0.2",
|
@@ -118,4 +120,4 @@
|
|
118
120
|
"@tanstack/react-virtual": "3.0.2",
|
119
121
|
"highlight-words": "1.2.2"
|
120
122
|
}
|
121
|
-
}
|
123
|
+
}
|
@@ -151,6 +151,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
|
|
151
151
|
) : (
|
152
152
|
<>
|
153
153
|
{(virtualRows ?? rows).map((rowOrVirtualRow, staticRowIndex) => {
|
154
|
+
let row = rowOrVirtualRow as MRT_Row<TData>;
|
154
155
|
if (rowVirtualizer) {
|
155
156
|
if (renderDetailPanel) {
|
156
157
|
if (rowOrVirtualRow.index % 2 === 1) {
|
@@ -161,10 +162,8 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
|
|
161
162
|
} else {
|
162
163
|
staticRowIndex = rowOrVirtualRow.index;
|
163
164
|
}
|
165
|
+
row = rows[staticRowIndex];
|
164
166
|
}
|
165
|
-
const row = rowVirtualizer
|
166
|
-
? rows[staticRowIndex]
|
167
|
-
: (rowOrVirtualRow as MRT_Row<TData>);
|
168
167
|
const props = {
|
169
168
|
...commonRowProps,
|
170
169
|
pinnedRowIds,
|
@@ -27,9 +27,9 @@ interface Props<TData extends MRT_RowData> extends TableCellProps {
|
|
27
27
|
measureElement?: (element: HTMLTableCellElement) => void;
|
28
28
|
numRows?: number;
|
29
29
|
rowRef: RefObject<HTMLTableRowElement>;
|
30
|
+
staticColumnIndex?: number;
|
30
31
|
staticRowIndex: number;
|
31
32
|
table: MRT_TableInstance<TData>;
|
32
|
-
virtualColumnIndex?: number;
|
33
33
|
}
|
34
34
|
|
35
35
|
export const MRT_TableBodyCell = <TData extends MRT_RowData>({
|
@@ -37,9 +37,9 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
|
|
37
37
|
measureElement,
|
38
38
|
numRows,
|
39
39
|
rowRef,
|
40
|
+
staticColumnIndex,
|
40
41
|
staticRowIndex,
|
41
42
|
table,
|
42
|
-
virtualColumnIndex,
|
43
43
|
...rest
|
44
44
|
}: Props<TData>) => {
|
45
45
|
const theme = useTheme();
|
@@ -52,6 +52,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
|
|
52
52
|
editDisplayMode,
|
53
53
|
enableClickToCopy,
|
54
54
|
enableColumnOrdering,
|
55
|
+
enableColumnPinning,
|
55
56
|
enableEditing,
|
56
57
|
enableGrouping,
|
57
58
|
layoutMode,
|
@@ -162,6 +163,11 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
|
|
162
163
|
staticRowIndex,
|
163
164
|
]);
|
164
165
|
|
166
|
+
const isColumnPinned =
|
167
|
+
enableColumnPinning &&
|
168
|
+
columnDef.columnDefType !== 'group' &&
|
169
|
+
column.getIsPinned();
|
170
|
+
|
165
171
|
const isEditable =
|
166
172
|
!cell.getIsPlaceholder() &&
|
167
173
|
parseFromValuesOrFunc(enableEditing, row) &&
|
@@ -212,7 +218,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
|
|
212
218
|
return (
|
213
219
|
<TableCell
|
214
220
|
align={theme.direction === 'rtl' ? 'right' : 'left'}
|
215
|
-
data-index={
|
221
|
+
data-index={staticColumnIndex}
|
222
|
+
data-pinned={!!isColumnPinned || undefined}
|
216
223
|
ref={(node: HTMLTableCellElement) => {
|
217
224
|
if (node) {
|
218
225
|
measureElement?.(node);
|
@@ -17,8 +17,14 @@ import {
|
|
17
17
|
type MRT_RowData,
|
18
18
|
type MRT_RowVirtualizer,
|
19
19
|
type MRT_TableInstance,
|
20
|
+
type MRT_VirtualItem,
|
20
21
|
} from '../../types';
|
21
|
-
import {
|
22
|
+
import { getIsRowSelected } from '../../utils/row.utils';
|
23
|
+
import {
|
24
|
+
getCommonPinnedCellStyles,
|
25
|
+
getMRTTheme,
|
26
|
+
pinnedBeforeAfterStyles,
|
27
|
+
} from '../../utils/style.utils';
|
22
28
|
import { parseFromValuesOrFunc } from '../../utils/utils';
|
23
29
|
|
24
30
|
interface Props<TData extends MRT_RowData> {
|
@@ -71,10 +77,13 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
|
|
71
77
|
rowPinning,
|
72
78
|
} = getState();
|
73
79
|
|
80
|
+
const visibleCells = row.getVisibleCells();
|
81
|
+
|
74
82
|
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
|
75
83
|
columnVirtualizer ?? {};
|
76
84
|
|
77
|
-
const
|
85
|
+
const isRowSelected = getIsRowSelected({ row, table });
|
86
|
+
const isRowPinned = enableRowPinning && row.getIsPinned();
|
78
87
|
const isDraggingRow = draggingRow?.id === row.id;
|
79
88
|
const isHoveredRow = hoveredRow?.id === row.id;
|
80
89
|
|
@@ -130,16 +139,27 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
|
|
130
139
|
selectedRowBackgroundColor,
|
131
140
|
} = getMRTTheme(table, theme);
|
132
141
|
|
142
|
+
const cellHighlightColor = isRowSelected
|
143
|
+
? selectedRowBackgroundColor
|
144
|
+
: isRowPinned
|
145
|
+
? pinnedRowBackgroundColor
|
146
|
+
: undefined;
|
147
|
+
|
148
|
+
const cellHighlightColorHover =
|
149
|
+
tableRowProps?.hover !== false
|
150
|
+
? isRowSelected
|
151
|
+
? cellHighlightColor
|
152
|
+
: theme.palette.mode === 'dark'
|
153
|
+
? `${lighten(baseBackgroundColor, 0.3)}`
|
154
|
+
: `${darken(baseBackgroundColor, 0.3)}`
|
155
|
+
: undefined;
|
156
|
+
|
133
157
|
return (
|
134
158
|
<>
|
135
159
|
<TableRow
|
136
160
|
data-index={renderDetailPanel ? staticRowIndex * 2 : staticRowIndex}
|
137
|
-
data-pinned={!!
|
138
|
-
data-selected={
|
139
|
-
row?.getIsSelected() ||
|
140
|
-
(row?.getIsAllSubRowsSelected() && row.getCanSelectSubRows()) ||
|
141
|
-
undefined
|
142
|
-
}
|
161
|
+
data-pinned={!!isRowPinned || undefined}
|
162
|
+
data-selected={isRowSelected || undefined}
|
143
163
|
onDragEnter={handleDragEnter}
|
144
164
|
ref={(node: HTMLTableRowElement) => {
|
145
165
|
if (node) {
|
@@ -147,7 +167,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
|
|
147
167
|
rowVirtualizer?.measureElement(node);
|
148
168
|
}
|
149
169
|
}}
|
150
|
-
selected={
|
170
|
+
selected={isRowSelected}
|
151
171
|
{...tableRowProps}
|
152
172
|
style={{
|
153
173
|
transform: virtualRow
|
@@ -157,18 +177,16 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
|
|
157
177
|
}}
|
158
178
|
sx={(theme: Theme) => ({
|
159
179
|
'&:hover td': {
|
160
|
-
|
161
|
-
|
162
|
-
?
|
163
|
-
? `${alpha(selectedRowBackgroundColor, 0.3)}`
|
164
|
-
: theme.palette.mode === 'dark'
|
165
|
-
? `${lighten(baseBackgroundColor, 0.05)}`
|
166
|
-
: `${darken(baseBackgroundColor, 0.05)}`
|
180
|
+
'&:after': {
|
181
|
+
backgroundColor: cellHighlightColorHover
|
182
|
+
? alpha(cellHighlightColorHover, 0.3)
|
167
183
|
: undefined,
|
184
|
+
...pinnedBeforeAfterStyles,
|
185
|
+
},
|
168
186
|
},
|
169
187
|
backgroundColor: `${baseBackgroundColor} !important`,
|
170
188
|
bottom:
|
171
|
-
!virtualRow && bottomPinnedIndex !== undefined &&
|
189
|
+
!virtualRow && bottomPinnedIndex !== undefined && isRowPinned
|
172
190
|
? `${
|
173
191
|
bottomPinnedIndex * rowHeight +
|
174
192
|
(enableStickyFooter ? tableFooterHeight - 1 : 0)
|
@@ -176,22 +194,22 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
|
|
176
194
|
: undefined,
|
177
195
|
boxSizing: 'border-box',
|
178
196
|
display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
|
179
|
-
opacity:
|
197
|
+
opacity: isRowPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1,
|
180
198
|
position: virtualRow
|
181
199
|
? 'absolute'
|
182
|
-
: rowPinningDisplayMode?.includes('sticky') &&
|
200
|
+
: rowPinningDisplayMode?.includes('sticky') && isRowPinned
|
183
201
|
? 'sticky'
|
184
202
|
: undefined,
|
185
203
|
td: {
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
204
|
+
'&:after': {
|
205
|
+
backgroundColor: cellHighlightColor,
|
206
|
+
...pinnedBeforeAfterStyles,
|
207
|
+
},
|
208
|
+
...getCommonPinnedCellStyles({ table, theme }),
|
191
209
|
},
|
192
210
|
top: virtualRow
|
193
211
|
? 0
|
194
|
-
: topPinnedIndex !== undefined &&
|
212
|
+
: topPinnedIndex !== undefined && isRowPinned
|
195
213
|
? `${
|
196
214
|
topPinnedIndex * rowHeight +
|
197
215
|
(enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
|
@@ -200,7 +218,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
|
|
200
218
|
transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
|
201
219
|
width: '100%',
|
202
220
|
zIndex:
|
203
|
-
rowPinningDisplayMode?.includes('sticky') &&
|
221
|
+
rowPinningDisplayMode?.includes('sticky') && isRowPinned
|
204
222
|
? 2
|
205
223
|
: undefined,
|
206
224
|
...(sx as any),
|
@@ -209,37 +227,39 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
|
|
209
227
|
{virtualPaddingLeft ? (
|
210
228
|
<td style={{ display: 'flex', width: virtualPaddingLeft }} />
|
211
229
|
) : null}
|
212
|
-
{(virtualColumns ??
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
230
|
+
{(virtualColumns ?? visibleCells).map(
|
231
|
+
(cellOrVirtualCell, staticColumnIndex) => {
|
232
|
+
let cell = cellOrVirtualCell as MRT_Cell<TData>;
|
233
|
+
if (columnVirtualizer) {
|
234
|
+
staticColumnIndex = (cellOrVirtualCell as MRT_VirtualItem).index;
|
235
|
+
cell = visibleCells[staticColumnIndex];
|
236
|
+
}
|
237
|
+
const props = {
|
238
|
+
cell,
|
239
|
+
measureElement:
|
240
|
+
!isDraggingRow && !isHoveredRow
|
241
|
+
? columnVirtualizer?.measureElement
|
242
|
+
: undefined,
|
243
|
+
numRows,
|
244
|
+
rowRef,
|
245
|
+
staticColumnIndex,
|
246
|
+
staticRowIndex,
|
247
|
+
table,
|
248
|
+
};
|
249
|
+
return cell ? (
|
250
|
+
memoMode === 'cells' &&
|
251
|
+
cell.column.columnDef.columnDefType === 'data' &&
|
252
|
+
!draggingColumn &&
|
253
|
+
!draggingRow &&
|
254
|
+
editingCell?.id !== cell.id &&
|
255
|
+
editingRow?.id !== row.id ? (
|
256
|
+
<Memo_MRT_TableBodyCell key={cell.id} {...props} />
|
257
|
+
) : (
|
258
|
+
<MRT_TableBodyCell key={cell.id} {...props} />
|
259
|
+
)
|
260
|
+
) : null;
|
261
|
+
},
|
262
|
+
)}
|
243
263
|
{virtualPaddingRight ? (
|
244
264
|
<td style={{ display: 'flex', width: virtualPaddingRight }} />
|
245
265
|
) : null}
|
@@ -10,24 +10,31 @@ import { parseFromValuesOrFunc } from '../../utils/utils';
|
|
10
10
|
|
11
11
|
interface Props<TData extends MRT_RowData> extends TableCellProps {
|
12
12
|
footer: MRT_Header<TData>;
|
13
|
+
staticColumnIndex?: number;
|
13
14
|
table: MRT_TableInstance<TData>;
|
14
15
|
}
|
15
16
|
|
16
17
|
export const MRT_TableFooterCell = <TData extends MRT_RowData>({
|
17
18
|
footer,
|
19
|
+
staticColumnIndex,
|
18
20
|
table,
|
19
21
|
...rest
|
20
22
|
}: Props<TData>) => {
|
21
23
|
const theme = useTheme();
|
22
24
|
const {
|
23
25
|
getState,
|
24
|
-
options: { layoutMode, muiTableFooterCellProps },
|
26
|
+
options: { enableColumnPinning, layoutMode, muiTableFooterCellProps },
|
25
27
|
} = table;
|
26
28
|
const { density } = getState();
|
27
29
|
const { column } = footer;
|
28
30
|
const { columnDef } = column;
|
29
31
|
const { columnDefType } = columnDef;
|
30
32
|
|
33
|
+
const isColumnPinned =
|
34
|
+
enableColumnPinning &&
|
35
|
+
columnDef.columnDefType !== 'group' &&
|
36
|
+
column.getIsPinned();
|
37
|
+
|
31
38
|
const args = { column, table };
|
32
39
|
const tableCellProps = {
|
33
40
|
...parseFromValuesOrFunc(muiTableFooterCellProps, args),
|
@@ -45,6 +52,8 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
|
|
45
52
|
: 'left'
|
46
53
|
}
|
47
54
|
colSpan={footer.colSpan}
|
55
|
+
data-index={staticColumnIndex}
|
56
|
+
data-pinned={!!isColumnPinned || undefined}
|
48
57
|
variant="footer"
|
49
58
|
{...tableCellProps}
|
50
59
|
sx={(theme) => ({
|
@@ -6,6 +6,7 @@ import {
|
|
6
6
|
type MRT_HeaderGroup,
|
7
7
|
type MRT_RowData,
|
8
8
|
type MRT_TableInstance,
|
9
|
+
type MRT_VirtualItem,
|
9
10
|
} from '../../types';
|
10
11
|
import { getMRTTheme } from '../../utils/style.utils';
|
11
12
|
import { parseFromValuesOrFunc } from '../../utils/utils';
|
@@ -61,15 +62,25 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
|
|
61
62
|
{virtualPaddingLeft ? (
|
62
63
|
<th style={{ display: 'flex', width: virtualPaddingLeft }} />
|
63
64
|
) : null}
|
64
|
-
{(virtualColumns ?? footerGroup.headers).map(
|
65
|
-
|
66
|
-
|
67
|
-
|
65
|
+
{(virtualColumns ?? footerGroup.headers).map(
|
66
|
+
(footerOrVirtualFooter, staticColumnIndex) => {
|
67
|
+
let footer = footerOrVirtualFooter as MRT_Header<TData>;
|
68
|
+
if (columnVirtualizer) {
|
69
|
+
staticColumnIndex = (footerOrVirtualFooter as MRT_VirtualItem)
|
70
|
+
.index;
|
71
|
+
footer = footerGroup.headers[staticColumnIndex];
|
72
|
+
}
|
68
73
|
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
74
|
+
return footer ? (
|
75
|
+
<MRT_TableFooterCell
|
76
|
+
footer={footer}
|
77
|
+
key={footer.id}
|
78
|
+
staticColumnIndex={staticColumnIndex}
|
79
|
+
table={table}
|
80
|
+
/>
|
81
|
+
) : null;
|
82
|
+
},
|
83
|
+
)}
|
73
84
|
{virtualPaddingRight ? (
|
74
85
|
<th style={{ display: 'flex', width: virtualPaddingRight }} />
|
75
86
|
) : null}
|
@@ -19,11 +19,13 @@ import { parseFromValuesOrFunc } from '../../utils/utils';
|
|
19
19
|
|
20
20
|
interface Props<TData extends MRT_RowData> extends TableCellProps {
|
21
21
|
header: MRT_Header<TData>;
|
22
|
+
staticColumnIndex?: number;
|
22
23
|
table: MRT_TableInstance<TData>;
|
23
24
|
}
|
24
25
|
|
25
26
|
export const MRT_TableHeadCell = <TData extends MRT_RowData>({
|
26
27
|
header,
|
28
|
+
staticColumnIndex,
|
27
29
|
table,
|
28
30
|
...rest
|
29
31
|
}: Props<TData>) => {
|
@@ -37,6 +39,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
|
|
37
39
|
enableColumnActions,
|
38
40
|
enableColumnDragging,
|
39
41
|
enableColumnOrdering,
|
42
|
+
enableColumnPinning,
|
40
43
|
enableGrouping,
|
41
44
|
enableMultiSort,
|
42
45
|
layoutMode,
|
@@ -68,6 +71,11 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
|
|
68
71
|
|
69
72
|
const { draggingBorderColor } = getMRTTheme(table, theme);
|
70
73
|
|
74
|
+
const isColumnPinned =
|
75
|
+
enableColumnPinning &&
|
76
|
+
columnDef.columnDefType !== 'group' &&
|
77
|
+
column.getIsPinned();
|
78
|
+
|
71
79
|
const showColumnActions =
|
72
80
|
(enableColumnActions || columnDef.enableColumnActions) &&
|
73
81
|
columnDef.enableColumnActions !== false;
|
@@ -147,6 +155,8 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
|
|
147
155
|
: 'left'
|
148
156
|
}
|
149
157
|
colSpan={header.colSpan}
|
158
|
+
data-index={staticColumnIndex}
|
159
|
+
data-pinned={!!isColumnPinned || undefined}
|
150
160
|
onDragEnter={handleDragEnter}
|
151
161
|
ref={(node: HTMLTableCellElement) => {
|
152
162
|
if (node) {
|
@@ -25,6 +25,8 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
|
|
25
25
|
const { density } = getState();
|
26
26
|
const { column } = header;
|
27
27
|
|
28
|
+
const handler = header.getResizeHandler();
|
29
|
+
|
28
30
|
const mx =
|
29
31
|
density === 'compact'
|
30
32
|
? '-8px'
|
@@ -44,8 +46,8 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
|
|
44
46
|
}));
|
45
47
|
column.resetSize();
|
46
48
|
}}
|
47
|
-
onMouseDown={
|
48
|
-
onTouchStart={
|
49
|
+
onMouseDown={handler}
|
50
|
+
onTouchStart={handler}
|
49
51
|
style={{
|
50
52
|
transform:
|
51
53
|
column.getIsResizing() && columnResizeMode === 'onEnd'
|
@@ -7,6 +7,7 @@ import {
|
|
7
7
|
type MRT_HeaderGroup,
|
8
8
|
type MRT_RowData,
|
9
9
|
type MRT_TableInstance,
|
10
|
+
type MRT_VirtualItem,
|
10
11
|
} from '../../types';
|
11
12
|
import { getMRTTheme } from '../../utils/style.utils';
|
12
13
|
import { parseFromValuesOrFunc } from '../../utils/utils';
|
@@ -52,15 +53,25 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
|
|
52
53
|
{virtualPaddingLeft ? (
|
53
54
|
<th style={{ display: 'flex', width: virtualPaddingLeft }} />
|
54
55
|
) : null}
|
55
|
-
{(virtualColumns ?? headerGroup.headers).map(
|
56
|
-
|
57
|
-
|
58
|
-
|
56
|
+
{(virtualColumns ?? headerGroup.headers).map(
|
57
|
+
(headerOrVirtualHeader, staticColumnIndex) => {
|
58
|
+
let header = headerOrVirtualHeader as MRT_Header<TData>;
|
59
|
+
if (columnVirtualizer) {
|
60
|
+
staticColumnIndex = (headerOrVirtualHeader as MRT_VirtualItem)
|
61
|
+
.index;
|
62
|
+
header = headerGroup.headers[staticColumnIndex];
|
63
|
+
}
|
59
64
|
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
65
|
+
return header ? (
|
66
|
+
<MRT_TableHeadCell
|
67
|
+
header={header}
|
68
|
+
key={header.id}
|
69
|
+
staticColumnIndex={staticColumnIndex}
|
70
|
+
table={table}
|
71
|
+
/>
|
72
|
+
) : null;
|
73
|
+
},
|
74
|
+
)}
|
64
75
|
{virtualPaddingRight ? (
|
65
76
|
<th style={{ display: 'flex', width: virtualPaddingRight }} />
|
66
77
|
) : null}
|
@@ -35,11 +35,10 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
|
|
35
35
|
const { column, row } = cell;
|
36
36
|
const { columnDef } = column;
|
37
37
|
const { creatingRow, editingRow } = getState();
|
38
|
-
const { editSelectOptions } = columnDef;
|
38
|
+
const { editSelectOptions, editVariant } = columnDef;
|
39
39
|
|
40
40
|
const isCreating = creatingRow?.id === row.id;
|
41
41
|
const isEditing = editingRow?.id === row.id;
|
42
|
-
const isSelectEdit = columnDef.editVariant === 'select';
|
43
42
|
|
44
43
|
const [value, setValue] = useState(() => cell.getValue<string>());
|
45
44
|
|
@@ -66,6 +65,8 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
|
|
66
65
|
table,
|
67
66
|
});
|
68
67
|
|
68
|
+
const isSelectEdit = editVariant === 'select' || textFieldProps?.select;
|
69
|
+
|
69
70
|
const saveInputValueToRowCache = (newValue: string) => {
|
70
71
|
//@ts-ignore
|
71
72
|
row._valuesCache[column.id] = newValue;
|
@@ -79,7 +80,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
|
|
79
80
|
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
|
80
81
|
textFieldProps.onChange?.(event);
|
81
82
|
setValue(event.target.value);
|
82
|
-
if (
|
83
|
+
if (isSelectEdit) {
|
83
84
|
saveInputValueToRowCache(event.target.value);
|
84
85
|
}
|
85
86
|
};
|
@@ -8,19 +8,18 @@ import {
|
|
8
8
|
type MRT_RowData,
|
9
9
|
type MRT_TableInstance,
|
10
10
|
} from '../../types';
|
11
|
+
import { getIsRowSelected } from '../../utils/row.utils';
|
11
12
|
import { getCommonTooltipProps } from '../../utils/style.utils';
|
12
13
|
import { parseFromValuesOrFunc } from '../../utils/utils';
|
13
14
|
|
14
15
|
interface Props<TData extends MRT_RowData> extends CheckboxProps {
|
15
16
|
row?: MRT_Row<TData>;
|
16
|
-
selectAll?: boolean;
|
17
17
|
staticRowIndex?: number;
|
18
18
|
table: MRT_TableInstance<TData>;
|
19
19
|
}
|
20
20
|
|
21
21
|
export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
|
22
22
|
row,
|
23
|
-
selectAll,
|
24
23
|
staticRowIndex,
|
25
24
|
table,
|
26
25
|
...rest
|
@@ -39,6 +38,8 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
|
|
39
38
|
} = table;
|
40
39
|
const { density, isLoading } = getState();
|
41
40
|
|
41
|
+
const selectAll = !row;
|
42
|
+
|
42
43
|
const checkboxProps = {
|
43
44
|
...(!row
|
44
45
|
? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
|
@@ -92,10 +93,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
|
|
92
93
|
'aria-label': selectAll
|
93
94
|
? localization.toggleSelectAll
|
94
95
|
: localization.toggleSelectRow,
|
95
|
-
checked: selectAll
|
96
|
-
? allRowsSelected
|
97
|
-
: row?.getIsSelected() ||
|
98
|
-
(row?.getIsAllSubRowsSelected() && row.getCanSelectSubRows()),
|
96
|
+
checked: selectAll ? allRowsSelected : getIsRowSelected({ row, table }),
|
99
97
|
disabled:
|
100
98
|
isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
|
101
99
|
inputProps: {
|
@@ -27,6 +27,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
|
|
27
27
|
layoutMode,
|
28
28
|
memoMode,
|
29
29
|
muiTableProps,
|
30
|
+
renderCaption,
|
30
31
|
},
|
31
32
|
} = table;
|
32
33
|
const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } =
|
@@ -37,6 +38,8 @@ export const MRT_Table = <TData extends MRT_RowData>({
|
|
37
38
|
...rest,
|
38
39
|
};
|
39
40
|
|
41
|
+
const Caption = parseFromValuesOrFunc(renderCaption, { table });
|
42
|
+
|
40
43
|
const columnSizeVars = useMemo(() => {
|
41
44
|
const headers = getFlatHeaders();
|
42
45
|
const colSizes: { [key: string]: number } = {};
|
@@ -67,6 +70,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
|
|
67
70
|
...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
|
68
71
|
})}
|
69
72
|
>
|
73
|
+
{!!Caption && <caption>{Caption}</caption>}
|
70
74
|
{enableTableHead && <MRT_TableHead {...commonTableGroupProps} />}
|
71
75
|
{memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
|
72
76
|
<Memo_MRT_TableBody {...commonTableGroupProps} />
|
@@ -139,7 +139,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
|
|
139
139
|
{enableRowSelection &&
|
140
140
|
enableSelectAll &&
|
141
141
|
positionToolbarAlertBanner === 'head-overlay' && (
|
142
|
-
<MRT_SelectCheckbox
|
142
|
+
<MRT_SelectCheckbox table={table} />
|
143
143
|
)}{' '}
|
144
144
|
{selectedAlert}
|
145
145
|
</Box>
|