Nested Datatable example
You have an example of sub Datatable in the below link
https://preview.keenthemes.com/html/metronic/docs/general/datatables/subtable
However, this sub Datatable is rendered from the existing html and there is NO HEADER.
I implemented a nested Datatable WITH HEADER based on your approach and got a css issue with the header. To be more specific,
heightline-heightth are 0Could you help to fix this issue as well as giving a demo for this?
Thanks
Replies (9)
Hi,
I tried to create a nested datatable in Fiddle and realized that the sorting issue does not happen. However, when I attached the UI result into Metronic Layout, it appeared.
After trying many times, I discovered the root cause is the setting scrollX: true.
If I remove it, the issue is eliminated in Metronic.
https://jsfiddle.net/cungo_bu/o2m1Lnkc/9/
In addition, the issue about height & line-height of sub tables comes with this setting as well.
Thanks
Hi,
It seems the issue is in our Datatables plugin style customization.
Could you try to change the code in line #217 in sass/vendors/plugins/_datatables.scss
From:
.dataTables_scroll .dataTables_scrollBody .table {
thead {
line-height: 0;
.sorting {
&:after,
&:before {
display: none !important;
}
}
}
}to:
.dataTables_scroll > .dataTables_scrollBody > .table {
thead {
.sorting {
&:after,
&:before {
display: none !important;
}
}
}
}Then recompile the assets with gulp or webpack.
Regards.
Hi Sean,
First of all, this is the perfect way to fix the height & line-height for subtable header. I tried and this bug has gone. Really thanks for that.
However, the bug of sorting arrow icon in the subtable still exists. In fact, :after does not appear in the subtable header.
I see that if I change your scss from
.dataTables_scroll > .dataTables_scrollBody > .table {
thead {
.sorting {
&:after,
&:before {
display: none !important;
}
}
}
}to
.dataTables_scroll > .dataTables_scrollBody > .table > thead {
line-height: 0;
.sorting {
&:after,
&:before {
display: none !important;
}
}
}it works like a charm
even when I keep line-height: 0;. Both of bugs including line-height & arrow icons in subtable have gone.Actually, I am not good at scss. Could you please help me review it?
Thanks again
Hi ,
Thank you for providing this solution. We have tested it and seems it worked great. We can use this fix and release it in the next update.
Appreciate that you shared this.
Regards.
Hi Sean,
Please correct me if I am wrong but your approach is just a workaround.
I tried to add gy-3 but it did not work then I increased the number until gy-6 to meet my expected UI. In fact, gy-* helps to increase the padding while the height & line-height are still 0px.
Although this way can fix the header, I notice another bug hence I want to raise to you too.
https://gist.github.com/cungobu/ac85dcdb4891b6e08f41ee1e20029d65
In my example, the sub datatable has the first column with class sorting sorting_asc, it means that column is being sorted. Nonetheless, there is no arrow icon on the right side of that column. I think that there are some css issues in the nested datatable. It will be great if we have a demo for it.
Thanks
Hi,
Subtable cells inherit the height from the parent and in your code there is style that is dynamically set probably by your code or datatable itself. Please note that we use the data tables js code as it is without modification, only its CSS is modified.
Regarding the soring issue, If you could deploy your code to your test server it would be easier to investigate the issue. Otherwise please provide us with your js and HTML code and we will test it on your end.
Regards.
Hi Sean,
Please refer the below link, this is the layout when I created a nested table inside a table
https://gist.github.com/cungobu/ac85dcdb4891b6e08f41ee1e20029d65
My issue is about css so I uploaded the layout only. You can put my html into your example to see what I mentioned: the header of nested tables has height as 0px
https://preview.keenthemes.com/html/metronic/docs/general/datatables/subtable
Please let me know if you need more hints.
Thanks
Hi ,
Thanks for providing the layout code. It helped to look at the issue. Please try to add the vertical gutter class for the sub-table gy-3. You can use gy-{1-10} to control the padding top and bottom for the sub-table children.
If you need any further help please let us know.
Regards.
Your Support Matters!
Hi,
Could you please share your page in your test server or provide us with your code via http://gist.github.com/ ? We will need to check your code to investigate it further.
Regards.
