mui-table-2026 1.0.0

package/src/components/TableToolbarSelect.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Paper } from '@mui/material';
+import { IconButton } from '@mui/material';
+import { Typography } from '@mui/material';
+import { Delete as DeleteIcon } from '@mui/icons-material';
+import { withStyles } from 'tss-react/mui';
+import MuiTooltip from '@mui/material/Tooltip';
+
+const defaultToolbarSelectStyles = theme => ({
+  root: {
+    backgroundColor: theme.palette.background.default,
+    flex: '1 1 100%',
+    display: 'flex',
+    position: 'relative',
+    zIndex: 120,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingTop: typeof theme.spacing === 'function' ? theme.spacing(1) : theme.spacing.unit,
+    paddingBottom: typeof theme.spacing === 'function' ? theme.spacing(1) : theme.spacing.unit,
+    '@media print': {
+      display: 'none',
+    },
+  },
+  title: {
+    paddingLeft: '26px',
+  },
+  iconButton: {
+    marginRight: '24px',
+  },
+  deleteIcon: {},
+});
+
+class TableToolbarSelect extends React.Component {
+  static propTypes = {
+    /** Options used to describe table */
+    options: PropTypes.object.isRequired,
+    /** Current row selected or not */
+    rowSelected: PropTypes.bool,
+    /** Callback to trigger selected rows delete */
+    onRowsDelete: PropTypes.func,
+    /** Extend the style applied to components */
+    classes: PropTypes.object,
+  };
+
+  /**
+   * @param {number[]} selectedRows Array of rows indexes that are selected, e.g. [0, 2] will select first and third rows in table
+   */
+  handleCustomSelectedRows = selectedRows => {
+    if (!Array.isArray(selectedRows)) {
+      throw new TypeError(`"selectedRows" must be an "array", but it's "${typeof selectedRows}"`);
+    }
+
+    if (selectedRows.some(row => typeof row !== 'number')) {
+      throw new TypeError(`Array "selectedRows" must contain only numbers`);
+    }
+
+    const { options } = this.props;
+    if (selectedRows.length > 1 && options.selectableRows === 'single') {
+      throw new Error('Can not select more than one row when "selectableRows" is "single"');
+    }
+    this.props.selectRowUpdate('custom', selectedRows);
+  };
+
+  render() {
+    const { classes, onRowsDelete, selectedRows, options, displayData, components = {} } = this.props;
+    const textLabels = options.textLabels.selectedRows;
+    const Tooltip = components.Tooltip || MuiTooltip;
+
+    return (
+      <Paper className={classes.root}>
+        <div>
+          <Typography variant="subtitle1" className={classes.title}>
+            {selectedRows.data.length} {textLabels.text}
+          </Typography>
+        </div>
+        {options.customToolbarSelect ? (
+          options.customToolbarSelect(selectedRows, displayData, this.handleCustomSelectedRows)
+        ) : (
+          <Tooltip title={textLabels.delete}>
+            <IconButton className={classes.iconButton} onClick={onRowsDelete} aria-label={textLabels.deleteAria}>
+              <DeleteIcon className={classes.deleteIcon} />
+            </IconButton>
+          </Tooltip>
+        )}
+      </Paper>
+    );
+  }
+}
+
+export default withStyles(TableToolbarSelect, defaultToolbarSelectStyles, { name: 'MUIDataTableToolbarSelect' });

