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
Replies (5)
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.
Hi,
Can you check the Responsive Datatable example in the docs here ?
<img src="https://i.imgur.com/ltUNwnC.png" alt=""/>
Regards.
