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');
    // console.log(table_joins.cell(this).index());
    // console.log($(this).text());
    var id = $(this).text().split('.')[0];
    // console.log(id);

    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);

        }
      }
    }
  });
});