Custom Grid/Subgrid Using Office-UI-Fabric DetailsList

Custom PCF Grid/Subgrid Using Office-UI-Fabric DetailsList

DetailsList Grid Control

Allows you to simulate the out of the box Grid and Subgrid controls using the Office-UI-Fabric DetailsList control. It was built to provide a springboard when you need a customizable grid experience. This component re-creates a mojority of the capabilities available out of the box in less than 300 lines of code and demonstrates the following:

  • Using the DataSet within a React functional component.
  • Displaying and sorting data within the Office-UI-Fabric DetailsList component.
  • Rendering custom formats for data with the DetailsList component such as links for Entity References, email addresses, and phone numbers.
  • Displaying field data for related entities.
  • React Hooks - the component uses both useState and useEffect.
  • Loading more than 5k records in DataSet.
  • Retaining the use of the standard ribbon buttons by using the setSelectedRecordIds function on the DataSet.
  • Detecting and responding to control width updates.


  1. I see for certain resolutions, on scrolling the grid turns blank. Is it a known issue with your control and any fix available?

  2. Great job for publishing such a nice article. Your article isn’t only useful but it is additionally really informative. Thank you because you have been willing to share information with us. Non Woven Fabric Manufacturer in India

  3. Great tutorial, I liked the representation and explanation. Find help related to office products and quality tutorials at Www.Office.Com/Setup.

  4. Thanks for sharing this article here about the Buy Cotton Fabric Online . Your article is very informative and I will share it with my other friends as the information is really very useful. Keep sharing your excellent work.Buy Cotton Fabric Online in India

  5. Going down to the neighborhood police headquarters and getting a crime percentage report can serve to rapidly dispose of a couple of office rental areas that you may have had your heart set on. del mar office space

  6. I generally want quality content and this thing I found in your article. It is beneficial and significant for us. Keep sharing these kinds of articles, Thank you. burlap bags for sale


Post a Comment

Popular posts from this blog

Add User As Local Administrator On Domain Controller

An error occurred while applying security information to

Display ADFS 2.0 Forms Authentication Login Page Instead of Windows Authentication Prompt