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?

score 7 · Accepted Answer · answered Dec 05 '18 at 20:00

7

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

answered Dec 05 '18 at 20:00

Vadim Gremyachev

57,952
20
129
193

1

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.) – Stanley Dec 06 '18 at 02:07
Good to know! Regarding documentation, same here, not aware any particular in this regard, source code is the only reliable way to figure out.. – Vadim Gremyachev Dec 06 '18 at 11:36
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. – person27 Sep 19 '19 at 18:23
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.. :( – Jenian Dec 31 '19 at 10:39
1

The override problem is happening in newer versions only I think. >7 – Jenian Dec 31 '19 at 11:19

score 2 · Answer 2 · answered Nov 29 '20 at 19:11

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.

score 1 · Answer 3 · answered May 18 '20 at 17:09

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

Can Office Fabric DetailsList column headers be styled?

3 Answers3

Linked