Tabulator: Mobile responsiveness

[AndrewHutcheson]

Any chance you were planning on incorporating a mobile responsive display? e.g. like datatables - converting tr and td elements to ul and li

Other than that I love the product, much easier than others.

[aswzen]

Up :+1:

[olifolkerd]

Hey Andrew.

That is already on the road map, It should hopefully be in one of the first couple of releases next year.

[AndrewHutcheson]

Awesome, thanks!

On Dec 6, 2016 22:27, "Oli Folkerd" [e-mail] wrote:

Hey Andrew.

That is already on the road map, It should hopefully be in one of the
first couple of releases next year.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/121#issuecomment-265352624,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXSpPY9q0g-9FJ3YGFcNz7BhpsELrNQGks5rFjWcgaJpZM4LGE5D
.

[olifolkerd]

Hey,

Version 2.11 of Tabulator now comes with responsive layouts!

Responsive layouts can be enabled by setting the repsonsiveLayout option to true. You can even alter how each column is handled using the responsive property in the column definition object:

$("#example-table").tabulator({
    responsiveLayout:true, // enable responsive layouts
    columns:[ //set column definitions for imported table data
        {title:"Name", field:"name", responsive:0}, // this column wil never be hidden
        {title:"Age", field:"age" , responsive:3}, // hidden first
        {title:"Gender", field:"gender" }, // hidden fifth
        {title:"Height", field:"height" , responsive:2}, // hidden third
        {title:"Favourite Color", field:"color" , responsive:2}, // hidden second
        {title:"Date of Birth", field:"dob" }, // hidden fourth
    ],
});

Full documentation can be found here

Let me know if there are any tweaks you think it needs.

Cheers

Oli

[AndrewHutcheson]

If I understand correctly this only hides columns. How do you show the hidden columns in the new smaller viewport size?

In other words, the hidden columns should instead appear [on mouseover | on highlight | on click] as an expandable dropdown. I.e. change the hidden tr->td to a visible ul->li elements. That way the hidden data can still be edited on mobile.

Is this in the roadmap or am I missing this functionality in the current documentation?
Thanks!

[olifolkerd]

Hey,

Im not sure i follow, The columns are only hidden when there is no space to display them so there would be no space to put them, if you want the columns to always be visible and just have a scrollbar to access them then dont enable responsive mode as this is the default behaviour.

You can still programatically change a columns value even when it is not visible.

There are no tr->td elements in Tabulator, because it offers considerably more functionality than a standard HTML table it is bulit from specifically classed div elements, you should not be trying to directly manipulate the DOM within the table, because it is a virtual DOM it is redrawn every time you scroll so any changes not made through tabulator will likely be reset.

If could be a bit more specific about the functionality you are after i would be happy to explain how to achieve it,. but i would ask that you raise this as a separate issue to make it easier for others to find.

Interms of this click for popup, you could achieve this by binding an event to the rowClick callback, and use the row.getData() function to get the data for the row:

$("#example-table").tabulator({
        rowClick:function(e, row){
        //e - the click event object
        //row - row component

        var data = row.getData();
    },
});

You could then use this data to construct the popup element you want.

Let me know if that helps

Cheers

Oli

[AndrewHutcheson]

Not a popup so much as inline.

Yes, there is no more room horizontally. But you do have infinite room vertically to display the remaining horizontal elements.

For example, take a look at the bootstrap styling in this example: https://datatables.net/extensions/responsive/examples/styling/bootstrap.html

View the page on wide/desktop and a narrow/mobile window.

On a wide enough screen you see everything. On a smaller/mobile screen, the additional columns are hidden. However, the checkbox-to-expand then apprears, having moved the hidden columns below.

Does that make sense?

[vipera7]

This feature would be really cool!

[AndrewHutcheson]

The new responsive layout "collapsed list" option is what I was trying to describe. Thanks for adding it!