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>
);
}