Detailslist ignores columns

Question

I have an array of items including 5 columns, but I want one of them to be displayed in detailslist, so I created a variable like this:

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

and here is the Detailslist:

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

As output it displays all of the columns and ignores the columns property.

Mohamed Mansour · Accepted Answer · 2018-11-26T18:26:56.003

Make sure the fieldName is the name of the field in the items object. For example:

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

Assuming items is the following:

  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' },
  ];

Then columns definition should be:

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

Detailslist ignores columns

1 Answers1