Настраиваемые заголовки пользовательского интерфейса Office Fabric

Я использую компонент Office Fabric UI React Detaillist. Я хочу добавить заголовок поверх заголовков столбцов, как показано ниже:

введите здесь описание изображения

Пожалуйста, помогите, как этого добиться, используя Office Fabric UI React. Ссылка на подробный список реагирования на интерфейс Fabric UI ниже:

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


reactjs office-ui-fabric
person 404    schedule 18.01.2019    source источник
comment
Вы когда-нибудь узнали, как это сделать?   -  person Jesse    schedule 09.09.2020
comment
Нет, не смог. Я посмотрел на решение ниже, но не знаю, как это сделать.   -  person 404    schedule 21.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

Документы по тканевому интерфейсу действительно устарели. Пока пакет регулярно обновляется (и это здорово).

Рассмотрите возможность просмотра исходного кода / примеров на github, чтобы лучше понять этот пакет.

Глядя на тип IColumn на https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts#L299

она имеет

   /**
   * 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

person SLCH000    schedule 18.01.2019