CODEWITHSUNDEEP
reactjsmaterial-uimaterial-table
DevLoverUmar
DevLoverUmar

Reputation: 13933

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

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

enter image description here

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

Upvotes: 2

Views: 4430

Answers (2)

Luan Scudeler
Luan Scudeler

Reputation: 471

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>
    ),
  }}

Upvotes: 1

DevLoverUmar
DevLoverUmar

Reputation: 13933

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
  }}

Upvotes: 4

Related Questions