5 ms·

It's a nice start to something that looks pretty useful. There are some things to consider though: What if you have headings as the first column in each row? W

by rcfox 13y ago

It's a nice start to something that looks pretty useful. There are some things to consider though: What if you have headings as the first column in each row? What if you have headings in the first column, and the first row? Also, what is the use case for data overrides? In my opinion, it completely defeats the purpose when your intention is to take the contents of the table.

chalst 13y ago
The code does not try to be clever: var getHeadings = function(table) { var firstRow = table.find("tr:first").first(); return notNull(opts.headings) ? opts.headings : rowValues(firstRow); }; The code is also going to fall down if you have things like wide/high cells. But HTML tables are so flexible and so routinely abused, I guess the problem is too hard to be solved robustly with any generality.
- JangoSteve 13y ago
  You could do what they're suggesting without being too clever. For instance, our dynatable plugin does it this way: table.find('thead tr').children('th,td') But it could easily be something like: var headings = table.find('thead th'); if (!headings.length) headings = table.find('th'); if (!headings.length) headings = table.find('tr:first td');
  - terrahawkes 13y ago
    The HTML specification's algorithm for determining the applicable headers for a table cell might be useful: http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#header-and-data-cell-semantics http://www.whatwg.org/specs/web-apps/current-work/multipage/... This was developed with reference to a corpus of real web tables.
    - JangoSteve 13y ago
      I was actually really excited to read that, thinking I was going to implement it straight away in our plugin. But it seems to require scanning up the table from the current cell, for each cell, to get its header, and it also requires knowing the rendered height of the cell, which I don't fully understand. I'm sure if I actually sat down and wrote it out, it'd make more sense. At any rate, it seems like trying to implement their algorithm verbatim in javascript would be pretty slow for large tables. Maybe it's better to just use it for inspiration. Also, their algorithm seems to come at if from the perspective of, "I have a cell, what is its header?" It would be more efficient in reverse, if we could instead answering the question, "I have a header, what are its cells?". What dynatable does now is sort of a hybrid approach (we find the header cells, make a dictionary, then loop through the rows, assigning each cell value to its attribute in the dictionary). The issue is, according to that article, any table cell could potentially be a header cell, not just those in the header row or in th elements.
- lightswitch05 13y ago
  Your more than welcome to submit a pull request for any new features you'd like me to add/support. As for my code. I wrote it in a day for a specific page. After seeing people with similar needs on stack-overflow I decided to clean it up a bit and make it a plugin, never really spent a whole lot of time on it. I think my filterable plugin deserves more attention this this one does (http://lightswitch05.github.io/filterable http://lightswitch05.github.io/filterable)
JangoSteve 13y ago
I've written a plugin that actually does this. I haven't had time to write the documentation yet, but our Dynatable plugin [1] has been in use for almost 2 years now. It's an alternative to the Datatables plugin. All its logic works on the set of data in JSON, so it first translates an html table into JSON, then vice versa. The cool thing about this process is, you can write your own translate step to easily work with e.g. JSON from an Ajax request. And you can write your own render step to work with e.g. a styled list instead of a table. By default, the translate step translates an html table to a JSON object, naming the attributes by the table column headings (underscore format by default, but can be hyphenated, snake-case, or lower-case too). [1] http://os.alfajango.com/dynatable http://os.alfajango.com/dynatable EDIT: If anyone is interested, the part of the plugin that essentially does the "table to JSON" part is the getFromTable function here: https://github.com/JangoSteve/jquery-dynatable/blob/master/jquery.dynatable.js#L962 https://github.com/JangoSteve/jquery-dynatable/blob/master/j... Other useful things this function does is, determines whether the data is a string, number, boolean, or date (or other user-defined type) to do proper column sorting logic, and much more. EDIT 2: Also, I can't speak for the author of the table-to-json plugin, but for dynatable, it's useful to have data-override values for the cells for cases like when you have a date in "Jan 1, 2013" format, which is meaningless when doing filter or sorting operations on the JSON; i.e. you could use the data-override to populate the proper date format so JS knows how to process it.
- ebiester 13y ago
  I'm curious -- what do you think the tradeoffs are for Dynatable versus Datatables?
