How to change the position of a free action icon in react material-table

Question

I want to place a freeAction button in material-table at top-left. Here is the the illustration of what I want.

I know it's something like component-overriding. But unable to do that and can't find any example.

I'm not sure about the actual freeAtcion button, but you can achieve a very similiar position with the Toolbar Overriding Example that it's in the link you've shared, it won't be in the same level of the search component, but at least you have more freedom to position you refresh button by overriding the Toolbar component — Luan Scudeler, Sep 22 '20 at 21:45

score 4 · Accepted Answer · answered Sep 21 '20 at 09:07

Thanks everyone for your attention. It was so easy, but didn't find before. I added an option in Material-Table markup as

  options={{
    search: true,
    actionsColumnIndex: -1,
    toolbarButtonAlignment:"left" // here is the option to change toolbar buttons' alignment
  }}

score 1 · Answer 2 · answered Sep 22 '20 at 22:43

You can have this by overriding the Toolbar component instead of using the actions property. Below is an example code of the components property that you need on your <MaterialTable />, you can change the styles and components according to what you need:

components={{
    Toolbar: (toolbarProps) => (
      <Box display="flex" alignItems="center">
        <Button
          style={{ marginLeft: '8px', marginRight: 'auto' }}
          variant="contained"
          color="secondary"
        >
          Refresh
        </Button>
        <MTableToolbar {...toolbarProps} />
      </Box>
    ),
  }}

How to change the position of a free action icon in react material-table

2 Answers2