Responsive table with swipe functionality

san_gan

Hi

I have requirements of responsive columns be enabled or hidden, by swiping to left or right . The swiping can be achieved using left or right button or on touch devices simply using gestures.

I looked at the Responsive.display.childRow and documentation at https://datatables.net/reference/option/responsive.details.renderer including 2.0.0 extension. I don't seem to get answer. They seem to focus on how to render the hidden columns upon click of a particular row. My requirements is enabling / disabling columns across all rows.

Any advice/help appreciated, Ganesan

allan

Hi Ganesan,

I'm afraid I don't quite understand your question. You want to know how to enable / disable columns? In what regard? Their visibility?

Allan

san_gan

Hi Allan
That's right. This use case is for a banking application where there is a need to show tables in desktop as well as mobile devices such as phones/tablets.

Let's say there is a table with col1,col2..col10.
Smaller devices such as phones may show col1,col2,col3 but auto-hide the rest. Then there are 2 navigation buttons. If user clicks right navigation, show col1,col3,col4. Hide col2 and the rest. Next right click will show col1,col4,col5. Hide col2,col3 and the rest..
Left navigation will be reverse functionality.
Use may click left/right navigation buttons or use left or right swipe in phones/tablets.

In desk top or tablets, the initial view may show say col1..col5. But behavior of navigation buttons sames as mobile to bring new collumn from right while hiding the column from left. The requirement is similar to something like filament table swipe functionality.
-Ganesan

allan

You could use columns().visible() to set the column visibility. If you need the swipe action to change the column visibility then you could use a custom event listener to detect the swipe and then call the API method as required. That is not something that is built into DataTables.

Allan

san_gan

Ok. Let me figure this out and keep you posted

san_gan

Hi Allan
I have tried using the columns().visible api.There is a problem of finding which all the columns were hidden as a result of responsiveness.

The example I tried was with a table with responsive:true set.Let's say there are 5 columns and all are shown for desktop device. But as we shrink the browser size, it hides the right most column. At this stage, the values returned by columns().visible() are "true" for all 5 columns. This is NOT what I expected. I expect the columns shown as "true" and hidden as "false". When I looked at the style, it is set to display:none because of responsiveness which is correct. Is there any api call to detect that the columns are hidden because of responsiveness rather than looking at style?

san_gan

Hi Allan,
Please check the test case
http://live.datatables.net/zeyeceni/6/

If you look at the console, although columns are hidden because of responsiveness, the visible api still shows as true

san_gan

You have to click on the Right Swipe button with your browser size shrunk and watch the console

san_gan

Hi Allan
Can you help on the response how to get the hidden or visible status of the columns during the view port size change - Ganesan

allan

There currently isn't an API method to get the column visibility as controlled by the Responsive extension (an oversight I will correct) - you could use responsive-resize to get that information though.

Allan