title: How to customize the header in GroupedList component in react ui-fabric library
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/rcDDT.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/rcDDT.jpg" alt="enter image description here"></a></p>
  
  <p>The component with source code for this example can be found <a href="https://developer.microsoft.com/en-us/fabric#/components/groupedlist" rel="noreferrer">here</a>.</p>
  
  <p>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:</p>
  
  <pre><code>public render(): JSX.Element {
  return (
    &lt;FocusZone&gt;
      &lt;SelectionZone selection={this._selection} selectionMode={SelectionMode.multiple}&gt;
        &lt;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
            }}
        /&gt;
      &lt;/SelectionZone&gt;
    &lt;/FocusZone&gt;
  );}
  
  
  private _onRenderHeader(props: IGroupDividerProps): JSX.Element {
  // code to change the header goes here
  return (
      &lt;div className={css('ms-GroupedListExample-header', FontClassNames.xLarge)}&gt;
          Group1
      &lt;/div&gt;
  );}
  </code></pre>
  
  <p>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.</p>