Material-table: Changing style (column width, cell width, etc.)

[brittanywang]

• [x] Is there another way to change the column/cell styles?
  I tried what was suggested in issue (#261) as in:

columns=
{ title: 'Name', field: 'name',
     cellStyle: {
       width: 20,
       maxWidth: 20
     },
     headerStyle: {
       width:20,
       maxWidth: 20
     }
    },

but there are no changes to the width of the columns. I also tried changing the width and maxWidth:1 to see if there were any changes and there weren't:

• [x] After fixing the size of the column, is there a way to not make the top chart expanded with the Detail Panel is shown?
  

• [x] Is there a way to change the font for the data displayed (for consistency with my headers) as well? I tried doing:

data={[
        { cField: 'Subject', result: this.state.subject, headerStyle: { fontSize: 20}},
        { cField: 'Location', result: this.state.location, headerStyle: { fontSize: 20}}
]}

This is a pretty heavy post. Thank you in advance!

[mbrn]

Hi @brittanywang ,

I will check this case asap.

[timrchavez]

cellStyle works for me but headerStyle does not appear to be working. When I set width: '100%' in headerStyle, I expect it to apply width: 100% to the header for this column, but I do not believe that's happening.

[orestes22]

Hi, Im not sure if was fixed this, but Im using Material-Table version 1.24

and it works for me. Maybe Im not understanding very well the doubt. (forgive me if that is the case)

Please try to change the style like this:

headerStyle: {width: '50%', backgroundColor: '#ddd', height: 10, textAlign:'center'}

I beleive that only works with inline style, using JS for the style,

I tried others way, and doesnt works, Im not sure way, I hope @mbrn can find the solutions.

I hope this comment help you

Best Regards

[ShawTim]

i face the same issue. setting width in headerStyle doesnt work for me. but cellStyle does.

[mbrn]

Actually, material-ui table components do not let to change width of columns. It set all columns' width automatically. But i will try to broke it with css.

[orestes22]

Hi, please check this in order to analyze why is working for me https://codesandbox.io/s/8y77w4yr40

Maybe you have to import this HOC from material-ui to your class and wrap the class name at the end with that, like this:

import { withStyles } from "@material-ui/core/styles";
import stylepage from "stylepage";

class App extende React.Component
.
.
export default withI18next(["home", "common"])(withStyles(stylespage)(App ));

I hope this works now for you

But it will be nice it could be more easy to modify

Best Regards

[brittanywang]

I figured out how to address sub-issue 2...

• [x] (not having the top chart expanded with the Detail Panel is shown).

It is entirely dependent on the data generated. One of my data fields happens to be really, really long so the width is adjusted accordingly. To fix this, I adjusted the css overflow.

Hoping someone can find a way to

• [ ] change the font for the generated data

[mbrn]

@brittanywang

You can change fonts with css too,

[symnetry]

i face the same issue, one of my data is so long
but can set cellstyle:{whiteSpace:'nowrap'}
and it works for me

[hasankhalid]

Is there anyway to perhaps change the padding properties in material ui's TableCell component? I want to decrease the width of the column which contains only a number but using cellStyle:{width: '75px'} won't work.

[ambr89]

Hi @hasankhalid to change padding size, I've set

<MaterialTable
     columns={[
       { title: 'Nome', field: 'name', cellStyle:{ padding: '5px'} }, // change cell padding
       { title: 'Valido ', field: 'isValid', cellStyle:{padding: '5px'} }
    ]}
     data={ ... my data ...}
     title="My Title"
     options={{
        toolbar: false,
        paging: false,
        headerStyle:{backgroundColor:'red', padding: '5px'}, //change header padding
         //cellStyle:{ padding: '5px'} here not work for me
     }}
/> 

Anyway, I've the problem that I can't set exactly width.

Have you solve this problem?

[mbrn]

Material-ui table components uses auto layout. So columns are being auto width. Currently i cant change them.

[ambr89]

Thanks!

[vladimanaev]

@mbrn, is there any plan on supporting column width adjustments?

When having table with many (10-15) columns and with text of a sentence the table becomes very ugly and not readable.

Thanks!

[FoxTM4]

You can place something like this in your css file and it will make long rows not ugly.
Probably will have to change numbers but this works for me.
.MuiTableCell-alignLeft{
width: 10px;
max-width: 32em;
text-overflow: inherit;
overflow: scroll;
}

[conerye]

Is it possible to change the width of the column that contains the detail panel expansion icon? I would like to set it to a set width, which is much narrower than it defaults to.

[bableves]

Is it possible to change the width of the column that contains the detail panel expansion icon? I would like to set it to a set width, which is much narrower than it defaults to.

I need that too. Any update on this one?

[dalisalvador]

@mbrn @symnetry @vladimanaev The best way I found to change the width of the columns and potentially style of the cells/cell is the following:

 columns={[
          ...state.columns.map(data => {
              return {
                field: data.field,
                title: data.title,
                render: rowData => 
                      (<div style={{minWidth: data.field === "columnToChange" ? "250px" : null, paddingLeft: "10px"}}>  {rowData[data.field]}  </div>)
              };
            })
       ]}

Basically renders a div with the desired width, and autolayout will do the rest.
Hope that makes sense.

[midoalone]

@dalisalvador your solutions works perfect, thanks

[vnanaware]

How to make fixed( sticky header) in Material-table

[rakeshlanjewar]

To break word to next line please use

{ title: "Remark", field: "remark", cellStyle: { wordBreak: 'break-all' } }

It will automatically wrap the text to next line and does not break the styling.

Tested on chrome 👍 with material-ui 🥇

[binyominc]

@dalisalvador thanks! Just to extend this (probably already obvious), if you want to just change the width of one column, you can use that same approach

[thanhttb]

Just downgrade to 1.53.0. It works for me though.
npm install [email protected]

[cristiantobol]

Use width as attribute of columns instead of cellStyle.

columns={[
          { 
             width: 100,
             title: "Details", 
             field: "url", 
          },
          { title: "Name", field: "name" },
]}

[anggar85]

Use width as attribute of columns instead of cellStyle.

columns={[
          { 
             width: 100,
             title: "Details", 
             field: "url", 
          },
          { title: "Name", field: "name" },
]}

This solve the problem, thank you!

[ethanIncentify]

I've tried adding the width attribute to the columns array, but this isn't supported for typescript. Any workarounds for types?

[psykzz]

@ethanIncentify you could use headerStyle: { width: <width> },.
This worked for me.

[ethanIncentify]

@psykzz I've tried this, but this runs into the same problem. @cristiantobol 's solution works however typescript complains.

[juliosilvacwb]

I had the same problem, but I solved as

cellStyle: {
width: 300,
minWidth: 300
},
headerStyle: {
width: 300,
minWidth: 300
},
...

If you want to down size use maxWidth, but if you want to up size use minWidth

[zacheryph]

I use the following in my column and it seems to work. It's a bit of a _hidden_ solution cause width is not documented under the column properties.

{ width: '1%', cellStyle: { whiteSpace: 'nowrap' }, ... }

[MoiseScalzo]

@mbrn please add width property as TypeScript prop.

[superjose]

@cristiantobol solution works!!

For TypeScript apply this hack:

columns={[
          { 
             ...(true && ({ width: 20 } as object)),
             title: "Details", 
             field: "url", 
          },
          { title: "Name", field: "name" },
]}

We use a spread operator inside an object to dynamically set it. We set it to true to always include it and cast it to object (any works).

[dyaacov]

cellStyle: {
width: 300,
minWidth: 300
},
headerStyle: {
width: 300,
minWidth: 300
},

I always get minimum of 150, no matter what I try.
please help

[piekczyk]

the problem is also with enabling detailed panel and the same time have a hidden column. The calculation of width: calc(100% - 0px) / (number of columns) take into account also the hidden one which ruins styling.

edit:
ok I found out that if you set in single column width to 0 so:
{ title: 'Title', field: 'fieldName', width: '0px', }

it actually calculate the number of the columns correctly

[jttaynton]

In a previous version (1.56.1) the columns of the table would attempt to fill the space based on the data present. In the latest version (1.57.2) it is calculating the width based on number of columns. Is there any way to set this to work like the previous version? That worked well for us. The auto-width layout does not. It looks like it is applying the width calc inline on each cell. Is there any way to turn this off to the old way?

update:
not sure why I tried this or why it works but I added width=null to the first column and it removes the column width auto-calc across the whole table

[nirawat]

so good with sample code.

{
title: t("item_sku_name_thai"),
field: "name_thai",
width: 250,
cellStyle: { whiteSpace: "nowrap" },
}

[mschluper]

Setting the width explicitly helped solve a performance problem for me.

In m-table-cell.js width is calculated like so
var width = CommonValues.reducePercentsInCalc(_this.props.columnDef.tableData.width, _this.props.scrollWidth);
and with multiple rows and columns (say over 7) this froze Chrome.

[DewangS]

I honestly don't know why this issue was closed as it's still an issue in v1.67 though I've managed to find a workaround. Not happy that the minWidth, maxWidth are not respected .. just add whiteSpace: 'nowrap' and paddingLeft\Right. as per below sample

const columns = [
  { field: "requestID", 
  title: "Request No.", 
  searchable: false,
    cellStyle: {
        width: 80,
        minWidth: 50
      },
      headerStyle: {
        width: 80,
        minWidth: 80, 
        whiteSpace: 'nowrap',
        paddingLeft: '2em',
        paddingRight: '2em'
      }
 },
  { field: "applicantID", 
  title: "Staff No.", 
  searchable: true,
    cellStyle: {
        width: 50,
        minWidth: 50,
      },
      headerStyle: {
        width: 50,
        minWidth: 50,
        whiteSpace: 'nowrap',
        paddingLeft: '2em',
        paddingRight: '2em'
      }  },
  { field: "name", 
  title: "Name",  
  searchable: false,
    cellStyle: {
        width: 250,
        minWidth: 250,
      },
      headerStyle: {
        width: 250,
        minWidth: 250,
        whiteSpace: 'nowrap',
        paddingLeft: '1em',
        paddingRight: '17em'
      }},
]

[akshaykumar771]

I am using version ^1.69.2 and I can set the width of the column but after i refresh the page everything resets and the style does not apply.

{ title: "First Name", field: "first_name", width: 100}
Any solutions?

[capsule5]

with the latest version it works like that:
width: null, cellStyle: { width: 200, },

thanks @jttaynton

[pumppi]

Is it possible to make example in docs? It looks like this is need feature and everyone is looking for the solution. Found out it from this issue. Thanks :)

[iokaravas]

with the latest version it works like that:
width: null, cellStyle: { width: 200, },

thanks @jttaynton

This seems to break my build when not running the development server...