Is there a function that can change the order of table columns?

Question

I had data in a fixed column order. However, sometimes I want to change the order of the columns displayed in a table without modifying the data. Thank you for you help.

Answer 1

There are actually two methods which will do it. Both are methods of the "table column model". The first method is setColumnsOrder which accepts an array, where you provide the desired column location for every column. The second is moveColumn, which moves a specified column from one visible position to another. In the following example, which can be plugged into the playground, the table is built initially with four columns. The timers at the end reorder the columns after one second, using setColumnsOrder, and then after two additional seconds, using moveColumn.

Note that setColumnsOrder is idempotent and current-order-independent. Calling it with a specified array will always order the columns as specified. moveColumn, on the other hand, moves whatever column happens to be at the specified first parameter position, so the same parameters called when the order of visible columns is different, will produce different results.

Here's the example that you can plug into the playground to see it in action. The relevant order-changing lines are in the setTimeout calls at the end:

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);

// table
var table = new qx.ui.table.Table(tableModel).set({
  decorator: null
});
win.add(table);

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"));

setTimeout(
  () =>
  {
    let tcm = table.getTableColumnModel();
    tcm.setColumnsOrder([0, 2, 1, 3]);
  },
  1000);
  
setTimeout(
  () =>
  {
    let tcm = table.getTableColumnModel();
    tcm.moveColumn(2, 1);
  },
  3000);