Responsive via column merging

Vaielab

I'm working with DataTables and want to achieve a specific behavior when the screen size changes. Instead of just hiding columns on smaller screens and displaying the information as a child row, I want to merge certain columns and have the flexibility to set the resolution where this merging starts.

Here's my desired outcome:

• On a full-size screen, I want to display the table normally, like in this example: https://live.datatables.net/finokoxa/1/edit
• On a medium-sized screen, I want to merge some columns, both data and title has been merged (e.g., Name, Position, and Office) as shown here: https://live.datatables.net/pacucusi/1/edit
• On the smallest screens, I want the data to be displayed in a stacked format, like this: https://live.datatables.net/felowiqi/1/edit

Is it possible to achieve this using DataTables?
Additionally, can DataTables adapt dynamically if the screen is resized?

kthorngren

I want to merge some columns

Responsive won't be able to do this. I'm not sure how this would work as merging the columns would impact the table width. If the Position and Office columns were to be hidden then merging them won't help much. I may be missing what you are wanting to do with this requirement.

I want the data to be displayed in a stacked format,

Possibly the childRowImmediate option is what you are looking for as shown in this example. Maybe it will help with requirement number 2 since responsive doesn't have an option to merge columns.

Kevin

Vaielab

I tried childRowImmediate, but at best it will show a single cols with a row, and then some child with label: value (other than the first cols), or at worst, it will show a few cols and then the label: value.
Both way, I see no option to change the design / html of the cols depending of the screen width.

If you look at the medium size screen, in the first cols I have 3 data + some static text / html.
And in the small size screen I have some html in it.

So depending on the screen size, not only I want to manipulate where the data is displayed, but also how is it displayed (with some extra markup)

allan

I think what you are looking for might actually be possible, but I suspect it will involve a fair amount of duplication. Possibly even a customer renderer for the data.

Responsive has a set of custom classes which can be used to tell it which modes a column should be shown in. So you could have a set of desktop columns, a set of merged tablet columns and a set of mobile columns.

Not ideal, and I see where you are coming from (similar to Bootstrap's responsive breakpoints), but that isn't how Responsive was designed. It is primarily designed to remove columns until the table fits into the space available.

Allan

Vaielab

My first thought was to use custom classes as you suggested. However, generating columns for each screen (potentially 3-4 different screens) while handling thousands of rows might impact performance. This concern arises even if the columns are hidden since they are still being generated, potentially slowing down the system.

My next idea was to create a function that initializes the shared configuration and then, depending on the screen size, defines different column configurations. Here’s an example of my code: https://live.datatables.net/hocibedo/1/edit. However, upon resizing, I find that not only do I have to destroy the DataTable, but I also need to remove all thead and tbody elements. I am wondering if there is a better way to reinitialize the DataTable with a different configuration.

kthorngren

However, upon resizing, I find that not only do I have to destroy the DataTable, but I also need to remove all thead and tbody elements. I am wondering if there is a better way to reinitialize the DataTable with a different configuration.

No that is the only way to change the column configuration of the Datatable.

I would look at creating hidden columns for the medium and small screens. Initialize the Datatable with the full screen config. Create an event handler for window.onresize and in the event handler show and hide the appropriate columns with columns().visible(). I think this would be more efficient than destroying and reinitializing on the screen size change. For example:
https://live.datatables.net/nohacige/1/edit

Note the use of columns.data to define individual columns.

Also you could add something to keep track of the previous screen size and if both the previous and updated are in the same window size then skip calling columns().visible().

Kevin