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,
&
properties of
Could you help to fix this issue as well as giving a demo for this?
Thanks
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,
height&
line-heightproperties of
th are 0Could you help to fix this issue as well as giving a demo for this?
Thanks
Replies (9)
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.
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.
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
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
If you need any further help please let us know.
Regards.
,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!
We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Hi Sean,
Please correct me if I am wrong but your approach is just a workaround.
I tried to add
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
Thanks
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
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.
Subtable cells inherit the height from the parent and in your code there is
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,
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
If I remove it, the issue is eliminated in Metronic.
https://jsfiddle.net/cungo_bu/o2m1Lnkc/9/
In addition, the issue about
Thanks
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
From:
to:
Then recompile the assets with gulp or webpack.
Regards.
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.scssFrom:
.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
However, the bug of sorting arrow icon in the subtable still exists. In fact,
I see that if I change your scss from
to
it works like a charm even when I keep
Actually, I am not good at scss. Could you please help me review it?
Thanks again
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.
,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.
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
