Scrolling a table inside a child row
Scrolling a table inside a child row
GlitchEclipse
Posts: 14Questions: 2Answers: 0
I have a setup where my intention is for the user to click on a row in the main table. Basically selecting the entity. This opens a child row for buttons that control attribute selections. Each button opens a .div that will display details and another table for records for that particular attribute. The tables for the attributes come in fine in the child row and it looks like all the Datatables searching, sorting and paging comes in fine. What I am losing is the scrolling so the table is just extending out as far as it needs too. The sorting looks to just disappear.
So is there a way for tables inside child row to scrolling or is that no supported? Thanks.
This discussion has been closed.
Replies
Datatables doesn't know if its in a child detail row or not. All the features should work. Can you post a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
I think this is as close I can get the model for simplicity. Run this and click on the first column of id. This will open the child row. I have hard coded another table inside the parent tables row return. You will see that even though the scrollx and y settings are true on both tables in the JS, (Example2 table is the one I am most concerned with), the table inside the child row is not displaying the scroll controls. The content is much longer than the viewing area. so this extends my parent row outside the width of the page viewing area which is the issue I am having. In my project this "details" div returns records from an api call that I use to load the table. But the same issue is occuring.
http://live.datatables.net/jixezuka/1/edit?html,css,js,console,output
The example does't seem to display a child table. I think you are missing adding the details-control in the main table. At also looks like the format function creates a standard HTML table, not a Datatable. Maybe this is an old link?
Kevin
I updated one of my examples with scrollY and scrollX:
http://live.datatables.net/vesicine/1/edit
Looks like both are working.
Kevin
Thanks. After looking at your example it did look like I did set the table up correctly (sorry my example fell a little short). My issue was the style=width: variable on the tables I was pulling in. Something small, but again your advice and example was very helpful. Thank you again Kevin.
Actually doesn't work properly, i has the similar situation here, and i realize the 'child table' just show ten results (excatly ten). I had set scroll Y for 300px, and if you could test the same situation with more then 10 rows inside the child row or child table(call how you want call) it's impossible to see more then 10 results.
However, if works, will show all the results and thats not right again, because the point is not show 10 results or all of them, it is show all of them with a scroll Y.
I'm not sure how to fixed. Can @kthorngren help?
However i tried with this
scrollY: '300px',scrollCollapse: true,paginate: false,paging: false,And work well.