fleet/frontend/components/TableContainer/DataTable/HeaderCell/HeaderCell.tsx

import React from 'react';

interface IHeaderCellProps {
  value: string;
  isSortedDesc?: boolean;
}

const HeaderCell = (props: IHeaderCellProps): JSX.Element => {
  const {
    value,
    isSortedDesc,
  } = props;

  let sortArrowClass = '';
  if (isSortedDesc === undefined) {
    sortArrowClass = '';
  } else if (isSortedDesc) {
    sortArrowClass = 'descending';
  } else {
    sortArrowClass = 'ascending';
  }

  return (
    <div className={`header-cell ${sortArrowClass}`}>
      <span>{value}</span>
      <div className="sort-arrows">
        <span className="ascending-arrow" />
        <span className="descending-arrow" />
      </div>
    </div>
  );
};

export default HeaderCell;