mui-datatables custom header with multiple buttons position

Question

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?

  const HeaderElements = () => (
    <>
      <AddNewButton />
      <ExportJsonButton />
    </>
  );

  <MUIDataTable
    title=""
    data={rows}
    columns={columns}
    options={{
      selectableRowsHeader: false,
      selectableRowsHideCheckboxes: true,
      customToolbar: () => (<HeaderElements />),
    }}
   />

Could you please share a simple sample of your code in codesandbox? — Majid M.
– Majid M., Commented Aug 24, 2021 at 6:55
It is interesting, in the codesandbox it's working with just normal buttons codesandbox.io/s/inspiring-haze-vvcm1?file=/src/App.js — lrefopam
– lrefopam, Commented Aug 24, 2021 at 7:12

lrefopam · Accepted Answer · 2021-08-24 07:23:30Z

1

I found the solution by myself: has to be wrapped in a Button:

<Button>
  <AddNewButton />
</Button>

answered Aug 24, 2021 at 7:23

lrefopam

5411 gold badge6 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

mui-datatables custom header with multiple buttons position

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related