Pre-render child rows (helpful with Angular)

stebi

I know how to dynamically create nested tables with row.child("<h1>Content</h1>").show().
But using Angular it's not easy to create dynamic components in the code as strings. It would help if I could prerender the content of the child rows. So the child rows are in the DOM (and connected to all angular events) but not visible, e.g (td omitted):

    <table>
      <tbody>
      <tr><app-content-component content="Content-Row 1" /></tr>
      <tr class="child-row"><app-childcontent-component content="content from child row 1" /></tr>
      <tr><app-content-component content="Content-Row 2" /></tr>
      <tr class="child-row"><app-childcontent-component content="content from child row 2" /></tr>
    ...

Can a row somehow marked as a child row (above I used a class "child-row" just as an example)? So I just need to call row.child.show/hide() to toggle visibility of the child rows?

colin

Yep, you could do that. In the example here, the format() function just returns HTML that is then appended below the parent row. You could have your own format() function, that finds the associated hidden child table, and returns that HTML. It would be a copy of the original child, but if the Angular events are happy with that, then it should be fine.

Colin