material-react-table 1.0.0-beta.3 → 1.0.0-beta.6

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 (29) hide show
  1. package/dist/cjs/MaterialReactTable.d.ts +2 -15
  2. package/dist/cjs/column.utils.d.ts +12 -1
  3. package/dist/cjs/index.js +145 -134
  4. package/dist/cjs/index.js.map +1 -1
  5. package/dist/cjs/localization.d.ts +2 -0
  6. package/dist/cjs/toolbar/MRT_ToolbarAlertBanner.d.ts +1 -1
  7. package/dist/esm/MaterialReactTable.d.ts +2 -15
  8. package/dist/esm/column.utils.d.ts +12 -1
  9. package/dist/esm/localization.d.ts +2 -0
  10. package/dist/esm/material-react-table.esm.js +146 -135
  11. package/dist/esm/material-react-table.esm.js.map +1 -1
  12. package/dist/esm/toolbar/MRT_ToolbarAlertBanner.d.ts +1 -1
  13. package/dist/index.d.ts +4 -15
  14. package/package.json +1 -1
  15. package/src/MaterialReactTable.tsx +1 -19
  16. package/src/body/MRT_TableBody.tsx +52 -28
  17. package/src/body/MRT_TableBodyCell.tsx +4 -52
  18. package/src/body/MRT_TableBodyRowGrabHandle.tsx +5 -8
  19. package/src/buttons/MRT_GrabHandleButton.tsx +2 -2
  20. package/src/column.utils.ts +72 -0
  21. package/src/footer/MRT_TableFooterCell.tsx +5 -15
  22. package/src/head/MRT_TableHeadCell.tsx +9 -50
  23. package/src/head/MRT_TableHeadCellGrabHandle.tsx +5 -12
  24. package/src/localization.ts +4 -0
  25. package/src/table/MRT_TablePaper.tsx +8 -0
  26. package/src/table/MRT_TableRoot.tsx +2 -0
  27. package/src/toolbar/MRT_BottomToolbar.tsx +5 -2
  28. package/src/toolbar/MRT_ToolbarAlertBanner.tsx +7 -1
  29. package/src/toolbar/MRT_TopToolbar.tsx +7 -1
package/src/table/MRT_TablePaper.tsx CHANGED
@@ -13,6 +13,7 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
13
13
  const {
14
14
  getState,
15
15
  options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps },
16
+ refs: { tablePaperRef },
16
17
  } = table;
17
18
  const { isFullScreen } = getState();
18
19
 
@@ -35,6 +36,13 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
35
36
  <Paper
36
37
  elevation={2}
37
38
  {...tablePaperProps}
39
+ ref={(ref: HTMLDivElement) => {
40
+ tablePaperRef.current = ref;
41
+ if (tablePaperProps?.ref) {
42
+ //@ts-ignore
43
+ tablePaperProps.ref.current = ref;
44
+ }
45
+ }}
38
46
  sx={(theme) => ({
39
47
  transition: 'all 0.2s ease-in-out',
40
48
  ...(tablePaperProps?.sx instanceof Function
package/src/table/MRT_TableRoot.tsx CHANGED
@@ -45,6 +45,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
45
45
  const filterInputRefs = useRef<Record<string, HTMLInputElement>>({});
46
46
  const searchInputRef = useRef<HTMLInputElement>(null);
47
47
  const tableContainerRef = useRef<HTMLDivElement>(null);
48
+ const tablePaperRef = useRef<HTMLDivElement>(null);
48
49
  const topToolbarRef = useRef<HTMLDivElement>(null);
49
50
 
50
51
  const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
@@ -292,6 +293,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
292
293
  filterInputRefs,
293
294
  searchInputRef,
294
295
  tableContainerRef,
296
+ tablePaperRef,
295
297
  topToolbarRef,
296
298
  },
297
299
  setColumnFilterFns: props.onFilterFnsChange ?? setColumnFilterFns,
package/src/toolbar/MRT_BottomToolbar.tsx CHANGED
@@ -62,14 +62,17 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
62
62
  >
63
63
  <MRT_LinearProgressBar isTopToolbar={false} table={table} />
64
64
  {positionToolbarAlertBanner === 'bottom' && (
65
- <MRT_ToolbarAlertBanner table={table} />
65
+ <MRT_ToolbarAlertBanner
66
+ stackAlertBanner={stackAlertBanner}
67
+ table={table}
68
+ />
66
69
  )}
67
70
  {['both', 'bottom'].includes(positionToolbarDropZone ?? '') && (
68
71
  <MRT_ToolbarDropZone table={table} />
69
72
  )}
70
73
  <Box
71
74
  sx={{
72
- alignItems: 'flex-start',
75
+ alignItems: 'center',
73
76
  boxSizing: 'border-box',
74
77
  display: 'flex',
75
78
  justifyContent: 'space-between',
package/src/toolbar/MRT_ToolbarAlertBanner.tsx CHANGED
@@ -3,7 +3,7 @@ import { Alert, AlertTitle, Box, Chip, Collapse } from '@mui/material';
3
3
  import { MRT_TableInstance } from '..';
4
4
 
5
5
  interface Props {
6
- stackAlertBanner?: boolean;
6
+ stackAlertBanner: boolean;
7
7
  table: MRT_TableInstance;
8
8
  }
9
9
 
@@ -19,6 +19,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
19
19
  localization,
20
20
  muiToolbarAlertBannerProps,
21
21
  muiToolbarAlertBannerChipProps,
22
+ positionToolbarAlertBanner,
22
23
  },
23
24
  } = table;
24
25
  const { grouping, showAlertBanner } = getState();
@@ -78,6 +79,11 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
78
79
  left: 0,
79
80
  p: 0,
80
81
  position: 'relative',
82
+ mb: stackAlertBanner
83
+ ? 0
84
+ : positionToolbarAlertBanner === 'bottom'
85
+ ? '-1rem'
86
+ : undefined,
81
87
  right: 0,
82
88
  top: 0,
83
89
  width: '100%',
package/src/toolbar/MRT_TopToolbar.tsx CHANGED
@@ -102,7 +102,13 @@ export const MRT_TopToolbar: FC<Props> = ({ table }) => {
102
102
  )}
103
103
  {renderTopToolbarCustomActions?.({ table }) ?? <span />}
104
104
  {enableToolbarInternalActions ? (
105
- <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
105
+ <Box
106
+ sx={{
107
+ display: 'flex',
108
+ flexWrap: 'wrap-reverse',
109
+ justifyContent: 'flex-end',
110
+ }}
111
+ >
106
112
  {enableGlobalFilter && positionGlobalFilter === 'right' && (
107
113
  <MRT_GlobalFilterTextField table={table} />
108
114
  )}