package/src/components/TableViewCol.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox } from '@mui/material';
+import { Typography } from '@mui/material';
+import { FormControl } from '@mui/material';
+import { FormGroup } from '@mui/material';
+import { FormControlLabel } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles({ name: 'MUIDataTableViewCol' })(theme => ({
+  root: {
+    padding: '16px 24px 16px 24px',
+    fontFamily: 'Roboto',
+  },
+  title: {
+    marginLeft: '-7px',
+    marginRight: '24px',
+    fontSize: '14px',
+    color: theme.palette.text.secondary,
+    textAlign: 'left',
+    fontWeight: 500,
+  },
+  formGroup: {
+    marginTop: '8px',
+  },
+  formControl: {},
+  checkbox: {
+    padding: '0px',
+    width: '32px',
+    height: '32px',
+  },
+  checkboxRoot: {},
+  checked: {},
+  label: {
+    fontSize: '15px',
+    marginLeft: '8px',
+    color: theme.palette.text.primary,
+  },
+}));
+
+const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updateColumns }) => {
+  const { classes } = useStyles();
+  const textLabels = options.textLabels.viewColumns;
+  const CheckboxComponent = components.Checkbox || Checkbox;
+
+  const handleColChange = index => {
+    onColumnUpdate(index);
+  };
+
+  return (
+    <FormControl component={'fieldset'} className={classes.root} aria-label={textLabels.titleAria}>
+      <Typography variant="caption" className={classes.title}>
+        {textLabels.title}
+      </Typography>
+      <FormGroup className={classes.formGroup}>
+        {columns.map((column, index) => {
+          return (
+            column.display !== 'excluded' &&
+            column.viewColumns !== false && (
+              <FormControlLabel
+                key={index}
+                classes={{
+                  root: classes.formControl,
+                  label: classes.label,
+                }}
+                control={
+                  <CheckboxComponent
+                    color="primary"
+                    data-description="table-view-col"
+                    className={classes.checkbox}
+                    classes={{
+                      root: classes.checkboxRoot,
+                      checked: classes.checked,
+                    }}
+                    onChange={() => handleColChange(index)}
+                    checked={column.display === 'true'}
+                    value={column.name}
+                  />
+                }
+                label={column.label}
+              />
+            )
+          );
+        })}
+      </FormGroup>
+    </FormControl>
+  );
+};
+
+TableViewCol.propTypes = {
+  /** Columns used to describe table */
+  columns: PropTypes.array.isRequired,
+  /** Options used to describe table */
+  options: PropTypes.object.isRequired,
+  /** Callback to trigger View column update */
+  onColumnUpdate: PropTypes.func,
+  /** Extend the style applied to components */
+  classes: PropTypes.object,
+};
+
+export default TableViewCol;

package/src/hooks/useColumnDrop.js

