mui-table-2026 1.0.0

package/src/components/TableFilter.js

@@ -0,0 +1,421 @@
+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 => ({
+  root: {
+    backgroundColor: theme.palette.background.default,
+    padding: '24px 24px 36px 24px',
+    fontFamily: 'Roboto',
+  },
+  header: {
+    flex: '0 0 auto',
+    marginBottom: '16px',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  title: {
+    display: 'inline-block',
+    marginLeft: '7px',
+    color: theme.palette.text.primary,
+    fontSize: '14px',
+    fontWeight: 500,
+  },
+  noMargin: {
+    marginLeft: '0px',
+  },
+  reset: {
+    alignSelf: 'left',
+  },
+  resetLink: {
+    marginLeft: '16px',
+    fontSize: '12px',
+    cursor: 'pointer',
+  },
+  filtersSelected: {
+    alignSelf: 'right',
+  },
+  /* checkbox */
+  checkboxListTitle: {
+    marginLeft: '7px',
+    marginBottom: '8px',
+    fontSize: '14px',
+    color: theme.palette.text.secondary,
+    textAlign: 'left',
+    fontWeight: 500,
+  },
+  checkboxFormGroup: {
+    marginTop: '8px',
+  },
+  checkboxFormControl: {
+    margin: '0px',
+  },
+  checkboxFormControlLabel: {
+    fontSize: '15px',
+    marginLeft: '8px',
+    color: theme.palette.text.primary,
+  },
+  checkboxIcon: {
+    width: '32px',
+    height: '32px',
+  },
+  checkbox: {},
+  checked: {},
+  gridListTile: {
+    marginTop: '16px',
+  },
+});
+
+class TableFilter extends React.Component {
+  static propTypes = {
+    /** Data used to populate filter dropdown/checkbox */
+    filterData: PropTypes.array.isRequired,
+    /** Data selected to be filtered against dropdown/checkbox */
+    filterList: PropTypes.array.isRequired,
+    /** Options used to describe table */
+    options: PropTypes.object.isRequired,
+    /** Callback to trigger filter update */
+    onFilterUpdate: PropTypes.func,
+    /** Callback to trigger filter reset */
+    onFilterReset: PropTypes.func,
+    /** Extend the style applied to components */
+    classes: PropTypes.object,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      filterList: cloneDeep(props.filterList),
+    };
+  }
+
+  filterUpdate = (index, value, column, type, customUpdate) => {
+    let newFilterList = this.state.filterList.slice(0);
+
+    this.props.updateFilterByType(newFilterList, index, value, type, customUpdate);
+    this.setState({
+      filterList: newFilterList,
+    });
+  };
+
+  handleCheckboxChange = (index, value, column) => {
+    this.filterUpdate(index, value, column, 'checkbox');
+
+    if (this.props.options.confirmFilters !== true) {
+      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');
+
+    if (this.props.options.confirmFilters !== true) {
+      this.props.onFilterUpdate(index, value, column, 'dropdown');
+    }
+  };
+
+  handleMultiselectChange = (index, value, column) => {
+    this.filterUpdate(index, value, column, 'multiselect');
+
+    if (this.props.options.confirmFilters !== true) {
+      this.props.onFilterUpdate(index, value, column, 'multiselect');
+    }
+  };
+
+  handleTextFieldChange = (event, index, column) => {
+    this.filterUpdate(index, event.target.value, column, 'textField');
+
+    if (this.props.options.confirmFilters !== true) {
+      this.props.onFilterUpdate(index, event.target.value, column, 'textField');
+    }
+  };
+
+  handleCustomChange = (value, index, column) => {
+    this.filterUpdate(index, value, column.name, column.filterType);
+
+    if (this.props.options.confirmFilters !== true) {
+      this.props.onFilterUpdate(index, value, column.name, column.filterType);
+    }
+  };
+
+  renderCheckbox(column, index, components = {}) {
+    const CheckboxComponent = components.Checkbox || Checkbox;
+
+    const { classes, filterData } = this.props;
+    const { filterList } = this.state;
+    const renderItem =
+      column.filterOptions && column.filterOptions.renderValue ? column.filterOptions.renderValue : v => v;
+
+    return (
+      <Grid item key={index} xs={6}>
+        <FormGroup>
+          <Grid item xs={12}>
+            <Typography variant="body2" className={classes.checkboxListTitle}>
+              {column.label}
+            </Typography>
+          </Grid>
+          <Grid container>
+            {filterData[index].map((filterValue, filterIndex) => (
+              <Grid item key={filterIndex}>
+                <FormControlLabel
+                  key={filterIndex}
+                  classes={{
+                    root: classes.checkboxFormControl,
+                    label: classes.checkboxFormControlLabel,
+                  }}
+                  control={
+                    <CheckboxComponent
+                      data-description="table-filter"
+                      color="primary"
+                      className={classes.checkboxIcon}
+                      onChange={this.handleCheckboxChange.bind(null, index, filterValue, column.name)}
+                      checked={filterList[index].indexOf(filterValue) >= 0}
+                      classes={{
+                        root: classes.checkbox,
+                        checked: classes.checked,
+                      }}
+                      value={filterValue != null ? filterValue.toString() : ''}
+                    />
+                  }
+                  label={renderItem(filterValue)}
+                />
+              </Grid>
+            ))}
+          </Grid>
+        </FormGroup>
+      </Grid>
+    );
+  }
+
+  renderSelect(column, index) {
+    const { classes, filterData, options } = this.props;
+    const { filterList } = this.state;
+    const textLabels = options.textLabels.filter;
+    const renderItem =
+      column.filterOptions && column.filterOptions.renderValue
+        ? column.filterOptions.renderValue
+        : v => (v != null ? v.toString() : '');
+    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>
+          <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} />}>
+            <MenuItem value={textLabels.all} key={0}>
+              {textLabels.all}
+            </MenuItem>
+            {filterData[index].map((filterValue, filterIndex) => (
+              <MenuItem value={filterValue} key={filterIndex + 1}>
+                {renderItem(filterValue)}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </Grid>
+    );
+  }
+
+  renderTextField(column, index) {
+    const { classes } = this.props;
+    const { filterList } = this.state;
+    if (column.filterOptions && column.filterOptions.renderValue) {
+      console.warn('Custom renderValue not supported for textField filters');
+    }
+    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} fullWidth>
+          <TextField
+            fullWidth
+            variant={'standard'}
+            label={column.label}
+            value={filterList[index].toString() || ''}
+            data-testid={'filtertextfield-' + column.name}
+            onChange={event => this.handleTextFieldChange(event, index, column.name)}
+          />
+        </FormControl>
+      </Grid>
+    );
+  }
+
+  renderMultiselect(column, index, components = {}) {
+    const CheckboxComponent = components.Checkbox || Checkbox;
+
+    const { classes, filterData } = this.props;
+    const { filterList } = this.state;
+    const renderItem =
+      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>
+          <InputLabel htmlFor={column.name}>{column.label}</InputLabel>
+          <Select
+            multiple
+            fullWidth
+            value={filterList[index] || []}
+            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} />}>
+            {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() : ''}
+                  className={classes.checkboxIcon}
+                  classes={{
+                    root: classes.checkbox,
+                    checked: classes.checked,
+                  }}
+                />
+                <ListItemText primary={renderItem(filterValue)} />
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </Grid>
+    );
+  }
+
+  renderCustomField(column, index) {
+    const { classes, filterData, options } = this.props;
+    const { filterList } = this.state;
+    const width = (column.filterOptions && column.filterOptions.fullWidth) === true ? 12 : 6;
+    const display =
+      (column.filterOptions && column.filterOptions.display) ||
+      (options.filterOptions && options.filterOptions.display);
+
+    if (!display) {
+      console.error('Property "display" is required when using custom filter type.');
+      return;
+    }
+    if (column.filterListOptions && column.filterListOptions.renderValue) {
+      console.warning('"renderValue" is ignored for custom filter fields');
+    }
+
+    return (
+      <Grid
+        item
+        key={index}
+        xs={width}
+        classes={{ 'grid-xs-12': classes.gridListTile, 'grid-xs-6': classes.gridListTile }}>
+        <FormControl key={index} fullWidth>
+          {display(filterList, this.handleCustomChange, index, column, filterData)}
+        </FormControl>
+      </Grid>
+    );
+  }
+
+  applyFilters = () => {
+    this.state.filterList.forEach((filter, index) => {
+      this.props.onFilterUpdate(index, filter, this.props.columns[index], 'custom');
+    });
+
+    this.props.handleClose(); // close filter dialog popover
+
+    if (this.props.options.onFilterConfirm) {
+      this.props.options.onFilterConfirm(this.state.filterList);
+    }
+
+    return this.state.filterList;
+  };
+
+  resetFilters = () => {
+    this.setState({
+      filterList: this.props.columns.map(() => []),
+    });
+    if (this.props.options.confirmFilters !== true) {
+      this.props.onFilterReset();
+    }
+  };
+
+  render() {
+    const { classes, columns, options, customFooter, filterList, components = {} } = this.props;
+    const textLabels = options.textLabels.filter;
+
+    return (
+      <div className={classes.root}>
+        <div className={classes.header}>
+          <div className={classes.reset}>
+            <Typography
+              variant="body2"
+              className={clsx({
+                [classes.title]: true,
+              })}>
+              {textLabels.title}
+            </Typography>
+            <Button
+              color="primary"
+              className={classes.resetLink}
+              tabIndex={0}
+              aria-label={textLabels.reset}
+              data-testid={'filterReset-button'}
+              onClick={this.resetFilters}>
+              {textLabels.reset}
+            </Button>
+          </div>
+          <div className={classes.filtersSelected} />
+        </div>
+        <Grid container direction="row" justifyContent="flex-start" alignItems="center" spacing={4}>
+          {columns.map((column, index) => {
+            if (column.filter) {
+              const filterType = column.filterType || options.filterType;
+              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);
+            }
+          })}
+        </Grid>
+        {customFooter ? customFooter(filterList, this.applyFilters) : ''}
+      </div>
+    );
+  }
+}
+
+export default withStyles(TableFilter, defaultFilterStyles, { name: 'MUIDataTableFilter' });

