How to fix text-align, font size and actions column width on react Material Table?

Question

I have a MaterialTable in a React application and I need to align center the text on columns, fix the font size for the text on the columns. Also need to fix the width for the Actions column because the space between the actions column and the first data column seems more than desirable.

I have tried:

cellStyle: {text-align:'center', font-size='8'},
headerStyle: {text-align:'center', font-size='8'}

I need to align center the text on columns, set the font size of text and fix the width for the actions column on a React Material Table

score 1 · Answer 1 · edited Jun 23 '19 at 09:07

1

Try this:

display: flex;
justify-content:center;
flex-direction: column;

edited Jun 23 '19 at 09:07

Cato Minor

2,992
3
29
42

answered Jun 23 '19 at 01:07

Maark

11
3

Thanks Maark but didn't work on the React Material Table – Juan Cortés Jun 23 '19 at 01:12

score 1 · Answer 2 · answered Jun 23 '19 at 03:31

1

When you are using JSX you need to change your css properties and remove the - and add the capital for the next word for example:

cellStyle: {text-align:'center', font-size='8'}
headerStyle: {text-align:'center', font-size='8'}

should become

cellStyle: {textAlign:'center', fontSize='8'}
headerStyle: {textAlign:'center', fontSize='8'}

answered Jun 23 '19 at 03:31

Cristóbal Soto

91
5

Thanks, but didnt work. I have this:

– Juan Cortés Jun 24 '19 at 05:15
could you put your code in a sandbox to try to help you – Cristóbal Soto Jun 26 '19 at 15:11
of course Cristobal Soto, Im newbie to React, javascript, I have this code https://codesandbox.io/s/elated-https-dtqh0 but dont show on the codesandbox browser – Juan Cortés Jun 27 '19 at 13:23

How to fix text-align, font size and actions column width on react Material Table?

2 Answers2