I was looking through the office fabric documentation, there seems to be clear information on how to style the items/content inside the DetailsList (https://developer.microsoft.com/en-us/fabric#/components/detailslist/customitemcolumns has an example) but no information on how to style the column headers (or if it's possible).
It seems like a pretty common use case (I'm trying to center my column headers instead of having them left aligned and make them larger), so not sure if I'm just missing something?
One option to customize column headers would be to override the rendering of headers via onRenderDetailsHeader event and then render header tooltip with a custom styling as demonstrated below
<DetailsList
items={sortedItems as any[]}
setKey="set"
columns={columns}
onRenderDetailsHeader={this.renderDetailsHeader}
/>
private renderDetailsHeader(detailsHeaderProps: IDetailsHeaderProps) {
return (
<DetailsHeader
{...detailsHeaderProps}
onRenderColumnHeaderTooltip={this.renderCustomHeaderTooltip}
/>
);
}
private renderCustomHeaderTooltip(tooltipHostProps: ITooltipHostProps) {
return (
<span
style={{
display: "flex",
fontFamily: "Tahoma",
fontSize: "14px",
justifyContent: "center",
}}
>
{tooltipHostProps.children}
</span>
);
}