title: mui-datatables custom header with multiple buttons position
body: <p>in my app I'm working with mui-datatables. I added a custom toolbar to the table with one additional button, which is added into the row with the other buttons. But when I add a second button, it gets added below, although there is enough space. How can I display the second button in the row with the other ones?</p>
  <p><a href="https://i.stack.imgur.com/kInJf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kInJf.png" alt="example" /></a></p>
  <pre><code>  const HeaderElements = () =&gt; (
      &lt;&gt;
        &lt;AddNewButton /&gt;
        &lt;ExportJsonButton /&gt;
      &lt;/&gt;
    );
  
    &lt;MUIDataTable
      title=&quot;&quot;
      data={rows}
      columns={columns}
      options={{
        selectableRowsHeader: false,
        selectableRowsHideCheckboxes: true,
        customToolbar: () =&gt; (&lt;HeaderElements /&gt;),
      }}
     /&gt;
  </code></pre>