bdg 13y ago
> There are some things to consider though To add to your list, there is of course that old chestnut of "it doesn't support the full tables spec" (which in all fairness is quite complex).

by rcfox 13y ago

chalst 13y ago

The code does not try to be clever: var getHeadings = function(table) { var firstRow = table.find("tr:first").first(); return notNull(opts.headings) ? opts.headings : rowValues(firstRow); }; The code is also going to fall down if you have things like wide/high cells. But HTML tables are so flexible and so routinely abused, I guess the problem is too hard to be solved robustly with any generality.

JangoSteve 13y ago
You could do what they're suggesting without being too clever. For instance, our dynatable plugin does it this way: table.find('thead tr').children('th,td') But it could easily be something like: var headings = table.find('thead th'); if (!headings.length) headings = table.find('th'); if (!headings.length) headings = table.find('tr:first td');
- terrahawkes 13y ago
  The HTML specification's algorithm for determining the applicable headers for a table cell might be useful: http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#header-and-data-cell-semantics http://www.whatwg.org/specs/web-apps/current-work/multipage/... This was developed with reference to a corpus of real web tables.
  - JangoSteve 13y ago
    I was actually really excited to read that, thinking I was going to implement it straight away in our plugin. But it seems to require scanning up the table from the current cell, for each cell, to get its header, and it also requires knowing the rendered height of the cell, which I don't fully understand. I'm sure if I actually sat down and wrote it out, it'd make more sense. At any rate, it seems like trying to implement their algorithm verbatim in javascript would be pretty slow for large tables. Maybe it's better to just use it for inspiration. Also, their algorithm seems to come at if from the perspective of, "I have a cell, what is its header?" It would be more efficient in reverse, if we could instead answering the question, "I have a header, what are its cells?". What dynatable does now is sort of a hybrid approach (we find the header cells, make a dictionary, then loop through the rows, assigning each cell value to its attribute in the dictionary). The issue is, according to that article, any table cell could potentially be a header cell, not just those in the header row or in th elements.
lightswitch05 13y ago
Your more than welcome to submit a pull request for any new features you'd like me to add/support. As for my code. I wrote it in a day for a specific page. After seeing people with similar needs on stack-overflow I decided to clean it up a bit and make it a plugin, never really spent a whole lot of time on it. I think my filterable plugin deserves more attention this this one does (http://lightswitch05.github.io/filterable http://lightswitch05.github.io/filterable)

JangoSteve 13y ago

I've written a plugin that actually does this. I haven't had time to write the documentation yet, but our Dynatable plugin [1] has been in use for almost 2 years now. It's an alternative to the Datatables plugin. All its logic works on the set of data in JSON, so it first translates an html table into JSON, then vice versa. The cool thing about this process is, you can write your own translate step to easily work with e.g. JSON from an Ajax request. And you can write your own render step to work with e.g. a styled list instead of a table. By default, the translate step translates an html table to a JSON object, naming the attributes by the table column headings (underscore format by default, but can be hyphenated, snake-case, or lower-case too). [1] http://os.alfajango.com/dynatable http://os.alfajango.com/dynatable EDIT: If anyone is interested, the part of the plugin that essentially does the "table to JSON" part is the getFromTable function here: https://github.com/JangoSteve/jquery-dynatable/blob/master/jquery.dynatable.js#L962 https://github.com/JangoSteve/jquery-dynatable/blob/master/j... Other useful things this function does is, determines whether the data is a string, number, boolean, or date (or other user-defined type) to do proper column sorting logic, and much more. EDIT 2: Also, I can't speak for the author of the table-to-json plugin, but for dynatable, it's useful to have data-override values for the cells for cases like when you have a date in "Jan 1, 2013" format, which is meaningless when doing filter or sorting operations on the JSON; i.e. you could use the data-override to populate the proper date format so JS knows how to process it.

ebiester 13y ago
I'm curious -- what do you think the tradeoffs are for Dynatable versus Datatables?

bdg 13y ago

> There are some things to consider though To add to your list, there is of course that old chestnut of "it doesn't support the full tables spec" (which in all fairness is quite complex).