JSFiddle - React, Tailwind, and code Playground

by HotrodScamp

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.bootstrap4.min.css">
<link rel="stylesheet" href="https://portal-dev-v2.gravisapps.com/assets/js/external/DataTables/Editor-1.9.5/css/editor.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script src="https://portal-dev-v2.gravisapps.com/assets/js/external/DataTables/Editor-1.9.5/js/dataTables.editor.min.js"></script>
<script src="https://portal-dev-v2.gravisapps.com/assets/js/external/DataTables/Editor-1.9.5/js/editor.bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
    <body>
        <div class="container">
            <table id="groups_table">
                <thead>
                    <tr>
                        <th></th>
          ...

JavaScript

var data = [
    {"id": "2", "name": "members", "description": "General User"},
    {"id": "3", "name": "dialer", "description": "Dialer Access"},
    {"id": "4", "name": "recordings", "description": "Recording Access"},
    {"id": "5", "name": "api", "description": "API Access"}
];

$(document).ready(function () {

    var groups_editor = new $.fn.dataTable.Editor({
        ajax: {
            url: "/datatable/edit-group",
            type: "POST"
        },
        table: "#groups_table",
        idSrc: 'id',
        fields: [
            {label: "ID", name: 'id', type: "hidden"},
            {label: "Name", name: 'name'},
            {label: "Description", name: 'description'}
        ]
    });

    var groups_table = $('#groups_table').DataTable({
        dom: 'Bfrtip',
        data: data,
        select: true,
        columns: [
            {data: "id", name: 'id', visible: false},
            {data: "name", name: 'name'},
            {data: "description", name: 'description', width: "100%"},
        ],
        buttons: [
            {extend: "create", editor: groups_editor},
            {extend: "edit", editor: groups_editor},
            {extend: "remove", editor: groups_editor}
        ]
    });
});