material-react-table 0.4.5 → 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/README.md +3 -2
- package/dist/MaterialReactTable.d.ts +71 -25
- 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/icons.d.ts +25 -0
- 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/{utils/localization.d.ts → localization.d.ts} +1 -1
- package/dist/material-react-table.cjs.development.js +197 -155
- 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 +198 -156
- 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 +10 -6
- package/package.json +1 -1
- package/src/@types/react-table-config.d.ts +18 -121
- package/src/MaterialReactTable.tsx +188 -25
- package/src/body/MRT_TableBody.tsx +2 -1
- package/src/body/MRT_TableBodyCell.tsx +2 -2
- package/src/body/MRT_TableBodyRow.tsx +11 -9
- package/src/body/MRT_TableDetailPanel.tsx +9 -16
- package/src/buttons/MRT_EditActionButtons.tsx +7 -8
- package/src/buttons/MRT_ExpandAllButton.tsx +17 -18
- package/src/buttons/MRT_ExpandButton.tsx +20 -21
- package/src/buttons/MRT_FullScreenToggleButton.tsx +9 -6
- package/src/buttons/MRT_ShowHideColumnsButton.tsx +11 -7
- package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx +8 -6
- package/src/buttons/MRT_ToggleDensePaddingButton.tsx +8 -5
- package/src/buttons/MRT_ToggleFiltersButton.tsx +8 -5
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +8 -9
- package/src/buttons/MRT_ToggleSearchButton.tsx +8 -5
- 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 +7 -7
- package/src/head/MRT_TableHeadCellActions.tsx +1 -1
- package/src/head/MRT_TableHeadRow.tsx +3 -3
- package/src/icons.tsx +72 -0
- package/src/index.tsx +2 -0
- package/src/inputs/MRT_EditCellTextField.tsx +2 -2
- package/src/inputs/MRT_FilterTextField.tsx +15 -15
- package/src/inputs/MRT_SearchTextField.tsx +4 -5
- package/src/inputs/MRT_SelectCheckbox.tsx +7 -7
- package/src/{utils/localization.ts → localization.ts} +1 -1
- package/src/menus/MRT_ColumnActionMenu.tsx +16 -14
- package/src/menus/MRT_RowActionMenu.tsx +4 -4
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +3 -2
- package/src/table/MRT_TableContainer.tsx +19 -1
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +3 -3
- package/src/useMRT.tsx +24 -17
|
@@ -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,20 +1,24 @@
|
|
|
1
1
|
import React, { PropsWithChildren } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { MRT_Row, MRT_TableInstance } from '.';
|
|
3
|
+
import { MRT_Icons } from './icons';
|
|
4
|
+
import { MRT_Localization } from './localization';
|
|
3
5
|
import { MaterialReactTableProps } from './MaterialReactTable';
|
|
4
|
-
export
|
|
6
|
+
export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
|
|
5
7
|
anyRowsCanExpand: boolean;
|
|
6
8
|
anyRowsExpanded: boolean;
|
|
7
|
-
currentEditingRow:
|
|
9
|
+
currentEditingRow: MRT_Row<D> | null;
|
|
8
10
|
densePadding: boolean;
|
|
9
11
|
fullScreen: boolean;
|
|
10
|
-
|
|
12
|
+
icons: MRT_Icons;
|
|
13
|
+
localization: MRT_Localization;
|
|
14
|
+
setCurrentEditingRow: (currentRowEditingId: MRT_Row<D> | null) => void;
|
|
11
15
|
setDensePadding: (densePadding: boolean) => void;
|
|
12
16
|
setFullScreen: (fullScreen: boolean) => void;
|
|
13
17
|
setShowFilters: (showFilters: boolean) => void;
|
|
14
18
|
setShowSearch: (showSearch: boolean) => void;
|
|
15
19
|
showFilters: boolean;
|
|
16
20
|
showSearch: boolean;
|
|
17
|
-
tableInstance:
|
|
18
|
-
}
|
|
21
|
+
tableInstance: MRT_TableInstance<D>;
|
|
22
|
+
};
|
|
19
23
|
export declare const MaterialReactTableProvider: <D extends {}>(props: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;
|
|
20
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,27 +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 {
|
|
37
|
-
import {
|
|
75
|
+
import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
|
|
76
|
+
import { MRT_Default_Icons, MRT_Icons } from './icons';
|
|
38
77
|
|
|
39
|
-
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> &
|
|
40
198
|
UseTableOptions<D> &
|
|
41
199
|
UseExpandedOptions<D> &
|
|
42
200
|
UseFiltersOptions<D> &
|
|
@@ -48,10 +206,7 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
|
|
|
48
206
|
UseRowStateOptions<D> &
|
|
49
207
|
UseSortByOptions<D> & {
|
|
50
208
|
columns: (Column<D> & MRT_ColumnInterface)[];
|
|
51
|
-
|
|
52
|
-
defaultFullScreen?: boolean;
|
|
53
|
-
defaultShowFilters?: boolean;
|
|
54
|
-
defaultShowSearchTextField?: boolean;
|
|
209
|
+
data: D[];
|
|
55
210
|
disableColumnActions?: boolean;
|
|
56
211
|
disableColumnHiding?: boolean;
|
|
57
212
|
disableDensePaddingToggle?: boolean;
|
|
@@ -59,32 +214,34 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
|
|
|
59
214
|
disableFullScreenToggle?: boolean;
|
|
60
215
|
disableSelectAll?: boolean;
|
|
61
216
|
disableSubRowTree?: boolean;
|
|
62
|
-
enableRowNumbers?: boolean;
|
|
63
217
|
enableColumnGrouping?: boolean;
|
|
64
218
|
enableColumnResizing?: boolean;
|
|
65
219
|
enableRowActions?: boolean;
|
|
66
220
|
enableRowEditing?: boolean;
|
|
221
|
+
enableRowNumbers?: boolean;
|
|
67
222
|
enableSelection?: boolean;
|
|
68
223
|
hideTableFooter?: boolean;
|
|
69
224
|
hideTableHead?: boolean;
|
|
70
|
-
hideToolbarInternalActions?: boolean;
|
|
71
225
|
hideToolbarBottom?: boolean;
|
|
226
|
+
hideToolbarInternalActions?: boolean;
|
|
72
227
|
hideToolbarTop?: boolean;
|
|
228
|
+
icons?: Partial<MRT_Icons>;
|
|
229
|
+
initialState?: Partial<MRT_TableState>;
|
|
73
230
|
isFetching?: boolean;
|
|
74
231
|
isLoading?: boolean;
|
|
75
232
|
localization?: Partial<MRT_Localization>;
|
|
76
233
|
muiSearchTextFieldProps?: TextFieldProps;
|
|
77
234
|
muiTableBodyCellEditTextFieldProps?:
|
|
78
235
|
| TextFieldProps
|
|
79
|
-
| ((cell?:
|
|
236
|
+
| ((cell?: MRT_Cell<D>) => TextFieldProps);
|
|
80
237
|
muiTableBodyCellProps?:
|
|
81
238
|
| TableCellProps
|
|
82
|
-
| ((cell?:
|
|
239
|
+
| ((cell?: MRT_Cell<D>) => TableCellProps);
|
|
83
240
|
muiTableBodyProps?: TableBodyProps;
|
|
84
241
|
muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
|
|
85
242
|
muiTableContainerProps?:
|
|
86
243
|
| TableContainerProps
|
|
87
|
-
| ((table:
|
|
244
|
+
| ((table: MRT_TableInstance<D>) => TableContainerProps);
|
|
88
245
|
muiTableDetailPanelProps?:
|
|
89
246
|
| TableCellProps
|
|
90
247
|
| ((row: Row<D>) => TableCellProps);
|
|
@@ -94,7 +251,7 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
|
|
|
94
251
|
muiTableFooterProps?: TableFooterProps;
|
|
95
252
|
muiTableFooterRowProps?:
|
|
96
253
|
| TableRowProps
|
|
97
|
-
| ((footerGroup:
|
|
254
|
+
| ((footerGroup: MRT_HeaderGroup<D>) => TableRowProps);
|
|
98
255
|
muiTableHeadCellFilterTextFieldProps?:
|
|
99
256
|
| TextFieldProps
|
|
100
257
|
| ((column: Column<D>) => TextFieldProps);
|
|
@@ -104,23 +261,25 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
|
|
|
104
261
|
muiTableHeadProps?: TableHeadProps;
|
|
105
262
|
muiTableHeadRowProps?:
|
|
106
263
|
| TableRowProps
|
|
107
|
-
| ((row:
|
|
264
|
+
| ((row: MRT_HeaderGroup<D>) => TableRowProps);
|
|
108
265
|
muiTablePaginationProps?:
|
|
109
266
|
| Partial<TablePaginationProps>
|
|
110
|
-
| ((
|
|
267
|
+
| ((
|
|
268
|
+
tableInstance: MRT_TableInstance<D>,
|
|
269
|
+
) => Partial<TablePaginationProps>);
|
|
111
270
|
muiTableProps?: TableProps;
|
|
112
271
|
muiTableToolbarAlertBannerProps?:
|
|
113
272
|
| AlertProps
|
|
114
|
-
| ((tableInstance:
|
|
273
|
+
| ((tableInstance: MRT_TableInstance<D>) => AlertProps);
|
|
115
274
|
muiTableToolbarBottomProps?:
|
|
116
275
|
| ToolbarProps
|
|
117
|
-
| ((tableInstance:
|
|
276
|
+
| ((tableInstance: MRT_TableInstance<D>) => ToolbarProps);
|
|
118
277
|
muiTableToolbarTopProps?:
|
|
119
278
|
| ToolbarProps
|
|
120
|
-
| ((tableInstance:
|
|
279
|
+
| ((tableInstance: MRT_TableInstance<D>) => ToolbarProps);
|
|
121
280
|
onCellClick?: (
|
|
122
281
|
event: MouseEvent<HTMLTableCellElement>,
|
|
123
|
-
cell:
|
|
282
|
+
cell: MRT_Cell<D>,
|
|
124
283
|
) => void;
|
|
125
284
|
onColumnHide?: (column: Column<D>, visibleColumns: Column<D>[]) => void;
|
|
126
285
|
onDetailPanelClick?: (
|
|
@@ -147,16 +306,18 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
|
|
|
147
306
|
renderDetailPanel?: (row: Row<D>) => ReactNode;
|
|
148
307
|
renderRowActionMenuItems?: (
|
|
149
308
|
rowData: Row<D>,
|
|
150
|
-
tableInstance:
|
|
309
|
+
tableInstance: MRT_TableInstance<D>,
|
|
151
310
|
closeMenu: () => void,
|
|
152
311
|
) => ReactNode[];
|
|
153
312
|
renderRowActions?: (
|
|
154
313
|
row: Row<D>,
|
|
155
|
-
tableInstance:
|
|
314
|
+
tableInstance: MRT_TableInstance<D>,
|
|
315
|
+
) => ReactNode;
|
|
316
|
+
renderToolbarCustomActions?: (
|
|
317
|
+
tableInstance: MRT_TableInstance<D>,
|
|
156
318
|
) => ReactNode;
|
|
157
|
-
renderToolbarCustomActions?: (tableInstance: TableInstance<D>) => ReactNode;
|
|
158
319
|
renderToolbarInternalActions?: (
|
|
159
|
-
tableInstance:
|
|
320
|
+
tableInstance: MRT_TableInstance<D>,
|
|
160
321
|
{
|
|
161
322
|
MRT_ToggleSearchButton,
|
|
162
323
|
MRT_ToggleFiltersButton,
|
|
@@ -175,7 +336,8 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
|
|
|
175
336
|
|
|
176
337
|
export default <D extends {}>({
|
|
177
338
|
defaultColumn = { minWidth: 50, maxWidth: 1000 },
|
|
178
|
-
|
|
339
|
+
icons,
|
|
340
|
+
localization,
|
|
179
341
|
positionActionsColumn = 'first',
|
|
180
342
|
positionPagination = 'bottom',
|
|
181
343
|
positionToolbarActions = 'top',
|
|
@@ -184,7 +346,8 @@ export default <D extends {}>({
|
|
|
184
346
|
}: MaterialReactTableProps<D>) => (
|
|
185
347
|
<MaterialReactTableProvider
|
|
186
348
|
defaultColumn={defaultColumn}
|
|
187
|
-
|
|
349
|
+
icons={{ ...MRT_Default_Icons, ...icons }}
|
|
350
|
+
localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
|
|
188
351
|
positionActionsColumn={positionActionsColumn}
|
|
189
352
|
positionPagination={positionPagination}
|
|
190
353
|
positionToolbarActions={positionToolbarActions}
|
|
@@ -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 }) => {
|
|
@@ -63,19 +63,21 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
|
|
|
63
63
|
{enableRowNumbers && (
|
|
64
64
|
<MRT_StyledTableBodyCell>{row.index + 1}</MRT_StyledTableBodyCell>
|
|
65
65
|
)}
|
|
66
|
-
{(enableRowActions || enableRowEditing) &&
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
{(enableRowActions || enableRowEditing) &&
|
|
67
|
+
positionActionsColumn === 'first' && (
|
|
68
|
+
<MRT_ToggleRowActionMenuButton row={row} />
|
|
69
|
+
)}
|
|
69
70
|
{(anyRowsCanExpand || renderDetailPanel) && (
|
|
70
71
|
<MRT_ExpandButton row={row} />
|
|
71
72
|
)}
|
|
72
73
|
{enableSelection && <MRT_SelectCheckbox row={row} />}
|
|
73
|
-
{row.cells.map((cell) => (
|
|
74
|
+
{row.cells.map((cell: MRT_Cell) => (
|
|
74
75
|
<MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />
|
|
75
76
|
))}
|
|
76
|
-
{(enableRowActions || enableRowEditing) &&
|
|
77
|
-
|
|
78
|
-
|
|
77
|
+
{(enableRowActions || enableRowEditing) &&
|
|
78
|
+
positionActionsColumn === 'last' && (
|
|
79
|
+
<MRT_ToggleRowActionMenuButton row={row} />
|
|
80
|
+
)}
|
|
79
81
|
</TableRow>
|
|
80
82
|
{renderDetailPanel && <MRT_TableDetailPanel row={row} />}
|
|
81
83
|
</>
|