Show HN: A souped-up HTML-based table (opens in new tab)

(github.com)

34 pointsmmurph21113y ago21 comments

21 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?

mmurph211OP13y ago

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

TazeTSchnitzel13y 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)

polskibus13y 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/... or Devexpress. Don't follow their ugly implementation though!

chewxy13y 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

latchkey13y 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 https://github.com/zurb/responsive-tables/

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

RobAley13y 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/

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

debacle13y ago

This doesn't seem better than jQuery datatables.

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

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

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

gbadman13y ago

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

furbo13y ago

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

elchief13y ago

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

hayksaakian13y ago

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

matthuggins13y ago

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

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

Trezoid13y ago

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

gullfaraz13y ago

HTML? http://goo.gl/uavVx

superchink13y ago

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

j / k navigate · click thread line to collapse

21 comments

TazeTSchnitzel13y 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?

mmurph211OP13y ago

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

TazeTSchnitzel13y 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)

polskibus13y ago

chewxy13y ago

Nice, but is it responsive?

latchkey13y 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 https://github.com/zurb/responsive-tables/

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

RobAley13y 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/

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

debacle13y ago

This doesn't seem better than jQuery datatables.

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

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

mmurph211OP13y ago

For sure, the invert part is not great though.

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

gbadman13y ago

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

furbo13y ago

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

elchief13y ago

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

hayksaakian13y ago

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

matthuggins13y ago

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

mmurph211OP13y ago

Trezoid13y ago

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

gullfaraz13y ago

HTML? http://goo.gl/uavVx

superchink13y ago

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

j / k navigate · click thread line to collapse