Use fixedColumns option with auto cell width

[dnjsgur0629]

I wanted the cell to automatically grow to fit the length of the long text.
I struggled because I couldn't achieve it in the general way.
And I was able to achieve it in the following hacky way.


I used live demo of docs. 👉 fixed columns examples docs

function LeftFixedColumn() {
  const data = [
  {
    id: 1,
    firstName: 11,
    lastName: 'loooooooooong text'
  }
  ]
  const columns = [
    { field: 'id', title: 'Id', width: 79},
    { field: 'firstName', title: 'First Name', width: 79},
    { 
      field: 'lastName',
      title: 'Last Name',
      cellStyle: (value, rowData) => ({
        background: 'skyblue', whiteSpace: 'nowrap'
      }) 
    },
    { field: 'lastName', title: 'Last Name' },
    { field: 'lastName', title: 'Last Name' },
    { field: 'lastName', title: 'Last Name' },
  ];
  return (
    <MaterialTable
      data={data}
      columns={columns}
      icons={TABLE_ICONS}
      options={{
        fixedColumns: { left: 2 },
      }}
      sx= {{
        tableLayout: 'auto !important'
      }}
    />
  );
}

I forcibly overriden table-layout property to auto(by !important), and gave 'appropriate value' for the width of the column to be fixed.
the 'appropriate value' had to be found by experimenting with this and that.


and I get this:



But It's hacky...
So I want a generic way to achieve this.