JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
</head>

<body>
    <div class="container my-5">
        <div class="position-relative content">
            <div class="position-absolute w-100 row" style="z-index: 50;">
                <div class="col-6">
                    <div class="filter-wrapper">
                        <input type="radio" class="filter-checkbox" name="filter" value="all" checked="checked" />
                        All
                        <input type="radio" class="filter-checkbox" name="filter" value="Software Engineer" />
                        Software Engineer
                        <input type="radio" class="filter-checkbox" name="filter" value="Accountant" />
                        Accountant
                    </div>
                </div>
            </div>
        </div>
        <table id="example" class="table" style="z-index: 30;">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>Status</th>
                    <th>Hidden</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>Software Engineer</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                    <td>
                        <div class="badge status-badge badge-info">
                            Draft
                        </div>
                    </td>
                    <td>DRF</td>
                </tr>
                <tr>
           ...

JavaScript

$(document).ready(function() {
            dataTable = $("#example").DataTable({
                columnDefs: [{
                    targets: [7],
                    visible: false
                }],
                "bInfo": false,
                "bPaginate": true,
                "bLengthChange": false,
                "buttons": [],
                "ordering": false,
                language: {
                    paginate: {
                        next: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-right"></i>',
                        previous: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-left"></i>'
                    }
                },
            });

            $(".filter-checkbox").on("change", function(e) {
                var searchTerms = [];
                $.each($(".filter-checkbox"), function(i, elem) {
                    if ($(elem).prop("checked")) {
                        searchTerms.push("^" + $(this).val() + "$");
                    }
                });
                dataTable.column(1).search(searchTerms.join("|"), true, false, true).draw();
            });
        });