mui-table-2026 1.0.0 → 1.0.1

package/src/components/TableToolbar.js

@@ -1,58 +1,58 @@
-import React, { useState } from 'react';
-import { Typography } from '@mui/material';
-import { Toolbar } from '@mui/material';
-import { IconButton } from '@mui/material';
-import { Menu } from '@mui/material';
-import { MenuItem } from '@mui/material';
-import { ListItemIcon } from '@mui/material';
-import { ListItemText } from '@mui/material';
-import Popover from './Popover';
-import TableFilter from './TableFilter';
-import TableViewCol from './TableViewCol';
-import TableSearch from './TableSearch';
-import { Search as SearchIcon } from '@mui/icons-material';
-import DownloadIcon from '@mui/icons-material/CloudDownload';
-import { Print as PrintIcon } from '@mui/icons-material';
-import { ViewColumn as ViewColumnIcon } from '@mui/icons-material';
-import FilterIcon from '@mui/icons-material/FilterList';
-import { FileDownload as FileDownloadIcon } from '@mui/icons-material';
-import { PictureAsPdf as PictureAsPdfIcon } from '@mui/icons-material';
-import { TableChart as TableChartIcon } from '@mui/icons-material';
-import html2canvas from 'html2canvas';
-import jsPDF from 'jspdf';
-import find from 'lodash.find';
-import { withStyles } from 'tss-react/mui';
-import { createCSVDownload, downloadCSV } from '../utils';
-import MuiTooltip from '@mui/material/Tooltip';
+import React, { useState } from "react";
+import { Typography } from "@mui/material";
+import { Toolbar } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { Menu } from "@mui/material";
+import { MenuItem } from "@mui/material";
+import { ListItemIcon } from "@mui/material";
+import { ListItemText } from "@mui/material";
+import Popover from "./Popover";
+import TableFilter from "./TableFilter";
+import TableViewCol from "./TableViewCol";
+import TableSearch from "./TableSearch";
+import { Search as SearchIcon } from "@mui/icons-material";
+import DownloadIcon from "@mui/icons-material/CloudDownload";
+import { Print as PrintIcon } from "@mui/icons-material";
+import { ViewColumn as ViewColumnIcon } from "@mui/icons-material";
+import FilterIcon from "@mui/icons-material/FilterList";
+import { FileDownload as FileDownloadIcon } from "@mui/icons-material";
+import { PictureAsPdf as PictureAsPdfIcon } from "@mui/icons-material";
+import { TableChart as TableChartIcon } from "@mui/icons-material";
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
+import { find } from "lodash-es";
+import { withStyles } from "tss-react/mui";
+import { createCSVDownload, downloadCSV } from "../utils";
+import MuiTooltip from "@mui/material/Tooltip";
 
 export const defaultToolbarStyles = (theme) => ({
   root: {
-    '@media print': {
-      display: 'none',
+    "@media print": {
+      display: "none",
     },
   },
   fullWidthRoot: {},
   left: {
-    flex: '1 1 auto',
+    flex: "1 1 auto",
   },
   fullWidthLeft: {
-    flex: '1 1 auto',
+    flex: "1 1 auto",
   },
   actions: {
-    flex: '1 1 auto',
-    textAlign: 'right',
+    flex: "1 1 auto",
+    textAlign: "right",
   },
   fullWidthActions: {
-    flex: '1 1 auto',
-    textAlign: 'right',
+    flex: "1 1 auto",
+    textAlign: "right",
   },
   titleRoot: {},
   titleText: {},
   fullWidthTitleText: {
-    textAlign: 'left',
+    textAlign: "left",
   },
   icon: {
-    '&:hover': {
+    "&:hover": {
       color: theme.palette.primary.main,
     },
   },
@@ -60,69 +60,69 @@ export const defaultToolbarStyles = (theme) => ({
     color: theme.palette.primary.main,
   },
   filterPaper: {
-    maxWidth: '50%',
+    maxWidth: "50%",
   },
   filterCloseIcon: {
-    position: 'absolute',
+    position: "absolute",
     right: 0,
     top: 0,
     zIndex: 100,
   },
   searchIcon: {
-    display: 'inline-flex',
-    marginTop: '10px',
-    marginRight: '8px',
+    display: "inline-flex",
+    marginTop: "10px",
+    marginRight: "8px",
   },
   exportMenu: {
-    '& .MuiPaper-root': {
-      borderRadius: '8px',
-      boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
-      border: '1px solid #e5e7eb',
+    "& .MuiPaper-root": {
+      borderRadius: "8px",
+      boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+      border: "1px solid #e5e7eb",
     },
   },
   exportMenuItem: {
-    '&:hover': {
-      backgroundColor: '#f3f4f6',
+    "&:hover": {
+      backgroundColor: "#f3f4f6",
     },
   },
-  [theme.breakpoints.down('md')]: {
+  [theme.breakpoints.down("md")]: {
     titleRoot: {},
     titleText: {
-      fontSize: '16px',
+      fontSize: "16px",
     },
     spacer: {
-      display: 'none',
+      display: "none",
     },
     left: {
       // flex: "1 1 40%",
-      padding: '8px 0px',
+      padding: "8px 0px",
     },
     actions: {
       // flex: "1 1 60%",
-      textAlign: 'right',
+      textAlign: "right",
     },
   },
-  [theme.breakpoints.down('sm')]: {
+  [theme.breakpoints.down("sm")]: {
     root: {
-      display: 'block',
-      '@media print': {
-        display: 'none !important',
+      display: "block",
+      "@media print": {
+        display: "none !important",
       },
     },
     left: {
-      padding: '8px 0px 0px 0px',
+      padding: "8px 0px 0px 0px",
     },
     titleText: {
-      textAlign: 'center',
+      textAlign: "center",
     },
     actions: {
-      textAlign: 'center',
+      textAlign: "center",
     },
   },
-  '@media screen and (max-width: 480px)': {},
+  "@media screen and (max-width: 480px)": {},
 });
 
-const RESPONSIVE_FULL_WIDTH_NAME = 'scrollFullHeightFullWidth';
+const RESPONSIVE_FULL_WIDTH_NAME = "scrollFullHeightFullWidth";
 
 class TableToolbar extends React.Component {
   state = {
@@ -183,10 +183,10 @@ class TableToolbar extends React.Component {
               // that matches the dataIndex and column
               // TODO: Create a utility function for checking whether or not something is a react object
               let val =
-                typeof column === 'object' && column !== null && !Array.isArray(column)
+                typeof column === "object" && column !== null && !Array.isArray(column)
                   ? find(data, (d) => d.index === row.dataIndex).data[i]
                   : column;
-              val = typeof val === 'function' ? find(data, (d) => d.index === row.dataIndex).data[i] : val;
+              val = typeof val === "function" ? find(data, (d) => d.index === row.dataIndex).data[i] : val;
               return val;
             }),
           };
@@ -204,10 +204,10 @@ class TableToolbar extends React.Component {
 
       // now, check columns:
       if (options.downloadOptions.filterOptions.useDisplayedColumnsOnly) {
-        columnsToDownload = columnsToDownload.filter((_) => _.display === 'true');
+        columnsToDownload = columnsToDownload.filter((_) => _.display === "true");
 
         dataToDownload = dataToDownload.map((row) => {
-          row.data = row.data.filter((_, index) => columns[columnOrderCopy[index]].display === 'true');
+          row.data = row.data.filter((_, index) => columns[columnOrderCopy[index]].display === "true");
           return row;
         });
       }
@@ -241,37 +241,37 @@ class TableToolbar extends React.Component {
         scale: 2,
         useCORS: true,
         allowTaint: true,
-        backgroundColor: '#ffffff',
+        backgroundColor: "#ffffff",
       });
 
-      const imgData = canvas.toDataURL('image/png');
-      const pdf = new jsPDF('p', 'mm', 'a4');
+      const imgData = canvas.toDataURL("image/png");
+      const pdf = new jsPDF("p", "mm", "a4");
       const imgWidth = 210;
       const pageHeight = 295;
       const imgHeight = (canvas.height * imgWidth) / canvas.width;
       let heightLeft = imgHeight;
       let position = 0;
 
-      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+      pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
       heightLeft -= pageHeight;
 
       while (heightLeft >= 0) {
         position = heightLeft - imgHeight;
         pdf.addPage();
-        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+        pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
         heightLeft -= pageHeight;
       }
 
-      pdf.save('table-export.pdf');
+      pdf.save("table-export.pdf");
     } catch (error) {
-      console.error('Print error:', error);
+      console.error("Print error:", error);
     }
   };
 
   handleCustomExport = (type) => {
     this.handleExportMenuClose();
     const { onExport } = this.props.options || {};
-    if (onExport && typeof onExport === 'function') {
+    if (onExport && typeof onExport === "function") {
       onExport(type);
     }
   };
@@ -286,14 +286,14 @@ class TableToolbar extends React.Component {
       () => {
         const { iconActive, prevIconActive } = this.state;
 
-        if (iconActive === 'filter') {
-          this.props.setTableAction('onFilterDialogOpen');
+        if (iconActive === "filter") {
+          this.props.setTableAction("onFilterDialogOpen");
           if (this.props.options.onFilterDialogOpen) {
             this.props.options.onFilterDialogOpen();
           }
         }
-        if (iconActive === undefined && prevIconActive === 'filter') {
-          this.props.setTableAction('onFilterDialogClose');
+        if (iconActive === undefined && prevIconActive === "filter") {
+          this.props.setTableAction("onFilterDialogClose");
           if (this.props.options.onFilterDialogClose) {
             this.props.options.onFilterDialogClose();
           }
@@ -313,11 +313,11 @@ class TableToolbar extends React.Component {
         nextVal = true;
       } else {
         const { onSearchClose } = this.props.options;
-        this.props.setTableAction('onSearchClose');
+        this.props.setTableAction("onSearchClose");
         if (onSearchClose) onSearchClose();
         nextVal = false;
       }
-    } else if (iconName === 'search') {
+    } else if (iconName === "search") {
       nextVal = this.showSearch();
     }
     return nextVal;
@@ -325,7 +325,7 @@ class TableToolbar extends React.Component {
 
   getActiveIcon = (styles, iconName) => {
     let isActive = this.state.iconActive === iconName;
-    if (iconName === 'search') {
+    if (iconName === "search") {
       const { showSearch, searchText } = this.state;
       isActive = isActive || showSearch || searchText;
     }
@@ -333,7 +333,7 @@ class TableToolbar extends React.Component {
   };
 
   showSearch = () => {
-    this.props.setTableAction('onSearchOpen');
+    this.props.setTableAction("onSearchOpen");
     !!this.props.options.onSearchOpen && this.props.options.onSearchOpen();
     return true;
   };
@@ -341,7 +341,7 @@ class TableToolbar extends React.Component {
   hideSearch = () => {
     const { onSearchClose } = this.props.options;
 
-    this.props.setTableAction('onSearchClose');
+    this.props.setTableAction("onSearchClose");
     if (onSearchClose) onSearchClose();
     this.props.searchClose();
 
@@ -362,7 +362,7 @@ class TableToolbar extends React.Component {
     if (showSearch && !searchText) {
       this.hideSearch();
     } else {
-      this.setActiveIcon('search');
+      this.setActiveIcon("search");
     }
   };
 
@@ -375,11 +375,11 @@ class TableToolbar extends React.Component {
         scale: 2,
         useCORS: true,
         allowTaint: true,
-        backgroundColor: '#ffffff',
+        backgroundColor: "#ffffff",
       });
 
-      const imgData = canvas.toDataURL('image/png');
-      const pdf = new jsPDF('p', 'mm', 'a4');
+      const imgData = canvas.toDataURL("image/png");
+      const pdf = new jsPDF("p", "mm", "a4");
       const imgWidth = 210;
       const pageHeight = 295;
       const imgHeight = (canvas.height * imgWidth) / canvas.width;
@@ -387,19 +387,19 @@ class TableToolbar extends React.Component {
 
       let position = 0;
 
-      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+      pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
       heightLeft -= pageHeight;
 
       while (heightLeft >= 0) {
         position = heightLeft - imgHeight;
         pdf.addPage();
-        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+        pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
         heightLeft -= pageHeight;
       }
 
-      pdf.save('table-export.pdf');
+      pdf.save("table-export.pdf");
     } catch (error) {
-      console.error('Print error:', error);
+      console.error("Print error:", error);
     }
   };
 
@@ -444,8 +444,9 @@ class TableToolbar extends React.Component {
     return (
       <Toolbar
         className={options.responsive !== RESPONSIVE_FULL_WIDTH_NAME ? classes.root : classes.fullWidthRoot}
-        role={'toolbar'}
-        aria-label={'Table Toolbar'}>
+        role={"toolbar"}
+        aria-label={"Table Toolbar"}
+      >
         <div className={options.responsive !== RESPONSIVE_FULL_WIDTH_NAME ? classes.left : classes.fullWidthLeft}>
           {showSearch === true ? (
             options.customSearchRender ? (
@@ -458,43 +459,46 @@ class TableToolbar extends React.Component {
                 options={options}
               />
             )
-          ) : typeof title !== 'string' ? (
+          ) : typeof title !== "string" ? (
             title
           ) : (
-            <div className={classes.titleRoot} aria-hidden={'true'}>
+            <div className={classes.titleRoot} aria-hidden={"true"}>
               <Typography
                 variant="h6"
                 className={
                   options.responsive !== RESPONSIVE_FULL_WIDTH_NAME ? classes.titleText : classes.fullWidthTitleText
-                }>
+                }
+              >
                 {title}
               </Typography>
             </div>
           )}
         </div>
         <div className={options.responsive !== RESPONSIVE_FULL_WIDTH_NAME ? classes.actions : classes.fullWidthActions}>
-          {!(options.search === false || options.search === 'false' || options.searchAlwaysOpen === true) && (
+          {!(options.search === false || options.search === "false" || options.searchAlwaysOpen === true) && (
             <Tooltip title={search} disableFocusListener>
               <IconButton
                 aria-label={search}
-                data-testid={search + '-iconButton'}
+                data-testid={search + "-iconButton"}
                 ref={(el) => (this.searchButton = el)}
-                classes={{ root: this.getActiveIcon(classes, 'search') }}
-                disabled={options.search === 'disabled'}
-                onClick={this.handleSearchIconClick}>
+                classes={{ root: this.getActiveIcon(classes, "search") }}
+                disabled={options.search === "disabled"}
+                onClick={this.handleSearchIconClick}
+              >
                 <SearchIconComponent />
               </IconButton>
             </Tooltip>
           )}
-          {!(options.download === false || options.download === 'false') && (
+          {!(options.download === false || options.download === "false") && (
             <>
               <Tooltip title="Export Options" disableFocusListener>
                 <IconButton
                   data-testid="export-menu-iconButton"
                   aria-label="Export Options"
                   classes={{ root: classes.icon }}
-                  disabled={options.download === 'disabled'}
-                  onClick={this.handleExportMenuOpen}>
+                  disabled={options.download === "disabled"}
+                  onClick={this.handleExportMenuOpen}
+                >
                   <FileDownloadIcon />
                 </IconButton>
               </Tooltip>
@@ -504,13 +508,14 @@ class TableToolbar extends React.Component {
                 onClose={this.handleExportMenuClose}
                 classes={{ paper: classes.exportMenu }}
                 anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'right',
+                  vertical: "bottom",
+                  horizontal: "right",
                 }}
                 transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'right',
-                }}>
+                  vertical: "top",
+                  horizontal: "right",
+                }}
+              >
                 <MenuItem onClick={this.exportToCSV} className={classes.exportMenuItem}>
                   <ListItemIcon>
                     <TableChartIcon fontSize="small" />
@@ -530,7 +535,7 @@ class TableToolbar extends React.Component {
                   <ListItemText>Export to PDF</ListItemText>
                 </MenuItem>
                 {this.props.options?.onExport && (
-                  <MenuItem onClick={() => this.handleCustomExport('custom')} className={classes.exportMenuItem}>
+                  <MenuItem onClick={() => this.handleCustomExport("custom")} className={classes.exportMenuItem}>
                     <ListItemIcon>
                       <FileDownloadIcon fontSize="small" />
                     </ListItemIcon>
@@ -540,34 +545,36 @@ class TableToolbar extends React.Component {
               </Menu>
             </>
           )}
-          {!(options.print === false || options.print === 'false') && (
+          {!(options.print === false || options.print === "false") && (
             <Tooltip title={print}>
               <span>
                 <IconButton
-                  data-testid={print + '-iconButton'}
+                  data-testid={print + "-iconButton"}
                   aria-label={print}
-                  disabled={options.print === 'disabled'}
+                  disabled={options.print === "disabled"}
                   onClick={this.handlePrint}
-                  classes={{ root: classes.icon }}>
+                  classes={{ root: classes.icon }}
+                >
                   <PrintIconComponent />
                 </IconButton>
               </span>
             </Tooltip>
           )}
-          {!(options.viewColumns === false || options.viewColumns === 'false') && (
+          {!(options.viewColumns === false || options.viewColumns === "false") && (
             <Popover
               refExit={this.setActiveIcon.bind(null)}
               classes={{ closeIcon: classes.filterCloseIcon }}
-              hide={options.viewColumns === 'disabled'}
+              hide={options.viewColumns === "disabled"}
               trigger={
                 <Tooltip title={viewColumns} disableFocusListener>
                   <span>
                     <IconButton
-                      data-testid={viewColumns + '-iconButton'}
+                      data-testid={viewColumns + "-iconButton"}
                       aria-label={viewColumns}
-                      classes={{ root: this.getActiveIcon(classes, 'viewcolumns') }}
-                      disabled={options.viewColumns === 'disabled'}
-                      onClick={this.setActiveIcon.bind(null, 'viewcolumns')}>
+                      classes={{ root: this.getActiveIcon(classes, "viewcolumns") }}
+                      disabled={options.viewColumns === "disabled"}
+                      onClick={this.setActiveIcon.bind(null, "viewcolumns")}
+                    >
                       <ViewColumnIconComponent />
                     </IconButton>
                   </span>
@@ -585,20 +592,21 @@ class TableToolbar extends React.Component {
               }
             />
           )}
-          {!(options.filter === false || options.filter === 'false') && (
+          {!(options.filter === false || options.filter === "false") && (
             <Popover
               refExit={filterPopoverExit}
-              hide={this.state.hideFilterPopover || options.filter === 'disabled'}
+              hide={this.state.hideFilterPopover || options.filter === "disabled"}
               classes={{ paper: classes.filterPaper, closeIcon: classes.filterCloseIcon }}
               trigger={
                 <Tooltip title={filterTable} disableFocusListener>
                   <span>
                     <IconButton
-                      data-testid={filterTable + '-iconButton'}
+                      data-testid={filterTable + "-iconButton"}
                       aria-label={filterTable}
-                      classes={{ root: this.getActiveIcon(classes, 'filter') }}
-                      disabled={options.filter === 'disabled'}
-                      onClick={this.setActiveIcon.bind(null, 'filter')}>
+                      classes={{ root: this.getActiveIcon(classes, "filter") }}
+                      disabled={options.filter === "disabled"}
+                      onClick={this.setActiveIcon.bind(null, "filter")}
+                    >
                       <FilterIconComponent />
                     </IconButton>
                   </span>
@@ -627,4 +635,4 @@ class TableToolbar extends React.Component {
   }
 }
 
-export default withStyles(TableToolbar, defaultToolbarStyles, { name: 'MUIDataTableToolbar' });
+export default withStyles(TableToolbar, defaultToolbarStyles, { name: "MUIDataTableToolbar" });