JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/v/dt/jq-2.2.4/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-2.2.4/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.css">
<table id="example" class="dataTable" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JavaScript

var dataSet = [
        [ "1", "Fred Flintstone" ],
        [ "2", "George Jetson" ],
        [ "3", "Bugs Bunny" ],
        [ "4", "Velma Dinkley" ],
        [ "5", "Henery Hawk" ],
        [ "6", "Boo-Boo Bear" ],
        [ "7", "Captain Caveman" ]
    ];

    var table;
    $(document).ready(function() {
        $('#example').DataTable({
            data: dataSet,
            select: {
                style: 'single'
            },
            bInfo: false,
            bLengthChange: false,
            bFilter: true,
            serverSide: false,
            scrollY: 200,
            scrollCollapse: true,
            scroller: true,
            columnDefs: [
                {
                    "targets": [ 0 ],
                    "visible": false,
                    "searchable": false
                }
            ],
            dom: "Bfrtip",
            buttons: [
                {
                    text: "Add",
                    action: function ( e, dt, node, config ) {
                        alert('send to add php page ');
                    }
                },
                {
                    text: "Edit",
                    action: function ( e, dt, node, config ) {
                        alert('Selected ID: ' + dt.row().data()[0]);
                    }
                },
                {
                    text: "Delete",
                    action: function ( e, dt, node, config ) {
                        alert('Selected ID: ' + dt.row().data()[0]);
                    }
                }
            ]
        });

        table = $('#example').DataTable();
        table.on('dblclick', 'tr', function () {
            var id = table.row(this).data();
            alert(id);
        });
    });