'React material-table column resizable

I want to know how to make material-table column resize in react. Please help me. I've tried the following code


        options={{
         sorting:false,
         resizable:true,

Solution 1:^[1]

There is no resize path in material-ui table. you can use material-ui Data grid -(Demo Link): https://material-ui.com/components/data-grid/demo/#data-grid-demo.

You can rewrite the existing material-ui table style like :

.MuiTableHead-root .MuiTableRow-root .MuiTableCell-head {
    font-weight: bold;
    resize: horizontal;
    overflow-x: overlay;
    overflow-y: hidden;
    border-right: 1px solid;
}

Solution 2:^[2]

Material UI Data grid column resize is not working.

      [
      { field: 'id', header: 'id'},
      { field: 'count', header: 'Count', type: 'number'},
      { field: 'total', header: 'Total', type: 'number'}
       ];

resize should be true by default

Solution 3:^[3]

I have found specifying the cell style assists in manipulation of your column sizes

   {
        field: 'Resizing',
        title: 'Column Width',
        cellStyle: {
          whiteSpace: 'nowrap',
          width: '20%',
        },
   },

Solution 4:^[4]

Material UI now is not supported but you can put a div on the right edge of the header of each cell to resize its column. Here is my solution Resize columns table Material-ui

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shahnad
Solution 2	Rahulraj Selvaraj
Solution 3	Berico Sili
Solution 4

'React material-table column resizable

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]