material-react-table 0.7.0-alpha.8 → 0.7.1

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.
Files changed (38) hide show
  1. package/README.md +3 -5
  2. package/dist/MaterialReactTable.d.ts +65 -46
  3. package/dist/buttons/{MRT_ToggleSearchButton.d.ts → MRT_ToggleGlobalFilterButton.d.ts} +1 -1
  4. package/dist/localization.d.ts +3 -0
  5. package/dist/material-react-table.cjs.development.js +228 -167
  6. package/dist/material-react-table.cjs.development.js.map +1 -1
  7. package/dist/material-react-table.cjs.production.min.js +1 -1
  8. package/dist/material-react-table.cjs.production.min.js.map +1 -1
  9. package/dist/material-react-table.esm.js +231 -170
  10. package/dist/material-react-table.esm.js.map +1 -1
  11. package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts +2 -2
  12. package/dist/utils.d.ts +5 -5
  13. package/package.json +5 -5
  14. package/src/MaterialReactTable.tsx +103 -57
  15. package/src/body/MRT_TableBodyCell.tsx +5 -3
  16. package/src/buttons/MRT_EditActionButtons.tsx +1 -1
  17. package/src/buttons/MRT_FullScreenToggleButton.tsx +13 -4
  18. package/src/buttons/MRT_ShowHideColumnsButton.tsx +0 -1
  19. package/src/buttons/MRT_ToggleDensePaddingButton.tsx +13 -4
  20. package/src/buttons/MRT_ToggleFiltersButton.tsx +13 -4
  21. package/src/buttons/{MRT_ToggleSearchButton.tsx → MRT_ToggleGlobalFilterButton.tsx} +14 -8
  22. package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +1 -1
  23. package/src/head/MRT_TableHeadCell.tsx +8 -9
  24. package/src/inputs/MRT_EditCellTextField.tsx +2 -5
  25. package/src/inputs/MRT_FilterTextField.tsx +2 -2
  26. package/src/inputs/MRT_SearchTextField.tsx +6 -6
  27. package/src/localization.ts +6 -0
  28. package/src/menus/MRT_ColumnActionMenu.tsx +4 -4
  29. package/src/menus/MRT_FilterTypeMenu.tsx +5 -8
  30. package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +7 -7
  31. package/src/table/MRT_Table.tsx +5 -5
  32. package/src/table/MRT_TableContainer.tsx +4 -4
  33. package/src/table/MRT_TablePaper.tsx +9 -13
  34. package/src/table/MRT_TableRoot.tsx +96 -79
  35. package/src/toolbar/MRT_ToolbarBottom.tsx +2 -2
  36. package/src/toolbar/MRT_ToolbarInternalButtons.tsx +8 -9
  37. package/src/toolbar/MRT_ToolbarTop.tsx +2 -2
  38. package/src/utils.ts +10 -10
package/README.md CHANGED
@@ -15,9 +15,7 @@ View additional [storybook examples](https://www.material-react-table.dev/)
15
15
 
16
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)
17
17
 
18
- Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion
19
-
20
- <br />
18
+ Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
21
19
 
22
20
  ### Features (Some Still In Active Development)
23
21
 
@@ -32,9 +30,9 @@ Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the devel
32
30
  - [x] Custom Styling and internal Mui Components
33
31
  - [x] Data Editing
34
32
  - [x] Dense Padding Toggle
35
- - [x] Filtering
33
+ - [x] Filtering and multiple built-in filter modes
36
34
  - [x] Fullscreen
37
- - [ ] Global Search (broken in react-table v8 :( ))
35
+ - [x] Global Filtering (Search)
38
36
  - [x] HeaderGroups
39
37
  - [x] Localization i18n
40
38
  - [x] Pagination (supports client-side and server-side)
@@ -5,7 +5,7 @@ import { MRT_Localization } from './localization';
5
5
  import { MRT_Icons } from './icons';
