9

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?

Karen
  • 1,249
  • 4
  • 23
  • 46
  • Please read [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) and [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) and edit your question accordingly. – isAif Jun 23 '20 at 17:01
  • I've added a link to the sandbox. It is not a reproducible example? – Karen Jun 23 '20 at 18:42
  • 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. – isAif Jun 23 '20 at 18:49

6 Answers6

17

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!

NicoE
  • 4,373
  • 3
  • 18
  • 33
7

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'
          },
           ...
         }
Pritam
  • 361
  • 3
  • 5
3

What worked very nicely for me

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

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'
  }}
/>
Fappaz
  • 3,033
  • 3
  • 28
  • 39
1

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}
/>
Jacas
  • 331
  • 6
  • 11
0

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

sudesh sampath
  • 23
  • 4