JSFiddle - React, Tailwind, and code Playground

by ecredlus

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>

  <body>
    <div class="container">
      <div class="btn-group py-3">
        <button id="btnSource1" type="button" class="btn-primary btn me-3">Orgs Data Source</button>
        <button id="btnSource2" type="button" class="btn-secondary btn">Orgs2 Data Source</button></div>
      <div class="container">
        <table id="example" class="display" style="width:100%">
          <thead>
            <tr>
              <th>ID</th>
              <th>Org</th>
              <th>Parent</th>
              <th>Level</th>
              <th>Instructions</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
          <tfoot>
            <tr>
              <th>ID</th>
              <th>Org</th>
              <th>Parent</th>
              <th>Level</th>
              <th>Instructions</th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
 ...

JavaScript

let orgs = [{
    id: 8,
    name: "Org A2-B",
    pid: "Org A2",
    level: 3,
    'instructions': 'wdawdagsesdgsd'
  },
  {
    id: 9,
    name: "Org A3-A",
    pid: "Org A3",
    level: 3,
    'instructions': 'ggerherh'
  },
  {
    id: 10,
    name: "Org A3-B",
    pid: "Org A3",
    level: 3,
    'instructions': '5464tgrdgd'
  },
  {
    id: 0,
    name: "A",
    pid: "TOP",
    level: 1,
    'instructions': 'gdhj'
  },
  {
    id: 1,
    name: "Org A1",
    pid: "A",
    level: 2,
    'instructions': 'ye5y5eh'
  },
  {
    id: 3,
    name: "Org A3",
    pid: "A",
    level: 2,
    'instructions': 'hdhe5h'
  },
  {
    id: 5,
    name: "Org A1-A",
    pid: "Org A1",
    level: 3,
    'instructions': 'he55be5btdcfb'
  },
  {
    id: 6,
    name: "Org A1-B",
    pid: "Org A1",
    level: 3,
    'instructions': 'hrdhdtngngndn'
  },
  {
    id: 7,
    name: "Org A2-A",
    pid: "Org A2",
    level: 3,
    'instructions': 'herh5e5hn'
  },
  {
    id: 2,
    name: "Org A2",
    pid: "A",
    level: 2,
    'instructions': 'ehe5he56'
  },
  {
    id: 20,
    name: "TOP",
    pid: null,
    level: 0,
    'instructions': 'asdfghj'
  },
]

let orgs2 = [{
    id: 11,
    name: "Org B1-B",
    pid: "Org B1",
    level: 3,
    'instructions': 'gdfngkgk'
  },
  {
    id: 12,
    name: "Org B2",
    pid: "B",
    level: 2,
    'instructions': 'hdetjntd'
  },
  {
    id: 13,
    name: "Org B2-A",
    pid: "Org B2",
    level: 3,
    'instructions': 'gjkghjfj'
  },
  {
    id: 16,
    name: "Org B1",
    pid: "B",
    level: 2,
    'instructions': 'u6ejenddtn'
  },
  {
    id: 15,
    name: "B",
    pid: "TOP",
    level: 1,
    'instructions': 'gdrhjtn'
  },
]

$(document).ready(function() {
  buildTable(orgs2)

  $('#btnSource1').click(() => {
    let table = $('#example').DataTable();
    table.clear().destroy();
    buildTable(orgs);
  })

  $('#btnSource2').click(() => {
    let table = $('#example').DataTable();
    table.clear().destroy();
    buildTable(orgs2);
 ...