Can Office Fabric DetailsList column headers be styled?

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.