material-react-table 1.4.0-beta.0 → 1.4.0-beta.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 (33) hide show
  1. package/README.md +2 -0
  2. package/dist/cjs/index.js +654 -85
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/types/MaterialReactTable.d.ts +6 -13
  5. package/dist/cjs/types/body/MRT_TableBodyCell.d.ts +1 -1
  6. package/dist/cjs/types/body/MRT_TableBodyRow.d.ts +3 -1
  7. package/dist/cjs/types/body/MRT_TableBodyRowGrabHandle.d.ts +1 -1
  8. package/dist/cjs/types/table/MRT_TableRoot.d.ts +4 -4
  9. package/dist/esm/material-react-table.esm.js +927 -376
  10. package/dist/esm/material-react-table.esm.js.map +1 -1
  11. package/dist/esm/types/MaterialReactTable.d.ts +6 -13
  12. package/dist/esm/types/body/MRT_TableBodyCell.d.ts +1 -1
  13. package/dist/esm/types/body/MRT_TableBodyRow.d.ts +3 -1
  14. package/dist/esm/types/body/MRT_TableBodyRowGrabHandle.d.ts +1 -1
  15. package/dist/esm/types/table/MRT_TableRoot.d.ts +4 -4
  16. package/dist/index.d.ts +7 -14
  17. package/package.json +4 -3
  18. package/src/MaterialReactTable.tsx +15 -22
  19. package/src/body/MRT_TableBody.tsx +53 -77
  20. package/src/body/MRT_TableBodyCell.tsx +1 -3
  21. package/src/body/MRT_TableBodyRow.tsx +16 -9
  22. package/src/body/MRT_TableBodyRowGrabHandle.tsx +1 -1
  23. package/src/body/MRT_TableDetailPanel.tsx +7 -1
  24. package/src/column.utils.ts +0 -1
  25. package/src/footer/MRT_TableFooter.tsx +2 -1
  26. package/src/footer/MRT_TableFooterCell.tsx +3 -1
  27. package/src/footer/MRT_TableFooterRow.tsx +10 -2
  28. package/src/head/MRT_TableHead.tsx +3 -3
  29. package/src/head/MRT_TableHeadCell.tsx +0 -2
  30. package/src/head/MRT_TableHeadCellFilterLabel.tsx +7 -0
  31. package/src/head/MRT_TableHeadRow.tsx +2 -3
  32. package/src/table/MRT_Table.tsx +1 -2
  33. package/src/table/MRT_TableContainer.tsx +7 -5
package/src/head/MRT_TableHead.tsx CHANGED
@@ -30,12 +30,12 @@ export const MRT_TableHead: FC<Props> = ({ table }) => {
30
30
 
31
31
  return (
32
32
  <TableHead
33
- component={layoutMode === 'grid' ? 'div' : 'thead'}
34
- role="rowgroup"
35
33
  {...tableHeadProps}
36
34
  sx={(theme) => ({
35
+ display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
37
36
  opacity: 0.97,
38
- position: stickyHeader ? 'sticky' : undefined,
37
+ position: stickyHeader ? 'sticky' : 'relative',
38
+ top: stickyHeader && layoutMode === 'grid' ? 0 : undefined,
39
39
  zIndex: stickyHeader ? 2 : undefined,
40
40
  ...(tableHeadProps?.sx instanceof Function
41
41
  ? tableHeadProps?.sx(theme)
package/src/head/MRT_TableHeadCell.tsx CHANGED
@@ -121,7 +121,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
121
121
  return (
122
122
  <TableCell
123
123
  align={columnDefType === 'group' ? 'center' : 'left'}
124
- component={layoutMode === 'grid' ? 'div' : 'td'}
125
124
  colSpan={header.colSpan}
126
125
  onDragEnter={handleDragEnter}
127
126
  ref={(node) => {
@@ -129,7 +128,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
129
128
  tableHeadCellRefs.current[column.id] = node as HTMLTableCellElement;
130
129
  }
131
130
  }}
132
- role="columnheader"
133
131
  {...tableCellProps}
134
132
  sx={(theme: Theme) => ({
135
133
  flexDirection: layoutMode === 'grid' ? 'column' : undefined,
package/src/head/MRT_TableHeadCellFilterLabel.tsx CHANGED
@@ -16,6 +16,8 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
16
16
  icons: { FilterAltIcon },
17
17
  localization,
18
18
  },
19
+ refs: { filterInputRefs },
20
+ setShowFilters,
19
21
  } = table;
20
22
  const { column } = header;
21
23
  const { columnDef } = column;
@@ -64,6 +66,11 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
64
66
  <IconButton
65
67
  disableRipple
66
68
  onClick={(event: MouseEvent<HTMLButtonElement>) => {
69
+ setShowFilters(true);
70
+ queueMicrotask(() => {
71
+ filterInputRefs.current[`${column.id}-0`]?.focus();
72
+ filterInputRefs.current[`${column.id}-0`]?.select();
73
+ });
67
74
  event.stopPropagation();
68
75
  }}
69
76
  size="small"
package/src/head/MRT_TableHeadRow.tsx CHANGED
@@ -21,13 +21,12 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, table }) => {
21
21
 
22
22
  return (
23
23
  <TableRow
24
- component={layoutMode === 'grid' ? 'div' : 'tr'}
25
- role="row"
26
24
  {...tableRowProps}
27
25
  sx={(theme) => ({
26
+ backgroundColor: lighten(theme.palette.background.default, 0.04),
28
27
  boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
29
28
  display: layoutMode === 'grid' ? 'flex' : 'table-row',
30
- backgroundColor: lighten(theme.palette.background.default, 0.04),
29
+ top: 0,
31
30
  ...(tableRowProps?.sx instanceof Function
32
31
  ? tableRowProps?.sx(theme)
33
32
  : (tableRowProps?.sx as any)),
package/src/table/MRT_Table.tsx CHANGED
@@ -32,13 +32,12 @@ export const MRT_Table: FC<Props> = ({ table }) => {
32
32
 
33
33
  return (
34
34
  <Table
35
- component={layoutMode === 'grid' ? 'div' : 'table'}
36
- role="grid"
37
35
  stickyHeader={
38
36
  enableStickyHeader || enableRowVirtualization || isFullScreen
39
37
  }
40
38
  {...tableProps}
41
39
  sx={(theme) => ({
40
+ display: layoutMode === 'grid' ? 'grid' : 'table',
42
41
  tableLayout:
43
42
  enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto',
44
43
  ...(tableProps?.sx instanceof Function
package/src/table/MRT_TableContainer.tsx CHANGED
@@ -46,11 +46,13 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
46
46
  return (
47
47
  <TableContainer
48
48
  {...tableContainerProps}
49
- ref={(ref: HTMLDivElement) => {
50
- tableContainerRef.current = ref;
51
- if (tableContainerProps?.ref) {
52
- //@ts-ignore
53
- tableContainerProps.ref.current = ref;
49
+ ref={(node: HTMLDivElement) => {
50
+ if (node) {
51
+ tableContainerRef.current = node;
52
+ if (tableContainerProps?.ref) {
53
+ //@ts-ignore
54
+ tableContainerProps.ref.current = node;
55
+ }
54
56
  }
55
57
  }}
56
58
  sx={(theme) => ({