6
6
  import { MRT_FILTER_TYPE } from './enums';
7
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>[];
8
+ columns: MRT_ColumnDef<D>[];
9
9
  data: D[];
10
10
  initialState?: Partial<MRT_TableState<D>>;
11
11
  state?: Partial<MRT_TableState<D>>;
@@ -21,8 +21,8 @@ export interface MRT_RowModel<D extends Record<string, any> = {}> {
21
21
  export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<TableInstance<Overwrite<Partial<DefaultGenerics>, {
22
22
  Row: D;
23
23
  }>>, 'getAllColumns' | 'getAllLeafColumns' | 'getExpandedRowModel' | 'getPaginationRowModel' | 'getPrePaginationRowModel' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'options'> & {
24
- getAllColumns: () => MRT_ColumnInstance<D>[];
25
- getAllLeafColumns: () => MRT_ColumnInstance<D>[];
24
+ getAllColumns: () => MRT_Column<D>[];
25
+ getAllLeafColumns: () => MRT_Column<D>[];
26
26
  getExpandedRowModel: () => MRT_RowModel<D>;
27
27
  getPaginationRowModel: () => MRT_RowModel<D>;
28
28
  getPrePaginationRowModel: () => MRT_RowModel<D>;
@@ -36,16 +36,16 @@ export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit
36
36
  [key in MRT_FILTER_TYPE]: any;
37
37
  };
38
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
39
  };
40
+ setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
41
+ setCurrentFilterTypes: Dispatch<SetStateAction<{
42
+ [key: string]: MRT_FilterType;
43
+ }>>;
44
+ setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
45
+ setIsDensePadding: Dispatch<SetStateAction<boolean>>;
46
+ setIsFullScreen: Dispatch<SetStateAction<boolean>>;
47
+ setShowFilters: Dispatch<SetStateAction<boolean>>;
48
+ setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
49
49
  };
50
50
  export declare type MRT_TableState<D extends Record<string, any> = {}> = Omit<TableState, 'pagination'> & {
51
51
  currentEditingRow: MRT_Row<D> | null;
@@ -54,10 +54,10 @@ export declare type MRT_TableState<D extends Record<string, any> = {}> = Omit<Ta
54
54
  isDensePadding: boolean;
55
55
  isFullScreen: boolean;
56
56
  showFilters: boolean;
57
- showSearch: boolean;
57
+ showGlobalFilter: boolean;
58
58
  pagination: Partial<PaginationState>;
59
59
  };
60
- export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<ColumnDef<D>, 'header' | 'footer' | 'columns'> & {
60
+ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<ColumnDef<D>, 'header' | 'footer' | 'columns'> & {
61
61
  Edit?: ({ cell, tableInstance, }: {
62
62
  cell: MRT_Cell<D>;
63
63
  tableInstance: MRT_TableInstance<D>;
@@ -79,11 +79,11 @@ export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Om
79
79
  tableInstance: MRT_TableInstance<D>;
80
80
  }) => ReactNode;
81
81
  id: keyof D | string;
82
- columns?: MRT_ColumnInterface<D>[];
82
+ columns?: MRT_ColumnDef<D>[];
83
83
  enableClickToCopy?: boolean;
84
84
  enableColumnActions?: boolean;
85
85
  enableEditing?: boolean;
86
- enabledFilterTypes?: (MRT_FILTER_TYPE | string)[];
86
+ enabledColumnFilterTypes?: (MRT_FILTER_TYPE | string)[];
87
87
  filter?: MRT_FilterType | string | FilterType<D>;
88
88
  filterSelectOptions?: (string | {
89
89
  text: string;
@@ -105,19 +105,19 @@ export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Om
105
105
  }) => TableCellProps);
106
106
  muiTableFooterCellProps?: TableCellProps | (({ tableInstance, column, }: {
107
107
  tableInstance: MRT_TableInstance;
108
- column: MRT_ColumnInstance<D>;
108
+ column: MRT_Column<D>;
109
109
  }) => TableCellProps);
110
110
  muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | (({ tableInstance, column, }: {
111
111
  tableInstance: MRT_TableInstance;
112
- column: MRT_ColumnInstance<D>;
112
+ column: MRT_Column<D>;
113
113
  }) => IconButtonProps);
114
114
  muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ tableInstance, column, }: {
115
115
  tableInstance: MRT_TableInstance;
116
- column: MRT_ColumnInstance<D>;
116
+ column: MRT_Column<D>;
117
117
  }) => TextFieldProps);
