Revision history [back]

You can prevent the context menu from appearing on the headers of details list groups in fluentui by setting the "data-is-focusable" attribute to "true" on the header element. This will ensure that the header element does not have focus and will not trigger the context menu on right-click.

For example, in React JSX, you can add the "data-is-focusable" attribute to the header element as follows:

<DetailsList
  items={items}
  groups={groups}
  onRenderHeader={(props, defaultRender) => {
    return (
      <div
        data-is-focusable="true" // Add this attribute to prevent context menu
        role="button"
        onClick={() => {
          // Handle click event
        }}
      >
        {defaultRender(props)}
      </div>
    );
  }}
/>

Note that setting "data-is-focusable" to false or removing it entirely on a header element will allow the context menu to appear on right-click.