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?


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