Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic 8 vs Metronic 7 Responsive Datatable Suggestion


Good Day KeenTeam Dev,

I'm here to report and to request for Metronic 8 datatable responsive layout to be same as Metronic 7 as per comparison now the Metronic 8 datatable responsive looks like a downgrade compare to Metronic 7.

Kindly refer to the image below for comparison: -
<a href='https://imgur.com/a/fQWaovT'>https://imgur.com/a/fQWaovT</a>

Personally think that the responsive datatable on Metronic 7 is more tidy and properly aligned as compare to Metronic 8 responsive datatable.

Would appreciate if the next update or some fixes can be done could bring back the Metronic 7 responsive datatable layout as an improvement.

Thank you.

Cheers,
Seng


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 (5)


Hi,

Can you check the Responsive Datatable example in the docs here ?



Regards.



Hi Sean,

Unfortunately it's still overlapping another column (starting from 2nd row on responsive collapsed mode) when the table title is long, you may refer to Metronic 7's responsive datatable, as this issue handles properly there.

<a href="https://imgur.com/a/gK7hsp6" >https://imgur.com/a/gK7hsp6</a>

Thank you.



Hi,

Thank you for the details. Noted, we will check it further and try to find a workaround and inform you asap.

Regards.



Hi Sean,

Following up on this matter as it was last reported 3 weeks ago.



Hi,

Could you please edit src/sass/vendors/plugins/_datatables.scss and replace .dtr-details class code with the above version:


// Child details
.dtr-details {
display: table !important;

li {
display: table-row !important;

.dtr-title {
padding-right: 0.75rem;
color: var(--#{$prefix}gray-900);
}

.dtr-data {
color: var(--#{$prefix}gray-700);
}

.dtr-title,
.dtr-data {
font-size: 1rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
display: table-cell !important;
border-bottom: 1px solid var(--#{$prefix}border-color);
}
}
}


Then recompile your assets folder with Gulp or Webpack.

Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.

Regards.


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  :(