118
118
  muiTableHeadCellProps?: TableCellProps | (({ tableInstance, column, }: {
119
119
  tableInstance: MRT_TableInstance;
120
- column: MRT_ColumnInstance<D>;
120
+ column: MRT_Column<D>;
121
121
  }) => TableCellProps);
122
122
  onCellEditBlur?: ({ cell, event, tableInstance, }: {
123
123
  event: FocusEvent<HTMLInputElement>;
@@ -134,11 +134,11 @@ export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Om
134
134
  filterValue: any;
135
135
  }) => void;
136
136
  };
137
- export declare type MRT_ColumnInstance<D extends Record<string, any> = {}> = Omit<Column<D>, 'header' | 'footer' | 'columns'> & MRT_ColumnInterface<D> & {
138
- columns?: MRT_ColumnInstance<D>[];
137
+ export declare type MRT_Column<D extends Record<string, any> = {}> = Omit<Column<D>, 'header' | 'footer' | 'columns'> & MRT_ColumnDef<D> & {
138
+ columns?: MRT_Column<D>[];
139
139
  };
140
140
  export declare type MRT_Header<D extends Record<string, any> = {}> = Omit<Header<D>, 'column'> & {
141
- column: MRT_ColumnInstance<D>;
141
+ column: MRT_Column<D>;
142
142
  };
143
143
  export declare type MRT_HeaderGroup<D extends Record<string, any> = {}> = Omit<HeaderGroup<D>, 'headers'> & {
144
144
  headers: MRT_Header<D>[];
@@ -153,36 +153,35 @@ export declare type MRT_Row<D extends Record<string, any> = {}> = Omit<Row<D>, '
153
153
  original: D;
154
154
  };
155
155
  export declare type MRT_Cell<D extends Record<string, any> = {}> = Omit<Cell<D>, 'column' | 'row'> & {
156
- column: MRT_ColumnInstance<D>;
156
+ column: MRT_Column<D>;
157
157
  row: MRT_Row<D>;
158
158
  };
159
159
  export declare type MRT_FilterType = MRT_FILTER_TYPE | Function;
160
160
  export declare type MaterialReactTableProps<D extends Record<string, any> = {}> = MRT_TableOptions<D> & {
161
161
  enableClickToCopy?: boolean;
162
162
  enableColumnActions?: boolean;
163
- enableColumnPinning?: boolean;
164
163
  enableDensePaddingToggle?: boolean;
164
+ enableEditing?: boolean;
165
165
  enableExpandAll?: boolean;
166
166
  enableFullScreenToggle?: boolean;
167
167
  enablePagination?: boolean;
168
168
  enableRowActions?: boolean;
169
- enableStickyHeader?: boolean;
170
- enableEditing?: boolean;
171
169
  enableRowNumbers?: boolean;
172
170
  enableSelectAll?: boolean;
171
+ enableStickyHeader?: boolean;
172
+ enableTableFooter?: boolean;
173
+ enableTableHead?: boolean;
174
+ enableToolbarBottom?: boolean;
175
+ enableToolbarInternalActions?: boolean;
176
+ enableToolbarTop?: boolean;
173
177
  enabledGlobalFilterTypes?: (MRT_FILTER_TYPE | string)[];
174
178
  filterTypes?: {
175
179
  [key in MRT_FILTER_TYPE]: any;
176
180
  };
177
- hideTableFooter?: boolean;
178
- hideTableHead?: boolean;
179
- hideToolbarBottom?: boolean;
180
- hideToolbarInternalActions?: boolean;
181
- hideToolbarTop?: boolean;
182
181
  icons?: Partial<MRT_Icons>;
183
182
  idPrefix?: string;
184
- isReloading?: boolean;
185
183
  isLoading?: boolean;
184
+ isReloading?: boolean;
186
185
  localization?: Partial<MRT_Localization>;
187
186
  muiLinearProgressProps?: LinearProgressProps | (({ tableInstance, }: {
188
187
  tableInstance: MRT_TableInstance;
@@ -227,7 +226,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
227
226
  }) => TableCellProps);
228
227
  muiTableFooterCellProps?: TableCellProps | (({ tableInstance, column, }: {
229
228
  tableInstance: MRT_TableInstance;
230
- column: MRT_ColumnInstance<D>;
229
+ column: MRT_Column<D>;
231
230
  }) => TableCellProps);
232
231
  muiTableFooterProps?: TableFooterProps | (({ tableInstance, }: {
233
232
  tableInstance: MRT_TableInstance;
@@ -238,15 +237,15 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
238
237
  }) => TableRowProps);
239
238
  muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | (({ tableInstance, column, }: {
240
239
  tableInstance: MRT_TableInstance;
241
- column: MRT_ColumnInstance<D>;
240
+ column: MRT_Column<D>;
242
241
  }) => IconButtonProps);
243
242
  muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ tableInstance, column, }: {
244
243
  tableInstance: MRT_TableInstance;
245
- column: MRT_ColumnInstance<D>;
244
+ column: MRT_Column<D>;
246
245
  }) => TextFieldProps);
