fix(react-table): Added flag to make header button click trigger column sort customizable

[FengQiMS]

Previous Behavior

When DataGrid enables sortable, DataGridHeaderCell by default trigger column sort when user click header button, user has no way to override the onClick event as theonClick defined in useDataGridHeaderCell_unstable is passed after ...props.
While setting sortable = false directly will lose all sort related table features.

const onClick = useEventCallback((e: React.MouseEvent<HTMLTableHeaderCellElement>) => {
    if (sortable) {
      toggleColumnSort(e, columnId);
    }
    props.onClick?.(e);
  });

  return useTableHeaderCell_unstable(
    {
      sortDirection,
      as: 'div',
      tabIndex: sortable ? undefined : 0,
      ...(resizableColumns ? columnSizing.getTableHeaderCellProps(columnId) : {}),
      ...props,
      onClick,
    },
    ref,
  );

New Behavior

User can disable the default header button click trigger column sort by setting this flag false in DataGridHeaderCellProps. By default it is true which is backward compatible.

export type DataGridHeaderCellProps = TableHeaderCellProps & {
  /**
   * @default true
   */
  clickTriggerSort?: boolean;
};

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 4a548bb4b188c50e782e134e447d8b06867a3c6f}

[fabricteam]

Perf Analysis (@fluentui/react-components)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
InfoButton	mount	14	15	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	591	624	5000
Button	mount	315	312	5000
Field	mount	1149	1125	5000
FluentProvider	mount	683	668	5000
FluentProviderWithTheme	mount	75	79	10
FluentProviderWithTheme	virtual-rerender	60	64	10
FluentProviderWithTheme	virtual-rerender-with-unmount	70	79	10
InfoButton	mount	14	15	5000	Possible regression
MakeStyles	mount	853	856	50000
Persona	mount	1722	1675	5000
SpinButton	mount	1388	1344	5000

[fabricteam]

🕵 fluentuiv9 No visual regressions between this PR and main