From e144db9464a5c85d1e89830db111bae6dd994748 Mon Sep 17 00:00:00 2001
From: YASHMAHAKAL <yvsst01@gmail.com>
Date: Fri, 10 Apr 2026 23:36:20 +0530
Subject: [PATCH 1/2] fix: resolve React 18 key spreading warnings and update
 deprecated MUI v5 props

Signed-off-by: YASHMAHAKAL <yvsst01@gmail.com>
---
 examples/custom-components/index.js       | 67 +++++++++++------------
 examples/customize-footer/CustomFooter.js |  4 +-
 examples/customize-styling/index.js       |  2 +-
 src/components/Popover.js                 |  5 +-
 4 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/examples/custom-components/index.js b/examples/custom-components/index.js
index d527163..23108d2 100644
--- a/examples/custom-components/index.js
+++ b/examples/custom-components/index.js
@@ -9,19 +9,18 @@ import TableViewCol from './TableViewCol';
 const CustomChip = (props) => {
   const { label, onDelete, columnNames, className, index } = props;
   return (<Chip
-      className={className}
-      variant="outlined"
-      color={columnNames[index].name === 'Company' ? 'secondary' : 'primary'}
-      label={label}
-      onDelete={onDelete}
+    className={className}
+    variant="outlined"
+    color={columnNames[index].name === 'Company' ? 'secondary' : 'primary'}
+    label={label}
+    onDelete={onDelete}
   />);
 };
 
 const CustomTooltip = (props) => {
   return (
-    <MuiTooltip 
-      title={props.title} 
-      interactive={true} 
+    <MuiTooltip
+      title={props.title}
       TransitionComponent={Fade}
       TransitionProps={{ timeout: 250 }}
       leaveDelay={250}>{props.children}</MuiTooltip>
@@ -72,31 +71,31 @@ class Example extends React.Component {
               return false;
             },
             display: (filterList, onChange, index, column) => (
-                <Select
-                    onChange={event => {
-                      filterList[index][0] = event.target.value;
-                      onChange(filterList[index], index, column);
-                    }}
-                    value={filterList[index]}
-                >
-                  <MenuItem value="Test Corp">{'Test Corp'}</MenuItem>
-                  <MenuItem value="Other Corp">{'Other Corp'}</MenuItem>
-                </Select>
+              <Select
+                onChange={event => {
+                  filterList[index][0] = event.target.value;
+                  onChange(filterList[index], index, column);
+                }}
+                value={filterList[index]}
+              >
+                <MenuItem value="Test Corp">{'Test Corp'}</MenuItem>
+                <MenuItem value="Other Corp">{'Other Corp'}</MenuItem>
+              </Select>
             )
           },
         },
       },
       { name: 'City', label: 'City Label', options: { filterList: ['Dallas'] } },
       { name: 'State' },
