A Scrollable Grid With Headers, part 1

Recently, I discovered XUL trees will let you select individual
cells with a single attribute, seltype="cell":


This gave me a few ideas – most notably about my regular expression grid,
which takes up an awful lot of space on the screen. If I could use the tree
to simulate a smaller grid, preferably with scrollbars, I could use much less
real estate. After a quick newsgroup posting, Mark Finkle and Neil Deakin
set me straight – the grid was probably better and more flexible.

Still, trees do one thing grids don’t – they have a fixed header
row. You can scroll the main body all you want – the header row will stay
where it is. Doing the same for a grid was impossible – but if I combined
three grids into a single XBL binding…


Note this demo won’t fully work without Mozilla Firefox 3.1 beta 2. (It
might work on earlier 3.1 builds, but this was the base.) I combined the
scrollable content object model with a healthy dose of CSS styling and new
bindings. In Firefox 3.0.6, it will partially render, but the headers won’t appear.

This opens up a number of possibilities for new widgets. From the

  • Menulist editor: Label, value, description
  • Entity localizations: Entity name, English, other language
  • Regular Expression testing grid
  • A menu list containing namespace URI-prefix pairs
  • A spreadsheet with header rows & columns
  • Logic grid puzzles

With all this said, I think I need your help. Although I wrote this as a general-purpose binding, I hardly think it’s ready for adding to the XUL toolkit. This is proof of concept code, and it has a few shortcomings:

  • Navigation by cells – not by rows or by columns. (Suppose you want to select a whole row? I didn’t implement that.)
  • No specification. No rules on how it’s supposed to behave other than, “Does it look right when I move it?”
  • No tests. I wouldn’t want to check this into Mozilla without some regression tests to make sure it works.
  • Performance. In loading the test page, I noticed today that my more recent changes causes the CPU to spike for a couple seconds. That’s bad, and I don’t know where the bug is.
  • The accessibility people will probably want to add some useful support roles.
  • Selecting a cell throws off the header rows’ & columns’ scrolling.
  • A really bad binding name: gridbox. It was the best I could come up with.

I filed bug 477446 for this. I’d like to see if anyone’s interested in working on this binding, cleaning it up, writing tests for it, and generally making it Toolkit-ready. I think it’s potentially very useful.

Comments are open!

2 thoughts on “A Scrollable Grid With Headers, part 1”

  1. Hi Alex,
    The company I work for sponsored the implementation of the cell selector in trees (https://bugzilla.mozilla.org/show_bug.cgi?id=296040), nice to see someone else have some fun with it!
    Love the static header – we needed that for the same project but I ended up taking another, much more hacky, route to emulate it 🙁
    (From Alex: You’re exactly the sort of person I’m looking for specifications from! You’ve built something like it, and you have experience using your widget. We could combine our resources and get you a better product.)

  2. I wish doing a scrolling HTML tbody was anywhere near this simple.
    Yeah, it looks easy – overflow:auto and padding-right:1em (stupid scrollbar…). Then you realise that doesn’t work in anything but Gecko… 🙁

Comments are closed.