How to customize the header in GroupedList component in react ui-fabric library

Question

I have problems customizing the GroupedList component header in the react ui-fabric library. What i would like to do is to remove the checkbox and the number count (including paranthesis). When the (grey) row is clicked, behaviour should be equivalent to clicking on the chevron icon (expand/collapse childs). In visual terms, this is what i'm trying to do:

The component with source code for this example can be found here.

After doing some research i've figured out that the only way to achieve what i want to do with this component is to pass a groupProps to GroupedList component, something like this:

public render(): JSX.Element {
return (
  <FocusZone>
    <SelectionZone selection={this._selection} selectionMode={SelectionMode.multiple}>
      <GroupedList
        items={_items}
        onRenderCell={this._onRenderCell}
        selection={this._selection}
        selectionMode={SelectionMode.multiple}
        groups={_groups}
        // adding this overrides the default header render 
        groupProps={{
            onRenderHeader: this._onRenderHeader
          }}
      />
    </SelectionZone>
  </FocusZone>
);}


private _onRenderHeader(props: IGroupDividerProps): JSX.Element {
// code to change the header goes here
return (
    <div className={css('ms-GroupedListExample-header', FontClassNames.xLarge)}>
        Group1
    </div>
);}

I just can't figure out what to write in _onRenderHeader to change the header so it look and behaves like i described in the picture. Help is much appreciated.

Answer 1

I did something similar in the past, here is the list of suggestions how to customize header in GroupedList component.

First of all, you're on the right track, onRenderHeader event is the right entry point for this kind of customization. But instead of overriding the existing header markup i would propose to customize the existing GroupHeader component:

private _onRenderHeader(props: IGroupDividerProps): JSX.Element {

    //your changes goes here..

    return (
            <GroupHeader  {...props} />
    );
}

To hide check button and counter info, set display:none for a check and headerCount class names like this:

const headerCountStyle = {"display":"none"};
const checkButtonStyle = {"display":"none"};

<GroupHeader styles={{ "check": checkButtonStyle, "headerCount": headerCountStyle }}    {...props}   />

To add toggle/collapse behavior for group header, register the following event:

 const onToggleSelectGroup = () => {
        props.onToggleCollapse!(props.group!);
 }


<GroupHeader  {...props}  onToggleSelectGroup={onToggleSelectGroup} />

Here is a demo forked from original example