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
package/src/filtersFns.ts
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
import { rankItem, rankings, RankingInfo } from '@tanstack/match-sorter-utils';
|
2
|
-
import {
|
2
|
+
import { filterFns, Row } from '@tanstack/react-table';
|
3
3
|
|
4
|
-
export const fuzzy = (
|
5
|
-
row:
|
4
|
+
export const fuzzy = <D extends Record<string, any> = {}>(
|
5
|
+
row: Row<D>,
|
6
6
|
columnId: string,
|
7
7
|
filterValue: string,
|
8
8
|
addMeta: (item: RankingInfo) => void,
|
@@ -16,8 +16,8 @@ export const fuzzy = (
|
|
16
16
|
|
17
17
|
fuzzy.autoRemove = (val: any) => !val;
|
18
18
|
|
19
|
-
export const contains = (
|
20
|
-
row:
|
19
|
+
export const contains = <D extends Record<string, any> = {}>(
|
20
|
+
row: Row<D>,
|
21
21
|
id: string,
|
22
22
|
filterValue: string | number,
|
23
23
|
) =>
|
@@ -30,8 +30,8 @@ export const contains = (
|
|
30
30
|
|
31
31
|
contains.autoRemove = (val: any) => !val;
|
32
32
|
|
33
|
-
export const startsWith = (
|
34
|
-
row:
|
33
|
+
export const startsWith = <D extends Record<string, any> = {}>(
|
34
|
+
row: Row<D>,
|
35
35
|
id: string,
|
36
36
|
filterValue: string | number,
|
37
37
|
) =>
|
@@ -44,8 +44,8 @@ export const startsWith = (
|
|
44
44
|
|
45
45
|
startsWith.autoRemove = (val: any) => !val;
|
46
46
|
|
47
|
-
export const endsWith = (
|
48
|
-
row:
|
47
|
+
export const endsWith = <D extends Record<string, any> = {}>(
|
48
|
+
row: Row<D>,
|
49
49
|
id: string,
|
50
50
|
filterValue: string | number,
|
51
51
|
) =>
|
@@ -58,8 +58,8 @@ export const endsWith = (
|
|
58
58
|
|
59
59
|
endsWith.autoRemove = (val: any) => !val;
|
60
60
|
|
61
|
-
export const equals = (
|
62
|
-
row:
|
61
|
+
export const equals = <D extends Record<string, any> = {}>(
|
62
|
+
row: Row<D>,
|
63
63
|
id: string,
|
64
64
|
filterValue: string | number,
|
65
65
|
) =>
|
@@ -68,8 +68,8 @@ export const equals = (
|
|
68
68
|
|
69
69
|
equals.autoRemove = (val: any) => !val;
|
70
70
|
|
71
|
-
export const notEquals = (
|
72
|
-
row:
|
71
|
+
export const notEquals = <D extends Record<string, any> = {}>(
|
72
|
+
row: Row<D>,
|
73
73
|
id: string,
|
74
74
|
filterValue: string | number,
|
75
75
|
) =>
|
@@ -78,8 +78,8 @@ export const notEquals = (
|
|
78
78
|
|
79
79
|
notEquals.autoRemove = (val: any) => !val;
|
80
80
|
|
81
|
-
export const greaterThan = (
|
82
|
-
row:
|
81
|
+
export const greaterThan = <D extends Record<string, any> = {}>(
|
82
|
+
row: Row<D>,
|
83
83
|
id: string,
|
84
84
|
filterValue: string | number,
|
85
85
|
) =>
|
@@ -90,8 +90,8 @@ export const greaterThan = (
|
|
90
90
|
|
91
91
|
greaterThan.autoRemove = (val: any) => !val;
|
92
92
|
|
93
|
-
export const lessThan = (
|
94
|
-
row:
|
93
|
+
export const lessThan = <D extends Record<string, any> = {}>(
|
94
|
+
row: Row<D>,
|
95
95
|
id: string,
|
96
96
|
filterValue: string | number,
|
97
97
|
) =>
|
@@ -102,8 +102,8 @@ export const lessThan = (
|
|
102
102
|
|
103
103
|
lessThan.autoRemove = (val: any) => !val;
|
104
104
|
|
105
|
-
export const between = (
|
106
|
-
row:
|
105
|
+
export const between = <D extends Record<string, any> = {}>(
|
106
|
+
row: Row<D>,
|
107
107
|
id: string,
|
108
108
|
filterValues: [string | number, string | number],
|
109
109
|
) =>
|
@@ -117,16 +117,16 @@ export const between = (
|
|
117
117
|
|
118
118
|
between.autoRemove = (val: any) => !val;
|
119
119
|
|
120
|
-
export const empty = (
|
121
|
-
row:
|
120
|
+
export const empty = <D extends Record<string, any> = {}>(
|
121
|
+
row: Row<D>,
|
122
122
|
id: string,
|
123
123
|
_filterValue: string | number,
|
124
124
|
) => !row.getValue(id).toString().trim();
|
125
125
|
|
126
126
|
empty.autoRemove = (val: any) => !val;
|
127
127
|
|
128
|
-
export const notEmpty = (
|
129
|
-
row:
|
128
|
+
export const notEmpty = <D extends Record<string, any> = {}>(
|
129
|
+
row: Row<D>,
|
130
130
|
id: string,
|
131
131
|
_filterValue: string | number,
|
132
132
|
) => !!row.getValue(id).toString().trim();
|
@@ -134,6 +134,7 @@ export const notEmpty = (
|
|
134
134
|
notEmpty.autoRemove = (val: any) => !val;
|
135
135
|
|
136
136
|
export const MRT_FilterFns = {
|
137
|
+
...filterFns,
|
137
138
|
between,
|
138
139
|
contains,
|
139
140
|
empty,
|
@@ -4,19 +4,18 @@ import { MRT_TableFooterRow } from './MRT_TableFooterRow';
|
|
4
4
|
import type { MRT_TableInstance } from '..';
|
5
5
|
|
6
6
|
interface Props {
|
7
|
-
|
7
|
+
table: MRT_TableInstance;
|
8
8
|
}
|
9
9
|
|
10
|
-
export const MRT_TableFooter: FC<Props> = ({
|
10
|
+
export const MRT_TableFooter: FC<Props> = ({ table }) => {
|
11
11
|
const {
|
12
12
|
getFooterGroups,
|
13
|
-
|
14
13
|
options: { muiTableFooterProps },
|
15
|
-
} =
|
14
|
+
} = table;
|
16
15
|
|
17
16
|
const tableFooterProps =
|
18
17
|
muiTableFooterProps instanceof Function
|
19
|
-
? muiTableFooterProps({
|
18
|
+
? muiTableFooterProps({ table })
|
20
19
|
: muiTableFooterProps;
|
21
20
|
|
22
21
|
return (
|
@@ -25,7 +24,7 @@ export const MRT_TableFooter: FC<Props> = ({ instance }) => {
|
|
25
24
|
<MRT_TableFooterRow
|
26
25
|
footerGroup={footerGroup as any}
|
27
26
|
key={footerGroup.id}
|
28
|
-
|
27
|
+
table={table}
|
29
28
|
/>
|
30
29
|
))}
|
31
30
|
</TableFooter>
|
@@ -4,29 +4,27 @@ import type { MRT_Header, MRT_TableInstance } from '..';
|
|
4
4
|
|
5
5
|
interface Props {
|
6
6
|
footer: MRT_Header;
|
7
|
-
|
7
|
+
table: MRT_TableInstance;
|
8
8
|
}
|
9
9
|
|
10
|
-
export const MRT_TableFooterCell: FC<Props> = ({ footer,
|
10
|
+
export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
|
11
11
|
const {
|
12
12
|
getState,
|
13
13
|
options: { muiTableFooterCellProps, enableColumnResizing },
|
14
|
-
} =
|
15
|
-
|
14
|
+
} = table;
|
16
15
|
const { density } = getState();
|
17
|
-
|
18
16
|
const { column } = footer;
|
19
|
-
|
20
|
-
const {
|
17
|
+
const { columnDef } = column;
|
18
|
+
const { columnDefType } = columnDef;
|
21
19
|
|
22
20
|
const mTableFooterCellProps =
|
23
21
|
muiTableFooterCellProps instanceof Function
|
24
|
-
? muiTableFooterCellProps({ column,
|
22
|
+
? muiTableFooterCellProps({ column, table })
|
25
23
|
: muiTableFooterCellProps;
|
26
24
|
|
27
25
|
const mcTableFooterCellProps =
|
28
26
|
columnDef.muiTableFooterCellProps instanceof Function
|
29
|
-
? columnDef.muiTableFooterCellProps({ column,
|
27
|
+
? columnDef.muiTableFooterCellProps({ column, table })
|
30
28
|
: columnDef.muiTableFooterCellProps;
|
31
29
|
|
32
30
|
const tableCellProps = {
|
@@ -67,11 +65,10 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, instance }) => {
|
|
67
65
|
: (columnDef.Footer instanceof Function
|
68
66
|
? columnDef.Footer?.({
|
69
67
|
footer,
|
70
|
-
|
68
|
+
table,
|
71
69
|
})
|
72
70
|
: columnDef.Footer) ??
|
73
71
|
columnDef.footer ??
|
74
|
-
footer.renderFooter() ??
|
75
72
|
null}
|
76
73
|
</>
|
77
74
|
</TableCell>
|
@@ -5,13 +5,13 @@ import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
|
|
5
5
|
|
6
6
|
interface Props {
|
7
7
|
footerGroup: MRT_HeaderGroup;
|
8
|
-
|
8
|
+
table: MRT_TableInstance;
|
9
9
|
}
|
10
10
|
|
11
|
-
export const MRT_TableFooterRow: FC<Props> = ({ footerGroup,
|
11
|
+
export const MRT_TableFooterRow: FC<Props> = ({ footerGroup, table }) => {
|
12
12
|
const {
|
13
13
|
options: { muiTableFooterRowProps },
|
14
|
-
} =
|
14
|
+
} = table;
|
15
15
|
|
16
16
|
// if no content in row, skip row
|
17
17
|
if (
|
@@ -26,17 +26,13 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup, instance }) => {
|
|
26
26
|
|
27
27
|
const tableRowProps =
|
28
28
|
muiTableFooterRowProps instanceof Function
|
29
|
-
? muiTableFooterRowProps({ footerGroup,
|
29
|
+
? muiTableFooterRowProps({ footerGroup, table })
|
30
30
|
: muiTableFooterRowProps;
|
31
31
|
|
32
32
|
return (
|
33
33
|
<TableRow {...tableRowProps}>
|
34
34
|
{footerGroup.headers.map((footer: MRT_Header) => (
|
35
|
-
<MRT_TableFooterCell
|
36
|
-
footer={footer}
|
37
|
-
key={footer.id}
|
38
|
-
instance={instance}
|
39
|
-
/>
|
35
|
+
<MRT_TableFooterCell footer={footer} key={footer.id} table={table} />
|
40
36
|
))}
|
41
37
|
</TableRow>
|
42
38
|
);
|
@@ -6,14 +6,12 @@ import { reorderColumn } from '../utils';
|
|
6
6
|
|
7
7
|
interface Props {
|
8
8
|
header: MRT_Header;
|
9
|
-
|
9
|
+
table: MRT_TableInstance;
|
10
10
|
}
|
11
11
|
|
12
|
-
export const MRT_DraggableTableHeadCell: FC<Props> = ({ header,
|
13
|
-
const { getState, setColumnOrder } =
|
14
|
-
|
12
|
+
export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, table }) => {
|
13
|
+
const { getState, setColumnOrder } = table;
|
15
14
|
const { columnOrder } = getState();
|
16
|
-
|
17
15
|
const { column } = header;
|
18
16
|
|
19
17
|
const [, dropRef] = useDrop({
|
@@ -39,7 +37,7 @@ export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, instance }) => {
|
|
39
37
|
header={header}
|
40
38
|
isDragging={isDragging}
|
41
39
|
previewRef={previewRef}
|
42
|
-
|
40
|
+
table={table}
|
43
41
|
/>
|
44
42
|
);
|
45
43
|
};
|
@@ -4,18 +4,18 @@ import { MRT_TableHeadRow } from './MRT_TableHeadRow';
|
|
4
4
|
import type { MRT_TableInstance } from '..';
|
5
5
|
|
6
6
|
interface Props {
|
7
|
-
|
7
|
+
table: MRT_TableInstance;
|
8
8
|
}
|
9
9
|
|
10
|
-
export const MRT_TableHead: FC<Props> = ({
|
10
|
+
export const MRT_TableHead: FC<Props> = ({ table }) => {
|
11
11
|
const {
|
12
12
|
getHeaderGroups,
|
13
13
|
options: { muiTableHeadProps },
|
14
|
-
} =
|
14
|
+
} = table;
|
15
15
|
|
16
16
|
const tableHeadProps =
|
17
17
|
muiTableHeadProps instanceof Function
|
18
|
-
? muiTableHeadProps({
|
18
|
+
? muiTableHeadProps({ table })
|
19
19
|
: muiTableHeadProps;
|
20
20
|
|
21
21
|
return (
|
@@ -24,7 +24,7 @@ export const MRT_TableHead: FC<Props> = ({ instance }) => {
|
|
24
24
|
<MRT_TableHeadRow
|
25
25
|
headerGroup={headerGroup as any}
|
26
26
|
key={headerGroup.id}
|
27
|
-
|
27
|
+
table={table}
|
28
28
|
/>
|
29
29
|
))}
|
30
30
|
</TableHead>
|
@@ -12,7 +12,7 @@ interface Props {
|
|
12
12
|
dragRef?: Ref<HTMLButtonElement>;
|
13
13
|
dropRef?: Ref<HTMLDivElement>;
|
14
14
|
header: MRT_Header;
|
15
|
-
|
15
|
+
table: MRT_TableInstance;
|
16
16
|
isDragging?: boolean;
|
17
17
|
previewRef?: Ref<HTMLTableCellElement>;
|
18
18
|
}
|
@@ -21,7 +21,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
|
|
21
21
|
dragRef,
|
22
22
|
dropRef,
|
23
23
|
header,
|
24
|
-
|
24
|
+
table,
|
25
25
|
isDragging,
|
26
26
|
previewRef,
|
27
27
|
}) => {
|
@@ -35,22 +35,20 @@ export const MRT_TableHeadCell: FC<Props> = ({
|
|
35
35
|
enableMultiSort,
|
36
36
|
muiTableHeadCellProps,
|
37
37
|
},
|
38
|
-
} =
|
39
|
-
|
38
|
+
} = table;
|
40
39
|
const { density, showFilters } = getState();
|
41
|
-
|
42
40
|
const { column } = header;
|
43
|
-
|
44
|
-
const {
|
41
|
+
const { columnDef } = column;
|
42
|
+
const { columnDefType } = columnDef;
|
45
43
|
|
46
44
|
const mTableHeadCellProps =
|
47
45
|
muiTableHeadCellProps instanceof Function
|
48
|
-
? muiTableHeadCellProps({ column,
|
46
|
+
? muiTableHeadCellProps({ column, table })
|
49
47
|
: muiTableHeadCellProps;
|
50
48
|
|
51
49
|
const mcTableHeadCellProps =
|
52
50
|
columnDef.muiTableHeadCellProps instanceof Function
|
53
|
-
? columnDef.muiTableHeadCellProps({ column,
|
51
|
+
? columnDef.muiTableHeadCellProps({ column, table })
|
54
52
|
: columnDef.muiTableHeadCellProps;
|
55
53
|
|
56
54
|
const tableCellProps = {
|
@@ -61,16 +59,14 @@ export const MRT_TableHeadCell: FC<Props> = ({
|
|
61
59
|
const headerElement = ((columnDef?.Header instanceof Function
|
62
60
|
? columnDef?.Header?.({
|
63
61
|
header,
|
64
|
-
|
62
|
+
table,
|
65
63
|
})
|
66
|
-
: columnDef?.Header) ??
|
67
|
-
header.renderHeader() ??
|
68
|
-
columnDef.header) as ReactNode;
|
64
|
+
: columnDef?.Header) ?? columnDef.header) as ReactNode;
|
69
65
|
|
70
66
|
const getIsLastLeftPinnedColumn = () => {
|
71
67
|
return (
|
72
68
|
column.getIsPinned() === 'left' &&
|
73
|
-
|
69
|
+
table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
|
74
70
|
);
|
75
71
|
};
|
76
72
|
|
@@ -80,8 +76,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
|
|
80
76
|
|
81
77
|
const getTotalRight = () => {
|
82
78
|
return (
|
83
|
-
(
|
84
|
-
150
|
79
|
+
(table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150
|
85
80
|
);
|
86
81
|
};
|
87
82
|
|
@@ -139,7 +134,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
|
|
139
134
|
right:
|
140
135
|
column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
|
141
136
|
transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
|
142
|
-
userSelect: enableMultiSort ? 'none' : undefined,
|
137
|
+
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
|
143
138
|
verticalAlign:
|
144
139
|
columnDefType === 'display' && showFilters ? 'center' : 'text-top',
|
145
140
|
zIndex: column.getIsResizing()
|
@@ -184,13 +179,10 @@ export const MRT_TableHeadCell: FC<Props> = ({
|
|
184
179
|
>
|
185
180
|
{headerElement}
|
186
181
|
{columnDefType === 'data' && column.getCanSort() && (
|
187
|
-
<MRT_TableHeadCellSortLabel header={header}
|
182
|
+
<MRT_TableHeadCellSortLabel header={header} table={table} />
|
188
183
|
)}
|
189
184
|
{columnDefType === 'data' && column.getCanFilter() && (
|
190
|
-
<MRT_TableHeadCellFilterLabel
|
191
|
-
header={header}
|
192
|
-
instance={instance}
|
193
|
-
/>
|
185
|
+
<MRT_TableHeadCellFilterLabel header={header} table={table} />
|
194
186
|
)}
|
195
187
|
</Box>
|
196
188
|
<Box sx={{ whiteSpace: 'nowrap' }}>
|
@@ -200,7 +192,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
|
|
200
192
|
(enableGrouping && columnDef.enableGrouping !== false)) && (
|
201
193
|
<MRT_GrabHandleButton
|
202
194
|
ref={dragRef as Ref<HTMLButtonElement>}
|
203
|
-
|
195
|
+
table={table}
|
204
196
|
/>
|
205
197
|
)}
|
206
198
|
{(enableColumnActions || columnDef.enableColumnActions) &&
|
@@ -208,20 +200,17 @@ export const MRT_TableHeadCell: FC<Props> = ({
|
|
208
200
|
columnDefType !== 'group' && (
|
209
201
|
<MRT_TableHeadCellColumnActionsButton
|
210
202
|
header={header}
|
211
|
-
|
203
|
+
table={table}
|
212
204
|
/>
|
213
205
|
)}
|
214
206
|
</Box>
|
215
207
|
{column.getCanResize() && (
|
216
|
-
<MRT_TableHeadCellResizeHandle
|
217
|
-
header={header}
|
218
|
-
instance={instance}
|
219
|
-
/>
|
208
|
+
<MRT_TableHeadCellResizeHandle header={header} table={table} />
|
220
209
|
)}
|
221
210
|
</Box>
|
222
211
|
)}
|
223
212
|
{columnDefType === 'data' && column.getCanFilter() && (
|
224
|
-
<MRT_TableHeadCellFilterContainer header={header}
|
213
|
+
<MRT_TableHeadCellFilterContainer header={header} table={table} />
|
225
214
|
)}
|
226
215
|
</TableCell>
|
227
216
|
);
|
@@ -5,12 +5,12 @@ import type { MRT_Header, MRT_TableInstance } from '..';
|
|
5
5
|
|
6
6
|
interface Props {
|
7
7
|
header: MRT_Header;
|
8
|
-
|
8
|
+
table: MRT_TableInstance;
|
9
9
|
}
|
10
10
|
|
11
11
|
export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
|
12
12
|
header,
|
13
|
-
|
13
|
+
table,
|
14
14
|
}) => {
|
15
15
|
const {
|
16
16
|
options: {
|
@@ -18,10 +18,8 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
|
|
18
18
|
localization,
|
19
19
|
muiTableHeadCellColumnActionsButtonProps,
|
20
20
|
},
|
21
|
-
} =
|
22
|
-
|
21
|
+
} = table;
|
23
22
|
const { column } = header;
|
24
|
-
|
25
23
|
const { columnDef } = column;
|
26
24
|
|
27
25
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
@@ -34,14 +32,14 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
|
|
34
32
|
|
35
33
|
const mTableHeadCellColumnActionsButtonProps =
|
36
34
|
muiTableHeadCellColumnActionsButtonProps instanceof Function
|
37
|
-
? muiTableHeadCellColumnActionsButtonProps({ column,
|
35
|
+
? muiTableHeadCellColumnActionsButtonProps({ column, table })
|
38
36
|
: muiTableHeadCellColumnActionsButtonProps;
|
39
37
|
|
40
38
|
const mcTableHeadCellColumnActionsButtonProps =
|
41
39
|
columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function
|
42
40
|
? columnDef.muiTableHeadCellColumnActionsButtonProps({
|
43
41
|
column,
|
44
|
-
|
42
|
+
table,
|
45
43
|
})
|
46
44
|
: columnDef.muiTableHeadCellColumnActionsButtonProps;
|
47
45
|
|
@@ -83,7 +81,7 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
|
|
83
81
|
anchorEl={anchorEl}
|
84
82
|
header={header}
|
85
83
|
setAnchorEl={setAnchorEl}
|
86
|
-
|
84
|
+
table={table}
|
87
85
|
/>
|
88
86
|
</>
|
89
87
|
);
|
@@ -6,25 +6,23 @@ import { MRT_Header, MRT_TableInstance } from '..';
|
|
6
6
|
|
7
7
|
interface Props {
|
8
8
|
header: MRT_Header;
|
9
|
-
|
9
|
+
table: MRT_TableInstance;
|
10
10
|
}
|
11
11
|
|
12
12
|
export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
|
13
13
|
header,
|
14
|
-
|
14
|
+
table,
|
15
15
|
}) => {
|
16
|
-
const { getState } =
|
17
|
-
|
16
|
+
const { getState } = table;
|
18
17
|
const { currentFilterFns, showFilters } = getState();
|
19
|
-
|
20
18
|
const { column } = header;
|
21
19
|
|
22
20
|
return (
|
23
21
|
<Collapse in={showFilters} mountOnEnter unmountOnExit>
|
24
22
|
{currentFilterFns[column.id] === 'between' ? (
|
25
|
-
<MRT_FilterRangeFields header={header}
|
23
|
+
<MRT_FilterRangeFields header={header} table={table} />
|
26
24
|
) : (
|
27
|
-
<MRT_FilterTextField header={header}
|
25
|
+
<MRT_FilterTextField header={header} table={table} />
|
28
26
|
)}
|
29
27
|
</Collapse>
|
30
28
|
);
|
@@ -4,39 +4,33 @@ import { MRT_Header, MRT_TableInstance } from '..';
|
|
4
4
|
|
5
5
|
interface Props {
|
6
6
|
header: MRT_Header;
|
7
|
-
|
7
|
+
table: MRT_TableInstance;
|
8
8
|
}
|
9
9
|
|
10
|
-
export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
|
11
|
-
header,
|
12
|
-
instance,
|
13
|
-
}) => {
|
10
|
+
export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
|
14
11
|
const {
|
15
12
|
getState,
|
16
13
|
options: {
|
17
14
|
icons: { FilterAltIcon },
|
18
15
|
localization,
|
19
16
|
},
|
20
|
-
} =
|
21
|
-
|
17
|
+
} = table;
|
22
18
|
const { currentFilterFns } = getState();
|
23
|
-
|
24
19
|
const { column } = header;
|
25
|
-
|
26
20
|
const { columnDef } = column;
|
27
21
|
|
28
|
-
const
|
29
|
-
|
22
|
+
const currentFilterOption = currentFilterFns?.[header.id];
|
30
23
|
const filterTooltip = localization.filteringByColumn
|
31
24
|
.replace('{column}', String(columnDef.header))
|
32
25
|
.replace(
|
33
26
|
'{filterType}',
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
27
|
+
// @ts-ignore
|
28
|
+
localization[
|
29
|
+
`filter${
|
30
|
+
currentFilterOption.charAt(0).toUpperCase() +
|
31
|
+
currentFilterOption.slice(1)
|
32
|
+
}`
|
33
|
+
],
|
40
34
|
)
|
41
35
|
.replace(
|
42
36
|
'{filterValue}',
|
@@ -54,8 +48,8 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
|
|
54
48
|
<Grow
|
55
49
|
unmountOnExit
|
56
50
|
in={
|
57
|
-
(!!column.getFilterValue() &&
|
58
|
-
(
|
51
|
+
(!!column.getFilterValue() && currentFilterOption !== 'between') ||
|
52
|
+
(currentFilterOption === 'between' && // @ts-ignore
|
59
53
|
(!!column.getFilterValue()?.[0] || !!column.getFilterValue()?.[1]))
|
60
54
|
}
|
61
55
|
>
|
@@ -4,20 +4,18 @@ import { MRT_Header, MRT_TableInstance } from '..';
|
|
4
4
|
|
5
5
|
interface Props {
|
6
6
|
header: MRT_Header;
|
7
|
-
|
7
|
+
table: MRT_TableInstance;
|
8
8
|
}
|
9
9
|
|
10
|
-
export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
10
|
+
export const MRT_TableHeadCellResizeHandle: FC<Props> = ({ header, table }) => {
|
11
|
+
const {
|
12
|
+
getState,
|
13
|
+
options: { columnResizeMode },
|
14
|
+
} = table;
|
16
15
|
const { density, showFilters } = getState();
|
17
|
-
|
18
16
|
const { column } = header;
|
19
|
-
|
20
|
-
const { columnDefType } =
|
17
|
+
const { columnDef } = column;
|
18
|
+
const { columnDefType } = columnDef;
|
21
19
|
|
22
20
|
return (
|
23
21
|
<Divider
|
@@ -46,7 +44,10 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
|
|
46
44
|
onTouchStart={header.getResizeHandler()}
|
47
45
|
style={{
|
48
46
|
transform: column.getIsResizing()
|
49
|
-
? `translateX(${
|
47
|
+
? `translateX(${
|
48
|
+
(getState().columnSizingInfo.deltaOffset ?? 0) /
|
49
|
+
(columnResizeMode === 'onChange' ? 16 : 1)
|
50
|
+
}px)`
|
50
51
|
: 'none',
|
51
52
|
}}
|
52
53
|
/>
|
@@ -4,16 +4,14 @@ import { MRT_Header, MRT_TableInstance } from '..';
|
|
4
4
|
|
5
5
|
interface Props {
|
6
6
|
header: MRT_Header;
|
7
|
-
|
7
|
+
table: MRT_TableInstance;
|
8
8
|
}
|
9
9
|
|
10
|
-
export const MRT_TableHeadCellSortLabel: FC<Props> = ({ header,
|
10
|
+
export const MRT_TableHeadCellSortLabel: FC<Props> = ({ header, table }) => {
|
11
11
|
const {
|
12
12
|
options: { localization },
|
13
|
-
} =
|
14
|
-
|
13
|
+
} = table;
|
15
14
|
const { column } = header;
|
16
|
-
|
17
15
|
const { columnDef } = column;
|
18
16
|
|
19
17
|
const sortTooltip = !!column.getIsSorted()
|
@@ -6,17 +6,17 @@ import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
|
|
6
6
|
|
7
7
|
interface Props {
|
8
8
|
headerGroup: MRT_HeaderGroup;
|
9
|
-
|
9
|
+
table: MRT_TableInstance;
|
10
10
|
}
|
11
11
|
|
12
|
-
export const MRT_TableHeadRow: FC<Props> = ({ headerGroup,
|
12
|
+
export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, table }) => {
|
13
13
|
const {
|
14
14
|
options: { enableColumnOrdering, enableGrouping, muiTableHeadRowProps },
|
15
|
-
} =
|
15
|
+
} = table;
|
16
16
|
|
17
17
|
const tableRowProps =
|
18
18
|
muiTableHeadRowProps instanceof Function
|
19
|
-
? muiTableHeadRowProps({ headerGroup,
|
19
|
+
? muiTableHeadRowProps({ headerGroup, table })
|
20
20
|
: muiTableHeadRowProps;
|
21
21
|
|
22
22
|
return (
|
@@ -33,13 +33,13 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, instance }) => {
|
|
33
33
|
<MRT_DraggableTableHeadCell
|
34
34
|
header={header}
|
35
35
|
key={header.id || index}
|
36
|
-
|
36
|
+
table={table}
|
37
37
|
/>
|
38
38
|
) : (
|
39
39
|
<MRT_TableHeadCell
|
40
40
|
header={header}
|
41
41
|
key={header.id || index}
|
42
|
-
|
42
|
+
table={table}
|
43
43
|
/>
|
44
44
|
),
|
45
45
|
)}
|