Office Fabric UI custom headers

0
votes

I am using Office Fabric UI React Detaillist component. I want to add a heading on top of column headers like below:

enter image description here

Please help how to achieve this using offfice Fabric UI React. Reference offuce Fabric UI react detail list below:

https://developer.microsoft.com/en-us/fabric#/components/detailslist

1
reactjsoffice-ui-fabric
Did you ever found out how to do it? - Jesse
No I was not able to. I looked at solution below, but i do not know how to do it. - 404

1 Answers

0
votes

Docs on fabric ui are really outdated. While package is updated regularly (which is great).

Consider looking through source code / examples on github for better understanding of this package.

Looking at IColumn type at https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts#L299

it has

   /**
   * If provided uses this method to render custom cell content, rather than the default text rendering.
   */
  onRender?: (item?: any, index?: number, column?: IColumn) => any;

which you can utilize to render header cell any way you like.

Here are some examples

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx