v6

CHANGELOG.md

@@ -1,3 +1,11 @@
+#### 6.4.7 (2024-11-11)
+
+#### 6.4.7 (2024-11-11)
+
+#### 6.4.6 (2024-11-11)
+
+#### 6.4.5 (2024-11-11)
+
 #### 6.4.4 (2024-05-21)
 
 ##### Other Changes

__tests__/demo/webpack.config.js

@@ -15,7 +15,7 @@ module.exports = {
     ]
   },
   resolve: {
-    extensions: ['*', '.js', '.jsx']
+    extensions: ['.*', '.js', '.jsx']
   },
   output: {
     path: '/dist',

package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "url": "https://material-table-core.github.io/",
-  "version": "6.4.4",
+  "version": "6.4.7",
   "description": "Datatable for React based on https://material-ui.com/api/table/ with additional features",
   "main": "dist/index.js",
   "types": "types/index.d.ts",
@@ -113,7 +113,7 @@
     "@hello-pangea/dnd": "^16.0.0",
     "@mui/icons-material": ">=5.10.6",
     "@mui/material": ">=5.11.12",
-    "@mui/x-date-pickers": "^6.19.0",
+    "@mui/x-date-pickers": "6.19.0",
     "classnames": "^2.3.2",
     "date-fns": "^3.2.0",
     "debounce": "^1.2.1",

src/components/MTableScrollbar/index.js

@@ -21,8 +21,15 @@ const singleStyle = {
   }
 };
 
-const ScrollBar = ({ double, children }) => {
-  return <Box sx={double ? doubleStyle : singleStyle}>{children}</Box>;
-};
+const ScrollBar = React.forwardRef(function ScrollBar(
+  { double, children, ...props },
+  ref
+) {
+  return (
+    <Box sx={double ? doubleStyle : singleStyle} {...props} ref={ref}>
+      {children}
+    </Box>
+  );
+});
 
 export default ScrollBar;

src/material-table.js

@@ -1170,87 +1170,86 @@ export default class MaterialTable extends React.Component {
               persistentGroupingsId={props.options.persistentGroupingsId}
             />
           )}
