3

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,
displacedtexan
  • 976
  • 8
  • 17
Dream
  • 45
  • 1
  • 1
  • 5
  • 2
    welcome to SO, please provide more lines of your code as you example, so we can see what your issue is – rsz Feb 26 '20 at 19:04
  • From my understanding material-table doesn't support resizing, are you sure you are using material-table or some other table package? All the material-table props are found here https://material-table.com/#/docs/all-props – Ant Feb 26 '20 at 23:42
  • I've checked all props in material-table.com but can't finde column resizable props. are you sure that material table is not allowed to make column resizable – Dream Feb 27 '20 at 04:31
  • Based on the link I sent, it seems that it is not possible to make columns resizable. If that is a feature that has to be there, maybe have a look at some of the alternatives, such as (Material-ui-datatables)[https://www.material-ui-datatables.com/] which has a resizable column feature – Ant Mar 01 '20 at 23:13
  • Look at this example on how to make table columns resizable as well as sortable in react: https://codesandbox.io/s/k9n3y82wov?file=/Utils.js. Material-UI does not provide option to make column widths resizable out of the box. – connect2Coder Jun 30 '20 at 22:35

5 Answers5

7

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

Truong Nguyen
  • 71
  • 1
  • 2
3

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.

Or

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;
}
Shahnad S
  • 983
  • 10
  • 17
3

this feature is included under the paid DATAGRID-PRO

Khmiri Mohamed Khalil
  • 86
  • 4
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

Rahulraj Selvaraj
  • 21
  • 1
2

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

   {
        field: 'Resizing',
        title: 'Column Width',
        cellStyle: {
          whiteSpace: 'nowrap',
          width: '20%',
        },
   },
Berico Sili
  • 29
  • 7