@@ -0,0 +1,186 @@
+/*
+  This hook handles the dragging and dropping effects that occur for columns.
+*/
+
+import { useDrop } from 'react-dnd';
+
+const getColModel = (headCellRefs, columnOrder, columns) => {
+  let colModel = [];
+  let leftMostCell = headCellRefs[0] ? headCellRefs[0] : null; // left most cell is the select cell, if it exists
+
+  if (leftMostCell === null) {
+    leftMostCell = { offsetLeft: Infinity };
+    let headCells = Object.entries(headCellRefs);
+    headCells.forEach(([key, item], idx) => {
+      if (item && item.offsetLeft < leftMostCell.offsetLeft) {
+        leftMostCell = item;
+      }
+    });
+
+    if (leftMostCell.offsetLeft === Infinity) {
+      leftMostCell = { offsetParent: 0, offsetWidth: 0, offsetLeft: 0 };
+    }
+  }
+
+  let ii = 0,
+    parentOffsetLeft = 0,
+    offsetParent = leftMostCell.offsetParent;
+  while (offsetParent) {
+    parentOffsetLeft = parentOffsetLeft + (offsetParent.offsetLeft || 0) - (offsetParent.scrollLeft || 0);
+    offsetParent = offsetParent.offsetParent;
+    ii++;
+    if (ii > 1000) break;
+  }
+
+  // if the select cell is present, make sure it is apart of the column model
+  if (headCellRefs[0]) {
+    colModel[0] = {
+      left: parentOffsetLeft + leftMostCell.offsetLeft,
+      width: leftMostCell.offsetWidth,
+      columnIndex: null,
+      ref: leftMostCell,
+    };
+  }
+
+  columnOrder.forEach((colIdx, idx) => {
+    let col = headCellRefs[colIdx + 1];
+    let cmIndx = colModel.length - 1;
+    if (!(columns[colIdx] && columns[colIdx].display !== 'true')) {
+      let prevLeft =
+        cmIndx !== -1 ? colModel[cmIndx].left + colModel[cmIndx].width : parentOffsetLeft + leftMostCell.offsetLeft;
+      colModel.push({
+        left: prevLeft,
+        width: col.offsetWidth,
+        columnIndex: colIdx,
+        ref: col,
+      });
+    }
+  });
+
+  return colModel;
+};
+
+const reorderColumns = (prevColumnOrder, columnIndex, newPosition) => {
+  let columnOrder = prevColumnOrder.slice();
+  let srcIndex = columnOrder.indexOf(columnIndex);
+  let targetIndex = columnOrder.indexOf(newPosition);
+
+  if (srcIndex !== -1 && targetIndex !== -1) {
+    let newItem = columnOrder[srcIndex];
+    columnOrder = [...columnOrder.slice(0, srcIndex), ...columnOrder.slice(srcIndex + 1)];
+    columnOrder = [...columnOrder.slice(0, targetIndex), newItem, ...columnOrder.slice(targetIndex)];
+  }
+  return columnOrder;
+};
+
+const handleHover = (opts) => {
+  const {
+    item,
+    mon,
+    index,
+    headCellRefs,
+    updateColumnOrder,
+    columnOrder,
+    transitionTime = 300,
+    tableRef,
+    tableId,
+    timers,
+    columns,
+  } = opts;
+
+  let hoverIdx = mon.getItem().colIndex;
+
+  if (headCellRefs !== mon.getItem().headCellRefs) return;
+
+  if (hoverIdx !== index) {
+    let reorderedCols = reorderColumns(columnOrder, mon.getItem().colIndex, index);
+    let newColModel = getColModel(headCellRefs, reorderedCols, columns);
+
+    let newX = mon.getClientOffset().x;
+    let modelIdx = -1;
+    for (let ii = 0; ii < newColModel.length; ii++) {
+      if (newX > newColModel[ii].left && newX < newColModel[ii].left + newColModel[ii].width) {
+        modelIdx = newColModel[ii].columnIndex;
+        break;
+      }
+    }
+
+    if (modelIdx === mon.getItem().colIndex) {
+      clearTimeout(timers.columnShift);
+
+      let curColModel = getColModel(headCellRefs, columnOrder, columns);
+
+      let transitions = [];
+      newColModel.forEach((item) => {
+        transitions[item.columnIndex] = item.left;
+      });
+      curColModel.forEach((item) => {
+        transitions[item.columnIndex] = transitions[item.columnIndex] - item.left;
+      });
+
+      for (let idx = 1; idx < columnOrder.length; idx++) {
+        let colIndex = columnOrder[idx];
+        if (columns[colIndex] && columns[colIndex].display !== 'true') {
+          // skip
+        } else {
+          if (headCellRefs[idx]) headCellRefs[idx].style.transition = '280ms';
+          if (headCellRefs[idx]) headCellRefs[idx].style.transform = 'translateX(' + transitions[idx - 1] + 'px)';
+        }
+      }
+
+      let allElms = [];
+      let dividers = [];
+      for (let ii = 0; ii < columnOrder.length; ii++) {
+        let elms = tableRef
+          ? tableRef.querySelectorAll('[data-colindex="' + ii + '"][data-tableid="' + tableId + '"]')
+          : [];
+        for (let jj = 0; jj < elms.length; jj++) {
+          elms[jj].style.transition = transitionTime + 'ms';
+          elms[jj].style.transform = 'translateX(' + transitions[ii] + 'px)';
+          allElms.push(elms[jj]);
+        }
+
+        let divider = tableRef
+          ? tableRef.querySelectorAll('[data-divider-index="' + (ii + 1) + '"][data-tableid="' + tableId + '"]')
+          : [];
+        for (let jj = 0; jj < divider.length; jj++) {
+          divider[jj].style.transition = transitionTime + 'ms';
+          divider[jj].style.transform = 'translateX(' + transitions[columnOrder[ii]] + 'px)';
+          dividers.push(divider[jj]);
+        }
+      }
+
+      let newColIndex = mon.getItem().colIndex;
+      timers.columnShift = setTimeout(() => {
+        allElms.forEach((item) => {
+          item.style.transition = '0s';
+          item.style.transform = 'translateX(0)';
+        });
+        dividers.forEach((item) => {
+          item.style.transition = '0s';
+          item.style.transform = 'translateX(0)';
+        });
+        updateColumnOrder(reorderedCols, newColIndex, index);
+      }, transitionTime);
+    }
+  }
+};
+
+const useColumnDrop = (opts) => {
+  const [{ isOver, canDrop }, drop] = useDrop({
+    accept: 'HEADER',
+    drop: (item, mon) => {
+      // Handle drop logic here if needed
+    },
+    hover: (item, mon) => handleHover(Object.assign({}, opts, { item, mon })),
+    collect: (mon) => ({
+      isOver: !!mon.isOver(),
+      canDrop: !!mon.canDrop(),
+    }),
+  });
+
+  return [drop];
+};
+
+export { getColModel, reorderColumns, handleHover };
+export default useColumnDrop;

