function renderHeader()

in src/table-semantic/table-builder.tsx [138:224]


    function renderHeader(col, colIndex, isFocusVisible) {
      const colOverrides = col.overrides || {};

      if (!col.sortable) {
        const [ColTableHeadCell, colTableHeadCellProps] = getOverrides(
          colOverrides.TableHeadCell,
          TableHeadCell
        );

        return (
          <ColTableHeadCell
            key={colIndex}
            $col={col}
            $colIndex={colIndex}
            $divider={divider}
            $isNumeric={col.numeric}
            $size={size}
            {...tableHeadCellProps}
            {...colTableHeadCellProps}
          >
            {col.header}
          </ColTableHeadCell>
        );
      }

      const [ColTableHeadCellSortable, colTableHeadCellSortableProps] = getOverrides(
        colOverrides.TableHeadCellSortable,
        TableHeadCellSortable
      );

      let SortIcon, sortIconProps, sortLabel;

      switch (col.id === sortColumn && sortOrder) {
        case 'ASC':
          SortIcon = SortAscIcon;
          sortIconProps = sortAscIconProps;
          sortLabel = 'ascending sorting';
          break;
        case 'DESC':
          SortIcon = SortDescIcon;
          sortIconProps = sortDescIconProps;
          sortLabel = 'descending sorting';
          break;
        default:
          SortIcon = SortNoneIcon;
          sortIconProps = sortNoneIconProps;
          sortLabel = 'not sorted';
          break;
      }

      // add background-color: inherit on container for non-Blank icons
      const sortIconContainerStyle =
        SortIcon === Blank
          ? sortIconContainerProps.$style
          : mergeConfigurationOverrides(
              { backgroundColor: 'inherit' },
              sortIconContainerProps.$style
            );

      return (
        <ColTableHeadCellSortable
          key={colIndex}
          $col={col}
          $colIndex={colIndex}
          $divider={divider}
          $isNumeric={col.numeric}
          role="button"
          tabIndex="0"
          aria-label={`${col.tableHeadAriaLabel || col.header}, ${sortLabel}`}
          $isFocusVisible={isFocusVisible}
          onClick={() => onSort && onSort(col.id)}
          onKeyDown={(e: KeyboardEvent) => {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
              onSort && onSort(col.id);
            }
          }}
          {...tableHeadCellSortableProps}
          {...colTableHeadCellSortableProps}
        >
          {col.header}
          <SortIconContainer {...sortIconContainerProps} $style={sortIconContainerStyle}>
            <SortIcon size="16px" aria-hidden="true" role="presentation" {...sortIconProps} />
          </SortIconContainer>
        </ColTableHeadCellSortable>
      );
    }