Office Fabric UI自定义标头

Question

我正在使用Office Fabric UI React Detaillist组件。我想在标题下方添加标题，如下所示：

请帮助使用offffice Fabric UI React实现此目的。参考提供了以下Fabric UI反应详细信息列表：

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

Answer 1

关于Fabric ui的文档确实过时了。软件包会定期更新（很棒）。

请考虑在github上查看源代码/示例以更好地了解此软件包。

在https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts#L299处查看IColumn类型

它有

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

您可以使用它以任意方式呈现标题单元格。

这里有一些例子

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