HN Explorer

21 comments

[ 2.7 ms ] story [ 64.8 ms ] thread
TazeTSchnitzel
Why the special grid/row/cell tags and special data inpits? Why not just use a vanilla HTML table, then you would at least have graceful degradation?
mmurph211
For the XML format? Good point that would be better.
TazeTSchnitzel
Yeah. What I'm thinking is, instead of loading external XML, you could just have something like:

  <table id=fancy-table>
      <thead>
          <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
      </thead>
      <tbody>
          <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>
      </tbody>
  </table>

  <script>
    new Grid("fancyTable", {
      srcType : "html",
      srcData : '#fancy-table',
      allowGridResize : true, 
      allowColumnResize : true, 
      allowClientSideSorting : true, 
      allowSelections : true, 
      allowMultipleSelections : true, 
      showSelectionColumn : true, 
      fixedCols : 1
    });
  </script>
(This way, if JS is unsupported/the JS code breaks/JS is disabled/slow connection/etc., you'll still see the data)
hayksaakian
I'm wondering what the checkboxes are for in the demo.
matthuggins
Also, why are they checkboxes if I can only select one row? They should be radio buttons. (Cool demo though!)
mmurph211
Thanks! The checkboxes are there for show, no hooks on them in the demo. You can select multiple rows using the checkboxes or the control or shift keys. If the option allowMultipleSelections is false then the checkboxes become radio buttons.
Trezoid
demoing the "row selected" state, by the look of it.
chucknelson
Agree with some other comments on here that this should probably be implemented with standard HTML tables as a fallback. Looks pretty good, though.
VikingCoder
The sort is not stable. When I sort by W, I end up with Colts and then Rams. When I sort by L, at the bottom, I end up with Rams and then Colts.

When I sort by T, since they're all 0, I'd expect nothing to change, but the whole list inverts...

In general, it's very nice. I agree with TazeTSchnitzel's comment that it'd be awesome to have it pull data from a table, so that there's a fallback.

mmurph211
Thanks for checking it out. The sort used in the code is Javascript's native sort method which is not guaranteed to be stable and varies by browser (Chrome vs Firefox for example sort differently in the W/L/T columns - try clicking W then T in each browser.) Kind of annoying really.

For sure, the invert part is not great though.

Edit: Found more info: http://stackoverflow.com/questions/3026281/array-sort-sortin...

polskibus
Grids are the holy grail of corporate web programming. As a person that had to work with a few grid components, I can tell you that it is lacking lots of features to be considered mature. For example: editable cells, tree grid mode, r-click menu, grouping, nested rows and columns, etc. I do like the looks though. Have you tried to compare your grid's performance against a standard table-based grid (cross-browser of course) for large number of cells? For a list of functionalities expected from a grid, have a look of Telerik http://demos.telerik.com/aspnet-ajax/grid/examples/overview/... or Devexpress. Don't follow their ugly implementation though!
debacle
This doesn't seem better than jQuery datatables.
furbo
nice, though like all the others I've seen, it doesn't work when trying it with RTL direction.
elchief
Everyone hates ExtJS, many for good reasons, but their grid is better than any other.
chewxy
Nice, but is it responsive?

Trolling aside, I have to echo Taze's point: why not vanila HTML table? I'm asking since this is actually relevant to my interests and my latest project uses tables a lot. I don't think I'd use this yet because of the whole graceful degradation/progressive enhancement thing