-      { 
-        name: 'Empty', 
-        options: { 
-          empty: true, 
-          filterType: 'checkbox', 
+      {
+        name: 'Empty',
+        options: {
+          empty: true,
+          filterType: 'checkbox',
           filterOptions: {
             renderValue: (val) => (val ? val : '(Empty)')
           }
-        } 
+        }
       },
     ];
     const data = [
@@ -116,16 +115,16 @@ class Example extends React.Component {
 
     return (
       <MUIDataTable
-          title={"ACME Employee list"}
-          data={data}
-          columns={columns}
-          options={options}
-          components={{
-            TableFilterList: CustomFilterList,
-            Tooltip: CustomTooltip,
-            Checkbox: CustomCheckbox,
-            TableViewCol: TableViewCol
-          }}
+        title={"ACME Employee list"}
+        data={data}
+        columns={columns}
+        options={options}
+        components={{
+          TableFilterList: CustomFilterList,
+          Tooltip: CustomTooltip,
+          Checkbox: CustomCheckbox,
+          TableViewCol: TableViewCol
+        }}
       />
     );
 
diff --git a/examples/customize-footer/CustomFooter.js b/examples/customize-footer/CustomFooter.js
index e3e77a8..594ad44 100644
--- a/examples/customize-footer/CustomFooter.js
+++ b/examples/customize-footer/CustomFooter.js
@@ -44,8 +44,8 @@ class CustomFooter extends React.Component {
                 'aria-label': textLabels.next,
               }}
               rowsPerPageOptions={[10,20,100]}
-              onChangePage={this.handlePageChange}
-              onChangeRowsPerPage={this.handleRowChange}
+              onPageChange={this.handlePageChange}
+              onRowsPerPageChange={this.handleRowChange}
             />
           </TableCell>
         </TableRow>
diff --git a/examples/customize-styling/index.js b/examples/customize-styling/index.js
index 80fad3e..b6c0e7b 100644
--- a/examples/customize-styling/index.js
+++ b/examples/customize-styling/index.js
@@ -192,7 +192,7 @@ class Example extends React.Component {
       },
       setTableProps: () => {
         return {
-          padding: this.state.denseTable ? 'none' : 'default',
+          padding: this.state.denseTable ? 'none' : 'normal',
 
           // material ui v4 only
           size: this.state.denseTable ? 'small' : 'medium',
diff --git a/src/components/Popover.js b/src/components/Popover.js
index a947544..1dd2918 100644
--- a/src/components/Popover.js
+++ b/src/components/Popover.js
@@ -45,7 +45,6 @@ const Popover = ({ className, trigger, refExit, hide, content, ...providedProps
   };
 
   const triggerProps = {
-    key: 'content',
     onClick: (event) => {
       if (trigger.props.onClick) trigger.props.onClick();
       handleClick(event);
@@ -54,7 +53,9 @@ const Popover = ({ className, trigger, refExit, hide, content, ...providedProps
 
   return (
     <>
-      <span {...triggerProps}>{trigger}</span>
+      <span key="content" {...triggerProps}>
+        {trigger}
+      </span>
       <MuiPopover
         elevation={2}
         open={isOpen}

From 5802ea26c446778ca58d41874c3d56447da14c56 Mon Sep 17 00:00:00 2001
From: YASHMAHAKAL <yvsst01@gmail.com>
Date: Sat, 11 Apr 2026 02:53:54 +0530
Subject: [PATCH 2/2] pagination, tooltip, popover fixed for muiv7+

Signed-off-by: YASHMAHAKAL <yvsst01@gmail.com>
---
 examples/custom-components/index.js       |  4 ++--
 examples/customize-footer/CustomFooter.js | 14 +++++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/examples/custom-components/index.js b/examples/custom-components/index.js
index 23108d2..1ada390 100644
--- a/examples/custom-components/index.js
+++ b/examples/custom-components/index.js
@@ -21,8 +21,8 @@ const CustomTooltip = (props) => {
   return (
     <MuiTooltip
       title={props.title}
-      TransitionComponent={Fade}
-      TransitionProps={{ timeout: 250 }}
+      slots={{ transition: Fade }}
+      slotProps={{ transition: { timeout: 250 } }}
       leaveDelay={250}>{props.children}</MuiTooltip>
   );
 };
diff --git a/examples/customize-footer/CustomFooter.js b/examples/customize-footer/CustomFooter.js
index 594ad44..76b739a 100644
--- a/examples/customize-footer/CustomFooter.js
+++ b/examples/customize-footer/CustomFooter.js
@@ -37,11 +37,15 @@ class CustomFooter extends React.Component {
               page={page}
               labelRowsPerPage={textLabels.rowsPerPage}
               labelDisplayedRows={({ from, to, count }) => `${from}-${to} ${textLabels.displayRows} ${count}`}
-              backIconButtonProps={{
-                'aria-label': textLabels.previous,
-              }}
-              nextIconButtonProps={{
-                'aria-label': textLabels.next,
+              slotProps={{
+                actions: {
+                  previousButton: {
+                    'aria-label': textLabels.previous,
+                  },
+                  nextButton: {
+                    'aria-label': textLabels.next,
+                  }
+                }
               }}
               rowsPerPageOptions={[10,20,100]}
               onPageChange={this.handlePageChange}