Material-table: How change width of the columns?

Question

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?

Caliper

Please read How to create a Minimal, Reproducible Example and How do I ask a good question? and edit your question accordingly. – Pelops

I've added a link to the sandbox. It is not a reproducible example? – Caliper

You should copy the code into the question itself. Not everyone can access external sites, and the links may break over time. - from "how do I ask a good question". Doing this will help people in answering your question. – Pelops

Answer 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!

Heeler

can we do it using px? ex 10px – Ostracon

@Ostracon yes you can set width: "100px" in the column definition. Also works with rem units. – Heeler

Making tableLayout: "Auto" worked for me :) – Hogfish

Answer 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'
          },
           ...
         }

Truehearted

Answer 3

What worked very nicely for me

<MaterialTable
  title="Users"
  options={{
    rowStyle: {
      overflowWrap: 'break-word'
    }
  }}
  columns={[
    { 
      title: "Name",
      field: "name",
      width: "4%"
    }
  ]},
  data={userData}
/>

Anyways

worked for me, too. thanks – Aldana

Answer 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'
  }}
/>

Ocrea

Answer 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}
/>

Frontogenesis

Answer 6

Material-ui version above 4.11.4 not supported, use versions as follows

@material-ui/core = 4.11.4 material-table=1.69.0

this will solve the problem

Blouson