Office Fabric UI自定义标头

Question

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

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

Answer 1

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