[DataGrid] Default toolbar setup

[DanailH]

This pull request aims to add an empty toolbar that will sit at the top of the data grid (above the columns and the header component it such is provided). It is structured in a way that will allow us to be easily extracted in the future if we decided to do so. To add buttons (features) in the Toolbar on needs to create a separate component for that feature (eg. ColumnPicker) and implement the functionality there. After it is done the following structure should be followed when adding the feature to the toolbar:

<DefaultToolbar>
  <ColumnPicker />
  ...
</DefaultToolbar>

Questions that need to be answered in this Draft PR:

• What to do if there are no buttons/features added (like it is now). The toolbar is visible although it is empty. I think it would be better to hide it if no children are provided.
• Once we agree that it is a viable solution I will add the needed tests and documentation, for now, there is none.
• The styling of the Toolbar - for now I just added a fixed min-height, centered the items vertically, added a border, and a background. The min-height matches the one we have for an MUI button with size small (a similar approach was taken for the footer where the min-height matches the height of the TablePagination component).

Closes #516

[oliviertassinari]

Looks like a good skeleton. Note that we need to fix #502 before we can display anything in the header/toolbar. I believe the solution is to reorganize the grid to have the AutoSizer nested

[DanailH]

Nice, ok let's see what @dtassone will say about the skeleton because I need this merged in order to start with either the column picker or the density selector. In the meantime, I can take a look at the AutoSizer issue.

[DanailH]

If this will be the way to go should I proceed with adding the documentation, hiding the toolbar if it is empty, and convert it to a normal PR?

[oliviertassinari]

Why would somebody use the toolbar over the header?

[oliviertassinari]

I have updated the pull-request to go into the header direction:

<DataGrid
  components={{
    header: () => (
      <GridToolbar>
        <GridToolbarFilter />
        <GridToolbarDensity />
      </GridToolbar>
    )
  }}
/>

[DanailH]

I have updated the pull-request to go into the header direction:

<DataGrid
  components={{
    header: () => (
      <GridToolbar>
        <GridToolbarFilter />
        <GridToolbarDensity />
      </GridToolbar>
    )
  }}
/>

Ok so probably I misunderstood your previous comment. You want basically for the toolbar to be the header in terms of the API we expose.

[DanailH]

Ok, I've cleaned it up further, so now to overwrite the GridToolbar one needs to provide a header component.

[oliviertassinari]

Great, I had a sync with @dtassone, and we are all aligned for pushing further with this API :)

[DanailH]

Great, I had a sync with @dtassone, and we are all aligned for pushing further with this API :)

Nice, that is still easily abstractable tho, so if we decide to go with the Provider composition it will still be fairly easy to do it.

[dtassone]

I'm lost with this. I thought we would add a toolbar slot

[oliviertassinari]

This PR is 3 months old

[dtassone]

Why?