Always have responsive details row, accordion for any breakpoint

bedede

I have a table working, it is also performing for responsive. There is a requirement to have the show/hide child row always available. Not just for when the table cannot display full width. The child row has a form placed within it using Jquery, with the view to being able to edit each row data, submit and table refresh to show that change. Sure there is a better way to do this, but this is what is being pushed for elsewhere i.e to have each row editable from a form via the show/hide toggle.

Looked at the dataTable.js can see the responsive functions but don't seem to be able to fully understand it.

<tr class="child">
        <td class="child" colspan="6">
            <ul data-dtr-index="6">
                <li data-dtr-index="5" data-dt-row="6" data-dt-column="5"><span class="dtr-title">Notes:</span> <span class="dtr-data">yes</span></li>
                <li data-dtr-index="6" data-dt-row="6" data-dt-column="6"><span class="dtr-title">Year:</span> <span class="dtr-data">2012</span></li>
            </ul>
        
                    <h3>row edit form</h3>
            
                    <form class="form-horizontal">
                     etc
                    </form>
                </td>
    </tr>