CODEWITHSUNDEEP
javascriptreactjsmaterial-uimaterial-table
Karen
Karen

Reputation: 1429

Material-table: How change width of the columns?

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?

Upvotes: 12

Views: 46206

Answers (6)

sudesh sampath
sudesh sampath

Reputation: 21

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

Upvotes: 0

stephen kilonzo
stephen kilonzo

Reputation: 107

What worked very nicely for me

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

Upvotes: 3

Jacas
Jacas

Reputation: 371

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

Upvotes: 1

Fappaz
Fappaz

Reputation: 3656

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

Upvotes: 2

NicoE
NicoE

Reputation: 4873

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!

Upvotes: 19

Pritam
Pritam

Reputation: 381

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

Upvotes: 9

Related Questions