Can Office Fabric DetailsList column headers be styled? - office-ui-fabric

Question

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?

Answer 1

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

Answer 2

You can style the columns headers with the IDetailsColumnStyles interface.
Example:
...
const headerStyle: Partial<IDetailsColumnStyles> = {
cellTitle: {
color: "#c00"
}
}
const columns: IColumn[] = [
{ styles: headerStyle, key: 'name', name: 'Name', fieldName: 'name', minWidth: 120 },
...
Look at the definition of IDetailsColumnStyles to see what can be styled.

Answer 3

The IColumn interface has a property named headerClassName which can be used to style the column header. Example:
/* CSS */
.headerClass > span {
/* right aligned header should have padding */
padding-right: 15px;
}
.headerClass span {
/* bolder font */
font-weight: 900;
/* Right Align the column header */
justify-content: flex-end;
text-align: right;
/* green color */
color: green;
/* background color */
background: pink;
}
//JSX
const columns = [
{
key: 'column1',
name: 'Name',
fieldName: 'name',
minWidth: 100,
maxWidth: 200,
isResizable: true,
heaerClassName: 'headerClass',
},
{
key: 'column2',
name: 'Value',
fieldName: 'value',
minWidth: 100,
maxWidth: 200,
isResizable: true,
},
];
<DetailsList
items={items}
columns={columns}
setKey='set'
/>
Demo