JSFiddle - React, Tailwind, and code Playground

by bilyejd

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<div>
    <button id="add_row">Add new row</button>
    <table id="all_projects" class="display responsive no-wrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Project / Task ID</th>
                <th>Task Label</th>
                <th>Child Count</th>
                <th>Project / Task Name</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Project / Task ID</th>
                <th>Task Label</th>
                <th>Child Count</th>
                <th>Project / Task Name</th>
            </tr>
        </tfoot>
    </table>
</div>

CSS

tr>td:first-child:before {
    content: '+';
    height: 16px;
    width: 16px;
    display: block;
    position: absolute;
    background-color: #31b131;
    top: 8px;
    left: 4px;
    color: white;
    border: 2px solid white;
    box-shadow: 0 0 3px #444;
    box-sizing: content-box;
    text-align: left;
    text-indent: 4px;
    line-height: 16px;
    border-radius: 16px;
    font-family: 'Courier New', Courier, monospace;
}

tr>td.expand:before {
    content: '-';
    background-color: red;
}

tr>td:first-child {
    position: relative;
    padding-left: 30px !important;
}

JavaScript

table_data = [
    ["1", "0", "3", "Parent Project"],
    ["2", "0", "0", "Another Project"]
];

table_data2 = [
    ["1.1", "1", "0", "Project 1.1"],
    ["1.2", "2", "0", "Project 1.2"],
    ["1.3", "3", "0", "Project 1.3"]
];


var editor_joins; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    var table_joins = $('#all_projects').DataTable({

        dom: "<'top'l>Bfrtip",
        data: table_data
    });

    var counter = 3;
    $('#add_row').on('click', function() {
        table_joins.row.add([counter + ".1", 0, 0, "Added Subproject"]).draw(false);
        counter++;
    });



    $("#all_projects tbody").on('click', 'tr>td:first-child', function() {
        $(this).toggleClass('expand');
        var id = $(this).text().split('.')[0];

        if ($(this).hasClass('expand')) {
            for (i = 0; i < table_data2.length; i++) {
                table_joins.row.add(table_data2[i]).draw(false);
            }
        } else {
            console.log('ELSE');
            // Need to delete the subproject rows from the table

            /*console.log(table_joins.columns(0).data());
            console.log('All rows data:', table_joins.rows().data());

            var task_ids = table_joins.columns(0).data()[0];
            console.log('task_ids:', task_ids);
            for (i = 0; i < task_ids.length; i++) {

              task_split = task_ids[i].split('.');
              if (task_split[0] == id && task_split.length > 1) {
                console.log('Found matching row:', i, task_ids[i], task_split);
                console.log('Row data:', table_joins.rows(i).data());
                console.log('Removing row:', i);
                table_joins.rows(i).remove().draw(false);

              }
            } */
			
            /*var table_nodes = table_joins.rows().nodes();
            for (i = 0; i < table_nodes.length; i++) {
                console.log(table_nodes[i]);
            }*/
           ...