Hide Rows in GXT Grid With CSS: Developer Guide

  • 4/5/2011
  • One-minute read

Legacy Sencha GXT 2.x grids do not expose a native setVisible(false) on rows. You need to provide a custom GridViewConfig that toggles CSS classes based on the record data.

Implementation Steps

  1. Implement GridViewConfig<ModelData>:
    grid.getView().setViewConfig(new GridViewConfig<ModelData>() {
    @Override
    public String getRowStyle(ModelData model, int rowIndex, ListStore<ModelData> store) {
        return model.get("hidden") == Boolean.TRUE ? "gxt-row-hidden" : "";
    }
});
  2. Update the underlying store to set the hidden flag for rows you want to hide.
  3. Add the CSS rule to your module stylesheet:
    .gxt-row-hidden {
    display: none;
}

Usage Notes

  • Because the row is removed from layout flow, keyboard navigation skips hidden entries—confirm this aligns with accessibility requirements.
  • For rows that should remain focusable but visually subdued, switch to visibility: hidden; or apply an opacity class instead of display: none;.
  • GXT 3.x+ introduces row-level filtering APIs; consider upgrading rather than maintaining custom CSS in new projects.
javagwtdevelopmentui