mui-table-2026 1.0.0

package/src/components/TableHead.js

@@ -0,0 +1,171 @@
+import { makeStyles } from 'tss-react/mui';
+import clsx from 'clsx';
+import MuiTableHead from '@mui/material/TableHead';
+import React, { useState } from 'react';
+import TableHeadCell from './TableHeadCell';
+import TableHeadRow from './TableHeadRow';
+import TableSelectCell from './TableSelectCell';
+
+const useStyles = makeStyles({ name: 'MUIDataTableHead' })((theme) => ({
+  main: {},
+  responsiveStacked: {
+    [theme.breakpoints.down('md')]: {
+      display: 'none',
+    },
+  },
+  responsiveStackedAlways: {
+    display: 'none',
+  },
+  responsiveSimple: {
+    [theme.breakpoints.down('sm')]: {
+      display: 'none',
+    },
+  },
+}));
+
+const TableHead = ({
+  columnOrder = null,
+  columns,
+  components = {},
+  count,
+  data,
+  draggableHeadCellRefs,
+  expandedRows,
+  options,
+  selectedRows,
+  selectRowUpdate,
+  setCellRef,
+  sortOrder = {},
+  tableRef,
+  tableId,
+  timers,
+  toggleAllExpandableRows,
+  toggleSort,
+  updateColumnOrder,
+}) => {
+  const { classes } = useStyles();
+
+  if (columnOrder === null) {
+    columnOrder = columns ? columns.map((item, idx) => idx) : [];
+  }
+
+  const [dragging, setDragging] = useState(false);
+
+  const handleToggleColumn = (index) => {
+    toggleSort(index);
+  };
+
+  const handleRowSelect = () => {
+    selectRowUpdate('head', null);
+  };
+
+  const numSelected = (selectedRows && selectedRows.data.length) || 0;
+  let isIndeterminate = numSelected > 0 && numSelected < count;
+  let isChecked = numSelected > 0 && numSelected >= count;
+
+  // When the disableToolbarSelect option is true, there can be
+  // selected items that aren't visible, so we need to be more
+  // precise when determining if the head checkbox should be checked.
+  if (
+    options.disableToolbarSelect === true ||
+    options.selectToolbarPlacement === 'none' ||
+    options.selectToolbarPlacement === 'above'
+  ) {
+    if (isChecked) {
+      for (let ii = 0; ii < data.length; ii++) {
+        if (!selectedRows.lookup[data[ii].dataIndex]) {
+          isChecked = false;
+          isIndeterminate = true;
+          break;
+        }
+      }
+    } else {
+      if (numSelected > count) {
+        isIndeterminate = true;
+      }
+    }
+  }
+
+  let orderedColumns = columnOrder.map((colIndex, idx) => {
+    return {
+      column: columns[colIndex],
+      index: colIndex,
+      colPos: idx,
+    };
+  });
+
+  return (
+    <MuiTableHead
+      className={clsx({
+        [classes.responsiveStacked]:
+          options.responsive === 'vertical' ||
+          options.responsive === 'stacked' ||
+          options.responsive === 'stackedFullWidth',
+        [classes.responsiveStackedAlways]: options.responsive === 'verticalAlways',
+        [classes.responsiveSimple]: options.responsive === 'simple',
+        [classes.main]: true,
+      })}
+    >
+      <TableHeadRow>
+        <TableSelectCell
+          setHeadCellRef={setCellRef}
+          onChange={handleRowSelect.bind(null)}
+          indeterminate={isIndeterminate}
+          checked={isChecked}
+          isHeaderCell={true}
+          expandedRows={expandedRows}
+          expandableRowsHeader={options.expandableRowsHeader}
+          expandableOn={options.expandableRows}
+          selectableOn={options.selectableRows}
+          fixedHeader={options.fixedHeader}
+          fixedSelectColumn={options.fixedSelectColumn}
+          selectableRowsHeader={options.selectableRowsHeader}
+          selectableRowsHideCheckboxes={options.selectableRowsHideCheckboxes}
+          onExpand={toggleAllExpandableRows}
+          isRowSelectable={true}
+          components={components}
+        />
+        {orderedColumns.map(
+          ({ column, index, colPos }) =>
+            column.display === 'true' &&
+            (column.customHeadRender ? (
+              column.customHeadRender({ index, ...column }, handleToggleColumn, sortOrder)
+            ) : (
+              <TableHeadCell
+                cellHeaderProps={
+                  columns[index].setCellHeaderProps ? columns[index].setCellHeaderProps({ index, ...column }) || {} : {}
+                }
+                key={index}
+                index={index}
+                colPosition={colPos}
+                type={'cell'}
+                setCellRef={setCellRef}
+                sort={column.sort}
+                sortDirection={column.name === sortOrder.name ? sortOrder.direction : 'none'}
+                toggleSort={handleToggleColumn}
+                hint={column.hint}
+                print={column.print}
+                options={options}
+                column={column}
+                columns={columns}
+                updateColumnOrder={updateColumnOrder}
+                columnOrder={columnOrder}
+                timers={timers}
+                draggingHook={[dragging, setDragging]}
+                draggableHeadCellRefs={draggableHeadCellRefs}
+                tableRef={tableRef}
+                tableId={tableId}
+                components={components}
+              >
+                {column.customHeadLabelRender
+                  ? column.customHeadLabelRender({ index, colPos, ...column })
+                  : column.label}
+              </TableHeadCell>
+            )),
+        )}
+      </TableHeadRow>
+    </MuiTableHead>
+  );
+};
+
+export default TableHead;