package/src/index.js

@@ -0,0 +1,44 @@
+import MUIDataTable from './MUIDataTable';
+import Popover from './components/Popover';
+import TableBodyCell from './components/TableBodyCell';
+import TableBody from './components/TableBody';
+import TableBodyRow from './components/TableBodyRow';
+import TableFilter from './components/TableFilter';
+import TableFilterList from './components/TableFilterList';
+import TableFooter from './components/TableFooter';
+import TableHeadCell from './components/TableHeadCell';
+import TableHead from './components/TableHead';
+import TableHeadRow from './components/TableHeadRow';
+import TablePagination from './components/TablePagination';
+import TableResize from './components/TableResize';
+import TableSearch from './components/TableSearch';
+import TableSelectCell from './components/TableSelectCell';
+import TableToolbar from './components/TableToolbar';
+import TableToolbarSelect from './components/TableToolbarSelect';
+import TableViewCol from './components/TableViewCol';
+import ExpandButton from './components/ExpandButton';
+import { debounceSearchRender, DebounceTableSearch } from './plug-ins/DebounceSearchRender';
+
+export default MUIDataTable;
+export {
+  Popover,
+  TableBodyCell,
+  TableBody,
+  TableBodyRow,
+  TableFilter,
+  TableFilterList,
+  TableFooter,
+  TableHeadCell,
+  TableHead,
+  TableHeadRow,
+  TablePagination,
+  TableResize,
+  TableSearch,
+  TableSelectCell,
+  TableToolbar,
+  TableToolbarSelect,
+  TableViewCol,
+  ExpandButton,
+  debounceSearchRender,
+  DebounceTableSearch,
+};

package/src/localStorage/index.js

@@ -0,0 +1,2 @@
+export { load } from './load';
+export { save } from './save';

package/src/localStorage/load.js

@@ -0,0 +1,10 @@
+const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
+
+export const load = storageKey => {
+  if (isBrowser) {
+    return JSON.parse(window.localStorage.getItem(storageKey));
+  } else if (storageKey !== undefined) {
+    console.warn('storageKey support only on browser');
+    return undefined;
+  }
+};

package/src/localStorage/save.js

@@ -0,0 +1,5 @@
+export const save = (storageKey, state) => {
+  const { selectedRows, data, displayData, ...savedState } = state;
+
+  window.localStorage.setItem(storageKey, JSON.stringify(savedState));
+};

package/src/plug-ins/DebounceSearchRender.js

