How to make vue table responsive?

[abdullahonden]

Hi there,

I'm using your great work in my last vue based project and now I need to adapt my work for mobile pages. Actually I've search in your documentation and in this repo but couldn't find any solution on showing the table in mobile devices and that surprised me. Isn't vue-table mobile friendly or am I missing something here?

Thank you!

[ratiw]

This is actually depend on which CSS framework you're using. Vuetable is designed to be CSS framework agnostic (hopefully) and underneath it is just HTML table. If your CSS framework supports responsive table, you should be able to use that CSS framework specific to make it table responsive, which is mostly adding appropriate classes to the table.

In Vuetable, you can assigned those CSS classes in table specific options in css prop.

[viewplatgh]

I have this question too. I am using bootstrap. When the table just has 4 or 5 columns, the responsive feature basically works; However, when column number goes large, and with long text cells, the table content will get out of the table, even on large screen device, not to mention on mobile. I believe this can be a big topic in documentation.

[jeitnier]

In that case then you should probably be considering hiding certain columns on mobile. Do you really need all the data or just some? If you try to cram things in a small space it will be unreadable. You can’t really have it all.

[suits-at]

I am looking for a vue datatable component which I can use in my current project, and this one looks very promising. But I also need the table to work on mobile devices. My first idea was to use a detail row to hide some data on small devices, but still having the ability to watch them if needed. But unfortunately there is no implementation for this use case yet. Some custom coding might help... Or are there any plans for implementing such behaviour anytime soon @ratiw?

[ratiw]

@suits-at Please open a new issue and link to this issue instead. I'm more than willing to read any discussion about responsiveness. But due to limited knowledge on this topic, I'm looking forward to more detail explanation and sample code on how you would make HTML table responsive with the CSS framework of your choice. As I see it, this is really CSS framework dependent, but if you could make HTML table responsive using media query and CSS classes, it should be possible for Vuetable to also work responsively as well. I'm just not sure how you guys do it with your CSS framework of choice.

[ian-pinto-vamaship]

Create responsive tables by wrapping <vuetable> tag in a <div class="table-responsive"> tag to make the vuetable scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in the table.

[suits-at]

Thanks @ian-pinto-vamaship for the hint, but this only works with bootstrap, due to "table-responsive" is a bootstrap specific class. Besides of this, I dont like this solution. I have therefore opened a new issue (#438) where I try to descripe, which solution I think would be the best.

[piyushbeli]

Probably this link can help you https://magenic.com/thinking/making-tables-responsive-for-mobile-devices As vue-table-2 ultimately using HTML table it can be handled with pure CSS. Card view which is explained in this tutorial is something standard for the table row on the mobile device.