package/src/components/TableHeadCell.js

@@ -0,0 +1,320 @@
+import Button from '@mui/material/Button';
+import clsx from 'clsx';
+import HelpIcon from '@mui/icons-material/Help';
+import MuiTooltip from '@mui/material/Tooltip';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import TableCell from '@mui/material/TableCell';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import useColumnDrop from '../hooks/useColumnDrop.js';
+import { makeStyles } from 'tss-react/mui';
+import { useDrag } from 'react-dnd';
+
+const useStyles = makeStyles({ name: 'MUIDataTableHeadCell' })((theme) => ({
+  root: {
+    display: 'table-cell',
+    textAlign: 'center',
+    verticalAlign: 'middle',
+    border: `1px solid ${theme.palette.divider || '#e5e7eb'}`,
+    borderTop: 'none',
+    padding: theme.spacing(0.1, 0.25),
+    height: '30px',
+    minHeight: '30px',
+    maxHeight: '30px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    backgroundColor: '#ffffff',
+    color: theme.palette.text.primary || '#1e293b',
+    fontWeight: 600,
+    fontSize: '15px',
+    fontFamily: 'Inter, system-ui, sans-serif',
+  },
+  fixedHeader: {
+    position: 'sticky',
+    top: '0px',
+    zIndex: 100,
+    backgroundColor: '#ffffff',
+  },
+  tooltip: {
+    cursor: 'pointer',
+  },
+  mypopper: {
+    '&[data-x-out-of-boundaries]': {
+      display: 'none',
+    },
+  },
+  data: {
+    display: 'inline-block',
+    textAlign: 'center',
+    width: '100%',
+    color: theme.palette.text.primary || '#1e293b',
+    fontWeight: 600,
+    fontSize: '15px',
+    fontFamily: 'Inter, system-ui, sans-serif',
+  },
+  sortAction: {
+    display: 'flex',
+    cursor: 'pointer',
+  },
+  dragCursor: {
+    cursor: 'grab',
+  },
+  sortLabelRoot: {
+    height: '20px',
+  },
+  sortActive: {
+    color: theme.palette.text.primary || '#1e293b',
+  },
+  toolButton: {
+    textTransform: 'none',
+    marginLeft: 0,
+    minWidth: 0,
+    marginRight: 0,
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    textAlign: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    color: theme.palette.text.primary || '#1e293b',
+    fontWeight: 600,
+    fontSize: '15px',
+    fontFamily: 'Inter, system-ui, sans-serif',
+  },
+  contentWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  hintIconAlone: {
+    marginTop: theme.spacing(-0.375),
+    marginLeft: theme.spacing(0.375),
+  },
+  hintIconWithSortIcon: {
+    marginTop: theme.spacing(-0.375),
+  },
+}));
+
+const TableHeadCell = ({
+  cellHeaderProps = {},
+  children,
+  colPosition,
+  column,
+  columns,
+  columnOrder = [],
+  components = {},
+  draggableHeadCellRefs,
+  draggingHook,
+  hint,
+  index,
+  options,
+  print,
+  setCellRef,
+  sort,
+  sortDirection,
+  tableRef,
+  tableId,
+  timers,
+  toggleSort,
+  updateColumnOrder,
+}) => {
+  const [sortTooltipOpen, setSortTooltipOpen] = useState(false);
+  const [hintTooltipOpen, setHintTooltipOpen] = useState(false);
+
+  const { classes } = useStyles();
+
+  const handleKeyboardSortInput = (e) => {
+    if (e.key === 'Enter') {
+      toggleSort(index);
+    }
+
+    return false;
+  };
+
+  const handleSortClick = () => {
+    toggleSort(index);
+  };
+
+  const [dragging, setDragging] = draggingHook ? draggingHook : [];
+
+  const { className, ...otherProps } = cellHeaderProps;
+  const Tooltip = components.Tooltip || MuiTooltip;
+  const sortActive = sortDirection !== 'none' && sortDirection !== undefined;
+  const ariaSortDirection = sortDirection === 'none' ? false : sortDirection;
+
+  const isDraggingEnabled = () => {
+    if (!draggingHook) return false;
+    return options.draggableColumns && options.draggableColumns.enabled && column.draggable !== false;
+  };
+
+  const sortLabelProps = {
+    classes: { root: classes.sortLabelRoot },
+    tabIndex: -1,
+    active: sortActive,
+    hideSortIcon: true,
+    ...(ariaSortDirection ? { direction: sortDirection } : {}),
+  };
+
+  const [{ opacity }, dragRef, preview] = useDrag({
+    type: 'HEADER',
+    item: () => {
+      setTimeout(() => {
+        setHintTooltipOpen(false);
+        setSortTooltipOpen(false);
+        setDragging(true);
+      }, 0);
+      return {
+        colIndex: index,
+        headCellRefs: draggableHeadCellRefs,
+      };
+    },
+    end: (item, monitor) => {
+      setDragging(false);
+    },
+    collect: (monitor) => {
+      return {
+        opacity: monitor.isDragging() ? 1 : 0,
+      };
+    },
+  });
+
+  const [drop] = useColumnDrop({
+    drop: (item, mon) => {
+      setSortTooltipOpen(false);
+      setHintTooltipOpen(false);
+      setDragging(false);
+    },
+    index,
+    headCellRefs: draggableHeadCellRefs,
+    updateColumnOrder,
+    columnOrder,
+    columns,
+    transitionTime: options.draggableColumns ? options.draggableColumns.transitionTime : 300,
+    tableRef: tableRef ? tableRef() : null,
+    tableId: tableId || 'none',
+    timers,
+  });
+
+  const cellClass = clsx({
+    [classes.root]: true,
+    [classes.fixedHeader]: options.fixedHeader,
+    'datatables-noprint': !print,
+    [className]: className,
+  });
+
+  const showHintTooltip = () => {
+    setSortTooltipOpen(false);
+    setHintTooltipOpen(true);
+  };
+
+  const getTooltipTitle = () => {
+    if (dragging) return '';
+    if (!options.textLabels) return '';
+    return options.textLabels.body.columnHeaderTooltip
+      ? options.textLabels.body.columnHeaderTooltip(column)
+      : options.textLabels.body.toolTip;
+  };
+
+  const closeTooltip = () => {
+    setSortTooltipOpen(false);
+  };
+
+  return (
+    <TableCell
+      ref={(ref) => {
+        drop && drop(ref);
+        setCellRef && setCellRef(index + 1, colPosition + 1, ref);
+      }}
+      className={cellClass}
+      scope={'col'}
+      sortDirection={ariaSortDirection}
+      data-colindex={index}
+      data-tableid={tableId}
+      onMouseDown={closeTooltip}
+      {...otherProps}>
+      {options.sort && sort ? (
+        <span className={classes.contentWrapper}>
+          <Tooltip
+            title={getTooltipTitle()}
+            placement="bottom"
+            open={sortTooltipOpen}
+            onOpen={() => (dragging ? setSortTooltipOpen(false) : setSortTooltipOpen(true))}
+            onClose={() => setSortTooltipOpen(false)}
+            classes={{
+              tooltip: classes.tooltip,
+              popper: classes.mypopper,
+            }}>
+            <Button
+              variant=""
+              onKeyUp={handleKeyboardSortInput}
+              onClick={handleSortClick}
+              className={classes.toolButton}
+              data-testid={`headcol-${index}`}
+              ref={isDraggingEnabled() ? dragRef : null}>
+              <div className={classes.sortAction}>
+                <div
+                  className={clsx({
+                    [classes.data]: true,
+                    [classes.sortActive]: sortActive,
+                    [classes.dragCursor]: isDraggingEnabled(),
+                  })}>
+                  {children}
+                </div>
+                <div className={classes.sortAction}>
+                  <TableSortLabel {...sortLabelProps} />
+                </div>
+              </div>
+            </Button>
+          </Tooltip>
+          {hint && (
+            <Tooltip title={hint}>
+              <HelpIcon
+                className={!sortActive ? classes.hintIconAlone : classes.hintIconWithSortIcon}
+                fontSize="small"
+              />
+            </Tooltip>
+          )}
+        </span>
+      ) : (
+        <div className={hint ? classes.sortAction : null} ref={isDraggingEnabled() ? dragRef : null}>
+          {children}
+          {hint && (
+            <Tooltip
+              title={hint}
+              placement={'bottom-end'}
+              open={hintTooltipOpen}
+              onOpen={() => showHintTooltip()}
+              onClose={() => setHintTooltipOpen(false)}
+              classes={{
+                tooltip: classes.tooltip,
+                popper: classes.mypopper,
+              }}
+              enterDelay={300}>
+              <HelpIcon className={classes.hintIconAlone} fontSize="small" />
+            </Tooltip>
+          )}
+        </div>
+      )}
+    </TableCell>
+  );
+};
+
+TableHeadCell.propTypes = {
+  /** Options used to describe table */
+  options: PropTypes.object.isRequired,
+  /** Current sort direction */
+  sortDirection: PropTypes.oneOf(['asc', 'desc', 'none']),
+  /** Callback to trigger column sort */
+  toggleSort: PropTypes.func.isRequired,
+  /** Sort enabled / disabled for this column **/
+  sort: PropTypes.bool.isRequired,
+  /** Hint tooltip text */
+  hint: PropTypes.string,
+  /** Column displayed in print */
+  print: PropTypes.bool.isRequired,
+  /** Optional to be used with `textLabels.body.columnHeaderTooltip` */
+  column: PropTypes.object,
+  /** Injectable component structure **/
+  components: PropTypes.object,
+};
+
+export default TableHeadCell;

