function EnhancedTableHead(props) {
  const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;
  const createSortHandler = (property) => (event) => {
    onRequestSort(event, property);
  };

  return (
    <TableHead>
      <TableRow>
        
        {headCells.map((headCell) => (
          <TableCell
            key={headCell.id}
            align={headCell.numeric ? 'right' : 'left'}
            padding={headCell.disablePadding ? 'none' : 'normal'}
            sortDirection={orderBy===headCell.id ?order:false}
          >
            <TableSortLabel
              active={orderBy===headCell.id}
              direction={orderBy===headCell.id?order:'asc'}
              onClick={createSortHandler(headCell.id)}
            >
              {headCell.label}
              {orderBy === headCell.id ? (
                <Box component="span" sx={visuallyHidden}>
                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
                </Box>
              ) : null}
            </TableSortLabel>
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
}
/**
 * Creates the Table Head
 * @param {Props} props 
 * @returns rendering component
 */
Creates the Table Head
@param {Props} props
@returns rendering component
Creates the Table Head @param { Props } props @returns rendering component
function EnhancedTableHead(props) {
  const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;
  const createSortHandler = (property) => (event) => {
    onRequestSort(event, property);
  };
  return (
    <TableHead>
      <TableRow>
        {headCells.map((headCell) => (
          <TableCell
            key={headCell.id}
            align={headCell.numeric ? 'right' : 'left'}
            padding={headCell.disablePadding ? 'none' : 'normal'}
            sortDirection={orderBy===headCell.id ?order:false}
          >
            <TableSortLabel
              active={orderBy===headCell.id}
              direction={orderBy===headCell.id?order:'asc'}
              onClick={createSortHandler(headCell.id)}
            >
              {headCell.label}
              {orderBy === headCell.id ? (
                <Box component="span" sx={visuallyHidden}>
                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
                </Box>
              ) : null}
            </TableSortLabel>
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
}
function EnhancedTableHead ( props ) { const { onSelectAllClick , order , orderBy , numSelected , rowCount , onRequestSort } = props ; const createSortHandler = ( property ) => ( event ) => { onRequestSort ( event , property ) ; } ; return ( < TableHead > < TableRow > { headCells . map ( ( headCell ) => ( < TableCell key = { headCell . id } align = { headCell . numeric ? 'right' : 'left' } padding = { headCell . disablePadding ? 'none' : 'normal' } sortDirection = { orderBy === headCell . id ? order : false } > < TableSortLabel active = { orderBy === headCell . id } direction = { orderBy === headCell . id ? order : 'asc' } onClick = { createSortHandler ( headCell . id ) } > { headCell . label } { orderBy === headCell . id ? ( < Box component = "span" sx = { visuallyHidden } > { order === 'desc' ? 'sorted descending' : 'sorted ascending' } < / Box > ) : null } < / TableSortLabel > < / TableCell > ) ) } < / TableRow > < / TableHead > ) ; }
Creates the Table Head
 @param {Props} props
 @returns rendering component
Creates the Table Head @param { Props } props @returns rendering component