Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changing HeaderCellRenderer for all columns on a wide table is very slow #9548

Open
sambu16 opened this issue Jul 20, 2018 · 3 comments

Comments

Projects
None yet
2 participants
@sambu16
Copy link

commented Jul 20, 2018

Given a wide table, setting alternative HeaderCellRenderers for all columns takes a very long time.

I searched on the topic and found a similar report from 4 years ago:
http://qooxdoo-devel.narkive.com/3A0eZg0s/setting-own-table-header-renderers-are-very-slow-in-big-tables

Please try the below code in the playground, it takes ~6 seconds for 50 columns, I have 127 columns in the table I'm trying to view, it takes... a while.

var COL_COUNT = 50;
var ROW_COUNT = 10;


function createRandomRows(rowCount) {
      var rowData = [];
      for (var row = 0; row < rowCount; row++)
      {
        var row1 = [];
        for (var i = 0; i < COL_COUNT; i++) {
          row1.push("Cell " + i + "x" + row);
        }
        rowData.push(row1);
      }
      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();
var headers = [];

for (var i = 0; i < COL_COUNT; i++) {
  headers.push("Column " + i);
}

tableModel.setColumns(headers);
tableModel.setData(createRandomRows(ROW_COUNT));

// make second column editable
tableModel.setColumnEditable(1, true);

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

var tcm = table.getTableColumnModel();

for (var i = 0; i < COL_COUNT; i++) {
  tcm.setHeaderCellRenderer(i, new qx.ui.table.headerrenderer.Icon("icon/16/apps/office-calendar.png", "A date"));
}

win.add(table);


@sambu16

This comment has been minimized.

Copy link
Author

commented Jul 20, 2018

I've actually managed to work around this in the meantime because I'm updating all header renderers. I've used the following method, changing the default renderer before creating the table (code edited from above):

It's probably not best practice but it works for me at the moment.

var COL_COUNT = 150;
var ROW_COUNT = 10;


function createRandomRows(rowCount) {
      var rowData = [];
      for (var row = 0; row < rowCount; row++)
      {
        var row1 = [];
        for (var i = 0; i < COL_COUNT; i++) {
          row1.push("Cell " + i + "x" + row);
        }
        rowData.push(row1);
      }
      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();
var headers = [];

for (var i = 0; i < COL_COUNT; i++) {
  headers.push("Column " + i);
}

tableModel.setColumns(headers);
tableModel.setData(createRandomRows(ROW_COUNT));

// make second column editable
tableModel.setColumnEditable(1, true);

qx.ui.table.columnmodel.Basic.DEFAULT_HEADER_RENDERER = qx.ui.table.headerrenderer.Icon;
try {
  // table
  var table = new qx.ui.table.Table(tableModel).set({
    decorator: null
  });
  
  var tcm = table.getTableColumnModel();
  
  for (var i = 0; i < COL_COUNT; i++) {
    tcm.getHeaderCellRenderer(i).setIconUrl("icon/16/apps/office-calendar.png");
  }
}
finally {
  qx.ui.table.columnmodel.Basic.DEFAULT_HEADER_RENDERER = qx.ui.table.headerrenderer.Default;
}

win.add(table);

@sambu16

This comment has been minimized.

Copy link
Author

commented Jul 20, 2018

Just for reference, the above appeared to work, but it does not create a header renderer for every column, just one renderer used by all columns, so every column would get the same icon (the last one set). In the example code it doesn't matter because they all get set the same, but in a real implementation I want different icons per column. :(

@oetiker

This comment has been minimized.

Copy link
Member

commented Jul 20, 2018

hmmm looking at this in the chrome performance tab I get the impression that there is an extreme amount of room for improvement :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.