Rowspan on data
Rowspan on data
DailSoftware
Posts: 11Questions: 1Answers: 0
I need to know if there's possible to use something similar to rowspan based on dynamic data.
This is a simple HTML example of what I want:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_rowspan
(except that the "shared" rows will be the left-most
The object populating the table would be something like:
{name: "Alice", id: "12345678", neighbours: {[
{name: "Bob", id: "12345678"},
{name: "Charlie", id: "12345678"},
]}}
I'd like to display the following rows:
|name |id | neighbour_name |
What I'm doing right now is passing the whole neighbour list as data for neighbour_name column and make some rendering to make it look fine in a single cell, however, I've been asked to use a multi-row approach.
Also, changes needs to be reflected when exporting, at least when exporting to Excel.
Is this somehow possible? Shall I tell'em it is too much trouble to be worth it?
Answers
The installation doc states this about rowspan in the
tbody:The RowGroup extension might do what you want. However the RowGroup docs state this about the export buttons:
Kevin
Thanks, however, that doesn't suit the absurd visualization limitations I've been forced with.
did not know that extension, though, and it will for sure be usefull in projects that don't require exportation and with less restrictive interface requeriments.
Another option might be using Child Detail Rows. You could default to showing the row details. You could eliminate the
details-controlcolumn and always leave the child rows open. The formatting of the child rows would be up to you. You could show the first element in theneighboursarray in the Datatable row then the others in the child rows. Use the$().toArray()notation to align the columns. See this thread for more details. Here is a simple example just duplicating the row in the child:http://live.datatables.net/mufozafa/1/edit
The export buttons don't know about the child rows so it would be up to you to export that data. I built this example that shows how it can be done.
Kevin
I never thought about using Child Details row in such way, but it seems REALLY promising. for this scenario, if I can convince the UI designer to accept a minor change in the web visualization (originally they wanted the "common" data to be in something like a row-span, and it's being a pain to explain him that our dynamic table library just doesn't acept that. He keeps comming with his static html example showing "how easy it is". Maybe I can work some CSS magic to make that look more consistent when stripped, and mabe even making the coimmon cell look as "fused" (although, not verticallyt centered as they wanted (which I think is unconfortable, but I've zero taste for beautifull interfaces) xD
Your export example is just what I needed. Thank you very much. I'm not a JS guy, but I'll try to extract a complete example from my final working code to help others.
You saved my day
I've made my first approach (haven't done export yet.
This is how it looks like:
http://live.datatables.net/fagohoka/1/edit
Any ideas for improvements? (Specially efficiency). That render on columns is troubling me, does not look like the best approach
I broke the snippet and could not fix it.
Here's a working one:
http://live.datatables.net/forekuxu/1/edit
It does seem like your code is looping the data multiple times. How about this:
http://live.datatables.net/tafucodu/1/edit
Kevin
I see your point, however, I need flats and mansions to share the same row, when possible (to compres the data vertically as much as possible). In your example, "3rd Avenue, 444" is duplicated, because it is the second house BUT it is the first flat, so it appears in the original row. Same happend with "1st avenue 222" The problem here is that flats and mansions (in the real code we have 4 types) are not allways ordered in the same positions, so I just went with a worst-case-scenario and made two naive loops.
I'll give the original loops a second thought and post a more efficient version.
BTW: I've almost succesfully completed the XML export too (also inefficient). Will post a working version when completed
NOTE: I've added another house into the data of my previosly posted bin, so it better shows the current behaviour when compressing houses and flats in the same line. This is the new url: http://live.datatables.net/hugexude/1/edit
Here it is, a very basic working version of the export, based on your sources and the bin that I previously posted:
http://live.datatables.net/kegubuxe/2/edit
By the way, is there a way or a callback that would allow me to add the odd/even classes to the child rows? (when I do it manually they do not change when table get reordered or filtered). Same goes for the special sorting_n classes of cells.
I think I broke the previous posted example xD
Copies it here. Must make an account to avoid this http://live.datatables.net/cohayape/1/edit
The Excel export looks good!
Not sure if you want help with reducing the loops but this might help:
http://live.datatables.net/tafucodu/2/edit
This may or may not be better but it loops through your original data structure, in reformatData()
, to rebuild thehousesarray into an object withmansionandflatarrays. Then it pushes the house onto the appropriate array. Its called in the-option data` option.You won't need to loop through the data in
columns.renderand you only need to loop through thehousesin the child format function.Good job putting this together.
Kevin
Managed to get the odd/even working with CSS selectors for siblings.
Working example:
http://live.datatables.net/galuqaje/1/edit
I've still now clue about how to make the column order styling on child cells