Material-table: How to make toolbar take less space

[kasajian]

When turning off search, sorting and showTitle, toolbar takes too much space -- how would one make the height shorter and the remaining "Add" button closer to the edge:

    <MaterialTable
        components={{
            Toolbar: props => (
                <div style={{ backgroundColor: '#e8eaf5' }}>
                    <MTableToolbar {...props} />
                </div>
            ),
        }}
        options={{
            search: false,
            sorting: false,
            showTitle: false,
            toolbarButtonAlignment: "left"
        }}

[kasajian]

Providing this example in the docs will also help new users on how to locate additional props within the source and how to override them.

[mbrn]

Hi @kasajian ,

You can change its minHeight with css like this.

<MaterialTable
                components={{
                  Toolbar: props => (
                    <div style={{ backgroundColor: '#e8eaf5' }}>
                      <MTableToolbar {...props} classes={{ root: "my-temp-class" }} />
                    </div>
                  ),
                }}

<style>
      .my-temp-class {
        min-height: 36px !important;
      }
    </style>