material-react-table 0.18.0 → 0.19.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/MaterialReactTable.d.ts +169 -133
- package/dist/body/MRT_TableBody.d.ts +1 -1
- package/dist/body/MRT_TableBodyCell.d.ts +1 -1
- package/dist/body/MRT_TableBodyRow.d.ts +1 -1
- package/dist/body/MRT_TableDetailPanel.d.ts +1 -1
- package/dist/buttons/MRT_ColumnPinningButtons.d.ts +1 -1
- package/dist/buttons/MRT_CopyButton.d.ts +1 -1
- package/dist/buttons/MRT_EditActionButtons.d.ts +1 -1
- package/dist/buttons/MRT_ExpandAllButton.d.ts +1 -1
- package/dist/buttons/MRT_ExpandButton.d.ts +1 -1
- package/dist/buttons/MRT_FullScreenToggleButton.d.ts +1 -1
- package/dist/buttons/MRT_GrabHandleButton.d.ts +1 -1
- package/dist/buttons/MRT_ShowHideColumnsButton.d.ts +1 -1
- package/dist/buttons/MRT_ToggleDensePaddingButton.d.ts +1 -1
- package/dist/buttons/MRT_ToggleFiltersButton.d.ts +1 -1
- package/dist/buttons/MRT_ToggleGlobalFilterButton.d.ts +1 -1
- package/dist/buttons/MRT_ToggleRowActionMenuButton.d.ts +1 -1
- package/dist/filtersFns.d.ts +31 -23
- package/dist/footer/MRT_TableFooter.d.ts +1 -1
- package/dist/footer/MRT_TableFooterCell.d.ts +1 -1
- package/dist/footer/MRT_TableFooterRow.d.ts +1 -1
- package/dist/head/MRT_DraggableTableHeadCell.d.ts +1 -1
- package/dist/head/MRT_TableHead.d.ts +1 -1
- package/dist/head/MRT_TableHeadCell.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellColumnActionsButton.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellFilterContainer.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellFilterLabel.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellResizeHandle.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellSortLabel.d.ts +1 -1
- package/dist/head/MRT_TableHeadRow.d.ts +1 -1
- package/dist/inputs/MRT_EditCellTextField.d.ts +1 -1
- package/dist/inputs/MRT_FilterRangeFields.d.ts +1 -1
- package/dist/inputs/MRT_FilterTextField.d.ts +1 -1
- package/dist/inputs/MRT_GlobalFilterTextField.d.ts +1 -1
- package/dist/inputs/MRT_SelectCheckbox.d.ts +1 -1
- package/dist/material-react-table.cjs.development.js +760 -759
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +762 -761
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/menus/MRT_ColumnActionMenu.d.ts +1 -1
- package/dist/menus/MRT_FilterOptionMenu.d.ts +1 -1
- package/dist/menus/MRT_RowActionMenu.d.ts +1 -1
- package/dist/menus/MRT_ShowHideColumnsMenu.d.ts +1 -1
- package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts +1 -1
- package/dist/sortingFns.d.ts +10 -3
- package/dist/table/MRT_Table.d.ts +1 -1
- package/dist/table/MRT_TableContainer.d.ts +1 -1
- package/dist/table/MRT_TablePaper.d.ts +1 -1
- package/dist/toolbar/MRT_LinearProgressBar.d.ts +1 -1
- package/dist/toolbar/MRT_TablePagination.d.ts +1 -1
- package/dist/toolbar/MRT_ToolbarAlertBanner.d.ts +1 -1
- package/dist/toolbar/MRT_ToolbarBottom.d.ts +1 -1
- package/dist/toolbar/MRT_ToolbarInternalButtons.d.ts +1 -1
- package/dist/toolbar/MRT_ToolbarTop.d.ts +1 -1
- package/dist/utils.d.ts +10 -16
- package/package.json +4 -4
- package/src/MaterialReactTable.tsx +167 -156
- package/src/body/MRT_TableBody.tsx +5 -6
- package/src/body/MRT_TableBodyCell.tsx +18 -27
- package/src/body/MRT_TableBodyRow.tsx +7 -7
- package/src/body/MRT_TableDetailPanel.tsx +7 -7
- package/src/buttons/MRT_ColumnPinningButtons.tsx +3 -3
- package/src/buttons/MRT_CopyButton.tsx +5 -7
- package/src/buttons/MRT_EditActionButtons.tsx +4 -5
- package/src/buttons/MRT_ExpandAllButton.tsx +4 -5
- package/src/buttons/MRT_ExpandButton.tsx +4 -5
- package/src/buttons/MRT_FullScreenToggleButton.tsx +3 -7
- package/src/buttons/MRT_GrabHandleButton.tsx +39 -41
- package/src/buttons/MRT_ShowHideColumnsButton.tsx +4 -4
- package/src/buttons/MRT_ToggleDensePaddingButton.tsx +3 -7
- package/src/buttons/MRT_ToggleFiltersButton.tsx +3 -4
- package/src/buttons/MRT_ToggleGlobalFilterButton.tsx +4 -8
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +6 -6
- package/src/filtersFns.ts +24 -23
- package/src/footer/MRT_TableFooter.tsx +5 -6
- package/src/footer/MRT_TableFooterCell.tsx +8 -11
- package/src/footer/MRT_TableFooterRow.tsx +5 -9
- package/src/head/MRT_DraggableTableHeadCell.tsx +4 -6
- package/src/head/MRT_TableHead.tsx +5 -5
- package/src/head/MRT_TableHeadCell.tsx +18 -29
- package/src/head/MRT_TableHeadCellColumnActionsButton.tsx +6 -8
- package/src/head/MRT_TableHeadCellFilterContainer.tsx +5 -7
- package/src/head/MRT_TableHeadCellFilterLabel.tsx +13 -19
- package/src/head/MRT_TableHeadCellResizeHandle.tsx +12 -11
- package/src/head/MRT_TableHeadCellSortLabel.tsx +3 -5
- package/src/head/MRT_TableHeadRow.tsx +6 -6
- package/src/inputs/MRT_EditCellTextField.tsx +12 -14
- package/src/inputs/MRT_FilterRangeFields.tsx +4 -4
- package/src/inputs/MRT_FilterTextField.tsx +27 -38
- package/src/inputs/MRT_GlobalFilterTextField.tsx +5 -6
- package/src/inputs/MRT_SelectCheckbox.tsx +9 -12
- package/src/menus/MRT_ColumnActionMenu.tsx +5 -9
- package/src/menus/MRT_FilterOptionMenu.tsx +16 -48
- package/src/menus/MRT_RowActionMenu.tsx +4 -5
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +8 -9
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +11 -10
- package/src/sortingFns.ts +11 -3
- package/src/table/MRT_Table.tsx +7 -11
- package/src/table/MRT_TableContainer.tsx +5 -6
- package/src/table/MRT_TablePaper.tsx +7 -8
- package/src/table/MRT_TableRoot.tsx +118 -132
- package/src/toolbar/MRT_LinearProgressBar.tsx +4 -5
- package/src/toolbar/MRT_TablePagination.tsx +7 -9
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +13 -9
- package/src/toolbar/MRT_ToolbarBottom.tsx +8 -9
- package/src/toolbar/MRT_ToolbarInternalButtons.tsx +10 -10
- package/src/toolbar/MRT_ToolbarTop.tsx +11 -11
- package/src/utils.ts +56 -50
@@ -6,11 +6,11 @@ import type { MRT_Row, MRT_TableInstance } from '..';
|
|
6
6
|
import { rankGlobalFuzzy } from '../sortingFns';
|
7
7
|
|
8
8
|
interface Props {
|
9
|
-
|
9
|
+
table: MRT_TableInstance;
|
10
10
|
tableContainerRef: RefObject<HTMLDivElement>;
|
11
11
|
}
|
12
12
|
|
13
|
-
export const MRT_TableBody: FC<Props> = ({
|
13
|
+
export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
|
14
14
|
const {
|
15
15
|
getRowModel,
|
16
16
|
getPrePaginationRowModel,
|
@@ -22,13 +22,12 @@ export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
|
|
22
22
|
muiTableBodyProps,
|
23
23
|
virtualizerProps,
|
24
24
|
},
|
25
|
-
} =
|
26
|
-
|
25
|
+
} = table;
|
27
26
|
const { density, globalFilter, pagination, sorting } = getState();
|
28
27
|
|
29
28
|
const tableBodyProps =
|
30
29
|
muiTableBodyProps instanceof Function
|
31
|
-
? muiTableBodyProps({
|
30
|
+
? muiTableBodyProps({ table })
|
32
31
|
: muiTableBodyProps;
|
33
32
|
|
34
33
|
const getIsSomeColumnsSorted = () => {
|
@@ -97,7 +96,7 @@ export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
|
|
97
96
|
rowIndex={
|
98
97
|
enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
|
99
98
|
}
|
100
|
-
|
99
|
+
table={table}
|
101
100
|
/>
|
102
101
|
);
|
103
102
|
},
|
@@ -10,14 +10,14 @@ interface Props {
|
|
10
10
|
cell: MRT_Cell;
|
11
11
|
enableHover?: boolean;
|
12
12
|
rowIndex: number;
|
13
|
-
|
13
|
+
table: MRT_TableInstance;
|
14
14
|
}
|
15
15
|
|
16
16
|
export const MRT_TableBodyCell: FC<Props> = ({
|
17
17
|
cell,
|
18
18
|
enableHover,
|
19
19
|
rowIndex,
|
20
|
-
|
20
|
+
table,
|
21
21
|
}) => {
|
22
22
|
const {
|
23
23
|
getState,
|
@@ -34,8 +34,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
34
34
|
},
|
35
35
|
setColumnOrder,
|
36
36
|
setCurrentEditingCell,
|
37
|
-
} =
|
38
|
-
|
37
|
+
} = table;
|
39
38
|
const {
|
40
39
|
columnOrder,
|
41
40
|
currentEditingCell,
|
@@ -44,10 +43,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
44
43
|
isLoading,
|
45
44
|
showSkeletons,
|
46
45
|
} = getState();
|
47
|
-
|
48
46
|
const { column, row } = cell;
|
49
|
-
|
50
|
-
const {
|
47
|
+
const { columnDef } = column;
|
48
|
+
const { columnDefType } = columnDef;
|
51
49
|
|
52
50
|
const [, dropRef] = useDrop({
|
53
51
|
accept: 'column',
|
@@ -59,12 +57,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
59
57
|
|
60
58
|
const mTableCellBodyProps =
|
61
59
|
muiTableBodyCellProps instanceof Function
|
62
|
-
? muiTableBodyCellProps({ cell,
|
60
|
+
? muiTableBodyCellProps({ cell, table })
|
63
61
|
: muiTableBodyCellProps;
|
64
62
|
|
65
63
|
const mcTableCellBodyProps =
|
66
64
|
columnDef.muiTableBodyCellProps instanceof Function
|
67
|
-
? columnDef.muiTableBodyCellProps({ cell,
|
65
|
+
? columnDef.muiTableBodyCellProps({ cell, table })
|
68
66
|
: columnDef.muiTableBodyCellProps;
|
69
67
|
|
70
68
|
const tableCellProps = {
|
@@ -78,7 +76,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
78
76
|
? column.getSize() / 2
|
79
77
|
: Math.random() * (column.getSize() - column.getSize() / 3) +
|
80
78
|
column.getSize() / 3,
|
81
|
-
[
|
79
|
+
[],
|
82
80
|
);
|
83
81
|
|
84
82
|
const isEditable =
|
@@ -113,7 +111,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
113
111
|
const getIsLastLeftPinnedColumn = () => {
|
114
112
|
return (
|
115
113
|
column.getIsPinned() === 'left' &&
|
116
|
-
|
114
|
+
table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
|
117
115
|
);
|
118
116
|
};
|
119
117
|
|
@@ -123,8 +121,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
123
121
|
|
124
122
|
const getTotalRight = () => {
|
125
123
|
return (
|
126
|
-
(
|
127
|
-
150
|
124
|
+
(table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150
|
128
125
|
);
|
129
126
|
};
|
130
127
|
|
@@ -198,7 +195,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
198
195
|
})}
|
199
196
|
>
|
200
197
|
<>
|
201
|
-
{isLoading || showSkeletons ? (
|
198
|
+
{cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (
|
202
199
|
<Skeleton
|
203
200
|
animation="wave"
|
204
201
|
height={20}
|
@@ -210,27 +207,21 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
210
207
|
column.id === 'mrt-row-numbers' ? (
|
211
208
|
rowIndex + 1
|
212
209
|
) : columnDefType === 'display' ? (
|
213
|
-
columnDef.Cell?.({ cell,
|
214
|
-
) : cell.getIsPlaceholder() ||
|
215
|
-
(row.getIsGrouped() &&
|
216
|
-
column.id !==
|
217
|
-
row.groupingColumnId) ? null : cell.getIsAggregated() ? (
|
218
|
-
columnDef.AggregatedCell?.({ cell, instance }) ??
|
219
|
-
cell.renderAggregatedCell()
|
210
|
+
columnDef.Cell?.({ cell, table })
|
220
211
|
) : isEditing ? (
|
221
|
-
<MRT_EditCellTextField cell={cell}
|
212
|
+
<MRT_EditCellTextField cell={cell} table={table} />
|
222
213
|
) : (enableClickToCopy || columnDef.enableClickToCopy) &&
|
223
214
|
columnDef.enableClickToCopy !== false ? (
|
224
215
|
<>
|
225
|
-
<MRT_CopyButton cell={cell}
|
226
|
-
<>{columnDef?.Cell?.({ cell,
|
216
|
+
<MRT_CopyButton cell={cell} table={table}>
|
217
|
+
<>{columnDef?.Cell?.({ cell, table }) ?? cell.renderValue()}</>
|
227
218
|
</MRT_CopyButton>
|
228
|
-
{
|
219
|
+
{cell.getIsGrouped() && <> ({row.subRows?.length})</>}
|
229
220
|
</>
|
230
221
|
) : (
|
231
222
|
<>
|
232
|
-
{columnDef?.Cell?.({ cell,
|
233
|
-
{
|
223
|
+
{columnDef?.Cell?.({ cell, table }) ?? cell.renderValue()}
|
224
|
+
{cell.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
|
234
225
|
</>
|
235
226
|
)}
|
236
227
|
</>
|
@@ -7,18 +7,18 @@ import type { MRT_Row, MRT_TableInstance } from '..';
|
|
7
7
|
interface Props {
|
8
8
|
row: MRT_Row;
|
9
9
|
rowIndex: number;
|
10
|
-
|
10
|
+
table: MRT_TableInstance;
|
11
11
|
}
|
12
12
|
|
13
|
-
export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex,
|
13
|
+
export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
|
14
14
|
const {
|
15
15
|
getIsSomeColumnsPinned,
|
16
16
|
options: { muiTableBodyRowProps, renderDetailPanel },
|
17
|
-
} =
|
17
|
+
} = table;
|
18
18
|
|
19
19
|
const tableRowProps =
|
20
20
|
muiTableBodyRowProps instanceof Function
|
21
|
-
? muiTableBodyRowProps({ row,
|
21
|
+
? muiTableBodyRowProps({ row, table })
|
22
22
|
: muiTableBodyRowProps;
|
23
23
|
|
24
24
|
return (
|
@@ -41,18 +41,18 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, instance }) => {
|
|
41
41
|
...(tableRowProps?.sx as any),
|
42
42
|
})}
|
43
43
|
>
|
44
|
-
{row
|
44
|
+
{row?.getVisibleCells()?.map?.((cell) => (
|
45
45
|
<MRT_TableBodyCell
|
46
46
|
cell={cell}
|
47
47
|
key={cell.id}
|
48
48
|
enableHover={tableRowProps?.hover !== false}
|
49
49
|
rowIndex={rowIndex}
|
50
|
-
|
50
|
+
table={table}
|
51
51
|
/>
|
52
52
|
))}
|
53
53
|
</TableRow>
|
54
54
|
{renderDetailPanel && !row.getIsGrouped() && (
|
55
|
-
<MRT_TableDetailPanel row={row}
|
55
|
+
<MRT_TableDetailPanel row={row} table={table} />
|
56
56
|
)}
|
57
57
|
</>
|
58
58
|
);
|
@@ -4,10 +4,10 @@ import type { MRT_Row, MRT_TableInstance } from '..';
|
|
4
4
|
|
5
5
|
interface Props {
|
6
6
|
row: MRT_Row;
|
7
|
-
|
7
|
+
table: MRT_TableInstance;
|
8
8
|
}
|
9
9
|
|
10
|
-
export const MRT_TableDetailPanel: FC<Props> = ({ row,
|
10
|
+
export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
|
11
11
|
const {
|
12
12
|
getVisibleLeafColumns,
|
13
13
|
options: {
|
@@ -15,16 +15,16 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, instance }) => {
|
|
15
15
|
muiTableDetailPanelProps,
|
16
16
|
renderDetailPanel,
|
17
17
|
},
|
18
|
-
} =
|
18
|
+
} = table;
|
19
19
|
|
20
20
|
const tableRowProps =
|
21
21
|
muiTableBodyRowProps instanceof Function
|
22
|
-
? muiTableBodyRowProps({ row,
|
22
|
+
? muiTableBodyRowProps({ row, table })
|
23
23
|
: muiTableBodyRowProps;
|
24
24
|
|
25
25
|
const tableCellProps =
|
26
26
|
muiTableDetailPanelProps instanceof Function
|
27
|
-
? muiTableDetailPanelProps({ row,
|
27
|
+
? muiTableDetailPanelProps({ row, table })
|
28
28
|
: muiTableDetailPanelProps;
|
29
29
|
|
30
30
|
return (
|
@@ -37,13 +37,13 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, instance }) => {
|
|
37
37
|
pb: row.getIsExpanded() ? '1rem' : 0,
|
38
38
|
pt: row.getIsExpanded() ? '1rem' : 0,
|
39
39
|
transition: 'all 0.2s ease-in-out',
|
40
|
-
width: `${
|
40
|
+
width: `${table.getTotalSize()}px`,
|
41
41
|
...tableCellProps?.sx,
|
42
42
|
}}
|
43
43
|
>
|
44
44
|
{renderDetailPanel && (
|
45
45
|
<Collapse in={row.getIsExpanded()}>
|
46
|
-
{renderDetailPanel({ row,
|
46
|
+
{renderDetailPanel({ row, table })}
|
47
47
|
</Collapse>
|
48
48
|
)}
|
49
49
|
</TableCell>
|
@@ -4,16 +4,16 @@ import type { MRT_Column, MRT_TableInstance } from '..';
|
|
4
4
|
|
5
5
|
interface Props {
|
6
6
|
column: MRT_Column;
|
7
|
-
|
7
|
+
table: MRT_TableInstance;
|
8
8
|
}
|
9
9
|
|
10
|
-
export const MRT_ColumnPinningButtons: FC<Props> = ({ column,
|
10
|
+
export const MRT_ColumnPinningButtons: FC<Props> = ({ column, table }) => {
|
11
11
|
const {
|
12
12
|
options: {
|
13
13
|
icons: { PushPinIcon },
|
14
14
|
localization,
|
15
15
|
},
|
16
|
-
} =
|
16
|
+
} = table;
|
17
17
|
|
18
18
|
const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
|
19
19
|
column.pin(pinDirection);
|
@@ -5,16 +5,14 @@ import { MRT_Cell, MRT_TableInstance } from '..';
|
|
5
5
|
interface Props {
|
6
6
|
cell: MRT_Cell;
|
7
7
|
children: ReactNode;
|
8
|
-
|
8
|
+
table: MRT_TableInstance;
|
9
9
|
}
|
10
10
|
|
11
|
-
export const MRT_CopyButton: FC<Props> = ({ cell, children,
|
11
|
+
export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
|
12
12
|
const {
|
13
13
|
options: { localization, muiTableBodyCellCopyButtonProps },
|
14
|
-
} =
|
15
|
-
|
14
|
+
} = table;
|
16
15
|
const { column } = cell;
|
17
|
-
|
18
16
|
const { columnDef } = column;
|
19
17
|
|
20
18
|
const [copied, setCopied] = useState(false);
|
@@ -27,14 +25,14 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, instance }) => {
|
|
27
25
|
|
28
26
|
const mTableBodyCellCopyButtonProps =
|
29
27
|
muiTableBodyCellCopyButtonProps instanceof Function
|
30
|
-
? muiTableBodyCellCopyButtonProps({ cell,
|
28
|
+
? muiTableBodyCellCopyButtonProps({ cell, table })
|
31
29
|
: muiTableBodyCellCopyButtonProps;
|
32
30
|
|
33
31
|
const mcTableBodyCellCopyButtonProps =
|
34
32
|
columnDef.muiTableBodyCellCopyButtonProps instanceof Function
|
35
33
|
? columnDef.muiTableBodyCellCopyButtonProps({
|
36
34
|
cell,
|
37
|
-
|
35
|
+
table,
|
38
36
|
})
|
39
37
|
: columnDef.muiTableBodyCellCopyButtonProps;
|
40
38
|
|
@@ -4,10 +4,10 @@ import type { MRT_Row, MRT_TableInstance } from '..';
|
|
4
4
|
|
5
5
|
interface Props {
|
6
6
|
row: MRT_Row;
|
7
|
-
|
7
|
+
table: MRT_TableInstance;
|
8
8
|
}
|
9
9
|
|
10
|
-
export const MRT_EditActionButtons: FC<Props> = ({ row,
|
10
|
+
export const MRT_EditActionButtons: FC<Props> = ({ row, table }) => {
|
11
11
|
const {
|
12
12
|
getState,
|
13
13
|
options: {
|
@@ -16,8 +16,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, instance }) => {
|
|
16
16
|
onEditRowSubmit,
|
17
17
|
},
|
18
18
|
setCurrentEditingRow,
|
19
|
-
} =
|
20
|
-
|
19
|
+
} = table;
|
21
20
|
const { currentEditingRow } = getState();
|
22
21
|
|
23
22
|
const handleCancel = () => {
|
@@ -26,7 +25,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, instance }) => {
|
|
26
25
|
};
|
27
26
|
|
28
27
|
const handleSave = () => {
|
29
|
-
onEditRowSubmit?.({ row: currentEditingRow ?? row,
|
28
|
+
onEditRowSubmit?.({ row: currentEditingRow ?? row, table });
|
30
29
|
setCurrentEditingRow(null);
|
31
30
|
};
|
32
31
|
|
@@ -3,10 +3,10 @@ import { IconButton, Tooltip } from '@mui/material';
|
|
3
3
|
import { MRT_TableInstance } from '..';
|
4
4
|
|
5
5
|
interface Props {
|
6
|
-
|
6
|
+
table: MRT_TableInstance;
|
7
7
|
}
|
8
8
|
|
9
|
-
export const MRT_ExpandAllButton: FC<Props> = ({
|
9
|
+
export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
|
10
10
|
const {
|
11
11
|
getIsAllRowsExpanded,
|
12
12
|
getIsSomeRowsExpanded,
|
@@ -19,13 +19,12 @@ export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
|
|
19
19
|
renderDetailPanel,
|
20
20
|
},
|
21
21
|
toggleAllRowsExpanded,
|
22
|
-
} =
|
23
|
-
|
22
|
+
} = table;
|
24
23
|
const { density } = getState();
|
25
24
|
|
26
25
|
const iconButtonProps =
|
27
26
|
muiExpandAllButtonProps instanceof Function
|
28
|
-
? muiExpandAllButtonProps({
|
27
|
+
? muiExpandAllButtonProps({ table })
|
29
28
|
: muiExpandAllButtonProps;
|
30
29
|
|
31
30
|
return (
|
@@ -4,10 +4,10 @@ import type { MRT_Row, MRT_TableInstance } from '..';
|
|
4
4
|
|
5
5
|
interface Props {
|
6
6
|
row: MRT_Row;
|
7
|
-
|
7
|
+
table: MRT_TableInstance;
|
8
8
|
}
|
9
9
|
|
10
|
-
export const MRT_ExpandButton: FC<Props> = ({ row,
|
10
|
+
export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
|
11
11
|
const {
|
12
12
|
getState,
|
13
13
|
options: {
|
@@ -16,13 +16,12 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
|
|
16
16
|
muiExpandButtonProps,
|
17
17
|
renderDetailPanel,
|
18
18
|
},
|
19
|
-
} =
|
20
|
-
|
19
|
+
} = table;
|
21
20
|
const { density } = getState();
|
22
21
|
|
23
22
|
const iconButtonProps =
|
24
23
|
muiExpandButtonProps instanceof Function
|
25
|
-
? muiExpandButtonProps({
|
24
|
+
? muiExpandButtonProps({ table, row })
|
26
25
|
: muiExpandButtonProps;
|
27
26
|
|
28
27
|
const handleToggleExpand = () => {
|
@@ -3,13 +3,10 @@ import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
|
|
3
3
|
import { MRT_TableInstance } from '..';
|
4
4
|
|
5
5
|
interface Props extends IconButtonProps {
|
6
|
-
|
6
|
+
table: MRT_TableInstance;
|
7
7
|
}
|
8
8
|
|
9
|
-
export const MRT_FullScreenToggleButton: FC<Props> = ({
|
10
|
-
instance,
|
11
|
-
...rest
|
12
|
-
}) => {
|
9
|
+
export const MRT_FullScreenToggleButton: FC<Props> = ({ table, ...rest }) => {
|
13
10
|
const {
|
14
11
|
getState,
|
15
12
|
options: {
|
@@ -17,8 +14,7 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
|
|
17
14
|
localization,
|
18
15
|
},
|
19
16
|
setIsFullScreen,
|
20
|
-
} =
|
21
|
-
|
17
|
+
} = table;
|
22
18
|
const { isFullScreen } = getState();
|
23
19
|
|
24
20
|
const handleToggleFullScreen = () => {
|
@@ -4,48 +4,46 @@ import { MRT_TableInstance } from '..';
|
|
4
4
|
|
5
5
|
interface Props {
|
6
6
|
ref: Ref<HTMLButtonElement>;
|
7
|
-
|
7
|
+
table: MRT_TableInstance;
|
8
8
|
}
|
9
9
|
|
10
|
-
export const MRT_GrabHandleButton: FC<Props> = forwardRef(
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
} = instance;
|
10
|
+
export const MRT_GrabHandleButton: FC<Props> = forwardRef(({ table }, ref) => {
|
11
|
+
const {
|
12
|
+
options: {
|
13
|
+
icons: { DragHandleIcon },
|
14
|
+
localization,
|
15
|
+
},
|
16
|
+
} = table;
|
18
17
|
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
18
|
+
return (
|
19
|
+
<Tooltip
|
20
|
+
arrow
|
21
|
+
enterDelay={1000}
|
22
|
+
enterNextDelay={1000}
|
23
|
+
placement="top"
|
24
|
+
title={localization.grab}
|
25
|
+
>
|
26
|
+
<IconButton
|
27
|
+
disableRipple
|
28
|
+
ref={ref}
|
29
|
+
size="small"
|
30
|
+
sx={{
|
31
|
+
cursor: 'grab',
|
32
|
+
m: 0,
|
33
|
+
opacity: 0.5,
|
34
|
+
p: '2px',
|
35
|
+
transition: 'all 0.2s ease-in-out',
|
36
|
+
'&:hover': {
|
37
|
+
backgroundColor: 'transparent',
|
38
|
+
opacity: 1,
|
39
|
+
},
|
40
|
+
'&:active': {
|
41
|
+
cursor: 'grabbing',
|
42
|
+
},
|
43
|
+
}}
|
26
44
|
>
|
27
|
-
<
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
cursor: 'grab',
|
33
|
-
m: 0,
|
34
|
-
opacity: 0.5,
|
35
|
-
p: '2px',
|
36
|
-
transition: 'all 0.2s ease-in-out',
|
37
|
-
'&:hover': {
|
38
|
-
backgroundColor: 'transparent',
|
39
|
-
opacity: 1,
|
40
|
-
},
|
41
|
-
'&:active': {
|
42
|
-
cursor: 'grabbing',
|
43
|
-
},
|
44
|
-
}}
|
45
|
-
>
|
46
|
-
<DragHandleIcon />
|
47
|
-
</IconButton>
|
48
|
-
</Tooltip>
|
49
|
-
);
|
50
|
-
},
|
51
|
-
);
|
45
|
+
<DragHandleIcon />
|
46
|
+
</IconButton>
|
47
|
+
</Tooltip>
|
48
|
+
);
|
49
|
+
});
|
@@ -4,16 +4,16 @@ import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
|
|
4
4
|
import { MRT_TableInstance } from '..';
|
5
5
|
|
6
6
|
interface Props extends IconButtonProps {
|
7
|
-
|
7
|
+
table: MRT_TableInstance;
|
8
8
|
}
|
9
9
|
|
10
|
-
export const MRT_ShowHideColumnsButton: FC<Props> = ({
|
10
|
+
export const MRT_ShowHideColumnsButton: FC<Props> = ({ table, ...rest }) => {
|
11
11
|
const {
|
12
12
|
options: {
|
13
13
|
icons: { ViewColumnIcon },
|
14
14
|
localization,
|
15
15
|
},
|
16
|
-
} =
|
16
|
+
} = table;
|
17
17
|
|
18
18
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
19
19
|
|
@@ -35,7 +35,7 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ instance, ...rest }) => {
|
|
35
35
|
<MRT_ShowHideColumnsMenu
|
36
36
|
anchorEl={anchorEl}
|
37
37
|
setAnchorEl={setAnchorEl}
|
38
|
-
|
38
|
+
table={table}
|
39
39
|
/>
|
40
40
|
</>
|
41
41
|
);
|
@@ -3,13 +3,10 @@ import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
|
|
3
3
|
import { MRT_TableInstance } from '..';
|
4
4
|
|
5
5
|
interface Props extends IconButtonProps {
|
6
|
-
|
6
|
+
table: MRT_TableInstance;
|
7
7
|
}
|
8
8
|
|
9
|
-
export const MRT_ToggleDensePaddingButton: FC<Props> = ({
|
10
|
-
instance,
|
11
|
-
...rest
|
12
|
-
}) => {
|
9
|
+
export const MRT_ToggleDensePaddingButton: FC<Props> = ({ table, ...rest }) => {
|
13
10
|
const {
|
14
11
|
getState,
|
15
12
|
options: {
|
@@ -17,8 +14,7 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
|
|
17
14
|
localization,
|
18
15
|
},
|
19
16
|
setDensity,
|
20
|
-
} =
|
21
|
-
|
17
|
+
} = table;
|
22
18
|
const { density } = getState();
|
23
19
|
|
24
20
|
const handleToggleDensePadding = () => {
|
@@ -3,10 +3,10 @@ import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
|
|
3
3
|
import { MRT_TableInstance } from '..';
|
4
4
|
|
5
5
|
interface Props extends IconButtonProps {
|
6
|
-
|
6
|
+
table: MRT_TableInstance;
|
7
7
|
}
|
8
8
|
|
9
|
-
export const MRT_ToggleFiltersButton: FC<Props> = ({
|
9
|
+
export const MRT_ToggleFiltersButton: FC<Props> = ({ table, ...rest }) => {
|
10
10
|
const {
|
11
11
|
getState,
|
12
12
|
options: {
|
@@ -14,8 +14,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ instance, ...rest }) => {
|
|
14
14
|
localization,
|
15
15
|
},
|
16
16
|
setShowFilters,
|
17
|
-
} =
|
18
|
-
|
17
|
+
} = table;
|
19
18
|
const { showFilters } = getState();
|
20
19
|
|
21
20
|
const handleToggleShowFilters = () => {
|
@@ -3,13 +3,10 @@ import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
|
|
3
3
|
import { MRT_TableInstance } from '..';
|
4
4
|
|
5
5
|
interface Props extends IconButtonProps {
|
6
|
-
|
6
|
+
table: MRT_TableInstance;
|
7
7
|
}
|
8
8
|
|
9
|
-
export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
|
10
|
-
instance,
|
11
|
-
...rest
|
12
|
-
}) => {
|
9
|
+
export const MRT_ToggleGlobalFilterButton: FC<Props> = ({ table, ...rest }) => {
|
13
10
|
const {
|
14
11
|
getState,
|
15
12
|
options: {
|
@@ -19,13 +16,12 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
|
|
19
16
|
muiSearchTextFieldProps,
|
20
17
|
},
|
21
18
|
setShowGlobalFilter,
|
22
|
-
} =
|
23
|
-
|
19
|
+
} = table;
|
24
20
|
const { showGlobalFilter } = getState();
|
25
21
|
|
26
22
|
const textFieldProps =
|
27
23
|
muiSearchTextFieldProps instanceof Function
|
28
|
-
? muiSearchTextFieldProps({
|
24
|
+
? muiSearchTextFieldProps({ table })
|
29
25
|
: muiSearchTextFieldProps;
|
30
26
|
|
31
27
|
const handleToggleSearch = () => {
|
@@ -17,10 +17,10 @@ const commonIconButtonStyles = {
|
|
17
17
|
|
18
18
|
interface Props {
|
19
19
|
row: MRT_Row;
|
20
|
-
|
20
|
+
table: MRT_TableInstance;
|
21
21
|
}
|
22
22
|
|
23
|
-
export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row,
|
23
|
+
export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
|
24
24
|
const {
|
25
25
|
getState,
|
26
26
|
options: {
|
@@ -31,7 +31,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, instance }) => {
|
|
31
31
|
renderRowActions,
|
32
32
|
},
|
33
33
|
setCurrentEditingRow,
|
34
|
-
} =
|
34
|
+
} = table;
|
35
35
|
|
36
36
|
const { currentEditingRow } = getState();
|
37
37
|
|
@@ -51,9 +51,9 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, instance }) => {
|
|
51
51
|
return (
|
52
52
|
<>
|
53
53
|
{renderRowActions ? (
|
54
|
-
<>{renderRowActions({ row,
|
54
|
+
<>{renderRowActions({ row, table })}</>
|
55
55
|
) : row.id === currentEditingRow?.id ? (
|
56
|
-
<MRT_EditActionButtons row={row}
|
56
|
+
<MRT_EditActionButtons row={row} table={table} />
|
57
57
|
) : !renderRowActionMenuItems && enableEditing ? (
|
58
58
|
<Tooltip placement="right" arrow title={localization.edit}>
|
59
59
|
<IconButton sx={commonIconButtonStyles} onClick={handleStartEditMode}>
|
@@ -82,7 +82,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, instance }) => {
|
|
82
82
|
handleEdit={handleStartEditMode}
|
83
83
|
row={row}
|
84
84
|
setAnchorEl={setAnchorEl}
|
85
|
-
|
85
|
+
table={table}
|
86
86
|
/>
|
87
87
|
</>
|
88
88
|
) : null}
|