How do you set the width for a column? Am I missing something? How are people adjusting column sizes?
It would be great if it was a simple as =>
var columns = [
{
title: 'FirstName',
field: 'firstName',
width: 100
},
{
title: 'LastName',
field: 'lastName',
width: 100
}
];
ThomLaGreca
All 13 comments
You can set the minWidth of a column in cellStyle/headerStyle like so:
{ title: "First name", field: "firstName", headerStyle: {minWidth: 100}, cellStyle: {minWidth: 100} }
I've seen other people do the same using width in place of minWidth, but I just could not get that to work for some reason.
hanabezdrob
on 29 Aug 2019
@mbrn hi, would you please consider this feature? A convenient way to control the width of column is common in use cases and other table libraries.
zhaoyao91
on 12 Dec 2019
I have tried multiple approaches to put minWidth, maxWidth, width in 'px' and also tried to render custom HTML to override the width but no luck. Is there any solution to adjust the width of the columns. I have tried with setting the tableLayout to 'fixed' with other permutations too. Any suggestion would be helpful. Thanks in advance
Mani-EastMinds
on 25 Feb 2020
Looks like certain properties are indeed overwritten on the spread of headerStyle
<TableCell
padding="none"
key="key-selection-column"
className={this.props.classes.header}
style={{ ...this.props.headerStyle, width: selectionWidth }}
>
No matter what you pass as width, it will always be overwritten.
@mbrn this appears to be tied to work you did in a7ee2d4, would a PR that checks for the presence of a tableLayout: fixed, and then if one exists, checks for a headerStyle be welcome here?
tmartin2089
on 21 Mar 2020
@mbrn
Hi. Is this fixed?
tableLayout: "fixed" seems not working neither.
adsee42
on 8 Jun 2020
I have the same issue either. Tried tableLayout fixed, but it does not work
reginaochotzki
on 13 Jul 2020
How do you set the width for a column? Am I missing something? How are people adjusting column sizes?
It would be great if it was a simple as =>
var columns = [ { title: 'FirstName', field: 'firstName', width: 100 }, { title: 'LastName', field: 'lastName', width: 100 } ];
This is already implemented: { title: 'First Name', field: 'first_name', width: 100 },
Domino987
on 13 Jul 2020
Ah thx. Works
reginaochotzki
on 13 Jul 2020
@Domino987 width should be added to the documentation.
michaelGregoire
on 23 Aug 2020
@michaelGregoire you are right. Can you open a PR to fix this?
Domino987
on 23 Aug 2020
Sure. This repo (https://github.com/mbrn/material-table.com), correct?
michaelGregoire
on 23 Aug 2020
Yes that correct
Domino987
on 23 Aug 2020
michaelGregoire
on 23 Aug 2020
Related issues
bohrsty
·
3Comments
roseak
·
3Comments
timrchavez
·
3Comments
diegosps
·
3Comments
kfirshahar
·
3Comments
Most helpful comment
You can set the minWidth of a column in cellStyle/headerStyle like so:
{ title: "First name", field: "firstName", headerStyle: {minWidth: 100}, cellStyle: {minWidth: 100} }I've seen other people do the same using width in place of minWidth, but I just could not get that to work for some reason.