Detailslist игнорирует столбцы

Question

У меня есть массив элементов, включающий 5 столбцов, но я хочу, чтобы один из них отображался в подробном списке, поэтому я создал переменную, подобную этой:

_columns: IColumn[] = [
    {
        key: 'Title',
        name: 'Title',
        fieldName: 'Title',
        minWidth: 100,            
        maxWidth: 200,
        isResizable: true,
        ariaLabel: 'Operations for Field'
    }];

, а вот подробный список:

<MarqueeSelection selection={this._selection}>
                            <DetailsList
                                setKey={'items'}
                                items={items}
                                columns={columns}
                                selection={this._selection}                                    
                                selectionPreservedOnEmptyClick={true}
                                onItemInvoked={this._onItemInvoked}
                                dragDropEvents={this._getDragDropEvents()}
                                columnReorderOptions={this.state.isColumnReorderEnabled ? this._getColumnReorderOptions() : undefined}
                                ariaLabelForSelectionColumn="Toggle selection"
                                ariaLabelForSelectAllCheckbox="Toggle selection for all items"
                            />
                        </MarqueeSelection>

В качестве вывода отображает все столбцы и игнорирует свойство столбцов.

Answer 1

Убедитесь, что fieldName - это имя поля в объекте items.Например:

https://codepen.io/mohamedhmansour/pen/yQqaZx?editors=1010

Предполагается, что items следующее:

  const items = [
    { key: 'A', text: 'Item a' },
    { key: 'B', text: 'Item b' },
    { key: 'C', text: 'Item c' },
    { key: 'D', text: 'Item d' },
    { key: 'E', text: 'Item e' },
    { key: 'F', text: 'Item f' },
    { key: 'G', text: 'Item g' },
    { key: 'H', text: 'Item h' },
    { key: 'I', text: 'Item i' },
  ];

Тогда определение columns должно быть:

  const columns = [
    { key: 'somekey1', name: 'Item', fieldName: 'text' }
  ];