Material-table: Centering action button

[pak11273]

It's hard to read what you wrote. You can center an action button like this:

javascript options={{actionsCellStyle: {display:"flex", justifyContent: "center"}}}

[FroggDev]

Thanks, but as you can see the bottom line isn't aligned with your code

I can pass through using
actionsCellStyle:{display:"flex", justifyContent: "center",marginBottom:' -1px'},

But that's look tricky ...

[FroggDev]

Just go down to read the solution...

• Read the post of the 10 Apr
• You can also then check JeffEmery commit

[chitgoks]

that is actually what i did. but no, it does not work

actionsCellStyle: {
            justifyContent: 'center'
          },

Even adding display: 'flex' or textAlign: 'center'

Please see image. the css instead gets applied to the cell but it does not center it because the buttons have a

<div style="display: flex">

container.

[trianta2]

The solutions above don't work, this issue should be reopened

[FroggDev]

You can try something tricky like

actionsCellStyle:{justifyContent: "center",maxWidth: 90,width: 90}

[lucacattide]

In waiting for the official fix, set it like this:

actionsCellStyle: {
  display: 'flex',
  justifyContent: 'center',
  padding: 16,
  width: '100%'
}

It seems to be lack of 1px on bottom, but better than nothing.
If you find a better one please share it. 😉

[arbaz1006]

Thanks @lucacattide, works fine for me.

[JeffEmery]

I had to add a bit more padding and push the bottom margin...

actionsCellStyle: {
    display: 'flex',
    justifyContent: 'center',
    padding: '24px',
    width: '100%',
    marginBottom: '-1px',
},

[chitgoks]

seems we all have to wait for this fix.

[FroggDev]

As i said in the first post, the problem come from the DIV which contains the buttons.
When actionsCellStyle is set, it is applied to the TD, so it does not change the DIV behavior.

If you want to CENTER the BUTTONS you have to apply a style to the DIV which contains the BUTTONS instead of the TD

You can do it in multiple ways.

Here an exemple using external style

for exemple:

.MuiTable-root tr td:last-child div {
  justify-content: center;
}

Result:

You can see a working demo at:
https://codesandbox.io/s/pedantic-villani-xl7nf?file=/src/styles.css:59-126

Anyway, there should be an option for that in material-table, and for now it is missing.

But if you want to contribute you can try to do a PR with an option that apply "justify-content: center;" to the action DIV container.

Or maybe there is another way and it need to be found.

[FroggDev]

@JeffEmery Thanks.

[royliu007]

finally i got it:

actionsCellStyle:{justifyContent: "center"},

I tried the justifyContent prop. but it is not working, I don't know why,
I used paddingLeft instead to move the icon to the center of the cell.

actionsCellStyle: {
    paddingLeft: '2rem',
}

[FroggDev]

finally i got it:
actionsCellStyle:{justifyContent: "center"},

I tried the justifyContent prop. but it is not working, I don't know why,
I used paddingLeft instead to move the icon to the center of the cell.

actionsCellStyle: {
    paddingLeft: '2rem',
}

Read the post of the 10 Apr then check JeffEmery commit

[zhushenhang]

@FroggDev .MuiTable-root tr td:last-child div {
justify-content: center;
}
thanks,it works for me
but at present, the acticon title is centered by default, how to change it to left, I tried the headerStyle, but it does not work.

[sebaranowski]

[...] but at present, the acticon title is centered by default, how to change it to left, I tried the headerStyle, but it does not work.

Try:

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      '& .MuiTable-root tr th:last-child': {
        textAlign: 'right !important',
        paddingRight: theme.spacing(3),
      }
    },
  }),
);

[abhi-dasgupta]

actionsCellStyle: { margin: "0 auto", display: "flex", flexGrow: "1", justifyContent: "center", // border: "3px solid black", },
in options worked for me