package/src/components/TableFilterList.js

@@ -0,0 +1,136 @@
+import { makeStyles } from 'tss-react/mui';
+import PropTypes from 'prop-types';
+import React from 'react';
+import TableFilterListItem from './TableFilterListItem';
+
+const useStyles = makeStyles({ name: 'MUIDataTableFilterList' })(() => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'left',
+    flexWrap: 'wrap',
+    margin: '0px 16px 0px 16px',
+  },
+  chip: {
+    margin: '8px 8px 0px 0px',
+  },
+}));
+
+const TableFilterList = ({
+  options,
+  filterList,
+  filterUpdate,
+  filterListRenderers,
+  columnNames,
+  serverSideFilterList,
+  customFilterListUpdate,
+  ItemComponent = TableFilterListItem,
+}) => {
+  const { classes } = useStyles();
+  const { serverSide } = options;
+
+  const removeFilter = (index, filterValue, columnName, filterType, customFilterListUpdate = null) => {
+    let removedFilter = filterValue;
+    if (Array.isArray(removedFilter) && removedFilter.length === 0) {
+      removedFilter = filterList[index];
+    }
+
+    filterUpdate(index, filterValue, columnName, filterType, customFilterListUpdate, filterList => {
+      if (options.onFilterChipClose) {
+        options.onFilterChipClose(index, removedFilter, filterList);
+      }
+    });
+  };
+  const customFilterChip = (customFilterItem, index, customFilterItemIndex, item, isArray) => {
+    let type;
+    // If our custom filter list is an array, we need to check for custom update functions to determine
+    // default type. Otherwise we use the supplied type in options.
+    if (isArray) {
+      type = customFilterListUpdate[index] ? 'custom' : 'chip';
+    } else {
+      type = columnNames[index].filterType;
+    }
+
+    return (
+      <ItemComponent
+        label={customFilterItem}
+        key={customFilterItemIndex}
+        onDelete={() =>
+          removeFilter(
+            index,
+            item[customFilterItemIndex] || [],
+            columnNames[index].name,
+            type,
+            customFilterListUpdate[index],
+          )
+        }
+        className={classes.chip}
+        itemKey={customFilterItemIndex}
+        index={index}
+        data={item}
+        columnNames={columnNames}
+        filterProps={
+          options.setFilterChipProps
+            ? options.setFilterChipProps(index, columnNames[index].name, item[customFilterItemIndex] || [])
+            : {}
+        }
+      />
+    );
+  };
+
+  const filterChip = (index, data, colIndex) => (
+    <ItemComponent
+      label={filterListRenderers[index](data)}
+      key={colIndex}
+      onDelete={() => removeFilter(index, data, columnNames[index].name, 'chip')}
+      className={classes.chip}
+      itemKey={colIndex}
+      index={index}
+      data={data}
+      columnNames={columnNames}
+      filterProps={options.setFilterChipProps ? options.setFilterChipProps(index, columnNames[index].name, data) : {}}
+    />
+  );
+
+  const getFilterList = filterList => {
+    return filterList.map((item, index) => {
+      if (columnNames[index].filterType === 'custom' && filterList[index].length) {
+        const filterListRenderersValue = filterListRenderers[index](item);
+
+        if (Array.isArray(filterListRenderersValue)) {
+          return filterListRenderersValue.map((customFilterItem, customFilterItemIndex) =>
+            customFilterChip(customFilterItem, index, customFilterItemIndex, item, true),
+          );
+        } else {
+          return customFilterChip(filterListRenderersValue, index, index, item, false);
+        }
+      }
+
+      return item.map((data, colIndex) => filterChip(index, data, colIndex));
+    });
+  };
+
+  return (
+    <div className={classes.root}>
+      {serverSide && serverSideFilterList ? getFilterList(serverSideFilterList) : getFilterList(filterList)}
+    </div>
+  );
+};
+
+TableFilterList.propTypes = {
+  /** Data used to filter table against */
+  filterList: PropTypes.array.isRequired,
+  /** Filter List value renderers */
+  filterListRenderers: PropTypes.array.isRequired,
+  /** Columns used to describe table */
+  columnNames: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape({ name: PropTypes.string.isRequired, filterType: PropTypes.string }),
+    ]),
+  ).isRequired,
+  /** Callback to trigger filter update */
+  onFilterUpdate: PropTypes.func,
+  ItemComponent: PropTypes.any,
+};
+
+export default TableFilterList;

