How to add a Select all checkbox in Draggable Header React-data-grid

[amitdvs]

I can not find a way to add select all check box on grid header with Draggablel Header like in Common Features

 const draggableColumns = useMemo(() => {
    function HeaderRenderer(props: HeaderRendererProps<Article>) {
      return <DraggableHeaderRenderer {...props} onColumnsReorder={handleColumnsReorder} />;
    }

    function handleColumnsReorder(sourceKey: string, targetKey: string) {
      const sourceColumnIndex = columns.findIndex((c) => c.key === sourceKey);
      const targetColumnIndex = columns.findIndex((c) => c.key === targetKey);
      const reorderedColumns = [...columns];

      reorderedColumns.splice(
        targetColumnIndex,
        0,
        reorderedColumns.splice(sourceColumnIndex, 1)[0]
      );

      setColumns(reorderedColumns);
    }

    return columns.map((c) => {
      if (c.key === 'id') return c;
      return { ...c, headerRenderer: HeaderRenderer };
    });
  }, [columns]);

export function DraggableHeaderRenderer<R>({
  onColumnsReorder,
  column,
  sortDirection,
  onSort,
  priority,
  isCellSelected
}: DraggableHeaderRendererProps<R>) {
  const [{ isDragging }, drag] = useDrag({
    type: 'COLUMN_DRAG',
    item: { key: column.key },
    collect: (monitor) => ({
      isDragging: monitor.isDragging()
    })
  });

  const [{ isOver }, drop] = useDrop({
    accept: 'COLUMN_DRAG',
    drop({ key }: { key: string }) {
      onColumnsReorder(key, column.key);
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop()
    })
  });

  const style = useMemo(() => {
    return {
      opacity: isDragging ? 0.5 : 1,
      backgroundColor: isOver ? '#ececec' : undefined,
      cursor: 'move'
    };
  }, [isDragging, isOver]);

  return (
    <div ref={useCombinedRefs(drag, drop)} style={style}>
      <SortableHeaderCell
        sortDirection={sortDirection}
        onSort={onSort}
        priority={priority}
        isCellSelected={isCellSelected}
      >
        {column.name}
      </SortableHeaderCell>
    </div>
  );
}