mui-table-2026 1.0.0

package/src/components/TableResize.js

@@ -0,0 +1,288 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'tss-react/mui';
+
+const defaultResizeStyles = {
+  root: {
+    position: 'absolute',
+  },
+  resizer: {
+    position: 'absolute',
+    width: '1px',
+    height: '100%',
+    left: '100px',
+    cursor: 'ew-resize',
+    border: '0.1px solid rgba(224, 224, 224, 1)',
+  },
+};
+
+function getParentOffsetLeft(tableEl) {
+  let ii = 0,
+    parentOffsetLeft = 0,
+    offsetParent = tableEl.offsetParent;
+  while (offsetParent) {
+    parentOffsetLeft = parentOffsetLeft + (offsetParent.offsetLeft || 0) - (offsetParent.scrollLeft || 0);
+    offsetParent = offsetParent.offsetParent;
+    ii++;
+    if (ii > 1000) break;
+  }
+  return parentOffsetLeft;
+}
+
+class TableResize extends React.Component {
+  static propTypes = {
+    /** Extend the style applied to components */
+    classes: PropTypes.object,
+  };
+
+  state = {
+    resizeCoords: {},
+    priorPosition: {},
+    tableWidth: '100%',
+    tableHeight: '100%',
+  };
+
+  handleResize = () => {
+    if (window.innerWidth !== this.windowWidth) {
+      this.windowWidth = window.innerWidth;
+      this.setDividers();
+    }
+  };
+
+  componentDidMount() {
+    this.minWidths = [];
+    this.windowWidth = null;
+    this.props.setResizeable(this.setCellRefs);
+    this.props.updateDividers(() => this.setState({ updateCoords: true }, () => this.updateWidths));
+    window.addEventListener('resize', this.handleResize, false);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize, false);
+  }
+
+  setCellRefs = (cellsRef, tableRef) => {
+    this.cellsRef = cellsRef;
+    this.tableRef = tableRef;
+    this.setDividers();
+  };
+
+  setDividers = () => {
+    const tableEl = this.tableRef;
+    const { width: tableWidth, height: tableHeight } = tableEl.getBoundingClientRect();
+    const { resizeCoords } = this.state;
+
+    for (let prop in resizeCoords) {
+      delete resizeCoords[prop];
+    }
+
+    let parentOffsetLeft = getParentOffsetLeft(tableEl);
+    let finalCells = Object.entries(this.cellsRef);
+    let cellMinusOne = finalCells.filter((_item, ix) => ix + 1 < finalCells.length);
+
+    cellMinusOne.forEach(([key, item], idx) => {
+      if (!item) return;
+      let elRect = item.getBoundingClientRect();
+      let left = elRect.left;
+      left = (left || 0) - parentOffsetLeft;
+      const elStyle = window.getComputedStyle(item, null);
+      resizeCoords[key] = { left: left + item.offsetWidth };
+    });
+    this.setState({ tableWidth, tableHeight, resizeCoords }, this.updateWidths);
+  };
+
+  updateWidths = () => {
+    let lastPosition = 0;
+    const { resizeCoords, tableWidth } = this.state;
+
+    Object.entries(resizeCoords).forEach(([key, item]) => {
+      let newWidth = Number(((item.left - lastPosition) / tableWidth) * 100);
+
+      /*
+        Using .toFixed(2) causes the columns to jitter when resized. On all browsers I (patrojk) have tested,
+        a width with a floating point decimal works fine. It's unclear to me why the numbers were being rouned.
+        However, I'm putting in an undocumented escape hatch to use toFixed in case the change introduces a bug.
+        The below code will be removed in a later release if no problems with non-rounded widths are reported.
+      */
+      if (typeof this.props.resizableColumns === 'object' && this.props.resizableColumns.roundWidthPercentages) {
+        newWidth = newWidth.toFixed(2);
+      }
+
+      lastPosition = item.left;
+
+      const thCell = this.cellsRef[key];
+      if (thCell) thCell.style.width = newWidth + '%';
+    });
+  };
+
+  onResizeStart = (id, e) => {
+    const tableEl = this.tableRef;
+    const originalWidth = tableEl.style.width;
+    let lastColumn = 0;
+    tableEl.style.width = '1px';
+
+    let finalCells = Object.entries(this.cellsRef);
+    finalCells.forEach(([key, item], idx) => {
+      let elRect = item ? item.getBoundingClientRect() : { width: 0, left: 0 };
+      this.minWidths[key] = elRect.width;
+      lastColumn = Math.max(key, lastColumn);
+    });
+    tableEl.style.width = originalWidth;
+
+    this.setState({ isResize: true, id, lastColumn });
+  };
+
+  onResizeMove = (id, e) => {
+    const { isResize, resizeCoords, lastColumn } = this.state;
+
+    const prevCol = id => {
+      let nextId = id - 1;
+      while (typeof resizeCoords[nextId] === 'undefined' && nextId >= 0) {
+        nextId--;
+      }
+      return nextId;
+    };
+    const nextCol = id => {
+      let nextId = id + 1;
+      let tries = 0;
+      while (typeof resizeCoords[nextId] === 'undefined' && tries < 20) {
+        nextId++;
+        tries++;
+      }
+      return nextId;
+    };
+
+    const fixedMinWidth1 = this.minWidths[id];
+    const fixedMinWidth2 = this.minWidths[nextCol(parseInt(id, 10))] || this.minWidths[id];
+    const idNumber = parseInt(id, 10);
+    const finalCells = Object.entries(this.cellsRef);
+    const tableEl = this.tableRef;
+    const { width: tableWidth, height: tableHeight } = tableEl.getBoundingClientRect();
+    const { selectableRows } = this.props.options;
+
+    let parentOffsetLeft = getParentOffsetLeft(tableEl);
+
+    const nextCoord = id => {
+      let nextId = id + 1;
+      let tries = 0;
+      while (typeof resizeCoords[nextId] === 'undefined' && tries < 20) {
+        nextId++;
+        tries++;
+      }
+      return resizeCoords[nextId];
+    };
+    const prevCoord = id => {
+      let nextId = id - 1;
+      while (typeof resizeCoords[nextId] === 'undefined' && nextId >= 0) {
+        nextId--;
+      }
+      return resizeCoords[nextId];
+    };
+
+    if (isResize) {
+      let leftPos = e.clientX - parentOffsetLeft;
+
+      const handleMoveRightmostBoundary = (leftPos, tableWidth, fixedMinWidth) => {
+        if (leftPos > tableWidth - fixedMinWidth) {
+          return tableWidth - fixedMinWidth;
+        }
+        return leftPos;
+      };
+
+      const handleMoveLeftmostBoundary = (leftPos, fixedMinWidth) => {
+        if (leftPos < fixedMinWidth) {
+          return fixedMinWidth;
+        }
+        return leftPos;
+      };
+
+      const handleMoveRight = (leftPos, resizeCoords, id, fixedMinWidth) => {
+        if (typeof nextCoord(id) === 'undefined') return leftPos;
+        if (leftPos > nextCoord(id).left - fixedMinWidth) {
+          return nextCoord(id).left - fixedMinWidth;
+        }
+        return leftPos;
+      };
+
+      const handleMoveLeft = (leftPos, resizeCoords, id, fixedMinWidth) => {
+        if (typeof prevCoord(id) === 'undefined') return leftPos;
+        if (leftPos < prevCoord(id).left + fixedMinWidth) {
+          return prevCoord(id).left + fixedMinWidth;
+        }
+        return leftPos;
+      };
+
+      const isFirstColumn = (selectableRows, id) => {
+        let firstColumn = 1;
+        while (!resizeCoords[firstColumn] && firstColumn < 20) {
+          firstColumn++;
+        }
+
+        return (selectableRows !== 'none' && id === 0) || (selectableRows === 'none' && id === firstColumn);
+      };
+
+      const isLastColumn = (id, finalCells) => {
+        return id === prevCol(lastColumn);
+      };
+
+      if (isFirstColumn(selectableRows, idNumber) && isLastColumn(idNumber, finalCells)) {
+        leftPos = handleMoveLeftmostBoundary(leftPos, fixedMinWidth1);
+        leftPos = handleMoveRightmostBoundary(leftPos, tableWidth, fixedMinWidth2);
+      } else if (!isFirstColumn(selectableRows, idNumber) && isLastColumn(idNumber, finalCells)) {
+        leftPos = handleMoveRightmostBoundary(leftPos, tableWidth, fixedMinWidth2);
+        leftPos = handleMoveLeft(leftPos, resizeCoords, idNumber, fixedMinWidth1);
+      } else if (isFirstColumn(selectableRows, idNumber) && !isLastColumn(idNumber, finalCells)) {
+        leftPos = handleMoveLeftmostBoundary(leftPos, fixedMinWidth1);
+        leftPos = handleMoveRight(leftPos, resizeCoords, idNumber, fixedMinWidth2);
+      } else if (!isFirstColumn(selectableRows, idNumber) && !isLastColumn(idNumber, finalCells)) {
+        leftPos = handleMoveLeft(leftPos, resizeCoords, idNumber, fixedMinWidth1);
+        leftPos = handleMoveRight(leftPos, resizeCoords, idNumber, fixedMinWidth2);
+      }
+
+      const curCoord = { ...resizeCoords[id], left: leftPos };
+      const newResizeCoords = { ...resizeCoords, [id]: curCoord };
+      this.setState({ resizeCoords: newResizeCoords, tableHeight }, this.updateWidths);
+    }
+  };
+
+  onResizeEnd = (id, e) => {
+    this.setState({ isResize: false, id: null });
+  };
+
+  render() {
+    const { classes, tableId } = this.props;
+    const { id, isResize, resizeCoords, tableWidth, tableHeight } = this.state;
+
+    return (
+      <div className={classes.root} style={{ width: tableWidth }}>
+        {Object.entries(resizeCoords).map(([key, val]) => {
+          return (
+            <div
+              data-divider-index={key}
+              data-tableid={tableId}
+              aria-hidden="true"
+              key={key}
+              onMouseMove={this.onResizeMove.bind(null, key)}
+              onMouseUp={this.onResizeEnd.bind(null, key)}
+              style={{
+                width: isResize && id == key ? tableWidth : 'auto',
+                position: 'absolute',
+                height: tableHeight - 2,
+                cursor: 'ew-resize',
+                zIndex: 1000,
+              }}>
+              <div
+                aria-hidden="true"
+                onMouseDown={this.onResizeStart.bind(null, key)}
+                className={classes.resizer}
+                style={{ left: val.left }}
+              />
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+export default withStyles(TableResize, defaultResizeStyles, { name: 'MUIDataTableResize' });

package/src/components/TableSearch.js

@@ -0,0 +1,89 @@
+import React from "react";
+import { Grow } from "@mui/material";
+import { TextField } from "@mui/material";
+import { Search as SearchIcon } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
+import { Clear as ClearIcon } from "@mui/icons-material";
+import { makeStyles } from "tss-react/mui";
+
+const useStyles = makeStyles({ name: "MUIDataTableSearch" })((theme) => ({
+  main: {
+    display: "flex",
+    flex: "1 0 auto",
+    alignItems: "center",
+    "@media print": {
+      display: "none",
+    },
+  },
+  searchIcon: {
+    color: theme.palette.text.secondary,
+    marginRight: "8px",
+  },
+  searchText: {
+    flex: "0.8 0",
+    "& .MuiInputBase-root": {
+      borderRadius: "8px",
+      backgroundColor: "#f8fafc",
+      border: "1px solid #e5e7eb",
+      transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+      "&:hover": {
+        borderColor: "#d1d5db",
+      },
+      "&.Mui-focused": {
+        borderColor: "#3b82f6",
+        boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.1)",
+      },
+    },
+  },
+  clearIcon: {
+    "&:hover": {
+      color: theme.palette.error.main,
+    },
+  },
+}));
+
+const TableSearch = ({ options, searchText, onSearch, onHide }) => {
+  const { classes } = useStyles();
+
+  const handleTextChange = (event) => {
+    onSearch(event.target.value);
+  };
+
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      onHide();
+    }
+  };
+
+  const clearIconVisibility = options.searchAlwaysOpen ? "hidden" : "visible";
+
+  return (
+    <Grow appear in={true} timeout={300}>
+      <div className={classes.main}>
+        <SearchIcon className={classes.searchIcon} />
+        <TextField
+          className={classes.searchText}
+          autoFocus={true}
+          variant={"standard"}
+          InputProps={{
+            "data-test-id": options.textLabels.toolbar.search,
+          }}
+          inputProps={{
+            "aria-label": options.textLabels.toolbar.search,
+          }}
+          value={searchText ?? ""}
+          onKeyDown={onKeyDown}
+          onChange={handleTextChange}
+          fullWidth={true}
+          placeholder={options.searchPlaceholder}
+          {...(options.searchProps ? options.searchProps : {})}
+        />
+        <IconButton className={classes.clearIcon} style={{ visibility: clearIconVisibility }} onClick={onHide}>
+          <ClearIcon />
+        </IconButton>
+      </div>
+    </Grow>
+  );
+};
+
+export default TableSearch;

package/src/components/TableSelectCell.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { Checkbox } from '@mui/material';
+import { TableCell } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import ExpandButton from './ExpandButton';
+
+const useStyles = makeStyles({ name: 'MUIDataTableSelectCell' })(theme => ({
+  root: {
+    '@media print': {
+      display: 'none',
+    },
+  },
+  fixedHeader: {
+    position: 'sticky',
+    top: '0px',
+    zIndex: 100,
+  },
+  fixedLeft: {
+    position: 'sticky',
+    left: '0px',
+    zIndex: 100,
+  },
+  icon: {
+    cursor: 'pointer',
+    transition: 'transform 0.25s',
+  },
+  expanded: {
+    transform: 'rotate(90deg)',
+  },
+  hide: {
+    visibility: 'hidden',
+  },
+  headerCell: {
+    zIndex: 110,
+    backgroundColor: theme.palette.background.paper,
+  },
+  expandDisabled: {},
+  checkboxRoot: {},
+  checked: {},
+  disabled: {},
+}));
+
+const TableSelectCell = ({
+  fixedHeader,
+  fixedSelectColumn,
+  isHeaderCell = false,
+  expandableOn = false,
+  selectableOn = 'none',
+  isRowExpanded = false,
+  onExpand,
+  isRowSelectable,
+  selectableRowsHeader,
+  hideExpandButton,
+  expandableRowsHeader,
+  expandedRows,
+  areAllRowsExpanded = () => false,
+  selectableRowsHideCheckboxes,
+  setHeadCellRef,
+  dataIndex,
+  components = {},
+  ...otherProps
+}) => {
+  const { classes } = useStyles();
+  const CheckboxComponent = components.Checkbox || Checkbox;
+  const ExpandButtonComponent = components.ExpandButton || ExpandButton;
+
+  if (expandableOn === false && (selectableOn === 'none' || selectableRowsHideCheckboxes === true)) {
+    return null;
+  }
+
+  const cellClass = clsx({
+    [classes.root]: true,
+    [classes.fixedHeader]: fixedHeader && isHeaderCell,
+    [classes.fixedLeft]: fixedSelectColumn,
+    [classes.headerCell]: isHeaderCell,
+  });
+
+  const buttonClass = clsx({
+    [classes.expandDisabled]: hideExpandButton,
+  });
+
+  const iconClass = clsx({
+    [classes.icon]: true,
+    [classes.hide]: isHeaderCell && !expandableRowsHeader,
+    [classes.expanded]: isRowExpanded || (isHeaderCell && areAllRowsExpanded()),
+  });
+  const iconIndeterminateClass = clsx({
+    [classes.icon]: true,
+    [classes.hide]: isHeaderCell && !expandableRowsHeader,
+  });
+
+  let refProp = {};
+  if (setHeadCellRef) {
+    refProp.ref = el => {
+      setHeadCellRef(0, 0, el);
+    };
+  }
+
+  const renderCheckBox = () => {
+    if (isHeaderCell && (selectableOn !== 'multiple' || selectableRowsHeader === false)) {
+      // only display the header checkbox for multiple selection.
+      return null;
+    }
+    return (
+      <CheckboxComponent
+        classes={{
+          root: classes.checkboxRoot,
+          checked: classes.checked,
+          disabled: classes.disabled,
+        }}
+        data-description={isHeaderCell ? 'row-select-header' : 'row-select'}
+        data-index={dataIndex || null}
+        color="primary"
+        disabled={!isRowSelectable}
+        {...otherProps}
+      />
+    );
+  };
+
+  return (
+    <TableCell className={cellClass} padding="checkbox" {...refProp}>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        {expandableOn && (
+          <ExpandButtonComponent
+            isHeaderCell={isHeaderCell}
+            areAllRowsExpanded={areAllRowsExpanded}
+            expandedRows={expandedRows}
+            onExpand={onExpand}
+            expandableRowsHeader={expandableRowsHeader}
+            buttonClass={buttonClass}
+            iconIndeterminateClass={iconIndeterminateClass}
+            iconClass={iconClass}
+            dataIndex={dataIndex}
+          />
+        )}
+        {selectableOn !== 'none' && selectableRowsHideCheckboxes !== true && renderCheckBox()}
+      </div>
+    </TableCell>
+  );
+};
+
+TableSelectCell.propTypes = {
+  /** Select cell checked on/off */
+  checked: PropTypes.bool.isRequired,
+  /** Select cell part of fixed header */
+  fixedHeader: PropTypes.bool,
+  /** Callback to trigger cell update */
+  onChange: PropTypes.func,
+  /** Extend the style applied to components */
+  classes: PropTypes.object,
+  /** Is expandable option enabled */
+  expandableOn: PropTypes.bool,
+  /** Adds extra class, `expandDisabled` when the row is not expandable. */
+  hideExpandButton: PropTypes.bool,
+  /** Is selectable option enabled */
+  selectableOn: PropTypes.string,
+  /** Select cell disabled on/off */
+  isRowSelectable: PropTypes.bool,
+};
+
+export default TableSelectCell;