material-react-table 0.4.7 → 0.4.8
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/dist/MaterialReactTable.d.ts +65 -21
- package/dist/body/MRT_TableBodyCell.d.ts +2 -2
- package/dist/body/MRT_TableBodyRow.d.ts +2 -2
- package/dist/body/MRT_TableDetailPanel.d.ts +2 -2
- package/dist/buttons/MRT_EditActionButtons.d.ts +2 -2
- package/dist/buttons/MRT_ExpandButton.d.ts +2 -2
- package/dist/buttons/MRT_ToggleColumnActionMenuButton.d.ts +2 -2
- package/dist/buttons/MRT_ToggleRowActionMenuButton.d.ts +2 -2
- package/dist/footer/MRT_TableFooterCell.d.ts +2 -2
- package/dist/footer/MRT_TableFooterRow.d.ts +2 -2
- package/dist/head/MRT_TableHeadCell.d.ts +2 -2
- package/dist/head/MRT_TableHeadRow.d.ts +2 -2
- package/dist/inputs/MRT_EditCellTextField.d.ts +2 -2
- package/dist/inputs/MRT_FilterTextField.d.ts +2 -2
- package/dist/inputs/MRT_SelectCheckbox.d.ts +2 -2
- package/dist/material-react-table.cjs.development.js +11 -11
- 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 +11 -11
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/menus/MRT_ColumnActionMenu.d.ts +2 -2
- package/dist/menus/MRT_RowActionMenu.d.ts +2 -2
- package/dist/menus/MRT_ShowHideColumnsMenu.d.ts +2 -2
- package/dist/useMRT.d.ts +4 -4
- package/package.json +1 -1
- package/src/@types/react-table-config.d.ts +18 -121
- package/src/MaterialReactTable.tsx +179 -20
- package/src/body/MRT_TableBody.tsx +2 -1
- package/src/body/MRT_TableBodyCell.tsx +2 -2
- package/src/body/MRT_TableBodyRow.tsx +3 -3
- package/src/body/MRT_TableDetailPanel.tsx +3 -3
- package/src/buttons/MRT_EditActionButtons.tsx +2 -2
- package/src/buttons/MRT_ExpandButton.tsx +2 -2
- package/src/buttons/MRT_ShowHideColumnsButton.tsx +2 -1
- package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx +2 -2
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +2 -2
- package/src/footer/MRT_TableFooter.tsx +2 -1
- package/src/footer/MRT_TableFooterCell.tsx +2 -2
- package/src/footer/MRT_TableFooterRow.tsx +3 -3
- package/src/head/MRT_TableHead.tsx +2 -1
- package/src/head/MRT_TableHeadCell.tsx +2 -2
- package/src/head/MRT_TableHeadRow.tsx +3 -3
- package/src/index.tsx +2 -0
- package/src/inputs/MRT_EditCellTextField.tsx +2 -2
- package/src/inputs/MRT_FilterTextField.tsx +3 -2
- package/src/inputs/MRT_SelectCheckbox.tsx +2 -2
- package/src/menus/MRT_ColumnActionMenu.tsx +2 -2
- package/src/menus/MRT_RowActionMenu.tsx +2 -2
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +3 -2
- package/src/useMRT.tsx +18 -15
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { MRT_HeaderGroup } from '..';
|
|
3
3
|
interface Props {
|
|
4
4
|
anchorEl: HTMLElement | null;
|
|
5
|
-
column:
|
|
5
|
+
column: MRT_HeaderGroup;
|
|
6
6
|
setAnchorEl: (anchorEl: HTMLElement | null) => void;
|
|
7
7
|
}
|
|
8
8
|
export declare const MRT_ColumnActionMenu: FC<Props>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { MRT_ColumnInstance } from '..';
|
|
3
3
|
interface Props {
|
|
4
|
-
column:
|
|
4
|
+
column: MRT_ColumnInstance;
|
|
5
5
|
}
|
|
6
6
|
export declare const MRT_ShowHideColumnsMenu: FC<Props>;
|
|
7
7
|
export {};
|
package/dist/useMRT.d.ts
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import React, { PropsWithChildren } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { MRT_Row, MRT_TableInstance } from '.';
|
|
3
3
|
import { MRT_Icons } from './icons';
|
|
4
4
|
import { MRT_Localization } from './localization';
|
|
5
5
|
import { MaterialReactTableProps } from './MaterialReactTable';
|
|
6
6
|
export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
|
|
7
7
|
anyRowsCanExpand: boolean;
|
|
8
8
|
anyRowsExpanded: boolean;
|
|
9
|
-
currentEditingRow:
|
|
9
|
+
currentEditingRow: MRT_Row<D> | null;
|
|
10
10
|
densePadding: boolean;
|
|
11
11
|
fullScreen: boolean;
|
|
12
12
|
icons: MRT_Icons;
|
|
13
13
|
localization: MRT_Localization;
|
|
14
|
-
setCurrentEditingRow: (currentRowEditingId:
|
|
14
|
+
setCurrentEditingRow: (currentRowEditingId: MRT_Row<D> | null) => void;
|
|
15
15
|
setDensePadding: (densePadding: boolean) => void;
|
|
16
16
|
setFullScreen: (fullScreen: boolean) => void;
|
|
17
17
|
setShowFilters: (showFilters: boolean) => void;
|
|
18
18
|
setShowSearch: (showSearch: boolean) => void;
|
|
19
19
|
showFilters: boolean;
|
|
20
20
|
showSearch: boolean;
|
|
21
|
-
tableInstance:
|
|
21
|
+
tableInstance: MRT_TableInstance<D>;
|
|
22
22
|
};
|
|
23
23
|
export declare const MaterialReactTableProvider: <D extends {}>(props: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;
|
|
24
24
|
export declare const useMRT: <D extends {}>() => UseMRT<D>;
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.4.
|
|
2
|
+
"version": "0.4.8",
|
|
3
3
|
"license": "MIT",
|
|
4
4
|
"name": "material-react-table",
|
|
5
5
|
"description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",
|
|
@@ -1,102 +1,23 @@
|
|
|
1
|
-
import { ChangeEvent, ReactNode } from 'react';
|
|
2
|
-
import { TableCellProps, TextFieldProps } from '@mui/material';
|
|
3
1
|
import {
|
|
4
|
-
UseColumnOrderInstanceProps,
|
|
5
|
-
UseColumnOrderState,
|
|
6
|
-
UseExpandedHooks,
|
|
7
|
-
UseExpandedInstanceProps,
|
|
8
|
-
UseExpandedOptions,
|
|
9
|
-
UseExpandedRowProps,
|
|
10
|
-
UseExpandedState,
|
|
11
|
-
UseFiltersColumnOptions,
|
|
12
|
-
UseFiltersColumnProps,
|
|
13
|
-
UseFiltersInstanceProps,
|
|
14
|
-
UseFiltersOptions,
|
|
15
|
-
UseFiltersState,
|
|
16
|
-
UseGlobalFiltersColumnOptions,
|
|
17
|
-
UseGlobalFiltersInstanceProps,
|
|
18
|
-
UseGlobalFiltersOptions,
|
|
19
|
-
UseGlobalFiltersState,
|
|
20
|
-
UseGroupByCellProps,
|
|
21
|
-
UseGroupByColumnOptions,
|
|
22
|
-
UseGroupByColumnProps,
|
|
23
2
|
UseGroupByHooks,
|
|
24
|
-
UseGroupByInstanceProps,
|
|
25
|
-
UseGroupByOptions,
|
|
26
|
-
UseGroupByRowProps,
|
|
27
|
-
UseGroupByState,
|
|
28
|
-
UsePaginationInstanceProps,
|
|
29
|
-
UsePaginationOptions,
|
|
30
|
-
UsePaginationState,
|
|
31
|
-
UseResizeColumnsColumnOptions,
|
|
32
|
-
UseResizeColumnsColumnProps,
|
|
33
|
-
UseResizeColumnsOptions,
|
|
34
|
-
UseResizeColumnsState,
|
|
35
3
|
UseRowSelectHooks,
|
|
36
|
-
UseRowSelectInstanceProps,
|
|
37
|
-
UseRowSelectOptions,
|
|
38
|
-
UseRowSelectRowProps,
|
|
39
|
-
UseRowSelectState,
|
|
40
|
-
UseRowStateCellProps,
|
|
41
|
-
UseRowStateInstanceProps,
|
|
42
|
-
UseRowStateOptions,
|
|
43
|
-
UseRowStateRowProps,
|
|
44
|
-
UseRowStateState,
|
|
45
|
-
UseSortByColumnOptions,
|
|
46
|
-
UseSortByColumnProps,
|
|
47
4
|
UseSortByHooks,
|
|
48
|
-
UseSortByInstanceProps,
|
|
49
|
-
UseSortByOptions,
|
|
50
|
-
UseSortByState,
|
|
51
5
|
} from 'react-table';
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
editable?: boolean;
|
|
62
|
-
Edit?: ({ cell, onChange }: { cell: Cell<D> }) => ReactNode;
|
|
63
|
-
muiTableBodyCellProps?:
|
|
64
|
-
| TableCellProps
|
|
65
|
-
| ((cell: Cell<D>) => TableCellProps);
|
|
66
|
-
muiTableHeadCellProps?:
|
|
67
|
-
| TableCellProps
|
|
68
|
-
| ((column: Column<D>) => TableCellProps);
|
|
69
|
-
muiTableFooterCellProps?:
|
|
70
|
-
| TableCellProps
|
|
71
|
-
| ((column: Column<D>) => TableCellProps);
|
|
72
|
-
muiTableBodyCellEditTextFieldProps?:
|
|
73
|
-
| TextFieldProps
|
|
74
|
-
| ((cell: Cell<D>) => TextFieldProps);
|
|
75
|
-
muiTableHeadCellFilterTextFieldProps?:
|
|
76
|
-
| TextFieldProps
|
|
77
|
-
| ((column: Column<D>) => TextFieldProps);
|
|
78
|
-
onCellEditChange?: (
|
|
79
|
-
event: ChangeEvent<HTMLInputElement>,
|
|
80
|
-
cell: Cell<D>,
|
|
81
|
-
) => void;
|
|
82
|
-
onFilterChange?: (
|
|
83
|
-
event: ChangeEvent<HTMLInputElement>,
|
|
84
|
-
filterValue: any,
|
|
85
|
-
) => void;
|
|
86
|
-
};
|
|
6
|
+
import {
|
|
7
|
+
MRT_Cell,
|
|
8
|
+
MRT_ColumnInstance,
|
|
9
|
+
MRT_ColumnInterface,
|
|
10
|
+
MRT_Row,
|
|
11
|
+
MRT_TableInstance,
|
|
12
|
+
MRT_TableOptions,
|
|
13
|
+
MRT_TableState,
|
|
14
|
+
} from '..';
|
|
87
15
|
|
|
88
16
|
declare module 'react-table' {
|
|
17
|
+
// take this file as-is, or comment out the sections that don't apply to your plugin configuration
|
|
18
|
+
|
|
89
19
|
export interface TableOptions<D extends Record<string, unknown>>
|
|
90
|
-
extends
|
|
91
|
-
UseFiltersOptions<D>,
|
|
92
|
-
UseGlobalFiltersOptions<D>,
|
|
93
|
-
UseGroupByOptions<D>,
|
|
94
|
-
UsePaginationOptions<D>,
|
|
95
|
-
UseResizeColumnsOptions<D>,
|
|
96
|
-
UseRowSelectOptions<D>,
|
|
97
|
-
UseRowStateOptions<D>,
|
|
98
|
-
UseSortByOptions<D>,
|
|
99
|
-
Record<string, any> {}
|
|
20
|
+
extends MRT_TableOptions<D> {}
|
|
100
21
|
|
|
101
22
|
export interface Hooks<
|
|
102
23
|
D extends Record<string, unknown> = Record<string, unknown>,
|
|
@@ -107,50 +28,26 @@ declare module 'react-table' {
|
|
|
107
28
|
|
|
108
29
|
export interface TableInstance<
|
|
109
30
|
D extends Record<string, unknown> = Record<string, unknown>,
|
|
110
|
-
> extends
|
|
111
|
-
UseExpandedInstanceProps<D>,
|
|
112
|
-
UseFiltersInstanceProps<D>,
|
|
113
|
-
UseGlobalFiltersInstanceProps<D>,
|
|
114
|
-
UseGroupByInstanceProps<D>,
|
|
115
|
-
UsePaginationInstanceProps<D>,
|
|
116
|
-
UseRowSelectInstanceProps<D>,
|
|
117
|
-
UseRowStateInstanceProps<D>,
|
|
118
|
-
UseSortByInstanceProps<D> {}
|
|
31
|
+
> extends MRT_TableInstance<D> {}
|
|
119
32
|
|
|
120
33
|
export interface TableState<
|
|
121
34
|
D extends Record<string, unknown> = Record<string, unknown>,
|
|
122
|
-
> extends
|
|
123
|
-
UseExpandedState<D>,
|
|
124
|
-
UseFiltersState<D>,
|
|
125
|
-
UseGlobalFiltersState<D>,
|
|
126
|
-
UseGroupByState<D>,
|
|
127
|
-
UsePaginationState<D>,
|
|
128
|
-
UseResizeColumnsState<D>,
|
|
129
|
-
UseRowSelectState<D>,
|
|
130
|
-
UseRowStateState<D>,
|
|
131
|
-
UseSortByState<D> {}
|
|
35
|
+
> extends MRT_TableState<D> {}
|
|
132
36
|
|
|
133
37
|
export interface ColumnInterface<
|
|
134
38
|
D extends Record<string, unknown> = Record<string, unknown>,
|
|
135
|
-
> extends MRT_ColumnInterface {}
|
|
39
|
+
> extends MRT_ColumnInterface<D> {}
|
|
136
40
|
|
|
137
41
|
export interface ColumnInstance<
|
|
138
42
|
D extends Record<string, unknown> = Record<string, unknown>,
|
|
139
|
-
> extends
|
|
140
|
-
UseGroupByColumnProps<D>,
|
|
141
|
-
UseResizeColumnsColumnProps<D>,
|
|
142
|
-
UseSortByColumnProps<D> {}
|
|
43
|
+
> extends MRT_ColumnInstance<D> {}
|
|
143
44
|
|
|
144
45
|
export interface Cell<
|
|
145
46
|
D extends Record<string, unknown> = Record<string, unknown>,
|
|
146
47
|
V = any,
|
|
147
|
-
> extends
|
|
148
|
-
UseRowStateCellProps<D> {}
|
|
48
|
+
> extends MRT_Cell<D> {}
|
|
149
49
|
|
|
150
50
|
export interface Row<
|
|
151
51
|
D extends Record<string, unknown> = Record<string, unknown>,
|
|
152
|
-
> extends
|
|
153
|
-
UseGroupByRowProps<D>,
|
|
154
|
-
UseRowSelectRowProps<D>,
|
|
155
|
-
UseRowStateRowProps<D> {}
|
|
52
|
+
> extends MRT_Row<D> {}
|
|
156
53
|
}
|
|
@@ -16,28 +16,185 @@ import {
|
|
|
16
16
|
import {
|
|
17
17
|
Cell,
|
|
18
18
|
Column,
|
|
19
|
+
ColumnInstance,
|
|
20
|
+
// ColumnInterface,
|
|
19
21
|
HeaderGroup,
|
|
20
22
|
Row,
|
|
21
23
|
TableInstance,
|
|
22
24
|
TableOptions,
|
|
25
|
+
TableState,
|
|
26
|
+
UseColumnOrderInstanceProps,
|
|
27
|
+
UseColumnOrderState,
|
|
28
|
+
UseExpandedInstanceProps,
|
|
23
29
|
UseExpandedOptions,
|
|
30
|
+
UseExpandedRowProps,
|
|
31
|
+
UseExpandedState,
|
|
32
|
+
UseFiltersColumnOptions,
|
|
33
|
+
UseFiltersColumnProps,
|
|
34
|
+
UseFiltersInstanceProps,
|
|
24
35
|
UseFiltersOptions,
|
|
36
|
+
UseFiltersState,
|
|
37
|
+
UseGlobalFiltersColumnOptions,
|
|
38
|
+
UseGlobalFiltersInstanceProps,
|
|
25
39
|
UseGlobalFiltersOptions,
|
|
40
|
+
UseGlobalFiltersState,
|
|
41
|
+
UseGroupByCellProps,
|
|
42
|
+
UseGroupByColumnOptions,
|
|
43
|
+
UseGroupByColumnProps,
|
|
44
|
+
UseGroupByInstanceProps,
|
|
26
45
|
UseGroupByOptions,
|
|
46
|
+
UseGroupByRowProps,
|
|
47
|
+
UseGroupByState,
|
|
48
|
+
UsePaginationInstanceProps,
|
|
27
49
|
UsePaginationOptions,
|
|
50
|
+
UsePaginationState,
|
|
51
|
+
UseResizeColumnsColumnOptions,
|
|
52
|
+
UseResizeColumnsColumnProps,
|
|
28
53
|
UseResizeColumnsOptions,
|
|
54
|
+
UseResizeColumnsState,
|
|
55
|
+
UseRowSelectInstanceProps,
|
|
29
56
|
UseRowSelectOptions,
|
|
57
|
+
UseRowSelectRowProps,
|
|
58
|
+
UseRowSelectState,
|
|
59
|
+
UseRowStateCellProps,
|
|
60
|
+
UseRowStateInstanceProps,
|
|
30
61
|
UseRowStateOptions,
|
|
62
|
+
UseRowStateRowProps,
|
|
63
|
+
UseRowStateState,
|
|
64
|
+
UseSortByColumnOptions,
|
|
65
|
+
UseSortByColumnProps,
|
|
66
|
+
UseSortByInstanceProps,
|
|
31
67
|
UseSortByOptions,
|
|
68
|
+
UseSortByState,
|
|
69
|
+
UseTableHeaderGroupProps,
|
|
70
|
+
UseTableInstanceProps,
|
|
32
71
|
UseTableOptions,
|
|
33
72
|
} from 'react-table';
|
|
34
73
|
import { MaterialReactTableProvider } from './useMRT';
|
|
35
74
|
import { MRT_TableContainer } from './table/MRT_TableContainer';
|
|
36
|
-
import { MRT_ColumnInterface } from './@types/react-table-config';
|
|
37
75
|
import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
|
|
38
76
|
import { MRT_Default_Icons, MRT_Icons } from './icons';
|
|
39
77
|
|
|
40
|
-
export type
|
|
78
|
+
export type MRT_TableOptions<D extends {} = {}> = TableOptions<D> &
|
|
79
|
+
UseExpandedOptions<D> &
|
|
80
|
+
UseFiltersOptions<D> &
|
|
81
|
+
UseGlobalFiltersOptions<D> &
|
|
82
|
+
UseGroupByOptions<D> &
|
|
83
|
+
UsePaginationOptions<D> &
|
|
84
|
+
UseResizeColumnsOptions<D> &
|
|
85
|
+
UseRowSelectOptions<D> &
|
|
86
|
+
UseRowStateOptions<D> &
|
|
87
|
+
UseSortByOptions<D> & {};
|
|
88
|
+
|
|
89
|
+
export type MRT_TableInstance<D extends {} = {}> = TableInstance<D> &
|
|
90
|
+
UseTableInstanceProps<D> &
|
|
91
|
+
UseColumnOrderInstanceProps<D> &
|
|
92
|
+
UseExpandedInstanceProps<D> &
|
|
93
|
+
UseFiltersInstanceProps<D> &
|
|
94
|
+
UseGlobalFiltersInstanceProps<D> &
|
|
95
|
+
UseGroupByInstanceProps<D> &
|
|
96
|
+
UsePaginationInstanceProps<D> &
|
|
97
|
+
UseRowSelectInstanceProps<D> &
|
|
98
|
+
UseRowStateInstanceProps<D> &
|
|
99
|
+
UseSortByInstanceProps<D> & {
|
|
100
|
+
columns: (Column<D> & MRT_ColumnInstance<D>)[];
|
|
101
|
+
headerGroups: MRT_HeaderGroup<D>[];
|
|
102
|
+
footerGroups: MRT_HeaderGroup<D>[];
|
|
103
|
+
state: MRT_TableState<D>;
|
|
104
|
+
rows: MRT_Row<D>[];
|
|
105
|
+
page: MRT_Row<D>[];
|
|
106
|
+
resetResizing: () => void;
|
|
107
|
+
getToggleAllRowsExpandedProps: () => void;
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
export type MRT_ColumnInterface<D extends {} = {}> =
|
|
111
|
+
// ColumnInterface<D> &
|
|
112
|
+
UseFiltersColumnOptions<D> &
|
|
113
|
+
UseGlobalFiltersColumnOptions<D> &
|
|
114
|
+
UseGroupByColumnOptions<D> &
|
|
115
|
+
UseResizeColumnsColumnOptions<D> &
|
|
116
|
+
UseSortByColumnOptions<D> & {
|
|
117
|
+
Edit?: ({
|
|
118
|
+
cell,
|
|
119
|
+
onChange,
|
|
120
|
+
}: {
|
|
121
|
+
cell: MRT_Cell<D>;
|
|
122
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
123
|
+
}) => ReactNode;
|
|
124
|
+
Filter?: ({ column }: { column: MRT_HeaderGroup<D> }) => ReactNode;
|
|
125
|
+
Footer?: string;
|
|
126
|
+
Header?: string;
|
|
127
|
+
disableFilters?: boolean;
|
|
128
|
+
editable?: boolean;
|
|
129
|
+
muiTableBodyCellEditTextFieldProps?:
|
|
130
|
+
| TextFieldProps
|
|
131
|
+
| ((cell: MRT_Cell<D>) => TextFieldProps);
|
|
132
|
+
muiTableBodyCellProps?:
|
|
133
|
+
| TableCellProps
|
|
134
|
+
| ((cell: MRT_Cell<D>) => TableCellProps);
|
|
135
|
+
muiTableFooterCellProps?:
|
|
136
|
+
| TableCellProps
|
|
137
|
+
| ((column: Column<D>) => TableCellProps);
|
|
138
|
+
muiTableHeadCellFilterTextFieldProps?:
|
|
139
|
+
| TextFieldProps
|
|
140
|
+
| ((column: Column<D>) => TextFieldProps);
|
|
141
|
+
muiTableHeadCellProps?:
|
|
142
|
+
| TableCellProps
|
|
143
|
+
| ((column: Column<D>) => TableCellProps);
|
|
144
|
+
onCellEditChange?: (
|
|
145
|
+
event: ChangeEvent<HTMLInputElement>,
|
|
146
|
+
cell: MRT_Cell<D>,
|
|
147
|
+
) => void;
|
|
148
|
+
onFilterChange?: (
|
|
149
|
+
event: ChangeEvent<HTMLInputElement>,
|
|
150
|
+
filterValue: any,
|
|
151
|
+
) => void;
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
export type MRT_ColumnInstance<D extends {} = {}> = ColumnInstance<D> &
|
|
155
|
+
UseFiltersColumnProps<D> &
|
|
156
|
+
UseGroupByColumnProps<D> &
|
|
157
|
+
UseResizeColumnsColumnProps<D> &
|
|
158
|
+
UseSortByColumnProps<D> & {
|
|
159
|
+
columns?: MRT_ColumnInstance<D>[];
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
export type MRT_HeaderGroup<D extends {} = {}> = HeaderGroup<D> &
|
|
163
|
+
MRT_ColumnInstance<D> &
|
|
164
|
+
UseTableHeaderGroupProps<D> & {
|
|
165
|
+
headers: MRT_HeaderGroup<D>[];
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
export type MRT_Row<D extends {} = {}> = Row<D> &
|
|
169
|
+
UseExpandedRowProps<D> &
|
|
170
|
+
UseGroupByRowProps<D> &
|
|
171
|
+
UseRowSelectRowProps<D> &
|
|
172
|
+
UseRowStateRowProps<D> & {
|
|
173
|
+
cells: MRT_Cell<D>[];
|
|
174
|
+
};
|
|
175
|
+
|
|
176
|
+
export type MRT_Cell<D extends {} = {}, _V = any> = Cell<D> &
|
|
177
|
+
UseGroupByCellProps<D> &
|
|
178
|
+
UseRowStateCellProps<D> & {};
|
|
179
|
+
|
|
180
|
+
export type MRT_TableState<D extends {} = {}> = TableState<D> &
|
|
181
|
+
UseColumnOrderState<D> &
|
|
182
|
+
UseExpandedState<D> &
|
|
183
|
+
UseFiltersState<D> &
|
|
184
|
+
UseGlobalFiltersState<D> &
|
|
185
|
+
UseGroupByState<D> &
|
|
186
|
+
UsePaginationState<D> &
|
|
187
|
+
UseResizeColumnsState<D> &
|
|
188
|
+
UseRowSelectState<D> &
|
|
189
|
+
UseRowStateState<D> &
|
|
190
|
+
UseSortByState<D> & {
|
|
191
|
+
densePadding?: boolean;
|
|
192
|
+
fullScreen?: boolean;
|
|
193
|
+
showFilters?: boolean;
|
|
194
|
+
showSearchTextField?: boolean;
|
|
195
|
+
};
|
|
196
|
+
|
|
197
|
+
export type MaterialReactTableProps<D extends {} = {}> = MRT_TableOptions<D> &
|
|
41
198
|
UseTableOptions<D> &
|
|
42
199
|
UseExpandedOptions<D> &
|
|
43
200
|
UseFiltersOptions<D> &
|
|
@@ -49,10 +206,7 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
|
|
|
49
206
|
UseRowStateOptions<D> &
|
|
50
207
|
UseSortByOptions<D> & {
|
|
51
208
|
columns: (Column<D> & MRT_ColumnInterface)[];
|
|
52
|
-
|
|
53
|
-
defaultFullScreen?: boolean;
|
|
54
|
-
defaultShowFilters?: boolean;
|
|
55
|
-
defaultShowSearchTextField?: boolean;
|
|
209
|
+
data: D[];
|
|
56
210
|
disableColumnActions?: boolean;
|
|
57
211
|
disableColumnHiding?: boolean;
|
|
58
212
|
disableDensePaddingToggle?: boolean;
|
|
@@ -72,21 +226,22 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
|
|
|
72
226
|
hideToolbarInternalActions?: boolean;
|
|
73
227
|
hideToolbarTop?: boolean;
|
|
74
228
|
icons?: Partial<MRT_Icons>;
|
|
229
|
+
initialState?: Partial<MRT_TableState>;
|
|
75
230
|
isFetching?: boolean;
|
|
76
231
|
isLoading?: boolean;
|
|
77
232
|
localization?: Partial<MRT_Localization>;
|
|
78
233
|
muiSearchTextFieldProps?: TextFieldProps;
|
|
79
234
|
muiTableBodyCellEditTextFieldProps?:
|
|
80
235
|
| TextFieldProps
|
|
81
|
-
| ((cell?:
|
|
236
|
+
| ((cell?: MRT_Cell<D>) => TextFieldProps);
|
|
82
237
|
muiTableBodyCellProps?:
|
|
83
238
|
| TableCellProps
|
|
84
|
-
| ((cell?:
|
|
239
|
+
| ((cell?: MRT_Cell<D>) => TableCellProps);
|
|
85
240
|
muiTableBodyProps?: TableBodyProps;
|
|
86
241
|
muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
|
|
87
242
|
muiTableContainerProps?:
|
|
88
243
|
| TableContainerProps
|
|
89
|
-
| ((table:
|
|
244
|
+
| ((table: MRT_TableInstance<D>) => TableContainerProps);
|
|
90
245
|
muiTableDetailPanelProps?:
|
|
91
246
|
| TableCellProps
|
|
92
247
|
| ((row: Row<D>) => TableCellProps);
|
|
@@ -96,7 +251,7 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
|
|
|
96
251
|
muiTableFooterProps?: TableFooterProps;
|
|
97
252
|
muiTableFooterRowProps?:
|
|
98
253
|
| TableRowProps
|
|
99
|
-
| ((footerGroup:
|
|
254
|
+
| ((footerGroup: MRT_HeaderGroup<D>) => TableRowProps);
|
|
100
255
|
muiTableHeadCellFilterTextFieldProps?:
|
|
101
256
|
| TextFieldProps
|
|
102
257
|
| ((column: Column<D>) => TextFieldProps);
|
|
@@ -106,23 +261,25 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
|
|
|
106
261
|
muiTableHeadProps?: TableHeadProps;
|
|
107
262
|
muiTableHeadRowProps?:
|
|
108
263
|
| TableRowProps
|
|
109
|
-
| ((row:
|
|
264
|
+
| ((row: MRT_HeaderGroup<D>) => TableRowProps);
|
|
110
265
|
muiTablePaginationProps?:
|
|
111
266
|
| Partial<TablePaginationProps>
|
|
112
|
-
| ((
|
|
267
|
+
| ((
|
|
268
|
+
tableInstance: MRT_TableInstance<D>,
|
|
269
|
+
) => Partial<TablePaginationProps>);
|
|
113
270
|
muiTableProps?: TableProps;
|
|
114
271
|
muiTableToolbarAlertBannerProps?:
|
|
115
272
|
| AlertProps
|
|
116
|
-
| ((tableInstance:
|
|
273
|
+
| ((tableInstance: MRT_TableInstance<D>) => AlertProps);
|
|
117
274
|
muiTableToolbarBottomProps?:
|
|
118
275
|
| ToolbarProps
|
|
119
|
-
| ((tableInstance:
|
|
276
|
+
| ((tableInstance: MRT_TableInstance<D>) => ToolbarProps);
|
|
120
277
|
muiTableToolbarTopProps?:
|
|
121
278
|
| ToolbarProps
|
|
122
|
-
| ((tableInstance:
|
|
279
|
+
| ((tableInstance: MRT_TableInstance<D>) => ToolbarProps);
|
|
123
280
|
onCellClick?: (
|
|
124
281
|
event: MouseEvent<HTMLTableCellElement>,
|
|
125
|
-
cell:
|
|
282
|
+
cell: MRT_Cell<D>,
|
|
126
283
|
) => void;
|
|
127
284
|
onColumnHide?: (column: Column<D>, visibleColumns: Column<D>[]) => void;
|
|
128
285
|
onDetailPanelClick?: (
|
|
@@ -149,16 +306,18 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
|
|
|
149
306
|
renderDetailPanel?: (row: Row<D>) => ReactNode;
|
|
150
307
|
renderRowActionMenuItems?: (
|
|
151
308
|
rowData: Row<D>,
|
|
152
|
-
tableInstance:
|
|
309
|
+
tableInstance: MRT_TableInstance<D>,
|
|
153
310
|
closeMenu: () => void,
|
|
154
311
|
) => ReactNode[];
|
|
155
312
|
renderRowActions?: (
|
|
156
313
|
row: Row<D>,
|
|
157
|
-
tableInstance:
|
|
314
|
+
tableInstance: MRT_TableInstance<D>,
|
|
315
|
+
) => ReactNode;
|
|
316
|
+
renderToolbarCustomActions?: (
|
|
317
|
+
tableInstance: MRT_TableInstance<D>,
|
|
158
318
|
) => ReactNode;
|
|
159
|
-
renderToolbarCustomActions?: (tableInstance: TableInstance<D>) => ReactNode;
|
|
160
319
|
renderToolbarInternalActions?: (
|
|
161
|
-
tableInstance:
|
|
320
|
+
tableInstance: MRT_TableInstance<D>,
|
|
162
321
|
{
|
|
163
322
|
MRT_ToggleSearchButton,
|
|
164
323
|
MRT_ToggleFiltersButton,
|
|
@@ -2,6 +2,7 @@ import React, { FC } from 'react';
|
|
|
2
2
|
import { styled, TableBody as MuiTableBody } from '@mui/material';
|
|
3
3
|
import { MRT_TableBodyRow } from './MRT_TableBodyRow';
|
|
4
4
|
import { useMRT } from '../useMRT';
|
|
5
|
+
import { MRT_Row } from '..';
|
|
5
6
|
|
|
6
7
|
const TableBody = styled(MuiTableBody)({
|
|
7
8
|
overflowY: 'hidden',
|
|
@@ -25,7 +26,7 @@ export const MRT_TableBody: FC<Props> = () => {
|
|
|
25
26
|
|
|
26
27
|
return (
|
|
27
28
|
<TableBody {...tableBodyProps}>
|
|
28
|
-
{rows.map((row) => {
|
|
29
|
+
{rows.map((row: MRT_Row) => {
|
|
29
30
|
tableInstance.prepareRow(row);
|
|
30
31
|
return <MRT_TableBodyRow key={row.getRowProps().key} row={row} />;
|
|
31
32
|
})}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React, { FC, MouseEvent } from 'react';
|
|
2
2
|
import { styled, TableCell as MuiTableCell } from '@mui/material';
|
|
3
|
-
import { Cell } from 'react-table';
|
|
4
3
|
import { useMRT } from '../useMRT';
|
|
5
4
|
import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
|
|
5
|
+
import { MRT_Cell } from '..';
|
|
6
6
|
|
|
7
7
|
export const MRT_StyledTableBodyCell = styled(MuiTableCell, {
|
|
8
8
|
shouldForwardProp: (prop) => prop !== 'densePadding',
|
|
@@ -13,7 +13,7 @@ export const MRT_StyledTableBodyCell = styled(MuiTableCell, {
|
|
|
13
13
|
}));
|
|
14
14
|
|
|
15
15
|
interface Props {
|
|
16
|
-
cell:
|
|
16
|
+
cell: MRT_Cell;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React, { FC, MouseEvent } from 'react';
|
|
2
2
|
import { alpha, styled, TableRow as MuiTableRow } from '@mui/material';
|
|
3
|
-
import { Row } from 'react-table';
|
|
4
3
|
import {
|
|
5
4
|
MRT_StyledTableBodyCell,
|
|
6
5
|
MRT_TableBodyCell,
|
|
@@ -10,6 +9,7 @@ import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
|
|
|
10
9
|
import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
|
|
11
10
|
import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
|
|
12
11
|
import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
|
|
12
|
+
import { MRT_Cell, MRT_Row } from '..';
|
|
13
13
|
|
|
14
14
|
export const TableRow = styled(MuiTableRow, {
|
|
15
15
|
shouldForwardProp: (prop) => prop !== 'isSelected',
|
|
@@ -20,7 +20,7 @@ export const TableRow = styled(MuiTableRow, {
|
|
|
20
20
|
}));
|
|
21
21
|
|
|
22
22
|
interface Props {
|
|
23
|
-
row:
|
|
23
|
+
row: MRT_Row;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
|
|
@@ -71,7 +71,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
|
|
|
71
71
|
<MRT_ExpandButton row={row} />
|
|
72
72
|
)}
|
|
73
73
|
{enableSelection && <MRT_SelectCheckbox row={row} />}
|
|
74
|
-
{row.cells.map((cell) => (
|
|
74
|
+
{row.cells.map((cell: MRT_Cell) => (
|
|
75
75
|
<MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />
|
|
76
76
|
))}
|
|
77
77
|
{(enableRowActions || enableRowEditing) &&
|
|
@@ -5,8 +5,8 @@ import {
|
|
|
5
5
|
TableCell as MuiTableCell,
|
|
6
6
|
TableRow,
|
|
7
7
|
} from '@mui/material';
|
|
8
|
-
import { Row } from 'react-table';
|
|
9
8
|
import { useMRT } from '../useMRT';
|
|
9
|
+
import { MRT_Row } from '..';
|
|
10
10
|
|
|
11
11
|
const TableCell = styled(MuiTableCell, {
|
|
12
12
|
shouldForwardProp: (prop) => prop !== 'isExpanded',
|
|
@@ -18,7 +18,7 @@ const TableCell = styled(MuiTableCell, {
|
|
|
18
18
|
}));
|
|
19
19
|
|
|
20
20
|
interface Props {
|
|
21
|
-
row:
|
|
21
|
+
row: MRT_Row;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
|
|
@@ -50,7 +50,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
|
|
|
50
50
|
: muiTableDetailPanelProps;
|
|
51
51
|
|
|
52
52
|
return (
|
|
53
|
-
<TableRow
|
|
53
|
+
<TableRow {...tableRowProps}>
|
|
54
54
|
<TableCell
|
|
55
55
|
colSpan={tableInstance.visibleColumns.length + 10}
|
|
56
56
|
isExpanded={row.isExpanded}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { FC } from 'react';
|
|
2
2
|
import { IconButton, styled, Tooltip } from '@mui/material';
|
|
3
3
|
import { useMRT } from '../useMRT';
|
|
4
|
-
import {
|
|
4
|
+
import { MRT_Row } from '..';
|
|
5
5
|
|
|
6
6
|
const EditActionButtonWrappers = styled('div')({
|
|
7
7
|
display: 'flex',
|
|
@@ -9,7 +9,7 @@ const EditActionButtonWrappers = styled('div')({
|
|
|
9
9
|
});
|
|
10
10
|
|
|
11
11
|
interface Props {
|
|
12
|
-
row:
|
|
12
|
+
row: MRT_Row;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React, { FC } from 'react';
|
|
2
2
|
import { IconButton, styled } from '@mui/material';
|
|
3
|
-
import { Row } from 'react-table';
|
|
4
3
|
import { useMRT } from '../useMRT';
|
|
5
4
|
import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
|
|
5
|
+
import { MRT_Row } from '..';
|
|
6
6
|
|
|
7
7
|
const TableCell = styled(MRT_TableButtonCell, {
|
|
8
8
|
shouldForwardProp: (prop) => prop !== 'depth',
|
|
@@ -12,7 +12,7 @@ const TableCell = styled(MRT_TableButtonCell, {
|
|
|
12
12
|
}));
|
|
13
13
|
|
|
14
14
|
interface Props {
|
|
15
|
-
row:
|
|
15
|
+
row: MRT_Row;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
export const MRT_ExpandButton: FC<Props> = ({ row }) => {
|