material-react-table 0.21.0 → 0.22.0

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/body/MRT_TableBody.d.ts +3 -2
  2. package/dist/body/MRT_TableBodyCell.d.ts +3 -2
  3. package/dist/body/MRT_TableBodyRow.d.ts +3 -2
  4. package/dist/buttons/MRT_GrabHandleButton.d.ts +3 -2
  5. package/dist/head/MRT_TableHead.d.ts +4 -2
  6. package/dist/head/MRT_TableHeadCell.d.ts +4 -6
  7. package/dist/head/MRT_TableHeadRow.d.ts +4 -2
  8. package/dist/material-react-table.cjs.development.js +177 -4409
  9. package/dist/material-react-table.cjs.development.js.map +1 -1
  10. package/dist/material-react-table.cjs.production.min.js +1 -1
  11. package/dist/material-react-table.cjs.production.min.js.map +1 -1
  12. package/dist/material-react-table.esm.js +141 -136
  13. package/dist/material-react-table.esm.js.map +1 -1
  14. package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts +3 -1
  15. package/package.json +1 -3
  16. package/src/body/MRT_TableBody.tsx +9 -3
  17. package/src/body/MRT_TableBodyCell.tsx +15 -17
  18. package/src/body/MRT_TableBodyRow.tsx +10 -3
  19. package/src/buttons/MRT_GrabHandleButton.tsx +12 -5
  20. package/src/head/MRT_TableHead.tsx +11 -3
  21. package/src/head/MRT_TableHeadCell.tsx +49 -20
  22. package/src/head/MRT_TableHeadRow.tsx +25 -20
  23. package/src/menus/MRT_ShowHideColumnsMenu.tsx +6 -1
  24. package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +54 -27
  25. package/src/table/MRT_Table.tsx +17 -4
  26. package/src/table/MRT_TableContainer.tsx +1 -1
  27. package/src/table/MRT_TablePaper.tsx +21 -25
  28. package/dist/head/MRT_DraggableTableHeadCell.d.ts +0 -8
  29. package/src/head/MRT_DraggableTableHeadCell.tsx +0 -43
package/src/table/MRT_TableContainer.tsx CHANGED
@@ -49,8 +49,8 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
49
49
 
50
50
  return (
51
51
  <TableContainer
52
- {...tableContainerProps}
53
52
  ref={tableContainerRef}
53
+ {...tableContainerProps}
54
54
  sx={{
55
55
  maxWidth: '100%',
56
56
  maxHeight:
package/src/table/MRT_TablePaper.tsx CHANGED
@@ -1,7 +1,5 @@
1
1
  import React, { FC, useEffect } from 'react';
2
2
  import { Paper } from '@mui/material';
3
- import { DndProvider } from 'react-dnd';
4
- import { HTML5Backend } from 'react-dnd-html5-backend';
5
3
  import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
6
4
  import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
7
5
  import { MRT_TableContainer } from './MRT_TableContainer';
@@ -34,28 +32,26 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
34
32
  : muiTablePaperProps;
35
33
 
36
34
  return (
37
- <DndProvider backend={HTML5Backend}>
38
- <Paper
39
- elevation={2}
40
- {...tablePaperProps}
41
- sx={{
42
- transition: 'all 0.2s ease-in-out',
43
- ...tablePaperProps?.sx,
44
- }}
45
- style={{
46
- ...tablePaperProps?.style,
47
- height: isFullScreen ? '100vh' : undefined,
48
- margin: isFullScreen ? '0' : undefined,
49
- maxHeight: isFullScreen ? '100vh' : undefined,
50
- maxWidth: isFullScreen ? '100vw' : undefined,
51
- padding: isFullScreen ? '0' : undefined,
52
- width: isFullScreen ? '100vw' : undefined,
53
- }}
54
- >
55
- {enableToolbarTop && <MRT_ToolbarTop table={table} />}
56
- <MRT_TableContainer table={table} />
57
- {enableToolbarBottom && <MRT_ToolbarBottom table={table} />}
58
- </Paper>
59
- </DndProvider>
35
+ <Paper
36
+ elevation={2}
37
+ {...tablePaperProps}
38
+ sx={{
39
+ transition: 'all 0.2s ease-in-out',
40
+ ...tablePaperProps?.sx,
41
+ }}
42
+ style={{
43
+ ...tablePaperProps?.style,
44
+ height: isFullScreen ? '100vh' : undefined,
45
+ margin: isFullScreen ? '0' : undefined,
46
+ maxHeight: isFullScreen ? '100vh' : undefined,
47
+ maxWidth: isFullScreen ? '100vw' : undefined,
48
+ padding: isFullScreen ? '0' : undefined,
49
+ width: isFullScreen ? '100vw' : undefined,
50
+ }}
51
+ >
52
+ {enableToolbarTop && <MRT_ToolbarTop table={table} />}
53
+ <MRT_TableContainer table={table} />
54
+ {enableToolbarBottom && <MRT_ToolbarBottom table={table} />}
55
+ </Paper>
60
56
  );
61
57
  };
package/dist/head/MRT_DraggableTableHeadCell.d.ts DELETED
@@ -1,8 +0,0 @@
1
- import { FC } from 'react';
2
- import type { MRT_Header, MRT_TableInstance } from '..';
3
- interface Props {
4
- header: MRT_Header;
5
- table: MRT_TableInstance;
6
- }
7
- export declare const MRT_DraggableTableHeadCell: FC<Props>;
8
- export {};
package/src/head/MRT_DraggableTableHeadCell.tsx DELETED
@@ -1,43 +0,0 @@
1
- import React, { FC } from 'react';
2
- import { useDrag, useDrop } from 'react-dnd';
3
- import { MRT_TableHeadCell } from './MRT_TableHeadCell';
4
- import type { MRT_Column, MRT_Header, MRT_TableInstance } from '..';
5
- import { reorderColumn } from '../utils';
6
-
7
- interface Props {
8
- header: MRT_Header;
9
- table: MRT_TableInstance;
10
- }
11
-
12
- export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, table }) => {
13
- const { getState, setColumnOrder } = table;
14
- const { columnOrder } = getState();
15
- const { column } = header;
16
-
17
- const [, dropRef] = useDrop({
18
- accept: 'column',
19
- drop: (movingColumn: MRT_Column) => {
20
- const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
21
- setColumnOrder(newColumnOrder);
22
- },
23
- });
24
-
25
- const [{ isDragging }, dragRef, previewRef] = useDrag({
26
- collect: (monitor) => ({
27
- isDragging: monitor.isDragging(),
28
- }),
29
- item: () => column,
30
- type: 'column',
31
- });
32
-
33
- return (
34
- <MRT_TableHeadCell
35
- dragRef={dragRef}
36
- dropRef={dropRef}
37
- header={header}
38
- isDragging={isDragging}
39
- previewRef={previewRef}
40
- table={table}
41
- />
42
- );
43
- };