HeaderRenderer not support children

[qiuquanwu]

Describe the bug

To Reproduce

1. HeaderRenderer not support children

Link to code example:

<HeaderRenderer column={column} {...props} > {other ReactNodes}</HeaderRenderer >

Environment

• react-data-grid version:<latest>

Suggest

Modify source code

export default function HeaderRenderer<R, SR>({
  column,
  sortDirection,
  priority,
  onSort,
  isCellSelected,
  children
}: HeaderRendererProps<R, SR> & { children?: React.ReactNode }) {
  if (!column.sortable) return <>{column.name}</>;

  return (
    <SortableHeaderCell
      onSort={onSort}
      sortDirection={sortDirection}
      priority={priority}
      isCellSelected={isCellSelected}
    >
      {children ? children : column.name}
    </SortableHeaderCell>
  );
}

[amanmahajan7]

Can you describe the use case where it is helpful. column.name can be an element also, would that work?

[noah-ellman]

If you really need this its easy to make a wrapper component that has HeaderRenderer + whatever else you want inside as children. I don't think it makes sense to have children be a prop because where do you put them? Above the column name? Below? Its ambiguous.

Like -

export function FilterRenderer<R, SR, T extends HTMLOrSVGElement>(
  props: HeaderRendererProps<R, SR> & {
    children: (args: { ref: React.RefObject<T>; tabIndex: number; filters: any }) => React.ReactElement;
  }
) {
  const filters = useContext(FilterContext)!;
  const { ref, tabIndex } = useFocusRef<T>(props.isCellSelected);

  return (
    <>
      <HeaderRenderer {...props} />
      <div>{props.children({ ref, tabIndex, filters })}</div>
    </>
  );
}