Any way to add custom fields/buttons into toolbar?

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

From the source code of MTableToolbar, I noticed there are only two places to include fields or actions inside toolbar. One is search field which will be rendered by renderSearch(), one is columns button and export button which will be rendered by renderDefaultActions(). Let’s say I align search field to left, then align default actions to right.

Now I want to add one more button next to search field, but seems like no any prop exposed to render it.

Describe the solution you’d like

Expose one more prop to render custom fields/buttons, which could be put next to div className={classes.spacer}.

Describe alternatives you’ve considered

Currently there are two workarounds.

1. Use custom component to replace MTableToolbar. (I don’t prefer this, since in my app both search field and export button are being used, if I replace built-in MTableToolbar, I need to duplicate these two things into new component).

2. Create the custom field or button I need, then give it position: absolute to manually adjust it next to search field.

Additional context

[Dev967]

or just go crazy and use a bunch of div’s. Like that,

`<div style={{display: "flex", flexDirection: "row-reverse"}}>
    <Button color="primary" variant="outlined">Create New </Button>
    <div style={{width: "100%"}}>
          <MTableToolbar {...props} searchFieldVariant="standard" />
    </div>
 </div>`

i think you can adjust things with width. or just go with another CSS approach to position these div’s hope it helps

[kajalv]

This thread helps. Although the issue title may indicate something different, the comments do contain a working solution for this specific use case: https://github.com/mbrn/material-table/issues/830