@eureca/eureca-ui/src/components/Table/table-head.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';

import { makeStyles } from '@material-ui/core/styles';
import { TableHead, TableRow, TableSortLabel, Typography } from '@material-ui/core';

import { colors } from '../../theme/colors';

import { Checkbox } from '../Checkbox';
import TableCell from './table-cell';

const rowStyles = makeStyles({
  headRow: { backgroundColor: colors.white },
});

const styles = {
  checkboxCell: { width: 36, borderBottomColor: colors.e0e0e0 },
  cell: { color: colors.gray3 },
};

const EnhancedTableHead = props => {
  const {
    headerColumns,
    checkboxes = true, // boolean that indicates that the table has checkboxes
    ariaLabel = 'select all',
    onSelectAllClick, // what happens on header checkbox click, if there is one
    order, // type of ordering -- can be asc (ascending) or desc (descending)
    orderBy, // which cell we're ordering by
    numSelected, // number of rows selected
    rowCount, // total number of rows for this table
    onSort = () => {}, // sorting function (if not default),
  } = props;
  const onClickAll = checked => onSelectAllClick(checked);
  const sortColumn = id => event => onSort(event, id);
  const classes = rowStyles();
  return (
    <TableHead>
      <TableRow classes={{ root: classes.headRow }}>
        {checkboxes && (
          <TableCell
            id={'table-head-checkbox'}
            align="center"
            sticky
            index={0}
            style={styles.checkboxCell}
          >
            <Checkbox
              name="head-checkbox"
              value={numSelected === rowCount}
              indeterminate={numSelected > 0 && numSelected < rowCount}
              checked={numSelected === rowCount}
              onChange={onClickAll}
              inputProps={{ 'aria-label': ariaLabel }}
            />
          </TableCell>
        )}
        {headerColumns.map(
          headCell =>
            !headCell.skip && (
              <TableCell
                id={`table-head-column-${headCell.id}`}
                key={headCell.id}
                align={headCell.numeric ? 'right' : 'left'}
                sortDirection={orderBy === headCell.id ? order : false}
                sticky={headCell.sticky}
                style={{
                  minWidth: headCell.minWidth,
                  maxWidth: headCell.maxWidth,
                  borderBottomColor: colors.e0e0e0,
                  ...styles.tableCellContainer,
                  ...headCell.style,
                }}
                index={1}
              >
                {headCell.sortable === false ? (
                  <Typography variant="body2" style={styles.cell}>
                    {headCell.label}
                  </Typography>
                ) : (
                  <TableSortLabel
                    active={orderBy === headCell.id}
                    direction={order}
                    onClick={sortColumn(headCell.id)}
                  >
                    <Typography variant="body2" style={styles.cell}>
                      {headCell.label}
                    </Typography>
                  </TableSortLabel>
                )}
              </TableCell>
            )
        )}
      </TableRow>
    </TableHead>
  );
};

EnhancedTableHead.propTypes = {
  headerColumns: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string,
      numeric: PropTypes.bool,
      disablePadding: PropTypes.bool,
      label: PropTypes.string,
      style: PropTypes.object,
    }).isRequired
  ).isRequired,
  checkboxes: PropTypes.bool,
  ariaLabel: PropTypes.string,
  numSelected: PropTypes.number.isRequired,
  onSort: PropTypes.func.isRequired,
  onSelectAllClick: PropTypes.func.isRequired,
  order: PropTypes.oneOf(['asc', 'desc']).isRequired,
  orderBy: PropTypes.string.isRequired,
  rowCount: PropTypes.number.isRequired,
};

export default EnhancedTableHead;