JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <title>Order Management | Cafeteria Staff</title>
</head>

<body class="d-flex flex-column">
    <div class="container p-2 pb-0 mt-5 pt-3" id="admin-dashboard">
        <h2 class="pt-3 pb-5 display-6">Order Management</h2>
        <nav>
            <div class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <button class="nav-link active px-5" id="unpd-tab" data-bs-toggle="tab" data-bs-target="#nav-unpd" type="button" role="tab" aria-controls="nav-unpd" aria-selected="true">Unpaid</button>
                <button class="nav-link px-5" id="odrrcv-tab" data-bs-toggle="tab" data-bs-target="#nav-odrrcv" type="button" role="tab" aria-controls="nav-odrrcv" aria-selected="true">Order Received</button>
                <button class="nav-link px-5" id="prep-tab" data-bs-toggle="tab" data-bs-target="#nav-prep" type="button" role="tab" aria-controls="nav-prep" aria-selected="true">Preparing</button>
                <button class="nav-link px-5" id="rdfk-tab" data-bs-toggle="tab" data-bs-target="#nav-rdfk" type="button" role="tab" aria-controls="nav-rdfk" aria-selected="true">Ready for pick-up</button>
                <button class="nav-link px-5" id="cmplt-tab" data-bs-toggle="tab" data-bs-target="#nav-cmplt" type="button"...

JavaScript

$(document).ready(function() {
            $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
                $($.fn.dataTable.tables(true)).DataTable()
                    .columns.adjust();
            });

            // Datatable Starts here
            var unpd_table = $('#unpaid-table').DataTable({
                scrollY: 200,
                scrollCollapse: true,
              
            });

            var odrrcv_table = $('#order-received-table').DataTable({
                scrollY: 200,
                scrollCollapse: true,
            });

            var prep_table = $('#preparing-table').DataTable({});

            var rdfk_table = $('#rdfk-table').DataTable({});

            var cmplt_table = $('#completed-table').DataTable({});

            var cxld_table = $('#cancelled-table').DataTable({});
        });