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

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,

height
&
line-height
properties of th are 0

Could you help to fix this issue as well as giving a demo for this?

Thanks


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



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 happy,

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 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,
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 happy 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 happy,

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.


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