package/src/components/TableFilterListItem.js

@@ -0,0 +1,20 @@
+import { Chip } from '@mui/material';
+import PropTypes from 'prop-types';
+import React from 'react';
+import clsx from 'clsx';
+
+const TableFilterListItem = ({ label, onDelete, className, filterProps }) => {
+  filterProps = filterProps || {};
+  if (filterProps.className) {
+    className = clsx(className, filterProps.className);
+  }
+  return <Chip label={label} onDelete={onDelete} className={className} {...filterProps} />;
+};
+
+TableFilterListItem.propTypes = {
+  label: PropTypes.node,
+  onDelete: PropTypes.func.isRequired,
+  className: PropTypes.string.isRequired,
+};
+
+export default TableFilterListItem;

package/src/components/TableFooter.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import MuiTable from '@mui/material/Table';
+import TablePagination from './TablePagination';
+import { makeStyles } from 'tss-react/mui';
+import PropTypes from 'prop-types';
+
+const useStyles = makeStyles({ name: 'MUIDataTableFooter' })(() => ({
+  root: {
+    '@media print': {
+      display: 'none',
+    },
+  },
+}));
+
+const TableFooter = ({ options, rowCount, page, rowsPerPage, changeRowsPerPage, changePage }) => {
+  const { classes } = useStyles();
+  const { customFooter, pagination = true } = options;
+
+  if (customFooter) {
+    return (
+      <MuiTable className={classes.root}>
+        {options.customFooter(
+          rowCount,
+          page,
+          rowsPerPage,
+          changeRowsPerPage,
+          changePage,
+          options.textLabels.pagination,
+        )}
+      </MuiTable>
+    );
+  }
+
+  if (pagination) {
+    return (
+      <MuiTable className={classes.root}>
+        <TablePagination
+          count={rowCount}
+          page={page}
+          rowsPerPage={rowsPerPage}
+          changeRowsPerPage={changeRowsPerPage}
+          changePage={changePage}
+          component={'div'}
+          options={options}
+        />
+      </MuiTable>
+    );
+  }
+
+  return null;
+};
+
+TableFooter.propTypes = {
+  /** Total number of table rows */
+  rowCount: PropTypes.number.isRequired,
+  /** Options used to describe table */
+  options: PropTypes.shape({
+    customFooter: PropTypes.func,
+    pagination: PropTypes.bool,
+    textLabels: PropTypes.shape({
+      pagination: PropTypes.object,
+    }),
+  }),
+  /** Current page index */
+  page: PropTypes.number.isRequired,
+  /** Total number allowed of rows per page */
+  rowsPerPage: PropTypes.number.isRequired,
+  /** Callback to trigger rows per page change */
+  changeRowsPerPage: PropTypes.func.isRequired,
+  /** Callback to trigger page change */
+  changePage: PropTypes.func.isRequired,
+};
+
+export default TableFooter;