Database grouped queries and child rows (how??)

Codepwned

Before I get into details I am NOT referring to Row Grouping https://datatables.net/examples/advanced_init/row_grouping.html.

I appreciate any helpful comments on what I'm trying to do here. My aim is for something manageable and not a 200 line datatable javascript configuration. If this is not possible, no worries.

Situation.
- I have a query that pulls a list of Parent Records and a one to many join of Child Records
- I want the parent record to display in the table, be sortable etc
- I want the (1-x) Child Records to display in a child row formatted the way I want

The justification is that the child records can have long names so making them loop in another column doesn't fit along with the parent name.

Here's a barebones example of what I want the end result to look like:

<table id="dtCourses">
    <thead>                         
        <tr>
            <th>ParentID</th>
            <th>ParentName</th>
        </tr>
    </thead>
    <tbody>
        <cfloop query="qryData" group="ParentID">
        <!--Parent Record-->
        <tr>
            <td>qryData.ParentID</td>
            <td><icon that you click to show child records> qryData.ParentName</td>
        </tr>
        <!--Child Records What I want the end result to be--->
        <tr>
            <td>
                <table>
                    <!--There can be 1-x of these for each Parent--->
                    <cfloop query="qryData">
                    <tr>
                        <td>qryData.ChildStatus</td>
                        <td>qryData.ChildID</td>
                        <td>qryData.ChildName</td>
                    </tr>
                    </cfloop>
                </table>                    
            </td>
        </tr>
        </cfloop>
    </tbody>
</table>

Here's the datatable example that "effectively" does what I want
https://datatables.net/extensions/responsive/examples/child-rows/whole-row-control.html

Thank you for any responses! I truly appreciate it.

colin

Hi @Codepwned ,

Responsive is useful when you want columns removed due to screen size restrictions - so isn't really applicable to you. Child rows though have a similar feel, see here, and that would do what you want.

Cheers,

Colin