4 ms·

Show HN: A souped-up HTML-based table

34 points by mmurph211 14y ago

TazeTSchnitzel 14y ago
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 14y ago
  For the XML format? Good point that would be better.
  - TazeTSchnitzel 14y ago
    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 14y ago
I'm wondering what the checkboxes are for in the demo.
- matthuggins 14y ago
  Also, why are they checkboxes if I can only select one row? They should be radio buttons. (Cool demo though!)
  - mmurph211 14y ago
    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 14y ago
  demoing the "row selected" state, by the look of it.
gbadman 14y ago
Demo in editable form: http://plnkr.co/edit/8uJcHy?p=preview http://plnkr.co/edit/8uJcHy?p=preview
gullfaraz 14y ago
HTML? http://goo.gl/uavVx http://goo.gl/uavVx
- superchink 14y ago
  Sorry, but what does this have to do with Galaxy Note II sales?
chucknelson 14y ago
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 14y ago
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 14y ago
  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-sorting-stability-in-different-browsers http://stackoverflow.com/questions/3026281/array-sort-sortin...
polskibus 14y ago
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/defaultcs.aspx http://demos.telerik.com/aspnet-ajax/grid/examples/overview/... or Devexpress. Don't follow their ugly implementation though!
debacle 14y ago
This doesn't seem better than jQuery datatables.
furbo 14y ago
nice, though like all the others I've seen, it doesn't work when trying it with RTL direction.
elchief 14y ago
Everyone hates ExtJS, many for good reasons, but their grid is better than any other.
chewxy 14y ago
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
- latchkey 14y ago
  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 http://www.zurb.com/playground/responsive-tables https://github.com/zurb/responsive-tables/ https://github.com/zurb/responsive-tables/
  - chewxy 14y ago
    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_complex_multicolumn_data_tables/ http://filamentgroup.com/lab/responsive_design_approach_for_...
RobAley 14y ago
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/ https://github.com/mleibman/SlickGrid/ [2]https://github.com/mleibman/SlickGrid/wiki/Examples https://github.com/mleibman/SlickGrid/wiki/Examples

34 points by mmurph211 14y ago

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 14y ago
For the XML format? Good point that would be better.
- TazeTSchnitzel 14y ago
  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 14y ago

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

matthuggins 14y ago
Also, why are they checkboxes if I can only select one row? They should be radio buttons. (Cool demo though!)
- mmurph211 14y ago
  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 14y ago
demoing the "row selected" state, by the look of it.

gbadman 14y ago

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

gullfaraz 14y ago

HTML? http://goo.gl/uavVx http://goo.gl/uavVx

superchink 14y ago
Sorry, but what does this have to do with Galaxy Note II sales?

chucknelson 14y ago

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 14y ago

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 14y ago
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-sorting-stability-in-different-browsers http://stackoverflow.com/questions/3026281/array-sort-sortin...

polskibus 14y ago

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/defaultcs.aspx http://demos.telerik.com/aspnet-ajax/grid/examples/overview/... or Devexpress. Don't follow their ugly implementation though!

debacle 14y ago

This doesn't seem better than jQuery datatables.

furbo 14y ago

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

elchief 14y ago

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

chewxy 14y ago

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

latchkey 14y ago
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 http://www.zurb.com/playground/responsive-tables https://github.com/zurb/responsive-tables/ https://github.com/zurb/responsive-tables/
- chewxy 14y ago
  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_complex_multicolumn_data_tables/ http://filamentgroup.com/lab/responsive_design_approach_for_...

RobAley 14y ago

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/ https://github.com/mleibman/SlickGrid/ [2]https://github.com/mleibman/SlickGrid/wiki/Examples https://github.com/mleibman/SlickGrid/wiki/Examples