Efficient per-row icon class

[jsonn]

The topic of grids with many rows and per-row action buttons came up on IRC. The attached module+ template is used in my applications for this purpose. It is low overhead compared to using CellWidgets so it easily scales to 100s of rows.

For use:

  modules: [
    ...,
    declare(IconButtonColumn, {
      name: 'MyAction',
      label: 'Do something funny on this row',
      iconClass: 'funnyIcon',
      onClick: function(item) {
         alert('Called for item ' + item);
      }
    })
  ]

with something like the following in your stylesheet:

.funnyIcon {
  background-image: url('icons/funny-icon.png');
  background-repeat: no-repeat;
  width: 22px;
  height: 22px;
  text-align: center;
}

If you want to use a different icon size, adjust the width attribute of the module and the CSS rule.