JSFiddle - React, Tailwind, and code Playground

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://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.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://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.bootstrap4.min.css"/>
        <link rel ="stylsheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"/>
        <link rel ="stylesheet" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.bootstrap4.min.css"/>
    </head>
    <div class="header">
        <h5>Company Database</h5>
        <p><strong>*Search Companies based on their Capability*</strong></p>
    </div>
    <div class="container">
        <table id="myTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead class="thead-light">
                <tr>
                    <th>Capability</th>
                    <th>Company</th>
                    <th>Customer</th>
                    <th>Status</th>
                    <th>Vehicle</th>
                </tr>
            </thead>
        </table>
    </div>
    <body>
        <meta...

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 dataSet = [
["Cybersecurity", "Random Company 1", "Random Customer 1", "Large Business", "XXXX"],
["Asset Management", "Random Company 2", "Random Customer 2", "Large Business", "XXXX"],
["Program Management", "Random Company 3", "Random Customer 3", "Large Business", "XXXX"],
["", "Random Company 4", "", "", ""],
["Telecommunications", "Random Company 3", "", "", ""]
];

$(document).ready(function() {
            var collapsedGroups = {};
                var top = '';
                var parent = '';
                
          var table = $('#myTable').DataTable( {
          data : dataSet,
            "pageLength": 50,
            "columns": [
              { "title": "Capability",
                visible: false	  },
              { "title": "Company",
                visible: false	  },
              { "title": "Customer" },
              { "title": "Status" },
              { "title": "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>>",
                        order: [
                        [0, 'asc'],
                        [1, 'asc']
                    ],
                    rowGroup: {
                        dataSrc: [
                            0,
                            1
                        ],
                        startRender: function(rows, group, level) {
                            var all;
                            if (level === 1) {
                                top = group;
                                all = group;
                            } else if (level === 2) {
                                parent = top + group;
                                all = parent;
                                // if parent collapsed, nothing to do
                                if (!collapsedGroups[top]) {
                                   ...