Using the Office UI Fabric Grouped DetailsList in React-based SPFX Webparts.

Say you have an array of objects in your application that looks like this

export class Widget {

public constructor(

public id: number,

public title: string,

public isActive:string,

public manufacturer:string

) { }


And you want to display the items in a react DetailsList  showing the ‘title’ of each item grouped by manufacturer.


The JSX to render such a display could be set up like this:








{ key: “title”, name: “Widget Name”, fieldName: “title”, minWidth: 20, maxWidth: 100 },





The getAvailableWidgets is defined as

public getAvailableWidgets(): Array<Widget> {

var tempWidgets = _.filter(this.props.widgets, (widget: Widget) => {

return !this.trContainsWidget(,;


var widgets =, (widget) => {

return {

title: widget.title,

manufacturer: (widget.manufacturer)?widget.manufacturer:”(none)”,




}).filter((p)=>{return p.isActive===”Yes”});

return _.orderBy(this.state,widgets, [“manufacturer”], [“asc”]);



The key point is that the list returned must be sorted by whatever fields you want to group on.



The getAvailableWidgetGroups is defined like this:

public getAvailableWidgetGroups(): Array<IGroup> {

var pigs: Array<Widget> = this.getAvailableWidgets();

var widgetManufactureres = _.countBy(pigs, (p1: Widget) => { return p1.manufacturer; });

var groups: Array<IGroup> = [];

for (const pm in widgetManufactureres) {


name: pm,

key: pm,

startIndex: _.findIndex(pigs, (pig) => { return pig.manufacturer === pm; }),

count: widgetManufactureres[pm],

isCollapsed: true



return groups;



The method returns an array of IGroup which is required to group a Detailslist. The IGroup needs the starting row number of each group and the number of element in the group. The method uses lodash to get these values.


The lodash countBy function returns an object whose keys are the distinct names of the manufacturers and whose values are the number of rows with that manufacturer.

So to create the array of IGroup, it just loops through each manufacturer and creates an IGroup. It uses the findIndex  function to find the first row with the manufacturer and gets the count from the widgetManufactureres object.


This entry was posted in fabric, react, spfx, Uncategorized and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s