
Show HN: A souped-up HTML-based table - mmurph211
https://github.com/mmurph211/Grid
======
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)

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

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

~~~
latchkey
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/>

~~~
chewxy
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_...](http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/)

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

------
debacle
This doesn't seem better than jQuery datatables.

------
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...](http://stackoverflow.com/questions/3026281/array-sort-sorting-
stability-in-different-browsers)

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

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

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

------
gullfaraz
HTML? <http://goo.gl/uavVx>

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

