How to make the table responsive for differently structured table layout

Guru Arivazhagan

Link to test case:https://datatables.net/extensions/rowreorder/examples/initialisation/responsive
Debugger code (debug.datatables.net): i get the error like columns not matching
Error messages shown:
Description of problem: I want to have the datatable to have the structure as given in the picture. All the details of the customer products should listed within a single customer.Here i have used rowspan to show a visual appeareance that the customer has the following products in the order.I want like the example link output but here the tricky part is i need to show it under each product.I need some insight to solve this case

kthorngren

i have used rowspan to show a visual appeareance

Datatables doesn't support colspan nor rowspan in the tbody. See the HTML requirements doc for details.

Have you looked at the RowGroup extension ? You can group by the customer name and display the associated rows under the grouping row.

Not sure Responsive will do what you want but Child Detail Rows might work.

Kevin

Guru Arivazhagan

Hey Kevin, Thanks for the guidance I have been searching for a while. Do you suggest me to have the customer details and order Id as the row head and other details as row group here. That is good I will try it. But There any other possible ways to Maintain the layout and group under the product using Datatable?

kthorngren

It's hard to say specifically what to do without seeing your data structure and how you are currently building the table.

Do you suggest me to have the customer details and order Id as the row head and other details as row group here

Yes, use rowGroup.startRender to display the ID and customer info. This example uses rowGroup.endRender but the technique is the same for rowGroup.startRender.

other possible ways to Maintain the layout and group under the product using Datatable?

You could use Child Detail Rows where the first row is a standard Datatable row with the ID and customer info. The additional customer product rows can be displayed using return $('<tr>...</tr><tr>...</tr>').toArray(); to line up the child row data. For example:
https://live.datatables.net/gupazase/354/edit

This example shows how the child rows can be automatically opened when Datatables initializes:
https://live.datatables.net/qolevune/204/edit

Combining these two examples could allow for displaying the above table. Again it depends on your data structure. Can you post a test case showing an example of what you currently have?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Guru Arivazhagan

Kevin I think we can make use of the your example of the row end render with the example I have referred it uses the data location to group in this example I need to integrate both like the customer info and the order id should be in the row group start renderer.So I will get both responsive and the information right

Guru Arivazhagan

I have come up like this

kthorngren

Looks good!

Kevin

Guru Arivazhagan

In this I have to keep a print option where I need the exact same layout is it possible in any chance Kevin

allan

The print export that DataTables / Buttons offers doesn't support row grouping at this time.

Allan

Guru Arivazhagan

Thanks, Alan for the reply. I think I need to come up with a custom function to print the data

allan

Can you just print the page the user is viewing? It doesn't look like there is anything else on it. Paging might be an issue, but you could have a button that will set the page length to -1 to show all records.

Allan

Guru Arivazhagan

Thanks for the guidance,Allan