247
246
  muiTableHeadCellProps?: TableCellProps | (({ tableInstance, column, }: {
248
247
  tableInstance: MRT_TableInstance;
249
- column: MRT_ColumnInstance<D>;
248
+ column: MRT_Column<D>;
250
249
  }) => TableCellProps);
251
250
  muiTableHeadProps?: TableHeadProps | (({ tableInstance, }: {
252
251
  tableInstance: MRT_TableInstance;
@@ -278,17 +277,12 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
278
277
  tableInstance: MRT_TableInstance<D>;
279
278
  event: MouseEvent<HTMLTableCellElement>;
280
279
  }) => void;
281
- onColumnHide?: ({ column, columnVisibility, tableInstance, }: {
282
- column: MRT_ColumnInstance<D>;
283
- columnVisibility: VisibilityState;
284
- tableInstance: MRT_TableInstance<D>;
285
- }) => void;
286
280
  onDetailPanelClick?: ({ event, row, tableInstance, }: {
287
281
  event: MouseEvent<HTMLTableCellElement>;
288
282
  row: MRT_Row<D>;
289
283
  tableInstance: MRT_TableInstance<D>;
290
284
  }) => void;
291
- onGlobalFilterChange?: ({ event, tableInstance, }: {
285
+ onGlobalSearchFilterChange?: ({ event, tableInstance, }: {
292
286
  event: ChangeEvent<HTMLInputElement>;
293
287
  tableInstance: MRT_TableInstance<D>;
294
288
  }) => void;
@@ -317,6 +311,31 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
317
311
  selectedRows: MRT_Row<D>[];
318
312
  tableInstance: MRT_TableInstance<D>;
319
313
  }) => void;
314
+ onToggleColumnVisibility?: ({ column, columnVisibility, tableInstance, }: {
315
+ column: MRT_Column<D>;
316
+ columnVisibility: VisibilityState;
317
+ tableInstance: MRT_TableInstance<D>;
318
+ }) => void;
319
+ onToggleDensePadding?: ({ event, isDensePadding, tableInstance, }: {
320
+ event: MouseEvent<HTMLButtonElement>;
321
+ isDensePadding: boolean;
322
+ tableInstance: MRT_TableInstance<D>;
323
+ }) => void;
324
+ onToggleFullScreen?: ({ event, isFullScreen, tableInstance, }: {
325
+ event: MouseEvent<HTMLButtonElement>;
326
+ isFullScreen: boolean;
327
+ tableInstance: MRT_TableInstance<D>;
328
+ }) => void;
329
+ onToggleShowFilters?: ({ event, showFilters, tableInstance, }: {
330
+ event: MouseEvent<HTMLButtonElement>;
331
+ showFilters: boolean;
332
+ tableInstance: MRT_TableInstance<D>;
333
+ }) => void;
334
+ onToggleShowGlobalFilter?: ({ event, showGlobalFilter, tableInstance, }: {
335
+ event: MouseEvent<HTMLButtonElement>;
336
+ showGlobalFilter: boolean;
337
+ tableInstance: MRT_TableInstance<D>;
338
+ }) => void;
320
339
  positionActionsColumn?: 'first' | 'last';
321
340
  positionPagination?: 'bottom' | 'top' | 'both';
322
341
  positionToolbarActions?: 'bottom' | 'top';
@@ -337,9 +356,9 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
337
356
  renderToolbarCustomActions?: ({ tableInstance, }: {
338
357
  tableInstance: MRT_TableInstance<D>;
339
358
  }) => ReactNode;
340
- renderToolbarInternalActions?: ({ tableInstance, MRT_ToggleSearchButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
359
+ renderToolbarInternalActions?: ({ tableInstance, MRT_ToggleGlobalFilterButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
341
360
  tableInstance: MRT_TableInstance<D>;
342
- MRT_ToggleSearchButton: FC<IconButtonProps & {
361
+ MRT_ToggleGlobalFilterButton: FC<IconButtonProps & {
343
362
  tableInstance: MRT_TableInstance<D>;
344
363
  }>;
345
364
  MRT_ToggleFiltersButton: FC<IconButtonProps & {
@@ -356,5 +375,5 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
356
375
  }>;
357
376
  }) => ReactNode;
358
377
  };
359
- declare const _default: <D extends Record<string, any> = {}>({ enableColumnActions, enableColumnFilters, enableDensePaddingToggle, enableExpandAll, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePagination, enableSelectAll, enableSorting, enableStickyHeader, icons, localization, positionActionsColumn, positionPagination, positionToolbarActions, positionToolbarAlertBanner, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
378
+ declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, enableColumnActions, enableColumnFilters, enableDensePaddingToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enableMultiRowSelection, enablePagination, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, positionActionsColumn, positionPagination, positionToolbarActions, positionToolbarAlertBanner, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
360
379
  export default _default;
@@ -4,5 +4,5 @@ import { MRT_TableInstance } from '..';
4
4
  interface Props extends IconButtonProps {
5
5
  tableInstance: MRT_TableInstance;
6
6
  }
7
- export declare const MRT_ToggleSearchButton: FC<Props>;
7
+ export declare const MRT_ToggleGlobalFilterButton: FC<Props>;
8
8
  export {};
@@ -46,6 +46,8 @@ export interface MRT_Localization {
46
46
  showHideSearch: string;
47
47
  sortByColumnAsc: string;
48
48
  sortByColumnDesc: string;
49
+ sortedByColumnAsc: string;
50
+ sortedByColumnDesc: string;
49
51
  thenBy: string;
50
52
  toggleDensePadding: string;
51
53
  toggleFullScreen: string;
@@ -53,5 +55,6 @@ export interface MRT_Localization {
53
55
  toggleSelectRow: string;
54
56
  ungroupByColumn: string;
55
57
  unpin: string;
58
+ unsorted: string;
56
59
  }
57
60
  export declare const MRT_DefaultLocalization_EN: MRT_Localization;