Is it possible to create DetailedList with expanded/collapsed rows?

Please see mockup from figma:

please see mockup fom figma

I have project like on image attached and need to figure out how to achieve such layout with Fluent UI v.7

I'm totally new in Fluent UI or SharePoint.

1 Answer 1


You can use SharePoint framework to create a custom web part with Fluent UI to achieve your requirements.

Check below Microsoft documentations for SharePoint framework (SPFx):

  1. Overview of the SharePoint Framework
  2. Build your first SharePoint client-side web part

Also, check below Fluent UI documentations for DetailsList:

  1. DetailsList - Grouped
  2. DetailsList - Grouped V2
  3. DetailsList - Large Grouped
  4. DetailsList - Large Grouped V2

Also, check this GitHub repository for SPFx web part samples which might help you to get started with: SPFx web part samples

  • @Ganesh.Sanap is it possible to add data to group header? Please see "Staff Costs" from the attached image above, on the right side there's info in cells about Planned Costs and Planned Budget. I hant to have this costs in the same line as Group Name. Is it possible?
    – Baldini
    Apr 19 at 6:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.