JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>

    <!-- jQuery 3 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <!-- datatables -->
    <script src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">

</head>

<body class="hold-transition sidebar-mini">
    <table id='trans' name='trans' class=table table-bordered cellspacing=0 width=100%>
        <thead>
            <tr>
                <th style="width: 10px;">#</th>
                <th>Code</th>
                <th>Locale</th>
                <th>Text</th>
               
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>12</td>
                <td data-sort="login.password">login.password</td>
                <td data-sort="en">en</td>
                <td data-sort="Password">Password</td>

                <td><button type="button" data-toggle="modal" data-target="#modal12" class="btn btn-block btn-danger btn-flat">Delete</button></td>
            </tr>
        </tbody>
                                        <tbody>
                                            <tr>
                                                <td>12</td>
                                                <td data-sort="login.password">login.password</td>
                                                <td data-sort="en">en</td>
                                                <td data-sort="Password">Password</td>
               
                                                <td><button type="button" data-toggle="modal" data-target="#modal12" class="btn btn-block btn-danger btn-flat">Delete</button></td>
                                            </tr>
                                            <tr>
                                                <td>11</td>
                                                <td data-sort="lang.en">lang.en</td>
                 ...

JavaScript

$(document).ready(function() {

    var t = $('#trans').DataTable({
        initComplete: function() {
            // Apply the search
            this.api().columns().every(function() {
                var that = this;

                $('input', this.footer()).on('keyup change clear', function() {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });
        },
        paging: false,
        info: false,
        columnDefs: [{
            paging: false,
            info: false
        }],
        columnDefs: [{
            targets: [1],
            orderable: false
        }]
    });
    t.on('order.dt search.dt', function() {
        t.column(0, {
            search: 'applied',
            order: 'applied'
        }).nodes().each(function(cell, i) {
            cell.innerHTML = i + 1;
        });
    }).draw();
});