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?

Restricted

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

Jecon

Thanks! This is exactly what I was looking for. Did you find documentation on how to do this override anywhere? (Just wanted to make sure I didn't miss it somewhere.) – Restricted

Good to know! Regarding documentation, same here, not aware any particular in this regard, source code is the only reliable way to figure out.. – Jecon

For readers, it's technically possible to render per column if you can get the column key to identify your columns. This is sort-of exposed in tooltipHostProps.id in a format starting with listKey-columnKey-moreText. You can parse the columnKey out assuming the listKey and columnKey don't contain a hyphen. – Dittmer

The problem with this approach is that it doesn't override the default styling. For example fontSize is a rule you can't override since it exists in the header default styling.. :( – Naumachia

The override problem is happening in newer versions only I think. >7 – Naumachia

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.

Bird

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

Chaschase