Resizable column in material-table react

Question

I have been working on material-table for quite a while and I have looked for different options where I can provide functionality of drag the column to adjust width but to no success.

I googled quite a lot on how I can achieve this functionality in react but to no success.

I was able to find other tables but all my modules are built on material-table.

Drag and drop table in angular

I have provided link for drag and drop in angular but I'm working on react and I couldn't find any thing on material-table for react.

There is no code included here, as I couldn't find anything on it. Only static widths are available as it was no use for this condition.

Let me know on how can I incorporate provided example into react or if there is any working example or whether it is possible or not.

So I found in their GitHub page there is a mention of resizable column by selecting true in options, but its not working for me yet.

Resizable column material table official merial-table github

Material-table does not provide option to make column widths resizable out of the box. — Payal Verma
So is there any way where I can achieve this. Any thing that you could suggest. Also there is mention of columnResizable in their github - demo, do you have any idea what it does? — Siva Pradhan
react-table.tanstack.com/docs/examples/column-resizing you can check this react table is another option you can choose. — Payal Verma

jet11x jet11x · Accepted Answer · 2021-04-30T06:59:57

Material-table does now provide this capability. You need to use the following two options:

tableLayout of 'fixed', as need to turn off the default auto width setting
columnResizable of true

from demo.js under demo directory in material-table

<MaterialTable
  ...
  options={{
    tableLayout: "fixed",
    columnResizable: true
  }}
/>

In current implementation you can shrink the column so you lose the ability to further change the columns width.

Resizable column in material-table react

1 Answers