material-react-table 0.6.10 → 0.7.0-alpha.3
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 +27 -17
- package/dist/MaterialReactTable.d.ts +306 -109
- package/dist/body/MRT_TableBody.d.ts +3 -0
- package/dist/body/MRT_TableBodyCell.d.ts +2 -11
- package/dist/body/MRT_TableBodyRow.d.ts +3 -1
- package/dist/body/MRT_TableDetailPanel.d.ts +2 -1
- package/dist/buttons/MRT_CopyButton.d.ts +4 -2
- package/dist/buttons/MRT_EditActionButtons.d.ts +2 -1
- package/dist/buttons/MRT_ExpandAllButton.d.ts +2 -0
- package/dist/buttons/MRT_ExpandButton.d.ts +2 -1
- package/dist/buttons/MRT_FullScreenToggleButton.d.ts +2 -0
- package/dist/buttons/MRT_ShowHideColumnsButton.d.ts +2 -0
- package/dist/buttons/MRT_ToggleColumnActionMenuButton.d.ts +3 -2
- package/dist/buttons/MRT_ToggleDensePaddingButton.d.ts +2 -0
- package/dist/buttons/MRT_ToggleFiltersButton.d.ts +2 -0
- package/dist/buttons/MRT_ToggleRowActionMenuButton.d.ts +2 -1
- package/dist/buttons/MRT_ToggleSearchButton.d.ts +2 -0
- package/dist/footer/MRT_TableFooter.d.ts +3 -0
- package/dist/footer/MRT_TableFooterCell.d.ts +3 -2
- package/dist/footer/MRT_TableFooterRow.d.ts +2 -1
- package/dist/head/MRT_TableHead.d.ts +3 -0
- package/dist/head/MRT_TableHeadCell.d.ts +4 -18
- package/dist/head/MRT_TableHeadRow.d.ts +2 -1
- package/dist/icons.d.ts +1 -1
- package/dist/inputs/MRT_EditCellTextField.d.ts +2 -1
- package/dist/inputs/MRT_FilterTextField.d.ts +3 -2
- package/dist/inputs/MRT_SearchTextField.d.ts +2 -0
- package/dist/inputs/MRT_SelectCheckbox.d.ts +2 -1
- package/dist/localization.d.ts +7 -2
- package/dist/material-react-table.cjs.development.js +2209 -2483
- 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 +2210 -2484
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/menus/MRT_ColumnActionMenu.d.ts +3 -2
- package/dist/menus/MRT_FilterTypeMenu.d.ts +4 -3
- package/dist/menus/MRT_RowActionMenu.d.ts +3 -2
- package/dist/menus/MRT_ShowHideColumnsMenu.d.ts +2 -0
- package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts +2 -1
- package/dist/table/MRT_Table.d.ts +3 -0
- package/dist/table/MRT_TableContainer.d.ts +2 -0
- package/dist/table/MRT_TablePaper.d.ts +7 -0
- package/dist/table/MRT_TableRoot.d.ts +3 -0
- package/dist/toolbar/MRT_LinearProgressBar.d.ts +2 -0
- package/dist/toolbar/MRT_TablePagination.d.ts +2 -0
- package/dist/toolbar/MRT_ToolbarAlertBanner.d.ts +2 -0
- package/dist/toolbar/MRT_ToolbarBottom.d.ts +2 -0
- package/dist/toolbar/MRT_ToolbarInternalButtons.d.ts +2 -0
- package/dist/toolbar/MRT_ToolbarTop.d.ts +4 -2
- package/dist/utils.d.ts +12 -2
- package/package.json +28 -29
- package/src/MaterialReactTable.tsx +594 -300
- package/src/body/MRT_TableBody.tsx +26 -22
- package/src/body/MRT_TableBodyCell.tsx +75 -60
- package/src/body/MRT_TableBodyRow.tsx +37 -76
- package/src/body/MRT_TableDetailPanel.tsx +21 -17
- package/src/buttons/MRT_CopyButton.tsx +16 -9
- package/src/buttons/MRT_EditActionButtons.tsx +16 -13
- package/src/buttons/MRT_ExpandAllButton.tsx +24 -9
- package/src/buttons/MRT_ExpandButton.tsx +22 -15
- package/src/buttons/MRT_FullScreenToggleButton.tsx +18 -11
- package/src/buttons/MRT_ShowHideColumnsButton.tsx +18 -7
- package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx +22 -11
- package/src/buttons/MRT_ToggleDensePaddingButton.tsx +18 -11
- package/src/buttons/MRT_ToggleFiltersButton.tsx +16 -9
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +27 -22
- package/src/buttons/MRT_ToggleSearchButton.tsx +24 -12
- package/src/footer/MRT_TableFooter.tsx +24 -8
- package/src/footer/MRT_TableFooterCell.tsx +34 -26
- package/src/footer/MRT_TableFooterRow.tsx +21 -39
- package/src/head/MRT_TableHead.tsx +24 -8
- package/src/head/MRT_TableHeadCell.tsx +184 -142
- package/src/head/MRT_TableHeadRow.tsx +16 -104
- package/src/icons.ts +3 -3
- package/src/inputs/MRT_EditCellTextField.tsx +23 -24
- package/src/inputs/MRT_FilterTextField.tsx +53 -32
- package/src/inputs/MRT_SearchTextField.tsx +46 -24
- package/src/inputs/MRT_SelectCheckbox.tsx +42 -30
- package/src/localization.ts +13 -2
- package/src/menus/MRT_ColumnActionMenu.tsx +129 -69
- package/src/menus/MRT_FilterTypeMenu.tsx +28 -22
- package/src/menus/MRT_RowActionMenu.tsx +21 -14
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +52 -20
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +27 -17
- package/src/table/MRT_Table.tsx +25 -15
- package/src/table/MRT_TableContainer.tsx +106 -45
- package/src/table/MRT_TablePaper.tsx +65 -0
- package/src/table/MRT_TableRoot.tsx +236 -0
- package/src/toolbar/MRT_LinearProgressBar.tsx +10 -7
- package/src/toolbar/MRT_TablePagination.tsx +33 -19
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +33 -20
- package/src/toolbar/MRT_ToolbarBottom.tsx +32 -21
- package/src/toolbar/MRT_ToolbarInternalButtons.tsx +34 -20
- package/src/toolbar/MRT_ToolbarTop.tsx +36 -29
- package/src/utils.ts +37 -8
- package/dist/head/MRT_TableHeadCellActions.d.ts +0 -5
- package/dist/table/MRT_TableSpacerCell.d.ts +0 -6
- package/dist/useMRT.d.ts +0 -28
- package/src/@types/faker.d.ts +0 -4
- package/src/@types/react-table-config.d.ts +0 -53
- package/src/head/MRT_TableHeadCellActions.tsx +0 -29
- package/src/table/MRT_TableSpacerCell.tsx +0 -20
- package/src/useMRT.tsx +0 -226
package/README.md
CHANGED
|
@@ -1,47 +1,57 @@
|
|
|
1
1
|
# Material React Table
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> This Project is based on react-table v8, which itself is still in alpha, and therefore this package is also still in alpha
|
|
4
|
+
|
|
5
|
+
- A fully featured Material-UI v5 implementation of react-table v8 (alpha)
|
|
4
6
|
- Inspired by material-table and the material-ui DataGrid
|
|
5
7
|
- Written from the ground up in TypeScript, Material-UI, and React Table
|
|
8
|
+
- All internal material-ui components are easily customizable
|
|
6
9
|
|
|
7
10
|
## This project is in alpha, but feel free to install and explore
|
|
8
11
|
|
|
9
|
-
View the docs (alpha) site
|
|
12
|
+
View the [docs (alpha) site](https://www.material-react-table.com/)
|
|
10
13
|
|
|
11
|
-
View additional storybook examples
|
|
14
|
+
View additional [storybook examples](https://www.material-react-table.dev/)
|
|
12
15
|
|
|
13
|
-
View the source code and open issues
|
|
16
|
+
View the [github source code](https://github.com/KevinVandy/material-react-table) and [github open issues](https://github.com/KevinVandy/material-react-table/issues)
|
|
14
17
|
|
|
15
|
-
Join the discord
|
|
18
|
+
Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion
|
|
16
19
|
|
|
17
20
|
<br />
|
|
18
21
|
|
|
19
|
-
### Features (Still In Active Development)
|
|
22
|
+
### Features (Some Still In Active Development)
|
|
20
23
|
|
|
21
|
-
- [
|
|
22
|
-
- [ ] Column Resizing (in dev)
|
|
23
|
-
- [x] Cell Editing
|
|
24
|
+
- [x] Click To Copy Cell Values
|
|
24
25
|
- [x] Column Actions
|
|
25
26
|
- [x] Column Hiding
|
|
26
|
-
- [x]
|
|
27
|
+
- [x] Column Grouping (Group By and Aggregates)
|
|
28
|
+
- [ ] Column Ordering (react-dnd planned)
|
|
29
|
+
- [x] Column Pinning
|
|
30
|
+
- [x] Column Resizing (work in progress)
|
|
31
|
+
- [x] Custom Icons
|
|
32
|
+
- [x] Custom Styling and internal Mui Components
|
|
33
|
+
- [-] Data Editing (work in progress)
|
|
27
34
|
- [x] Dense Padding Toggle
|
|
28
|
-
- [x] Localization
|
|
29
35
|
- [x] Filtering
|
|
30
|
-
- [x]
|
|
36
|
+
- [x] Fullscreen
|
|
37
|
+
- [-] Global Search (Advanced search options!)
|
|
31
38
|
- [x] HeaderGroups
|
|
32
|
-
- [x]
|
|
39
|
+
- [x] Localization i18n
|
|
40
|
+
- [x] Pagination (supports client-side and server-side)
|
|
33
41
|
- [x] Row Actions
|
|
34
|
-
- [x] Selection
|
|
42
|
+
- [x] Row Selection
|
|
43
|
+
- [x] SSR compatible
|
|
35
44
|
- [x] Sorting
|
|
36
45
|
- [x] Toolbars
|
|
37
|
-
- [x] Tree Data
|
|
46
|
+
- [x] Tree Data / Expanding Subrows
|
|
47
|
+
- [ ] Virtualization (planned)
|
|
38
48
|
|
|
39
49
|
### Installation
|
|
40
50
|
|
|
41
|
-
1. Install Peer Dependencies (material-ui v5
|
|
51
|
+
1. Install Peer Dependencies (material-ui v5)
|
|
42
52
|
|
|
43
53
|
```bash
|
|
44
|
-
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
|
|
54
|
+
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
|
|
45
55
|
```
|
|
46
56
|
|
|
47
57
|
2. Install material-react-table
|
|
@@ -1,96 +1,170 @@
|
|
|
1
|
-
import { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
|
|
2
|
-
import { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
|
|
3
|
-
import { Cell, Column,
|
|
1
|
+
import { ChangeEvent, Dispatch, FC, MouseEvent, ReactNode, SetStateAction } from 'react';
|
|
2
|
+
import { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
|
|
3
|
+
import { Cell, Column, ColumnDef, DefaultGenerics, FilterType, Header, HeaderGroup, Options, Overwrite, PaginationState, Row, TableInstance, TableState, VisibilityState } from '@tanstack/react-table';
|
|
4
4
|
import { MRT_Localization } from './localization';
|
|
5
5
|
import { MRT_Icons } from './icons';
|
|
6
6
|
import { MRT_FILTER_TYPE } from './enums';
|
|
7
|
-
export declare type MRT_TableOptions<D extends
|
|
8
|
-
columns: MRT_ColumnInterface[];
|
|
7
|
+
export declare type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<Omit<Options<D>, 'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'>> & {
|
|
8
|
+
columns: MRT_ColumnInterface<D>[];
|
|
9
9
|
data: D[];
|
|
10
|
-
initialState?: Partial<MRT_TableState
|
|
10
|
+
initialState?: Partial<MRT_TableState<D>>;
|
|
11
|
+
state?: Partial<MRT_TableState<D>>;
|
|
12
|
+
expandRowsFn?: (dataRow: D) => D[];
|
|
11
13
|
};
|
|
12
|
-
export
|
|
13
|
-
|
|
14
|
-
footerGroups: MRT_HeaderGroup<D>[];
|
|
15
|
-
getToggleAllRowsExpandedProps: () => void;
|
|
16
|
-
headerGroups: MRT_HeaderGroup<D>[];
|
|
17
|
-
page: MRT_Row<D>[];
|
|
18
|
-
resetResizing: () => void;
|
|
14
|
+
export interface MRT_RowModel<D extends Record<string, any> = {}> {
|
|
15
|
+
flatRows: MRT_Row<D>[];
|
|
19
16
|
rows: MRT_Row<D>[];
|
|
20
|
-
|
|
17
|
+
rowsById: {
|
|
18
|
+
[key: string]: MRT_Row<D>;
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<TableInstance<Overwrite<Partial<DefaultGenerics>, {
|
|
22
|
+
Row: D;
|
|
23
|
+
}>>, 'getAllColumns' | 'getAllLeafColumns' | 'getExpandedRowModel' | 'getPaginationRowModel' | 'getPrePaginationRowModel' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'options'> & {
|
|
24
|
+
getAllColumns: () => MRT_ColumnInstance<D>[];
|
|
25
|
+
getAllLeafColumns: () => MRT_ColumnInstance<D>[];
|
|
26
|
+
getExpandedRowModel: () => MRT_RowModel<D>;
|
|
27
|
+
getPaginationRowModel: () => MRT_RowModel<D>;
|
|
28
|
+
getPrePaginationRowModel: () => MRT_RowModel<D>;
|
|
29
|
+
getRowModel: () => MRT_RowModel<D>;
|
|
30
|
+
getSelectedRowModel: () => MRT_RowModel<D>;
|
|
31
|
+
getState: () => MRT_TableState<D>;
|
|
32
|
+
options: MaterialReactTableProps<D> & {
|
|
33
|
+
icons: MRT_Icons;
|
|
34
|
+
idPrefix: string;
|
|
35
|
+
filterTypes: {
|
|
36
|
+
[key in MRT_FILTER_TYPE]: any;
|
|
37
|
+
};
|
|
38
|
+
localization: MRT_Localization;
|
|
39
|
+
setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
|
|
40
|
+
setCurrentFilterTypes: Dispatch<SetStateAction<{
|
|
41
|
+
[key: string]: MRT_FilterType;
|
|
42
|
+
}>>;
|
|
43
|
+
setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
|
|
44
|
+
setIsDensePadding: Dispatch<SetStateAction<boolean>>;
|
|
45
|
+
setIsFullScreen: Dispatch<SetStateAction<boolean>>;
|
|
46
|
+
setShowFilters: Dispatch<SetStateAction<boolean>>;
|
|
47
|
+
setShowSearch: Dispatch<SetStateAction<boolean>>;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
export declare type MRT_TableState<D extends Record<string, any> = {}> = Omit<TableState, 'pagination'> & {
|
|
51
|
+
currentEditingRow: MRT_Row<D> | null;
|
|
52
|
+
currentFilterTypes: Record<string, string | Function>;
|
|
53
|
+
currentGlobalFilterType: Record<string, string | Function>;
|
|
54
|
+
isDensePadding: boolean;
|
|
55
|
+
isFullScreen: boolean;
|
|
56
|
+
showFilters: boolean;
|
|
57
|
+
showSearch: boolean;
|
|
58
|
+
pagination: Partial<PaginationState>;
|
|
21
59
|
};
|
|
22
|
-
export declare type MRT_ColumnInterface<D extends
|
|
23
|
-
Edit?: ({ cell,
|
|
60
|
+
export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<ColumnDef<D>, 'header' | 'footer' | 'columns'> & {
|
|
61
|
+
Edit?: ({ cell, tableInstance, }: {
|
|
24
62
|
cell: MRT_Cell<D>;
|
|
25
|
-
|
|
63
|
+
tableInstance: MRT_TableInstance<D>;
|
|
64
|
+
}) => ReactNode;
|
|
65
|
+
Filter?: ({ header, tableInstance, }: {
|
|
66
|
+
header: MRT_Header<D>;
|
|
67
|
+
tableInstance: MRT_TableInstance<D>;
|
|
68
|
+
}) => ReactNode;
|
|
69
|
+
Footer?: ({ footer, tableInstance, }: {
|
|
70
|
+
footer: MRT_Header<D>;
|
|
71
|
+
tableInstance: MRT_TableInstance<D>;
|
|
26
72
|
}) => ReactNode;
|
|
27
|
-
|
|
28
|
-
|
|
73
|
+
Header?: ({ header, tableInstance, }: {
|
|
74
|
+
header: MRT_Header<D>;
|
|
75
|
+
tableInstance: MRT_TableInstance<D>;
|
|
29
76
|
}) => ReactNode;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
77
|
+
Cell?: ({ cell, tableInstance, }: {
|
|
78
|
+
cell: MRT_Cell<D>;
|
|
79
|
+
tableInstance: MRT_TableInstance<D>;
|
|
80
|
+
}) => ReactNode;
|
|
81
|
+
id: keyof D | string;
|
|
33
82
|
columns?: MRT_ColumnInterface<D>[];
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
disableEditing?: boolean;
|
|
38
|
-
disableFilters?: boolean;
|
|
83
|
+
enableClickToCopy?: boolean;
|
|
84
|
+
enableColumnActions?: boolean;
|
|
85
|
+
enableEditing?: boolean;
|
|
39
86
|
enabledFilterTypes?: (MRT_FILTER_TYPE | string)[];
|
|
40
87
|
filter?: MRT_FilterType | string | FilterType<D>;
|
|
41
88
|
filterSelectOptions?: (string | {
|
|
42
89
|
text: string;
|
|
43
90
|
value: string;
|
|
44
91
|
})[];
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
92
|
+
footer?: string;
|
|
93
|
+
header: string;
|
|
94
|
+
muiTableBodyCellCopyButtonProps?: ButtonProps | (({ tableInstance, cell, }: {
|
|
95
|
+
tableInstance: MRT_TableInstance;
|
|
96
|
+
cell: MRT_Cell<D>;
|
|
97
|
+
}) => ButtonProps);
|
|
98
|
+
muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ tableInstance, cell, }: {
|
|
99
|
+
tableInstance: MRT_TableInstance;
|
|
100
|
+
cell: MRT_Cell<D>;
|
|
101
|
+
}) => TextFieldProps);
|
|
102
|
+
muiTableBodyCellProps?: TableCellProps | (({ tableInstance, cell, }: {
|
|
103
|
+
tableInstance: MRT_TableInstance;
|
|
104
|
+
cell: MRT_Cell<D>;
|
|
105
|
+
}) => TableCellProps);
|
|
106
|
+
muiTableFooterCellProps?: TableCellProps | (({ tableInstance, column, }: {
|
|
107
|
+
tableInstance: MRT_TableInstance;
|
|
108
|
+
column: MRT_ColumnInstance<D>;
|
|
109
|
+
}) => TableCellProps);
|
|
110
|
+
muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | (({ tableInstance, column, }: {
|
|
111
|
+
tableInstance: MRT_TableInstance;
|
|
112
|
+
column: MRT_ColumnInstance<D>;
|
|
113
|
+
}) => IconButtonProps);
|
|
114
|
+
muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ tableInstance, column, }: {
|
|
115
|
+
tableInstance: MRT_TableInstance;
|
|
116
|
+
column: MRT_ColumnInstance<D>;
|
|
117
|
+
}) => TextFieldProps);
|
|
118
|
+
muiTableHeadCellProps?: TableCellProps | (({ tableInstance, column, }: {
|
|
119
|
+
tableInstance: MRT_TableInstance;
|
|
120
|
+
column: MRT_ColumnInstance<D>;
|
|
121
|
+
}) => TableCellProps);
|
|
122
|
+
onCellEditChange?: ({ cell, event, tableInstance, }: {
|
|
123
|
+
event: ChangeEvent<HTMLInputElement>;
|
|
124
|
+
cell: MRT_Cell<D>;
|
|
125
|
+
tableInstance: MRT_TableInstance<D>;
|
|
126
|
+
}) => void;
|
|
127
|
+
onColumnFilterValueChange?: ({ event, filterValue, }: {
|
|
128
|
+
event: ChangeEvent<HTMLInputElement>;
|
|
129
|
+
filterValue: any;
|
|
130
|
+
}) => void;
|
|
54
131
|
};
|
|
55
|
-
export declare type MRT_ColumnInstance<D extends
|
|
132
|
+
export declare type MRT_ColumnInstance<D extends Record<string, any> = {}> = Omit<Column<D>, 'header' | 'footer' | 'columns'> & MRT_ColumnInterface<D> & {
|
|
56
133
|
columns?: MRT_ColumnInstance<D>[];
|
|
57
134
|
};
|
|
58
|
-
export declare type
|
|
59
|
-
|
|
135
|
+
export declare type MRT_Header<D extends Record<string, any> = {}> = Omit<Header<D>, 'column'> & {
|
|
136
|
+
column: MRT_ColumnInstance<D>;
|
|
137
|
+
};
|
|
138
|
+
export declare type MRT_HeaderGroup<D extends Record<string, any> = {}> = Omit<HeaderGroup<D>, 'headers'> & {
|
|
139
|
+
headers: MRT_Header<D>[];
|
|
60
140
|
};
|
|
61
|
-
export declare type MRT_Row<D extends
|
|
62
|
-
|
|
141
|
+
export declare type MRT_Row<D extends Record<string, any> = {}> = Omit<Row<D>, 'getVisibleCells' | 'getAllCells' | 'subRows' | 'original' | 'getLeftVisibleCells' | 'getRightVisibleCells' | 'getCenterVisibleCells'> & {
|
|
142
|
+
getAllCells: () => MRT_Cell<D>[];
|
|
143
|
+
getCenterVisibleCells: () => MRT_Cell<D>[];
|
|
144
|
+
getLeftVisibleCells: () => MRT_Cell<D>[];
|
|
145
|
+
getRightVisibleCells: () => MRT_Cell<D>[];
|
|
146
|
+
getVisibleCells: () => MRT_Cell<D>[];
|
|
147
|
+
subRows?: MRT_Row<D>[];
|
|
148
|
+
original: D;
|
|
63
149
|
};
|
|
64
|
-
export declare type MRT_Cell<D extends
|
|
150
|
+
export declare type MRT_Cell<D extends Record<string, any> = {}> = Omit<Cell<D>, 'column' | 'row'> & {
|
|
65
151
|
column: MRT_ColumnInstance<D>;
|
|
152
|
+
row: MRT_Row<D>;
|
|
66
153
|
};
|
|
67
154
|
export declare type MRT_FilterType = MRT_FILTER_TYPE | Function;
|
|
68
|
-
export declare type
|
|
69
|
-
currentEditingRow: MRT_Row<D> | null;
|
|
70
|
-
currentFilterTypes: {
|
|
71
|
-
[key: string]: MRT_FilterType;
|
|
72
|
-
};
|
|
73
|
-
currentGlobalFilterType: MRT_FilterType;
|
|
74
|
-
densePadding: boolean;
|
|
75
|
-
fullScreen: boolean;
|
|
76
|
-
showFilters: boolean;
|
|
77
|
-
showSearch: boolean;
|
|
78
|
-
};
|
|
79
|
-
export declare type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> & UseExpandedOptions<D> & UseFiltersOptions<D> & UseGlobalFiltersOptions<D> & UseGroupByOptions<D> & UsePaginationOptions<D> & UseResizeColumnsOptions<D> & UseRowSelectOptions<D> & UseRowStateOptions<D> & UseSortByOptions<D> & MRT_TableOptions<D> & {
|
|
80
|
-
disableColumnActions?: boolean;
|
|
81
|
-
disableColumnHiding?: boolean;
|
|
82
|
-
disableDensePaddingToggle?: boolean;
|
|
83
|
-
disableExpandAll?: boolean;
|
|
84
|
-
disableFullScreenToggle?: boolean;
|
|
85
|
-
disableSelectAll?: boolean;
|
|
86
|
-
disableSubRowTree?: boolean;
|
|
155
|
+
export declare type MaterialReactTableProps<D extends Record<string, any> = {}> = MRT_TableOptions<D> & {
|
|
87
156
|
enableClickToCopy?: boolean;
|
|
88
|
-
|
|
89
|
-
|
|
157
|
+
enableColumnActions?: boolean;
|
|
158
|
+
enableColumnPinning?: boolean;
|
|
159
|
+
enableDensePaddingToggle?: boolean;
|
|
160
|
+
enableExpandAll?: boolean;
|
|
161
|
+
enableFullScreenToggle?: boolean;
|
|
162
|
+
enablePagination?: boolean;
|
|
90
163
|
enableRowActions?: boolean;
|
|
164
|
+
enableStickyHeader?: boolean;
|
|
91
165
|
enableRowEditing?: boolean;
|
|
92
166
|
enableRowNumbers?: boolean;
|
|
93
|
-
|
|
167
|
+
enableSelectAll?: boolean;
|
|
94
168
|
enabledGlobalFilterTypes?: (MRT_FILTER_TYPE | string)[];
|
|
95
169
|
filterTypes?: {
|
|
96
170
|
[key in MRT_FILTER_TYPE]: any;
|
|
@@ -102,57 +176,180 @@ export declare type MaterialReactTableProps<D extends {} = {}> = UseTableOptions
|
|
|
102
176
|
hideToolbarTop?: boolean;
|
|
103
177
|
icons?: Partial<MRT_Icons>;
|
|
104
178
|
idPrefix?: string;
|
|
105
|
-
|
|
179
|
+
isReloading?: boolean;
|
|
106
180
|
isLoading?: boolean;
|
|
107
181
|
localization?: Partial<MRT_Localization>;
|
|
108
|
-
muiLinearProgressProps?: LinearProgressProps | ((tableInstance:
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
182
|
+
muiLinearProgressProps?: LinearProgressProps | (({ tableInstance, }: {
|
|
183
|
+
tableInstance: MRT_TableInstance;
|
|
184
|
+
}) => LinearProgressProps);
|
|
185
|
+
muiSearchTextFieldProps?: TextFieldProps | (({ tableInstance, }: {
|
|
186
|
+
tableInstance: MRT_TableInstance;
|
|
187
|
+
}) => TextFieldProps);
|
|
188
|
+
muiSelectCheckboxProps?: CheckboxProps | (({ tableInstance, isSelectAll, row, }: {
|
|
189
|
+
tableInstance: MRT_TableInstance;
|
|
190
|
+
isSelectAll: boolean;
|
|
191
|
+
row?: MRT_Row<D>;
|
|
192
|
+
}) => CheckboxProps);
|
|
193
|
+
muiTableBodyCellCopyButtonProps?: ButtonProps | (({ tableInstance, cell, }: {
|
|
194
|
+
tableInstance: MRT_TableInstance;
|
|
195
|
+
cell: MRT_Cell<D>;
|
|
196
|
+
}) => ButtonProps);
|
|
197
|
+
muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ tableInstance, cell, }: {
|
|
198
|
+
tableInstance: MRT_TableInstance;
|
|
199
|
+
cell: MRT_Cell<D>;
|
|
200
|
+
}) => TextFieldProps);
|
|
201
|
+
muiTableBodyCellProps?: TableCellProps | (({ tableInstance, cell, }: {
|
|
202
|
+
tableInstance: MRT_TableInstance;
|
|
203
|
+
cell: MRT_Cell<D>;
|
|
204
|
+
}) => TableCellProps);
|
|
205
|
+
muiTableBodyCellSkeletonProps?: SkeletonProps | (({ tableInstance, cell, }: {
|
|
206
|
+
tableInstance: MRT_TableInstance;
|
|
207
|
+
cell: MRT_Cell<D>;
|
|
208
|
+
}) => SkeletonProps);
|
|
209
|
+
muiTableBodyProps?: TableBodyProps | (({ tableInstance, }: {
|
|
210
|
+
tableInstance: MRT_TableInstance;
|
|
211
|
+
}) => TableBodyProps);
|
|
212
|
+
muiTableBodyRowProps?: TableRowProps | (({ tableInstance, row, }: {
|
|
213
|
+
tableInstance: MRT_TableInstance;
|
|
214
|
+
row: MRT_Row<D>;
|
|
215
|
+
}) => TableRowProps);
|
|
216
|
+
muiTableContainerProps?: TableContainerProps | (({ tableInstance, }: {
|
|
217
|
+
tableInstance: MRT_TableInstance;
|
|
218
|
+
}) => TableContainerProps);
|
|
219
|
+
muiTableDetailPanelProps?: TableCellProps | (({ tableInstance, row, }: {
|
|
220
|
+
tableInstance: MRT_TableInstance;
|
|
221
|
+
row: MRT_Row<D>;
|
|
222
|
+
}) => TableCellProps);
|
|
223
|
+
muiTableFooterCellProps?: TableCellProps | (({ tableInstance, column, }: {
|
|
224
|
+
tableInstance: MRT_TableInstance;
|
|
225
|
+
column: MRT_ColumnInstance<D>;
|
|
226
|
+
}) => TableCellProps);
|
|
227
|
+
muiTableFooterProps?: TableFooterProps | (({ tableInstance, }: {
|
|
228
|
+
tableInstance: MRT_TableInstance;
|
|
229
|
+
}) => TableFooterProps);
|
|
230
|
+
muiTableFooterRowProps?: TableRowProps | (({ tableInstance, footerGroup, }: {
|
|
231
|
+
tableInstance: MRT_TableInstance;
|
|
232
|
+
footerGroup: MRT_HeaderGroup<D>;
|
|
233
|
+
}) => TableRowProps);
|
|
234
|
+
muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | (({ tableInstance, column, }: {
|
|
235
|
+
tableInstance: MRT_TableInstance;
|
|
236
|
+
column: MRT_ColumnInstance<D>;
|
|
237
|
+
}) => IconButtonProps);
|
|
238
|
+
muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ tableInstance, column, }: {
|
|
239
|
+
tableInstance: MRT_TableInstance;
|
|
240
|
+
column: MRT_ColumnInstance<D>;
|
|
241
|
+
}) => TextFieldProps);
|
|
242
|
+
muiTableHeadCellProps?: TableCellProps | (({ tableInstance, column, }: {
|
|
243
|
+
tableInstance: MRT_TableInstance;
|
|
244
|
+
column: MRT_ColumnInstance<D>;
|
|
245
|
+
}) => TableCellProps);
|
|
246
|
+
muiTableHeadProps?: TableHeadProps | (({ tableInstance, }: {
|
|
247
|
+
tableInstance: MRT_TableInstance;
|
|
248
|
+
}) => TableHeadProps);
|
|
249
|
+
muiTableHeadRowProps?: TableRowProps | (({ tableInstance, headerGroup, }: {
|
|
250
|
+
tableInstance: MRT_TableInstance;
|
|
251
|
+
headerGroup: MRT_HeaderGroup<D>;
|
|
252
|
+
}) => TableRowProps);
|
|
253
|
+
muiTablePaperProps?: PaperProps | (({ tableInstance, }: {
|
|
254
|
+
tableInstance: MRT_TableInstance;
|
|
255
|
+
}) => PaperProps);
|
|
256
|
+
muiTablePaginationProps?: Partial<TablePaginationProps> | (({ tableInstance, }: {
|
|
257
|
+
tableInstance: MRT_TableInstance;
|
|
258
|
+
}) => Partial<TablePaginationProps>);
|
|
259
|
+
muiTableProps?: TableProps | (({ tableInstance, }: {
|
|
260
|
+
tableInstance: MRT_TableInstance;
|
|
261
|
+
}) => TableProps);
|
|
262
|
+
muiTableToolbarAlertBannerProps?: AlertProps | (({ tableInstance, }: {
|
|
263
|
+
tableInstance: MRT_TableInstance;
|
|
264
|
+
}) => AlertProps);
|
|
265
|
+
muiTableToolbarBottomProps?: ToolbarProps | (({ tableInstance, }: {
|
|
266
|
+
tableInstance: MRT_TableInstance;
|
|
267
|
+
}) => ToolbarProps);
|
|
268
|
+
muiTableToolbarTopProps?: ToolbarProps | (({ tableInstance, }: {
|
|
269
|
+
tableInstance: MRT_TableInstance;
|
|
270
|
+
}) => ToolbarProps);
|
|
271
|
+
onCellClick?: ({ cell, event, tableInstance, }: {
|
|
272
|
+
cell: MRT_Cell<D>;
|
|
273
|
+
tableInstance: MRT_TableInstance<D>;
|
|
274
|
+
event: MouseEvent<HTMLTableCellElement>;
|
|
275
|
+
}) => void;
|
|
276
|
+
onColumnHide?: ({ column, columnVisibility, tableInstance, }: {
|
|
277
|
+
column: MRT_ColumnInstance<D>;
|
|
278
|
+
columnVisibility: VisibilityState;
|
|
279
|
+
tableInstance: MRT_TableInstance<D>;
|
|
280
|
+
}) => void;
|
|
281
|
+
onDetailPanelClick?: ({ event, row, tableInstance, }: {
|
|
282
|
+
event: MouseEvent<HTMLTableCellElement>;
|
|
283
|
+
row: MRT_Row<D>;
|
|
284
|
+
tableInstance: MRT_TableInstance<D>;
|
|
285
|
+
}) => void;
|
|
286
|
+
onGlobalFilterChange?: ({ event, tableInstance, }: {
|
|
287
|
+
event: ChangeEvent<HTMLInputElement>;
|
|
288
|
+
tableInstance: MRT_TableInstance<D>;
|
|
289
|
+
}) => void;
|
|
290
|
+
onRowClick?: ({ event, row, tableInstance, }: {
|
|
291
|
+
event: MouseEvent<HTMLTableRowElement>;
|
|
292
|
+
row: MRT_Row<D>;
|
|
293
|
+
tableInstance: MRT_TableInstance<D>;
|
|
294
|
+
}) => void;
|
|
295
|
+
onRowEditSubmit?: ({ row, tableInstance, }: {
|
|
296
|
+
row: MRT_Row<D>;
|
|
297
|
+
tableInstance: MRT_TableInstance<D>;
|
|
298
|
+
}) => Promise<void> | void;
|
|
299
|
+
onRowExpandChange?: ({ event, row, }: {
|
|
300
|
+
event: MouseEvent<HTMLButtonElement>;
|
|
301
|
+
row: MRT_Row<D>;
|
|
302
|
+
tableInstance: MRT_TableInstance<D>;
|
|
303
|
+
}) => void;
|
|
304
|
+
onSelectAllChange?: ({ event, selectedRows, tableInstance, }: {
|
|
305
|
+
event: ChangeEvent;
|
|
306
|
+
selectedRows: MRT_Row<D>[];
|
|
307
|
+
tableInstance: MRT_TableInstance<D>;
|
|
308
|
+
}) => void;
|
|
309
|
+
onSelectChange?: ({ event, row, selectedRows, tableInstance, }: {
|
|
310
|
+
event: ChangeEvent;
|
|
311
|
+
row: MRT_Row<D>;
|
|
312
|
+
selectedRows: MRT_Row<D>[];
|
|
313
|
+
tableInstance: MRT_TableInstance<D>;
|
|
314
|
+
}) => void;
|
|
141
315
|
positionActionsColumn?: 'first' | 'last';
|
|
142
316
|
positionPagination?: 'bottom' | 'top' | 'both';
|
|
143
317
|
positionToolbarActions?: 'bottom' | 'top';
|
|
144
318
|
positionToolbarAlertBanner?: 'bottom' | 'top';
|
|
145
|
-
renderDetailPanel?: (row
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
319
|
+
renderDetailPanel?: ({ row, tableInstance, }: {
|
|
320
|
+
row: MRT_Row<D>;
|
|
321
|
+
tableInstance: MRT_TableInstance<D>;
|
|
322
|
+
}) => ReactNode;
|
|
323
|
+
renderRowActionMenuItems?: ({ closeMenu, row, tableInstance, }: {
|
|
324
|
+
closeMenu: () => void;
|
|
325
|
+
row: MRT_Row<D>;
|
|
326
|
+
tableInstance: MRT_TableInstance<D>;
|
|
327
|
+
}) => ReactNode[];
|
|
328
|
+
renderRowActions?: ({ row, tableInstance, }: {
|
|
329
|
+
row: MRT_Row<D>;
|
|
330
|
+
tableInstance: MRT_TableInstance<D>;
|
|
331
|
+
}) => ReactNode;
|
|
332
|
+
renderToolbarCustomActions?: ({ tableInstance, }: {
|
|
333
|
+
tableInstance: MRT_TableInstance<D>;
|
|
334
|
+
}) => ReactNode;
|
|
335
|
+
renderToolbarInternalActions?: ({ tableInstance, MRT_ToggleSearchButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
|
|
336
|
+
tableInstance: MRT_TableInstance<D>;
|
|
337
|
+
MRT_ToggleSearchButton: FC<IconButtonProps & {
|
|
338
|
+
tableInstance: MRT_TableInstance<D>;
|
|
339
|
+
}>;
|
|
340
|
+
MRT_ToggleFiltersButton: FC<IconButtonProps & {
|
|
341
|
+
tableInstance: MRT_TableInstance<D>;
|
|
342
|
+
}>;
|
|
343
|
+
MRT_ShowHideColumnsButton: FC<IconButtonProps & {
|
|
344
|
+
tableInstance: MRT_TableInstance<D>;
|
|
345
|
+
}>;
|
|
346
|
+
MRT_ToggleDensePaddingButton: FC<IconButtonProps & {
|
|
347
|
+
tableInstance: MRT_TableInstance<D>;
|
|
348
|
+
}>;
|
|
349
|
+
MRT_FullScreenToggleButton: FC<IconButtonProps & {
|
|
350
|
+
tableInstance: MRT_TableInstance<D>;
|
|
351
|
+
}>;
|
|
155
352
|
}) => ReactNode;
|
|
156
353
|
};
|
|
157
|
-
declare const _default: <D extends
|
|
354
|
+
declare const _default: <D extends Record<string, any> = {}>({ enableColumnActions, enableColumnFilters, enableDensePaddingToggle, enableExpandAll, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePagination, enableSelectAll, enableSorting, enableStickyHeader, filterTypes, icons, localization, positionActionsColumn, positionPagination, positionToolbarActions, positionToolbarAlertBanner, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
|
|
158
355
|
export default _default;
|
|
@@ -1,17 +1,8 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import type { MRT_Cell } from '..';
|
|
3
|
-
export declare const commonTableBodyCellStyles: (densePadding: boolean) => {
|
|
4
|
-
p: string;
|
|
5
|
-
transition: string;
|
|
6
|
-
whiteSpace: string;
|
|
7
|
-
};
|
|
8
|
-
export declare const commonTableBodyButtonCellStyles: (densePadding: boolean) => {
|
|
9
|
-
p: string;
|
|
10
|
-
textAlign: string;
|
|
11
|
-
transition: string;
|
|
12
|
-
};
|
|
2
|
+
import type { MRT_Cell, MRT_TableInstance } from '..';
|
|
13
3
|
interface Props {
|
|
14
4
|
cell: MRT_Cell;
|
|
5
|
+
tableInstance: MRT_TableInstance;
|
|
15
6
|
}
|
|
16
7
|
export declare const MRT_TableBodyCell: FC<Props>;
|
|
17
8
|
export {};
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import type { MRT_Row } from '..';
|
|
2
|
+
import type { MRT_Row, MRT_TableInstance } from '..';
|
|
3
3
|
interface Props {
|
|
4
|
+
pinned: 'left' | 'center' | 'right' | 'none';
|
|
4
5
|
row: MRT_Row;
|
|
6
|
+
tableInstance: MRT_TableInstance;
|
|
5
7
|
}
|
|
6
8
|
export declare const MRT_TableBodyRow: FC<Props>;
|
|
7
9
|
export {};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import type { MRT_Row } from '..';
|
|
2
|
+
import type { MRT_Row, MRT_TableInstance } from '..';
|
|
3
3
|
interface Props {
|
|
4
4
|
row: MRT_Row;
|
|
5
|
+
tableInstance: MRT_TableInstance;
|
|
5
6
|
}
|
|
6
7
|
export declare const MRT_TableDetailPanel: FC<Props>;
|
|
7
8
|
export {};
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { MRT_Cell } from '..';
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
import { MRT_Cell, MRT_TableInstance } from '..';
|
|
3
3
|
interface Props {
|
|
4
4
|
cell: MRT_Cell;
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
tableInstance: MRT_TableInstance;
|
|
5
7
|
}
|
|
6
8
|
export declare const MRT_CopyButton: FC<Props>;
|
|
7
9
|
export {};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import type { MRT_Row } from '..';
|
|
2
|
+
import type { MRT_Row, MRT_TableInstance } from '..';
|
|
3
3
|
interface Props {
|
|
4
4
|
row: MRT_Row;
|
|
5
|
+
tableInstance: MRT_TableInstance;
|
|
5
6
|
}
|
|
6
7
|
export declare const MRT_EditActionButtons: FC<Props>;
|
|
7
8
|
export {};
|