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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

Looks like vuetify 3 doesnt have that feature yet sad

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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(