JSFiddle - React, Tailwind, and code Playground

by CloudTables

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"/>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <script src="https://momentjs.com/downloads/moment.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
        <script src="https://nightly.datatables.net/rowgroup/js/dataTables.rowGroup.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.bootstrap4.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="https://nightly.datatables.net/rowgroup/css/rowGroup.dataTables.min.css"/>
        <link rel ="stylsheet"...

CSS

h5{
text-align: center;
font-size: 40px;
}
p {
    color:#666666;
    font-size:12px;
    margin-bottom:20px;
    padding-bottom:10px;
}
span {
    color:#666666;
    font-size:12px;
    margin-bottom:1px;
    
}
.btn{
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
border: 1px solid #B7DDF2;

}

.btn:hover{
color: #333333;
background-color: #e6e6e6;
}

div.container {
    min-width: 980px;
    margin: 0 auto;
}
.header {
padding: 10px;
text-align: center;
}
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
div.dt-button-collection {
    position: static;
}

JavaScript

var jsonOBJ = [{
"Company" : "Company Name",
"Capability" : {
	"results" : [
  	"Program Management",
    "Cybersecurity"
  ]
},
"Customer" : "Government",
"SEStatus" : "Large Business",
"Vehicle" : "SharePoint" 
},
{
"Company": "Tesla",
"Capability" : {
"results" : [
	"Aritificial Intelligence"
 ]
},
"Customer" : "Government",
"SEStatus" : "Large Business",
"Vehicle" : "SharePoint" 
}
];

$(document).ready(function() {
    var collapsedGroups= {};
    var top = '';
    var parent = '';

    var table = $('#myTable').DataTable({
    data : jsonOBJ,
        "pageLength" : 50,
        "columns": [{
            "data": 'Capability.results[, ]',
            visible: false
        },
        {
            "data": "Company",
            visible: false
        },
        {
            "data": "Customer"
        },
        {
            "data": "SEStatus"
        },
        {
            "data": "Vehicle"
        }
    ],

    dom: "<'row'<'col-sm-12 col-md-10'f><'col-sm-12 col-md-2'B>>" +
         "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
    
    buttons: [{
        extend: 'collection',
        className: "btn-dark",
        text: 'Export List',
        buttons: [{
            extend: "print",
            className: "btn-light"
        },
        {
            extend: "pdf",
            className: "btn-light"
        },
        {
            extend: "excel",
            className: "btn-light"
        },
    ],
    }],
    order: [
        [0, 'asc'],
        [1, 'asc']
    ],
    rowGroup: {
        dataSrc: [
            'Capability.results[, ]',
            'Company'
        ],
        startRender: function(rows, group, level) {
            var all;
            if (level === 0) {
                top = group;
                all = group;
            } else if (level === 1) {
                parent = top + group;
                all = parent;
                //if parent collapsed, nothing to do
                if...