Material-table: How change width of the columns?
Solution 1
If you want to set specific width to each column, I believe that you need to specify the option tableLayout: 'fixed'
. The docs refers to it like this:
tableLayout | auto or fixed | To make columns width algorithm auto or fixed
So your code could be something like this:
const tableColumns = [
{ title: "Lorem ipsum", field: "lorem", width: "10%" }, // fixed column width
{ title: "Name", field: "name", width: "80%" },
{ title: "Custom status", field: "customStatus", width: "10%" }]
<MaterialTable
tableRef={tableRef}
columns={tableColumns}
data={tableData}
onRowClick={(evt, selectedRow) =>
setSelectedRow(selectedRow.tableData.id)
}
title="Remote Data Example"
options={{
rowStyle: rowData => ({
backgroundColor:
selectedRow === rowData.tableData.id ? "#EEE" : "#FFF"
}),
tableLayout: "fixed"
}}
/>
Here is the sandbox.
Good luck!
Solution 2
Use the below style for dynamic columns width and header
columns={[
{
title: 'Create Date',
field: 'create_date',
cellStyle: {
whiteSpace: 'nowrap'
},
...
]}
options={{
headerStyle: {
backgroundColor: '#DEF3FA',
color: 'Black',
whiteSpace: 'nowrap'
},
...
}
Solution 3
What worked very nicely for me
<MaterialTable
title="Users"
options={{
rowStyle: {
overflowWrap: 'break-word'
}
}}
columns={[
{
title: "Name",
field: "name",
width: "4%"
}
]},
data={userData}
/>
Solution 4
None of the solutions posted here worked for me on the latest version of material-table (v1.69.3 at the time of writing), so I created a codesandbox to test different combinations of settings until I found the one that worked best for me.
<MaterialTable
columns={[
{ title: "Name", field: "name" },
{ title: "Email", field: "email" },
{
title: "Status",
field: "status",
cellStyle: {
cellWidth: '15%'
}
}
]}
data={users}
options={{
tableLayout: 'auto'
}}
/>
Solution 5
I have been struggling with the same myself and none of the solutions provided here worked for me so I'll leave mine in case someone finds it helpful. It's a bit hacky but the only one I found to work with my page setup. I even tried pasting the example from docs as it has fixed width on some columns but that wouldn't work on my page either.
<MaterialTable
title="Users"
options={{
rowStyle: {
overflowWrap: 'break-word'
}
}}
columns={[
{
title: "Name",
field: "name",
cellStyle: {
minWidth: 200,
maxWidth: 200
}
}
]},
data={userData}
/>
![Karen](https://i.stack.imgur.com/sdoos.jpg?s=256&g=1)
Karen
Updated on July 26, 2022Comments
-
Karen almost 2 years
I'm using the Material Table library that is officially recommended by Google Material UI as a data table library and having troubles with configuring the width of columns.
Column
width
property is working until our content fits the cell: CodeSandbox Is there any solution to fix that?