Vue Metronic 8 datatables card view
Hi,
Is there a way for the KT datatable to convert automatically to card view on mobile viewport?
I see veutify has it working pretty much the way I would need it to work.
https://vuetifyjs.com/en/components/data-tables/#usage
Not sure if adding veutify to the metronic 8 project will break a lot of stuff - I do see it broke any page that I had KT Datatables.
Thanks,
Chris
Replies (4)
Looks like vuetify 3 doesnt have that feature yet 
Maybe someone has some CSS that could transform the data table depending on viewport? I really would like it to be dynamic rather than build the same thing twice: datatable and card pages
Hi Chris,
I think you can achieve this by setting float CSS property for each cell.
th, td{
position:relative;
float:left;
clear:both;
width:100%;
text-align:left
}Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thanks Lauris. It didnt seem to do anything but I think I will go with a different approach of showing grid vs cards like this:
isMobile is calculated based on windows size
<div v-if="isMobile" class="row g-6 g-xl-9">
<!--begin::Col-->
<div
v-for="(item, index) in tableData"
:key="index"
class="col-md-6 col-xl-4"
>
<KTCard :eventData="item"></KTCard>
</div>
<!--end::Col-->
</div>Hi Chis,
Thank you for your feedback.
The styles which I shared above should convert the table to a list if you used them correctly.
Glad to hear that you already found an alternative solution.
Please don't hesitate to reach out if you need anything more from us.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
