DetailsList - Display a message when empty

Question

are you guys aware of an elegant way for disaply a message like "no items found" or similar, when a FluentUI DetailsList is empty?

Currently the DetailsList is rendered but without any row.

Cheers

Answer 1

You can use conditional rendering. For example, if items is array of rows you can check if there are any in array and if not render message. In this case it is only paragraph element, but you can make your own message component, style it as you wish and then render.

const items = [];

{ items.length > 0 ? (
      <DetailsList
        items={items}
        compact={isCompactMode}
        columns={columns}
        selectionMode={SelectionMode.none}
        getKey={this._getKey}
        setKey="none"
        layoutMode={DetailsListLayoutMode.justified}
        isHeaderVisible={true}
        onItemInvoked={this._onItemInvoked}
      />
    ) : 
    (
        <p>There are no items in the list.</p>
    )
}