qooxdoo

How to stop table columns from being resizable


I am using the resizeBehavior in my table to set its width as described here: resizeBehavior answer. Is there a way to prevent the table columns from being resizable? On the table model, I found methods for making the columns not sortable and not editable, but so far have not found a way to make them not resizable.


Solution

  • There is no built-in facility to avoid column resizing, but it's fairly easy to implement, as long as you want to avoid both column resizing and column reordering. You do so by creating your own Scroller class, overriding qx.ui.table.pane.Scroller's _onPointermoveHeader method to do nothing, and then specifying during Table instantiation to use your own Scroller class instead of the default.

    Here's a playground example. See the two places that say NOTE::

    // NOTE: define our own scroller without any action on pointer move in header
    qx.Class.define("myScroller",
    {
      extend : qx.ui.table.pane.Scroller,
      members :
      {
        _onPointermoveHeader(e) {
          return;
        }
      }
    });
    
    
    
    function createRandomRows(rowCount) {
      var rowData = [];
      var now = new Date().getTime();
      var dateRange = 400 * 24 * 60 * 60 * 1000; // 400 days
      var nextId = 0;
      for (var row = 0; row < rowCount; row++) {
        var date = new Date(now + Math.random() * dateRange - dateRange / 2);
        rowData.push([ nextId++, Math.random() * 10000, date, (Math.random() > 0.5) ]);
      }
      return rowData;
    }
    
    
    // window
    var win = new qx.ui.window.Window("Table").set({
      layout : new qx.ui.layout.Grow(),
      allowClose: false,
      allowMinimize: false,
      contentPadding: 0
    });
    this.getRoot().add(win);
    win.moveTo(30, 40);
    win.open();
    
    // table model
    var tableModel = new qx.ui.table.model.Simple();
    tableModel.setColumns([ "ID", "A number", "A date", "Boolean" ]);
    tableModel.setData(createRandomRows(1000));
    
    // make second column editable
    tableModel.setColumnEditable(1, true);
    
    // NOTE: using own Scroller instead of default
    var table = new qx.ui.table.Table(
      tableModel,
      {
        tableColumnModel : function(obj) {
          return new qx.ui.table.columnmodel.Resize(obj);
        },
    
        tablePaneScroller : function(obj) {
          return new myScroller(obj);
        }
      });
    table.set({
      decorator: null
    });
    win.add(table);
    
    // Specify the resize behavior
    var tcm = table.getTableColumnModel();
    var resizeBehavior = tcm.getBehavior();
    resizeBehavior.set(0, { width: "1*", minWidth: 40, maxWidth: 80 });
    resizeBehavior.set(1, { width: "50%", minWidth: 100, maxWidth: 320 });
    
    var tcm = table.getTableColumnModel();
    
    // Display a checkbox in column 3
    tcm.setDataCellRenderer(3, new qx.ui.table.cellrenderer.Boolean());
    
    // use a different header renderer
    tcm.setHeaderCellRenderer(2, new qx.ui.table.headerrenderer.Icon("icon/16/apps/office-calendar.png", "A date"));
    

    If you want to avoid column resizing but leave column reordering in place, you'll need to copy the entire qx.ui.table.pane.Scroller class as your replacement Scroller, because it uses private variable __resizeColumn for determining whether the drag action is to resize the column or to reorder it, so you can't simply override the _onPointermoveHeader method without making other changes to the class.