package/src/components/TableHeadRow.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import TableRow from '@mui/material/TableRow';
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles({ name: 'MUIDataTableHeadRow' })(() => ({
+  root: {},
+}));
+
+const TableHeadRow = ({ children }) => {
+  const { classes } = useStyles();
+
+  return (
+    <TableRow
+      className={clsx({
+        [classes.root]: true,
+      })}
+    >
+      {children}
+    </TableRow>
+  );
+};
+
+TableHeadRow.propTypes = {
+  children: PropTypes.node,
+};
+
+export default TableHeadRow;

package/src/components/TablePagination.js

@@ -0,0 +1,152 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MuiTableCell from '@mui/material/TableCell';
+import MuiTableRow from '@mui/material/TableRow';
+import MuiTableFooter from '@mui/material/TableFooter';
+import MuiTablePagination from '@mui/material/TablePagination';
+import JumpToPage from './JumpToPage';
+import { makeStyles } from 'tss-react/mui';
+import { getPageValue } from '../utils';
+
+const useStyles = makeStyles({ name: 'MUIDataTablePagination' })((theme) => ({
+  root: {},
+  tableCellContainer: {
+    padding: '6px 12px',
+    backgroundColor: theme.palette.background.paper || '#ffffff',
+  },
+  navContainer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+  },
+  selectRoot: {
+    backgroundColor: '#f8fafc',
+    borderRadius: theme.shape.borderRadius || '4px',
+    border: `1px solid ${theme.palette.divider || '#e5e7eb'}`,
+    '& .MuiSelect-select': {
+      padding: '0px 2px',
+      fontSize: '12px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      minHeight: '20px',
+    },
+    '& .MuiSelect-icon': {
+      color: theme.palette.text.secondary || '#6b7280',
+      backgroundColor: '#f8fafc',
+      marginRight: '2px',
+    },
+    '&:hover': {
+      borderColor: theme.palette.primary.main || '#3b82f6',
+    },
+    '&.Mui-focused': {
+      borderColor: theme.palette.primary.main || '#3b82f6',
+      boxShadow: `0 0 0 2px ${theme.palette.primary.main}20`,
+    },
+  },
+  '@media screen and (max-width: 400px)': {
+    toolbar: {
+      '& span:nth-of-type(2)': {
+        display: 'none',
+      },
+    },
+    selectRoot: {
+      marginRight: '8px',
+    },
+  },
+}));
+
+function TablePagination(props) {
+  const { classes } = useStyles();
+
+  const handleRowChange = (event) => {
+    props.changeRowsPerPage(event.target.value);
+  };
+
+  const handlePageChange = (_, page) => {
+    props.changePage(page);
+  };
+
+  const { count, options, rowsPerPage, page } = props;
+  const textLabels = options.textLabels.pagination;
+
+  return (
+    <MuiTableFooter>
+      <MuiTableRow>
+        <MuiTableCell colSpan="1000" className={classes.tableCellContainer}>
+          <div className={classes.navContainer}>
+            {options.jumpToPage ? (
+              <JumpToPage
+                count={count}
+                page={page}
+                rowsPerPage={rowsPerPage}
+                textLabels={options.textLabels}
+                changePage={props.changePage}
+                changeRowsPerPage={props.changeRowsPerPage}
+              />
+            ) : null}
+            <MuiTablePagination
+              component="div"
+              className={classes.root}
+              classes={{
+                caption: classes.caption,
+                toolbar: classes.toolbar,
+                selectRoot: classes.selectRoot,
+              }}
+              count={count}
+              rowsPerPage={rowsPerPage}
+              page={getPageValue(count, rowsPerPage, page)}
+              labelRowsPerPage={textLabels.rowsPerPage}
+              labelDisplayedRows={({ from, to, count }) => `${from}-${to} ${textLabels.displayRows} ${count}`}
+              backIconButtonProps={{
+                id: 'pagination-back',
+                'data-testid': 'pagination-back',
+                'aria-label': textLabels.previous,
+                title: textLabels.previous || '',
+              }}
+              nextIconButtonProps={{
+                id: 'pagination-next',
+                'data-testid': 'pagination-next',
+                'aria-label': textLabels.next,
+                title: textLabels.next || '',
+              }}
+              SelectProps={{
+                id: 'pagination-input',
+                variant: 'standard',
+                SelectDisplayProps: { id: 'pagination-rows', 'data-testid': 'pagination-rows' },
+                MenuProps: {
+                  id: 'pagination-menu',
+                  'data-testid': 'pagination-menu',
+                  MenuListProps: { id: 'pagination-menu-list', 'data-testid': 'pagination-menu-list' },
+                },
+              }}
+              rowsPerPageOptions={options.rowsPerPageOptions}
+              onPageChange={handlePageChange}
+              onRowsPerPageChange={handleRowChange}
+            />
+          </div>
+        </MuiTableCell>
+      </MuiTableRow>
+    </MuiTableFooter>
+  );
+}
+
+TablePagination.propTypes = {
+  /** Total number of table rows */
+  count: PropTypes.number.isRequired,
+  /** Options used to describe table */
+  options: PropTypes.object.isRequired,
+  /** 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,
+};
+
+export default TablePagination;