material-react-table 0.8.0-alpha.2 → 0.8.2

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 (46) hide show
  1. package/README.md +2 -2
  2. package/dist/MaterialReactTable.d.ts +5 -2
  3. package/dist/head/MRT_DraggableTableHeadCell.d.ts +8 -0
  4. package/dist/head/MRT_TableHeadCell.d.ts +5 -1
  5. package/dist/head/MRT_TableHeadCellFilterContainer.d.ts +8 -0
  6. package/dist/head/MRT_TableHeadCellFilterLabel.d.ts +8 -0
  7. package/dist/head/MRT_TableHeadCellGrabHandle.d.ts +9 -0
  8. package/dist/head/MRT_TableHeadCellResizeHandle.d.ts +8 -0
  9. package/dist/head/MRT_TableHeadCellSortLabel.d.ts +8 -0
  10. package/dist/icons.d.ts +1 -0
  11. package/dist/inputs/MRT_FilterRangeFields.d.ts +2 -2
  12. package/dist/localization.d.ts +1 -0
  13. package/dist/material-react-table.cjs.development.js +498 -294
  14. package/dist/material-react-table.cjs.development.js.map +1 -1
  15. package/dist/material-react-table.cjs.production.min.js +1 -1
  16. package/dist/material-react-table.cjs.production.min.js.map +1 -1
  17. package/dist/material-react-table.esm.js +500 -296
  18. package/dist/material-react-table.esm.js.map +1 -1
  19. package/dist/table/MRT_TableContainer.d.ts +1 -1
  20. package/dist/toolbar/MRT_ToolbarAlertBanner.d.ts +1 -0
  21. package/dist/toolbar/MRT_ToolbarTop.d.ts +2 -0
  22. package/dist/utils.d.ts +1 -1
  23. package/package.json +9 -6
  24. package/src/MaterialReactTable.tsx +10 -0
  25. package/src/body/MRT_TableBodyCell.tsx +7 -4
  26. package/src/buttons/MRT_CopyButton.tsx +2 -1
  27. package/src/buttons/MRT_ExpandAllButton.tsx +3 -0
  28. package/src/footer/MRT_TableFooterCell.tsx +1 -0
  29. package/src/head/MRT_DraggableTableHeadCell.tsx +52 -0
  30. package/src/head/MRT_TableHeadCell.tsx +66 -155
  31. package/src/head/MRT_TableHeadCellFilterContainer.tsx +32 -0
  32. package/src/head/MRT_TableHeadCellFilterLabel.tsx +82 -0
  33. package/src/head/MRT_TableHeadCellGrabHandle.tsx +52 -0
  34. package/src/head/MRT_TableHeadCellResizeHandle.tsx +52 -0
  35. package/src/head/MRT_TableHeadCellSortLabel.tsx +45 -0
  36. package/src/head/MRT_TableHeadRow.tsx +17 -8
  37. package/src/icons.ts +3 -0
  38. package/src/inputs/MRT_FilterRangeFields.tsx +1 -3
  39. package/src/localization.ts +2 -0
  40. package/src/table/MRT_TableContainer.tsx +1 -1
  41. package/src/table/MRT_TablePaper.tsx +26 -22
  42. package/src/table/MRT_TableRoot.tsx +8 -0
  43. package/src/toolbar/MRT_ToolbarAlertBanner.tsx +11 -27
  44. package/src/toolbar/MRT_ToolbarBottom.tsx +23 -5
  45. package/src/toolbar/MRT_ToolbarInternalButtons.tsx +30 -29
  46. package/src/toolbar/MRT_ToolbarTop.tsx +21 -20
package/src/toolbar/MRT_ToolbarTop.tsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { FC } from 'react';
2
- import { Box, lighten, Theme, Toolbar } from '@mui/material';
3
- import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
2
+ import { Box, lighten, Theme, Toolbar, useMediaQuery } from '@mui/material';
4
3
  import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
5
4
  import { MRT_TablePagination } from './MRT_TablePagination';
6
5
  import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
@@ -11,6 +10,8 @@ export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
11
10
  backgroundColor: lighten(theme.palette.background.default, 0.04),
12
11
  backgroundImage: 'none',
13
12
  display: 'grid',
13
+ minHeight: '3.5rem',
14
+ overflow: 'hidden',
14
15
  p: '0 !important',
15
16
  transition: 'all 0.2s ease-in-out',
16
17
  width: '100%',
@@ -25,7 +26,6 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
25
26
  const {
26
27
  getState,
27
28
  options: {
28
- enableGlobalFilter,
29
29
  enablePagination,
30
30
  enableToolbarInternalActions,
31
31
  idPrefix,
@@ -39,11 +39,17 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
39
39
 
40
40
  const { isFullScreen } = getState();
41
41
 
42
+ const isMobile = useMediaQuery('(max-width:720px)');
43
+
42
44
  const toolbarProps =
43
45
  muiTableToolbarTopProps instanceof Function
44
46
  ? muiTableToolbarTopProps({ tableInstance })
45
47
  : muiTableToolbarTopProps;
46
48
 
49
+ const stackAlertBanner =
50
+ isMobile ||
51
+ (positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions);
52
+
47
53
  return (
48
54
  <Toolbar
49
55
  id={`mrt-${idPrefix}-toolbar-top`}
@@ -59,31 +65,26 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
59
65
  }
60
66
  >
61
67
  {positionToolbarAlertBanner === 'top' && (
62
- <MRT_ToolbarAlertBanner tableInstance={tableInstance} />
68
+ <MRT_ToolbarAlertBanner
69
+ stackAlertBanner={stackAlertBanner}
70
+ tableInstance={tableInstance}
71
+ />
63
72
  )}
64
73
  <Box
65
74
  sx={{
66
- p: '0.5rem',
67
75
  display: 'flex',
68
76
  justifyContent: 'space-between',
77
+ p: '0.5rem',
78
+ position: stackAlertBanner ? 'relative' : 'absolute',
79
+ right: 0,
80
+ top: 0,
81
+ width: 'calc(100% - 1rem)',
69
82
  }}
70
83
  >
71
84
  {renderToolbarCustomActions?.({ tableInstance }) ?? <span />}
72
- <Box
73
- sx={{
74
- display: 'flex',
75
- gap: '0.5rem',
76
- position: 'relative',
77
- zIndex: 3,
78
- }}
79
- >
80
- {enableGlobalFilter && (
81
- <MRT_SearchTextField tableInstance={tableInstance} />
82
- )}
83
- {enableToolbarInternalActions && positionToolbarActions === 'top' && (
84
- <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
85
- )}
86
- </Box>
85
+ {enableToolbarInternalActions && positionToolbarActions === 'top' && (
86
+ <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
87
+ )}
87
88
  </Box>
88
89
  <div>
89
90
  {enablePagination &&