mui-table-2026 1.0.0 → 1.0.2

package/src/components/TableBody.js

@@ -1,31 +1,31 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Typography } from '@mui/material';
-import { TableBody as MuiTableBody } from '@mui/material';
-import TableBodyCell from './TableBodyCell';
-import TableBodyRow from './TableBodyRow';
-import TableSelectCell from './TableSelectCell';
-import { withStyles } from 'tss-react/mui';
-import cloneDeep from 'lodash.clonedeep';
-import { getPageValue } from '../utils';
-import clsx from 'clsx';
+import React from "react";
+import PropTypes from "prop-types";
+import { Typography } from "@mui/material";
+import { TableBody as MuiTableBody } from "@mui/material";
+import TableBodyCell from "./TableBodyCell";
+import TableBodyRow from "./TableBodyRow";
+import TableSelectCell from "./TableSelectCell";
+import { withStyles } from "tss-react/mui";
+import { cloneDeep } from "lodash-es";
+import { getPageValue } from "../utils";
+import clsx from "clsx";
 
 const defaultBodyStyles = (theme) => ({
   root: {},
   emptyTitle: {
-    textAlign: 'center',
+    textAlign: "center",
   },
   lastStackedCell: {
-    [theme.breakpoints.down('md')]: {
-      '& td:last-child': {
-        borderBottom: 'none',
+    [theme.breakpoints.down("md")]: {
+      "& td:last-child": {
+        borderBottom: "none",
       },
     },
   },
   lastSimpleCell: {
-    [theme.breakpoints.down('sm')]: {
-      '& td:last-child': {
-        borderBottom: 'none',
+    [theme.breakpoints.down("sm")]: {
+      "& td:last-child": {
+        borderBottom: "none",
       },
     },
   },
@@ -76,7 +76,7 @@ class TableBody extends React.Component {
     const toIndex = Math.min(count, (highestPageInRange + 1) * rowsPerPage);
 
     if (page > highestPageInRange) {
-      console.warn('Current page is out of range, using the highest page that is in range instead.');
+      console.warn("Current page is out of range, using the highest page that is in range instead.");
     }
 
     for (let rowIndex = fromIndex; rowIndex < count && rowIndex < toIndex; rowIndex++) {
@@ -170,25 +170,25 @@ class TableBody extends React.Component {
         curIndex = data.index > curIndex ? curIndex + 1 : curIndex - 1;
       }
     }
-    this.props.selectRowUpdate('cell', data, shiftAdjacentRows);
+    this.props.selectRowUpdate("cell", data, shiftAdjacentRows);
   };
 
   handleRowClick = (row, data, event) => {
     // Don't trigger onRowClick if the event was actually the expandable icon.
     if (
-      event.target.id === 'expandable-button' ||
-      (event.target.nodeName === 'path' && event.target.parentNode.id === 'expandable-button')
+      event.target.id === "expandable-button" ||
+      (event.target.nodeName === "path" && event.target.parentNode.id === "expandable-button")
     ) {
       return;
     }
 
     // Don't trigger onRowClick if the event was actually a row selection via checkbox
-    if (event.target.id && event.target.id.startsWith('MUIDataTableSelectCell')) return;
+    if (event.target.id && event.target.id.startsWith("MUIDataTableSelectCell")) return;
 
     // Check if we should toggle row select when row is clicked anywhere
     if (
       this.props.options.selectableRowsOnClick &&
-      this.props.options.selectableRows !== 'none' &&
+      this.props.options.selectableRows !== "none" &&
       this.isRowSelectable(data.dataIndex, this.props.selectedRows)
     ) {
       const selectRow = { index: data.rowIndex, dataIndex: data.dataIndex };
@@ -232,7 +232,7 @@ class TableBody extends React.Component {
       tableId,
     } = this.props;
     const tableRows = this.buildRows();
-    const visibleColCnt = columns.filter((c) => c.display === 'true').length;
+    const visibleColCnt = columns.filter((c) => c.display === "true").length;
 
     return (
       <MuiTableBody>
@@ -244,7 +244,7 @@ class TableBody extends React.Component {
               return options.customRowRender(row, dataIndex, rowIndex);
             }
 
-            let isRowSelected = options.selectableRows !== 'none' ? this.isRowSelected(dataIndex) : false;
+            let isRowSelected = options.selectableRows !== "none" ? this.isRowSelected(dataIndex) : false;
             let isRowSelectable = this.isRowSelectable(dataIndex);
             let bodyClasses = options.setRowProps ? options.setRowProps(row, dataIndex, rowIndex) || {} : {};
 
@@ -260,14 +260,15 @@ class TableBody extends React.Component {
                   onClick={this.handleRowClick.bind(null, row, { rowIndex, dataIndex })}
                   className={clsx({
                     [classes.lastStackedCell]:
-                      options.responsive === 'vertical' ||
-                      options.responsive === 'stacked' ||
-                      options.responsive === 'stackedFullWidth',
-                    [classes.lastSimpleCell]: options.responsive === 'simple',
+                      options.responsive === "vertical" ||
+                      options.responsive === "stacked" ||
+                      options.responsive === "stackedFullWidth",
+                    [classes.lastSimpleCell]: options.responsive === "simple",
                     [bodyClasses.className]: bodyClasses.className,
                   })}
-                  data-testid={'MUIDataTableBodyRow-' + dataIndex}
-                  id={`MUIDataTableBodyRow-${tableId}-${dataIndex}`}>
+                  data-testid={"MUIDataTableBodyRow-" + dataIndex}
+                  id={`MUIDataTableBodyRow-${tableId}-${dataIndex}`}
+                >
                   <TableSelectCell
                     onChange={this.handleRowSelect.bind(null, {
                       index: this.getRowIndex(rowIndex),
@@ -294,7 +295,7 @@ class TableBody extends React.Component {
                   />
                   {processedRow.map(
                     (column) =>
-                      columns[column.index].display === 'true' && (
+                      columns[column.index].display === "true" && (
                         <TableBodyCell
                           {...(columns[column.index].setCellProps
                             ? columns[column.index].setCellProps(column.value, dataIndex, column.index) || {}
@@ -307,7 +308,8 @@ class TableBody extends React.Component {
                           print={columns[column.index].print}
                           options={options}
                           tableId={tableId}
-                          key={column.index}>
+                          key={column.index}
+                        >
                           {column.value}
                         </TableBodyCell>
                       ),
@@ -320,11 +322,12 @@ class TableBody extends React.Component {
         ) : (
           <TableBodyRow options={options}>
             <TableBodyCell
-              colSpan={options.selectableRows !== 'none' || options.expandableRows ? visibleColCnt + 1 : visibleColCnt}
+              colSpan={options.selectableRows !== "none" || options.expandableRows ? visibleColCnt + 1 : visibleColCnt}
               options={options}
               colIndex={0}
-              rowIndex={0}>
-              <Typography variant="body1" className={classes.emptyTitle} component={'div'}>
+              rowIndex={0}
+            >
+              <Typography variant="body1" className={classes.emptyTitle} component={"div"}>
                 {options.textLabels.body.noMatch}
               </Typography>
             </TableBodyCell>
@@ -335,4 +338,4 @@ class TableBody extends React.Component {
   }
 }
 
-export default withStyles(TableBody, defaultBodyStyles, { name: 'MUIDataTableBody' });
+export default withStyles(TableBody, defaultBodyStyles, { name: "MUIDataTableBody" });

package/src/components/TableFilter.js

@@ -1,84 +1,84 @@
-import { Button } from '@mui/material';
-import { Checkbox } from '@mui/material';
-import { FormControl } from '@mui/material';
-import { FormControlLabel } from '@mui/material';
-import { FormGroup } from '@mui/material';
-import { Grid } from '@mui/material';
-import { Input } from '@mui/material';
-import { InputLabel } from '@mui/material';
-import { ListItemText } from '@mui/material';
-import { MenuItem } from '@mui/material';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Select } from '@mui/material';
-import { TextField } from '@mui/material';
-import { Typography } from '@mui/material';
-import clsx from 'clsx';
-import { withStyles } from 'tss-react/mui';
-import cloneDeep from 'lodash.clonedeep';
-
-export const defaultFilterStyles = theme => ({
+import { Button } from "@mui/material";
+import { Checkbox } from "@mui/material";
+import { FormControl } from "@mui/material";
+import { FormControlLabel } from "@mui/material";
+import { FormGroup } from "@mui/material";
+import { Grid } from "@mui/material";
+import { Input } from "@mui/material";
+import { InputLabel } from "@mui/material";
+import { ListItemText } from "@mui/material";
+import { MenuItem } from "@mui/material";
+import PropTypes from "prop-types";
+import React from "react";
+import { Select } from "@mui/material";
+import { TextField } from "@mui/material";
+import { Typography } from "@mui/material";
+import clsx from "clsx";
+import { withStyles } from "tss-react/mui";
+import { cloneDeep } from "lodash-es";
+
+export const defaultFilterStyles = (theme) => ({
   root: {
     backgroundColor: theme.palette.background.default,
-    padding: '24px 24px 36px 24px',
-    fontFamily: 'Roboto',
+    padding: "24px 24px 36px 24px",
+    fontFamily: "Roboto",
   },
   header: {
-    flex: '0 0 auto',
-    marginBottom: '16px',
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'space-between',
+    flex: "0 0 auto",
+    marginBottom: "16px",
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
   },
   title: {
-    display: 'inline-block',
-    marginLeft: '7px',
+    display: "inline-block",
+    marginLeft: "7px",
     color: theme.palette.text.primary,
-    fontSize: '14px',
+    fontSize: "14px",
     fontWeight: 500,
   },
   noMargin: {
-    marginLeft: '0px',
+    marginLeft: "0px",
   },
   reset: {
-    alignSelf: 'left',
+    alignSelf: "left",
   },
   resetLink: {
-    marginLeft: '16px',
-    fontSize: '12px',
-    cursor: 'pointer',
+    marginLeft: "16px",
+    fontSize: "12px",
+    cursor: "pointer",
   },
   filtersSelected: {
-    alignSelf: 'right',
+    alignSelf: "right",
   },
   /* checkbox */
   checkboxListTitle: {
-    marginLeft: '7px',
-    marginBottom: '8px',
-    fontSize: '14px',
+    marginLeft: "7px",
+    marginBottom: "8px",
+    fontSize: "14px",
     color: theme.palette.text.secondary,
-    textAlign: 'left',
+    textAlign: "left",
     fontWeight: 500,
   },
   checkboxFormGroup: {
-    marginTop: '8px',
+    marginTop: "8px",
   },
   checkboxFormControl: {
-    margin: '0px',
+    margin: "0px",
   },
   checkboxFormControlLabel: {
-    fontSize: '15px',
-    marginLeft: '8px',
+    fontSize: "15px",
+    marginLeft: "8px",
     color: theme.palette.text.primary,
   },
   checkboxIcon: {
-    width: '32px',
-    height: '32px',
+    width: "32px",
+    height: "32px",
   },
   checkbox: {},
   checked: {},
   gridListTile: {
-    marginTop: '16px',
+    marginTop: "16px",
   },
 });
 
@@ -115,36 +115,36 @@ class TableFilter extends React.Component {
   };
 
   handleCheckboxChange = (index, value, column) => {
-    this.filterUpdate(index, value, column, 'checkbox');
+    this.filterUpdate(index, value, column, "checkbox");
 
     if (this.props.options.confirmFilters !== true) {
-      this.props.onFilterUpdate(index, value, column, 'checkbox');
+      this.props.onFilterUpdate(index, value, column, "checkbox");
     }
   };
 
   handleDropdownChange = (event, index, column) => {
     const labelFilterAll = this.props.options.textLabels.filter.all;
     const value = event.target.value === labelFilterAll ? [] : [event.target.value];
-    this.filterUpdate(index, value, column, 'dropdown');
+    this.filterUpdate(index, value, column, "dropdown");
 
     if (this.props.options.confirmFilters !== true) {
-      this.props.onFilterUpdate(index, value, column, 'dropdown');
+      this.props.onFilterUpdate(index, value, column, "dropdown");
     }
   };
 
   handleMultiselectChange = (index, value, column) => {
-    this.filterUpdate(index, value, column, 'multiselect');
+    this.filterUpdate(index, value, column, "multiselect");
 
     if (this.props.options.confirmFilters !== true) {
-      this.props.onFilterUpdate(index, value, column, 'multiselect');
+      this.props.onFilterUpdate(index, value, column, "multiselect");
     }
   };
 
   handleTextFieldChange = (event, index, column) => {
-    this.filterUpdate(index, event.target.value, column, 'textField');
+    this.filterUpdate(index, event.target.value, column, "textField");
 
     if (this.props.options.confirmFilters !== true) {
-      this.props.onFilterUpdate(index, event.target.value, column, 'textField');
+      this.props.onFilterUpdate(index, event.target.value, column, "textField");
     }
   };
 
@@ -162,7 +162,7 @@ class TableFilter extends React.Component {
     const { classes, filterData } = this.props;
     const { filterList } = this.state;
     const renderItem =
-      column.filterOptions && column.filterOptions.renderValue ? column.filterOptions.renderValue : v => v;
+      column.filterOptions && column.filterOptions.renderValue ? column.filterOptions.renderValue : (v) => v;
 
     return (
       <Grid item key={index} xs={6}>
@@ -192,7 +192,7 @@ class TableFilter extends React.Component {
                         root: classes.checkbox,
                         checked: classes.checked,
                       }}
-                      value={filterValue != null ? filterValue.toString() : ''}
+                      value={filterValue != null ? filterValue.toString() : ""}
                     />
                   }
                   label={renderItem(filterValue)}
@@ -212,7 +212,7 @@ class TableFilter extends React.Component {
     const renderItem =
       column.filterOptions && column.filterOptions.renderValue
         ? column.filterOptions.renderValue
-        : v => (v != null ? v.toString() : '');
+        : (v) => (v != null ? v.toString() : "");
     const width = (column.filterOptions && column.filterOptions.fullWidth) === true ? 12 : 6;
 
     return (
@@ -220,15 +220,17 @@ class TableFilter extends React.Component {
         item
         key={index}
         xs={width}
-        classes={{ 'grid-xs-12': classes.gridListTile, 'grid-xs-6': classes.gridListTile }}>
-        <FormControl key={index} variant={'standard'} fullWidth>
+        classes={{ "grid-xs-12": classes.gridListTile, "grid-xs-6": classes.gridListTile }}
+      >
+        <FormControl key={index} variant={"standard"} fullWidth>
           <InputLabel htmlFor={column.name}>{column.label}</InputLabel>
           <Select
             fullWidth
             value={filterList[index].length ? filterList[index].toString() : textLabels.all}
             name={column.name}
-            onChange={event => this.handleDropdownChange(event, index, column.name)}
-            input={<Input name={column.name} id={column.name} />}>
+            onChange={(event) => this.handleDropdownChange(event, index, column.name)}
+            input={<Input name={column.name} id={column.name} />}
+          >
             <MenuItem value={textLabels.all} key={0}>
               {textLabels.all}
             </MenuItem>
@@ -247,7 +249,7 @@ class TableFilter extends React.Component {
     const { classes } = this.props;
     const { filterList } = this.state;
     if (column.filterOptions && column.filterOptions.renderValue) {
-      console.warn('Custom renderValue not supported for textField filters');
+      console.warn("Custom renderValue not supported for textField filters");
     }
     const width = (column.filterOptions && column.filterOptions.fullWidth) === true ? 12 : 6;
 
@@ -256,15 +258,16 @@ class TableFilter extends React.Component {
         item
         key={index}
         xs={width}
-        classes={{ 'grid-xs-12': classes.gridListTile, 'grid-xs-6': classes.gridListTile }}>
+        classes={{ "grid-xs-12": classes.gridListTile, "grid-xs-6": classes.gridListTile }}
+      >
         <FormControl key={index} fullWidth>
           <TextField
             fullWidth
-            variant={'standard'}
+            variant={"standard"}
             label={column.label}
-            value={filterList[index].toString() || ''}
-            data-testid={'filtertextfield-' + column.name}
-            onChange={event => this.handleTextFieldChange(event, index, column.name)}
+            value={filterList[index].toString() || ""}
+            data-testid={"filtertextfield-" + column.name}
+            onChange={(event) => this.handleTextFieldChange(event, index, column.name)}
           />
         </FormControl>
       </Grid>
@@ -277,31 +280,33 @@ class TableFilter extends React.Component {
     const { classes, filterData } = this.props;
     const { filterList } = this.state;
     const renderItem =
-      column.filterOptions && column.filterOptions.renderValue ? column.filterOptions.renderValue : v => v;
+      column.filterOptions && column.filterOptions.renderValue ? column.filterOptions.renderValue : (v) => v;
     const width = (column.filterOptions && column.filterOptions.fullWidth) === true ? 12 : 6;
     return (
       <Grid
         item
         key={index}
         xs={width}
-        classes={{ 'grid-xs-12': classes.gridListTile, 'grid-xs-6': classes.gridListTile }}>
-        <FormControl key={index} variant={'standard'} fullWidth>
+        classes={{ "grid-xs-12": classes.gridListTile, "grid-xs-6": classes.gridListTile }}
+      >
+        <FormControl key={index} variant={"standard"} fullWidth>
           <InputLabel htmlFor={column.name}>{column.label}</InputLabel>
           <Select
             multiple
             fullWidth
             value={filterList[index] || []}
-            renderValue={selected => selected.map(renderItem).join(', ')}
+            renderValue={(selected) => selected.map(renderItem).join(", ")}
             name={column.name}
-            onChange={event => this.handleMultiselectChange(index, event.target.value, column.name)}
-            input={<Input name={column.name} id={column.name} />}>
+            onChange={(event) => this.handleMultiselectChange(index, event.target.value, column.name)}
+            input={<Input name={column.name} id={column.name} />}
+          >
             {filterData[index].map((filterValue, filterIndex) => (
               <MenuItem value={filterValue} key={filterIndex + 1}>
                 <CheckboxComponent
                   data-description="table-filter"
                   color="primary"
                   checked={filterList[index].indexOf(filterValue) >= 0}
-                  value={filterValue != null ? filterValue.toString() : ''}
+                  value={filterValue != null ? filterValue.toString() : ""}
                   className={classes.checkboxIcon}
                   classes={{
                     root: classes.checkbox,
@@ -338,7 +343,8 @@ class TableFilter extends React.Component {
         item
         key={index}
         xs={width}
-        classes={{ 'grid-xs-12': classes.gridListTile, 'grid-xs-6': classes.gridListTile }}>
+        classes={{ "grid-xs-12": classes.gridListTile, "grid-xs-6": classes.gridListTile }}
+      >
         <FormControl key={index} fullWidth>
           {display(filterList, this.handleCustomChange, index, column, filterData)}
         </FormControl>
@@ -348,7 +354,7 @@ class TableFilter extends React.Component {
 
   applyFilters = () => {
     this.state.filterList.forEach((filter, index) => {
-      this.props.onFilterUpdate(index, filter, this.props.columns[index], 'custom');
+      this.props.onFilterUpdate(index, filter, this.props.columns[index], "custom");
     });
 
     this.props.handleClose(); // close filter dialog popover
@@ -381,7 +387,8 @@ class TableFilter extends React.Component {
               variant="body2"
               className={clsx({
                 [classes.title]: true,
-              })}>
+              })}
+            >
               {textLabels.title}
             </Typography>
             <Button
@@ -389,8 +396,9 @@ class TableFilter extends React.Component {
               className={classes.resetLink}
               tabIndex={0}
               aria-label={textLabels.reset}
-              data-testid={'filterReset-button'}
-              onClick={this.resetFilters}>
+              data-testid={"filterReset-button"}
+              onClick={this.resetFilters}
+            >
               {textLabels.reset}
             </Button>
           </div>
@@ -400,22 +408,22 @@ class TableFilter extends React.Component {
           {columns.map((column, index) => {
             if (column.filter) {
               const filterType = column.filterType || options.filterType;
-              return filterType === 'checkbox'
+              return filterType === "checkbox"
                 ? this.renderCheckbox(column, index, components)
-                : filterType === 'multiselect'
-                ? this.renderMultiselect(column, index, components)
-                : filterType === 'textField'
-                ? this.renderTextField(column, index)
-                : filterType === 'custom'
-                ? this.renderCustomField(column, index)
-                : this.renderSelect(column, index);
+                : filterType === "multiselect"
+                  ? this.renderMultiselect(column, index, components)
+                  : filterType === "textField"
+                    ? this.renderTextField(column, index)
+                    : filterType === "custom"
+                      ? this.renderCustomField(column, index)
+                      : this.renderSelect(column, index);
             }
           })}
         </Grid>
-        {customFooter ? customFooter(filterList, this.applyFilters) : ''}
+        {customFooter ? customFooter(filterList, this.applyFilters) : ""}
       </div>
     );
   }
 }
 
-export default withStyles(TableFilter, defaultFilterStyles, { name: 'MUIDataTableFilter' });
+export default withStyles(TableFilter, defaultFilterStyles, { name: "MUIDataTableFilter" });