Multiple Header/Rows for a Record

johnswang

Currently using DataTables 1.10 and love the features. Now my customers are requesting that a screen with lots of columns be fitted into one screen. So seems like I need to create two rows for a record.

So how can I create headers with two roles that are sortable and searchable (if possible) and to be able to display the data in two rows. Thanks in advance!

kthorngren

Datatables doesn't natively support this type of layout. You could do some custom programming and get close. You can use Child detail rows to show the second row. You can have the child rows automatically open on initialization and stay open, ie, and not have the plus and minus signs for opening and closing.

The easiest way to handle sorting and searching of all the data including what you show in the child row is to have hidden columns, using columns.visible, to allow builtin Datatables functions to work. You can have two headers and will need to use orderCellsTop to have the top header sort the Datatable rows. You will need to create a custom click event handler for the second header row to sort the hidden data (shown in the child detail rows). Then use the order() API to order the appropriate hidden columns.

If you want to pursue this type of solution I suggest you start with a test case that we can help you with. Build something that has a sample of your data and dat structure.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

There are other, simpler, options like Responsive or scrollX that may work. You might not see all the columns at once but it won't take custom coding.

Kevin