How to utilise ShimmeredDetailsList in SharePoint SPFx webpart

Deepali Jain 1 Reputation point
2020-08-08T14:31:13.793+00:00

Hi,

I am trying to use Shimmered DetailsList(Fluent UI control) in a SPFx webpart to show data from a SharePoint list so that all data does not load at one go. But, it is not showing any data in the grid as of now. When I am debugging through developer tools, it shows that list data is received well on the page but not working fine with Shimmered DetailsList for some reason.

Can anyone point me to some simple sample code for utilising Shimmered DetalsList in SPFx webpart?

My Code Snippet:

import { ShimmeredDetailsList } from 'office-ui-fabric-react/lib/ShimmeredDetailsList';

<ShimmeredDetailsList
setKey="this.state.items"
items={this.state.items}
selectionMode={SelectionMode.none}
enableShimmer={true}
ariaLabelForGrid="Item details"
/>

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,574 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Jerryzy 10,571 Reputation points
    2020-08-10T07:34:28.52+00:00

    Hi @Deepali Jain ,

    You can refer the example about the usage of ShrimmeredDetailsList control:

    DetailsList Shimmer Example

    And here is a detailed demo about Shimmer usage in SPFX solution for your reference:

    SPFx - The Modern Way To Show Loading/Progress Indicators Using Office-UI Fabric Shimmer

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.