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