Is your feature request related to a problem? Please describe.
We're giving Discover a visual refresh, and part of this is redesigning the toolbar of EuiDataGrid in a significant way. It should allow the rendering on the number of documents on the left side of the toolbar, move all other elements on the right side, change the appearance, change at least 1 icon, make one popover extensible.

Describe the solution you'd like
Chatting about this use case @cee-chen suggested to use render props for that, and drafted:

// custom consumer toolbar
const renderCustomToolbar: ({
  columnsControlButton,
  sortControlButton,
  keyboardShortcutsButton,
  fullScreenButton,
  displayOptionsControls,
}) => (
  <EuiFlexGroup justifyContent="spaceBetween">
    <EuiFlexItem grow={false} data-test-subj="leftAlignedContent">
      1,112 documents
    </EuiFlexItem>
    <EuiFlexItem grow={false} data-test-subj="rightAlignedContent">
      {columnsControlButton}
      {sortControlButton}

      {keyboardShortcutsButton}
      <EuiPopover
        button={<EuiButtonIcon iconType="controlsHorizontal" aria-label="Custom grid controls" />}
      >
        {displayOptionsControls}
        Your own extra controls go here
      </EuiPopover>
      {fullScreenButton}
    </EuiFlexItem>
  <EuiFlexGroup>
);

<EuiDataGrid
  renderCustomToolbar={renderCustomToolbar}
  // ...
/>

A solution like this would be very flexible and we could implement all desired changes in Discover.

Describe alternatives you've considered
@kertal first thought to solve it via adding more configuration properties, but the render props solution is much much better.

Desired timeline
Kibana 8.11 would be great 🙈 , In Kibana 8.12 we would need to apply these changes, so early 8.12 would also work ❤️

Additional context
This is how it how should look like in Discover: