UI GRID Maintain full width even after user resize column

Question

I have the following grid :

I am trying to avoid this problem :

So I made a function in order to disable the resize of the last row.

  const disableLastColumnResize = () => {
    let size = vm.gridOptions['columnDefs'].length - 1;
    vm.gridOptions['columnDefs'].forEach(col => {
        col.enableColumnResizing = (col.order != size);
    })
  }

It works fine but there is still a way to brake it - >

Resize a column that is not the last column (ex:gender) Move that resized column and set it as last column Now resize the other two column.

I believe this is because, if I resize a column, it will have an assigned width, when I move it on last column and resize the other 2, every column will have an assigned width, and therefor I can have a smaller size than the container.

I want to be able to make the last column always fit the remaining space. The user can resize as pleased, but the total width will always fit the container. Is it possible?

I think the easiest solution would be to change one of the defined columns to have width '*', and set enableColumnResizing: false for that column. No matter how you move columns around or resize them, this column would always make the grid fill the entire container by resizing automatically. Also, you wouldn't need all the extra complicated logic disabling resizing etc. — Remko, Mar 14 '19 at 05:46

UI GRID Maintain full width even after user resize column

0 Answers0