Material-table: Set individual widths on columns

[raph90]

Is your feature request related to a problem? Please describe.
I've tried to use the headerStyle prop on my columns to make them specific widths. For example, I'd like to have one column be 1rem across, and for the others to fill the space automatically. I'm fairly sure this was how the library was working, but now when I use it the widths on the columns is automatically set to 100% / number of columns.

Describe the solution you'd like
I'd like the headerStyle width to override the 100 % / column numbers if possible, or at least for it to be factored in somehow.

Describe alternatives you've considered

Additional context
Add any other context or screenshots about the feature request here.

[raph90]

To anyone wondering about this - the docs specify to use headerStyle and cellStyle in columns. This is incorrect. You should set the "width" value on your column (outside of headerStyle and cellStyle) with a pixel value (number). This isn't reflected in the documentation.

[stojanovskid]

Additional info: the 'width' prop works, but in some cases there will be a need to change the table css to 'table-layout: fixed' for the changes to take place.

[kgrupp]

To anyone wondering about this - the docs specify to use headerStyle and cellStyle in columns. This is incorrect. You should set the "width" value on your column (outside of headerStyle and cellStyle) with a pixel value (number). This isn't reflected in the documentation.

Thanks, it even works with percent values like '50%'.

[ifndefdeadmau5]

@raph90 Are you using it with typescript?

[yuniwahuni]

To anyone wondering about this - the docs specify to use headerStyle and cellStyle in columns. This is incorrect. You should set the "width" value on your column (outside of headerStyle and cellStyle) with a pixel value (number). This isn't reflected in the documentation.

Thans a lot.. I had suffered this issue several days...

[sthenault]

for those using typescript, you may add

declare module "material-table" {
    export interface Column<RowData extends object> {
        width?: string;
    }
}

to your code until typescript definition of material-table properly defines 'width' by itself. Notice I used "string" because I'm using % definition, you may have to change this.

[vgough]

Another option is to pin at v1.57.0, which seems to work a little better. Under 1.57.0, the header width is coming through as "calc((100% - ()) / 5)". With 1.57.2 it comes through as "calc((100% - (0px)) / 5)", which is apparently worse. Using 1.57.0, columns can be sized via cellStyle.

[TroySchmidt]

@sthenault That override doesn't work when you set other strings that are enum values like type: 'boolean' because then that gets confused as string instead.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.