ota-admin-portal/src/components/Table/HeaderSortable/index.jsx

import {
  Checkbox,
  TableCell,
  TableHead,
  TableRow,
  TableSortLabel
} from "@material-ui/core";
import PropTypes from "prop-types";
import React from "react";

const HeaderSortable = (props) => {
  const {
    classes,
    order,
    orderBy,
    onSortRequest,
    columnData,
    multiSelect,
    onSelectAll,
    selectCount,
    rowCount,
  } = props;

  const sortHandler = (property) => (event) => {
    if (!onSortRequest) return;
    onSortRequest(event, property);
  };

  const selectAllHandler = (event) => {
    if (!onSelectAll) return;
    onSelectAll(event);
  };

  const getOrder = (value) =>
    value === "desc" ? "sorted descending" : "sorted ascending";

  const ColumnLabel = (column) => {
    if (column.no_sort) {
      return column.label
    }
    if (column.id) {
      return (
        <TableSortLabel
          active={orderBy === column.id}
          direction={orderBy === column.id ? order : "asc"}
          onClick={sortHandler(column.id)}
        >
          {column.label}
          {orderBy === column.id && (
            <span className={classes.hiddenSortSpan}>{getOrder(order)}</span>
          )}
        </TableSortLabel>
      );
    }

    return column.label;
  };

  if (multiSelect) {
    const errors = [];
    if (onSelectAll === undefined) errors.push("onSelectAll required");
    if (selectCount === undefined) errors.push("selectCount required");
    if (rowCount === undefined) errors.push("rowCount required");
    if (errors.length > 0) {
      throw new Error(errors.join(". "));
    }
  }
  return (
    <TableHead>
      <TableRow>
        {multiSelect && (
          <TableCell padding="checkbox">
            <Checkbox
              indeterminate={selectCount > 0 && selectCount < rowCount}
              checked={rowCount > 0 && selectCount === rowCount}
              onChange={selectAllHandler}
              inputProps={{ "aria-label": "select all desserts" }}
            />
          </TableCell>
        )}
        {columnData.map((column, index) => (
          <TableCell
            key={index}
            align={column.numeric ? "right" : "center"}
            padding={column.disablePadding ? "none" : "normal"}
            sortDirection={orderBy === column.id ? order : false}
          >
            {ColumnLabel(column)}
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
};

HeaderSortable.propTypes = {
  classes: PropTypes.object.isRequired,
  onSortRequest: PropTypes.func.isRequired,
  order: PropTypes.oneOf(["asc", "desc"]).isRequired,
  orderBy: PropTypes.string.isRequired,
  columnData: PropTypes.array.isRequired,
  multiSelect: PropTypes.bool,
  selectCount: PropTypes.number,
  totalRows: PropTypes.number,
  onSelectAll: PropTypes.func,
};

export default HeaderSortable;