-          <MTableScrollbar double={props.options.doubleHorizontalScroll}>
+          <MTableScrollbar
+            style={{
+              maxHeight: props.options.maxBodyHeight,
+              minHeight: props.options.minBodyHeight,
+              overflowY: props.options.overflowY
+            }}
+            ref={this.tableContainerDiv}
+            double={props.options.doubleHorizontalScroll}
+          >
             <Droppable droppableId="headers" direction="horizontal">
               {(provided, snapshot) => {
                 const table = this.renderTable(props);
                 return (
                   <div ref={provided.innerRef}>
-                    <div
-                      ref={this.tableContainerDiv}
-                      style={{
-                        maxHeight: props.options.maxBodyHeight,
-                        minHeight: props.options.minBodyHeight,
-                        overflowY: props.options.overflowY
-                      }}
-                    >
-                      {this.state.width &&
-                      props.options.fixedColumns &&
-                      props.options.fixedColumns.right ? (
+                    {this.state.width &&
+                    props.options.fixedColumns &&
+                    props.options.fixedColumns.right ? (
+                      <div
+                        style={{
+                          width: this.getColumnsWidth(
+                            props,
+                            -1 * props.options.fixedColumns.right
+                          ),
+                          position: 'absolute',
+                          top: 0,
+                          right: 0,
+                          boxShadow: '-2px 0px 15px rgba(125,147,178,.25)',
+                          overflowX: 'clip',
+                          zIndex: 11
+                        }}
+                      >
                         <div
                           style={{
-                            width: this.getColumnsWidth(
+                            width: this.state.width,
+                            background: 'white',
+                            transform: `translateX(calc(${this.getColumnsWidth(
                               props,
                               -1 * props.options.fixedColumns.right
-                            ),
-                            position: 'absolute',
-                            top: 0,
-                            right: 0,
-                            boxShadow: '-2px 0px 15px rgba(125,147,178,.25)',
-                            overflowX: 'clip',
-                            zIndex: 11
+                            )} - 100%))`
                           }}
                         >
-                          <div
-                            style={{
-                              width: this.state.width,
-                              background: 'white',
-                              transform: `translateX(calc(${this.getColumnsWidth(
-                                props,
-                                -1 * props.options.fixedColumns.right
-                              )} - 100%))`
-                            }}
-                          >
-                            {table}
-                          </div>
+                          {table}
                         </div>
-                      ) : null}
-
-                      <div>{table}</div>
-
-                      {this.state.width &&
-                      props.options.fixedColumns &&
-                      props.options.fixedColumns.left ? (
+                      </div>
+                    ) : null}
+
+                    <div>{table}</div>
+
+                    {this.state.width &&
+                    props.options.fixedColumns &&
+                    props.options.fixedColumns.left ? (
+                      <div
+                        style={{
+                          width: this.getColumnsWidth(
+                            props,
+                            props.options.fixedColumns.left
+                          ),
+                          position: 'absolute',
+                          top: 0,
+                          left: 0,
+                          boxShadow: '2px 0px 15px rgba(125,147,178,.25)',
+                          overflowX: 'clip',
+                          zIndex: 11
+                        }}
+                      >
                         <div
                           style={{
-                            width: this.getColumnsWidth(
-                              props,
-                              props.options.fixedColumns.left
-                            ),
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            boxShadow: '2px 0px 15px rgba(125,147,178,.25)',
-                            overflowX: 'clip',
-                            zIndex: 11
+                            width: this.state.width,
+                            background: 'white'
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Tab') {
+                              e.preventDefault();
+                            }
                           }}
                         >
-                          <div
-                            style={{
-                              width: this.state.width,
-                              background: 'white'
-                            }}
-                            onKeyDown={(e) => {
-                              if (e.key === 'Tab') {
-                                e.preventDefault();
-                              }
-                            }}
-                          >
-                            {table}
-                          </div>
+                          {table}
                         </div>
-                      ) : null}
-                    </div>
+                      </div>
+                    ) : null}
                     {provided.placeholder}
                   </div>
                 );

src/utils/data-manager.js

@@ -176,8 +176,8 @@ export default class DataManager {
 
     this.tableStyleWidth =
       this.tableWidth === 'full' ||
-        undefWidthCols.length > 0 ||
-        usedWidthNotPx.length > 0
+      undefWidthCols.length > 0 ||
+      usedWidthNotPx.length > 0
         ? '100%'
         : usedWidthPx;
   }
@@ -930,7 +930,7 @@ export default class DataManager {
       this.treefied =
       this.sorted =
       this.paged =
-      false;
+        false;
 
     this.filteredData = [...this.data];
 
@@ -1112,13 +1112,12 @@ export default class DataManager {
             const path = [...(o.path || []), value];
             let isDefaultExpanded = false;
             switch (typeof this.defaultExpanded) {
-              case "boolean":
+              case 'boolean':
                 isDefaultExpanded = this.defaultExpanded;
                 break;
-              case "function":
+              case 'function':
                 isDefaultExpanded = this.defaultExpanded(currentRow);
                 break;
-
             }
             const oldGroup = this.findGroupByGroupPath(
               this.groupedData,
@@ -1236,11 +1235,11 @@ export default class DataManager {
         if (rowData.tableData.isTreeExpanded === undefined) {
           let isExpanded = false;
           switch (typeof this.defaultExpanded) {
-            case "boolean":
-              isDefaultExpanded = this.defaultExpanded;
+            case 'boolean':
+              isExpanded = this.defaultExpanded;
               break;
-            case "function":
-              isDefaultExpanded = this.defaultExpanded(rowData);
+            case 'function':
+              isExpanded = this.defaultExpanded(rowData);
               break;
           }
           rowData.tableData.isTreeExpanded = isExpanded;
@@ -1291,19 +1290,19 @@ export default class DataManager {
           return list.sort(
             columnDef.tableData.groupSort === 'desc'
               ? (a, b) =>
-                columnDef.customSort(
-                  b.value,
-                  a.value,
-                  'group',
-                  columnDef.tableData.groupSort
-                )
+                  columnDef.customSort(
+                    b.value,
+                    a.value,
+                    'group',
+                    columnDef.tableData.groupSort
+                  )
               : (a, b) =>
-                columnDef.customSort(
-                  a.value,
-                  b.value,
-                  'group',
-                  columnDef.tableData.groupSort
-                )
+                  columnDef.customSort(
+                    a.value,
+                    b.value,
+                    'group',
+                    columnDef.tableData.groupSort
+                  )
           );
         } else {
           return list.sort(