@@ -0,0 +1,118 @@
+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 { withStyles } from 'tss-react/mui';
+
+function debounce(func, wait, immediate) {
+  var timeout;
+  return function () {
+    var context = this,
+      args = arguments;
+    var later = function () {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}
+
+const defaultStyles = (theme) => ({
+  main: {
+    display: 'flex',
+    flex: '1 0 auto',
+    alignItems: 'center',
+  },
+  searchIcon: {
+    color: theme.palette.text.secondary,
+    marginRight: '8px',
+  },
+  searchText: {
+    flex: '0.8 0',
+  },
+  clearIcon: {
+    '&:hover': {
+      color: theme.palette.error.main,
+    },
+  },
+});
+
+class _DebounceTableSearch extends React.Component {
+  handleTextChangeWrapper = (debouncedSearch) => {
+    return function (event) {
+      debouncedSearch(event.target.value);
+    };
+  };
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.onKeyDown, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeyDown, false);
+  }
+
+  onKeyDown = (event) => {
+    if (event.keyCode === 27) {
+      this.props.onHide();
+    }
+  };
+
+  render() {
+    const { classes, options, onHide, searchText, debounceWait } = this.props;
+
+    const debouncedSearch = debounce((value) => {
+      this.props.onSearch(value);
+    }, debounceWait);
+
+    const clearIconVisibility = options.searchAlwaysOpen ? 'hidden' : 'visible';
+
+    return (
+      <Grow appear in={true} timeout={300}>
+        <div className={classes.main}>
+          <SearchIcon className={classes.searchIcon} />
+          <TextField
+            variant={'standard'}
+            className={classes.searchText}
+            autoFocus={true}
+            InputProps={{
+              'data-test-id': options.textLabels.toolbar.search,
+              'aria-label': options.textLabels.toolbar.search,
+            }}
+            defaultValue={searchText ?? ''}
+            onChange={this.handleTextChangeWrapper(debouncedSearch)}
+            fullWidth={true}
+            inputRef={(el) => (this.searchField = el)}
+            placeholder={options.searchPlaceholder}
+            {...(options.searchProps ? options.searchProps : {})}
+          />
+          <IconButton className={classes.clearIcon} style={{ visibility: clearIconVisibility }} onClick={onHide}>
+            <ClearIcon />
+          </IconButton>
+        </div>
+      </Grow>
+    );
+  }
+}
+
+var DebounceTableSearch = withStyles(_DebounceTableSearch, defaultStyles, { name: 'MUIDataTableSearch' });
+export { DebounceTableSearch };
+
+export function debounceSearchRender(debounceWait = 200) {
+  return (searchText, handleSearch, hideSearch, options) => {
+    return (
+      <DebounceTableSearch
+        searchText={searchText}
+        onSearch={handleSearch}
+        onHide={hideSearch}
+        options={options}
+        debounceWait={debounceWait}
+      />
+    );
+  };
+}

package/src/textLabels.js

@@ -0,0 +1,39 @@
+/*
+ * Default text labels.
+ */
+const getTextLabels = () => ({
+  body: {
+    noMatch: 'Sorry, no matching records found',
+    toolTip: 'Sort',
+  },
+  pagination: {
+    next: 'Next Page',
+    previous: 'Previous Page',
+    rowsPerPage: 'Rows per page:',
+    displayRows: 'of',
+    jumpToPage: 'Jump to Page:',
+  },
+  toolbar: {
+    search: 'Search',
+    downloadCsv: 'Download CSV',
+    print: 'Print',
+    viewColumns: 'View Columns',
+    filterTable: 'Filter Table',
+  },
+  filter: {
+    all: 'All',
+    title: 'FILTERS',
+    reset: 'RESET',
+  },
+  viewColumns: {
+    title: 'Show Columns',
+    titleAria: 'Show/Hide Table Columns',
+  },
+  selectedRows: {
+    text: 'row(s) selected',
+    delete: 'Delete',
+    deleteAria: 'Delete Selected Rows',
+  },
+});
+
+export default getTextLabels;