[DataGrid] Ability to rearrange display selector components and/or render custom display selector

[lukasolson]

Is your feature request related to a problem? Please describe.

Related feature request in Kibana: elastic/kibana#188066

In EuiDataGrid, it isn't currently possible to customize the order of components inside of the display selector; you can only toggle between enabling/disabling them (and providing additional display settings which are appended at the bottom of the popover):

This is similar in nature to the problem of rearranging components in the toolbar. For the toolbar, not only have the capability to toggle components on/off, but also have a renderCustomToolbar function which is passed the default toolbar controls as a parameter:

https://eui.elastic.co/#/tabular-content/data-grid-toolbar#additional-controls-in-the-toolbar
https://eui.elastic.co/#/tabular-content/data-grid-toolbar#completely-custom-toolbar-rendering

Describe the solution you'd like

It would be nice if we could either have the ability to customize the order of the components inside of the display selector popover. This could be accomplished by providing a renderCustomDisplaySelector function which is passed the default display selector components (density selector & row height), similar to how the renderCustomToolbar currently functions.

This was actually discussed previously (#7190 (review)) but ultimately removed.

Desired timeline

I believe this is in the same body of work as #7835, so I would assume the priority is similar.

[cee-chen]

This has been implemented in #8080. Example usage:

const customDisplaySelectorRender = ({ densityControl }) => (
  <div>Custom display selector {densityControl}</div>
);

<EuiDataGrid
  // ... required props
  toolbarVisibility={{
    showDisplaySelector: {
      customRender: customDisplaySelectorRender
    }
  }}
/>