Rowspan on data

Rowspan on data

DailSoftwareDailSoftware Posts: 11Questions: 1Answers: 0
edited May 2020 in Free community support

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    The installation doc states this about rowspan in the tbody:

    Please also note that while DataTables supports colspan and rowspan in the table's header and footer, they are not supported in the table's tbody and must not be present.

    The RowGroup extension might do what you want. However the RowGroup docs state this about the export buttons:

    No support for the export options of the Buttons extension - the grouping information is just ignored

    Kevin

  • DailSoftwareDailSoftware Posts: 11Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    Another option might be using Child Detail Rows. You could default to showing the row details. You could eliminate the details-control column 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 the neighbours array 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

  • DailSoftwareDailSoftware Posts: 11Questions: 1Answers: 0

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

  • DailSoftwareDailSoftware Posts: 11Questions: 1Answers: 0

    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

  • DailSoftwareDailSoftware Posts: 11Questions: 1Answers: 0
    edited May 2020

    I broke the snippet and could not fix it.

    Here's a working one:

    http://live.datatables.net/forekuxu/1/edit

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    It does seem like your code is looping the data multiple times. How about this:
    http://live.datatables.net/tafucodu/1/edit

    Kevin

  • DailSoftwareDailSoftware Posts: 11Questions: 1Answers: 0
    edited May 2020

    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

  • DailSoftwareDailSoftware Posts: 11Questions: 1Answers: 0

    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

  • DailSoftwareDailSoftware Posts: 11Questions: 1Answers: 0

    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.

  • DailSoftwareDailSoftware Posts: 11Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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.render and you only need to loop through the houses in the child format function.

    Good job putting this together.

    Kevin

  • DailSoftwareDailSoftware Posts: 11Questions: 1Answers: 0

    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

This discussion has been closed.