Show HN: A souped-up HTML-based table | Hacker News Reader

Show HN: A souped-up HTML-based table

github.com

34 pointsmmurph21121 comments

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?

For the XML format? Good point that would be better.

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)

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!

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

The Zurb responsive tables solution is the best I've found for souping up basic HTML tables to work across devices. I've got it integrated with Bootstrap too.

http://www.zurb.com/playground/responsive-tables https://github.com/zurb/responsive-tables/

Yup, I'm implementing a variant of this + FilamentGroup's nice show column javascript thing[0]

[0] - http://filamentgroup.com/lab/responsive_design_approach_for_...

Another great grid with these properties and more is the MIT licensed Slickgrid[1] with many example grids[2]

[1]https://github.com/mleibman/SlickGrid/

[2]https://github.com/mleibman/SlickGrid/wiki/Examples

This doesn't seem better than jQuery datatables.

Agree with some other comments on here that this should probably be implemented with standard HTML tables as a fallback. Looks pretty good, though.

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.

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...

Demo in editable form: http://plnkr.co/edit/8uJcHy?p=preview

nice, though like all the others I've seen, it doesn't work when trying it with RTL direction.

Everyone hates ExtJS, many for good reasons, but their grid is better than any other.

I'm wondering what the checkboxes are for in the demo.

Also, why are they checkboxes if I can only select one row? They should be radio buttons. (Cool demo though!)

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.

demoing the "row selected" state, by the look of it.

HTML? http://goo.gl/uavVx

Sorry, but what does this have to do with Galaxy Note II sales?

Reply on news.ycombinator.com