Search code examples
javascriptfontsfont-sizeqooxdoo

How to change font size in qooxdoo table rows?

How to change font size of data in qooxdoo table qx.ui.table.Table?

Solution

  • The method for adjusting the font of the table is in the Row Renderer (typically qx.ui.table.rowrenderer.Default) and is called _renderFont. It's protected, but probably shouldn't be.

    The default font that's used is the one called default in the current theme. You can specify a different font for the Row Renderer to use, by selecting a different font from your theme:

    table
  .getDataRowRenderer()
  ._renderFont(qx.theme.manager.Font.getInstance().resolve("myTableFont"));

    or if you don't want to modify the theme for it, explicitly, such as:

    table
  .getDataRowRenderer()
  ._renderFont(qx.bom.Font.fromString("20px Arial"));

    Alternatives:

    You could patch qx.ui.table.cellrenderer.Abstract, but that's a lot more destructive than calling a protected method. As I said, that _renderFont method really should be public. In fact, I would definitely entertain a pull request that added a public method in qx.ui.table.rowrenderer.Default called something like setFont, that called _renderFont, or moved the logic from _renderFont into setFont and then defined _renderFont as an alias for setFont. (I wouldn't remove _renderFont entirely as it has possibly been overridden by peoples' row renderers that extend qx.ui.table.rowrenderer.Default.

    Another alternative, is to extend qx.ui.table.rowrenderer.Default and then call table.setDataRowRenderer passing an instance of your extended row renderer.