<table id="clientScheduleGrid" class="table w-100 nowrap">
    <thead>
        <tr>
            <th>ID</th>
            <th data-breakpoints="xs sm">Patient</th>
            <th data-breakpoints="xs sm md">Contact info</th>
            <th data-breakpoints="xs sm">Tags</th>
            <th class="all">Recent Schedule</th>
            <th data-breakpoints="xs sm">Status</th>
            <th class="all">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2054ID</td>

            <td>
                <div class="row align-items-center flex-nowrap">
                    <div class="col-auto">
                        <figure class="avatar avatar-40 mb-0 coverimg rounded-circle">
                            <img src="assets/img/modern-ai-image/user-7.jpg" alt="" />
                        </figure>
                    </div>
                    <div class="col ps-0">
                        <p class="mb-0 fw-medium">David Warner</p>
                        <p class="text-secondary small">32 years, United Kingdom</p>
                    </div>
                </div>
            </td>

            <td>
                <p class="mb-0">david@sales..core.com</p>
                <p class="text-secondary small">+44 8466585****1154</p>
            </td>

            <td>
                <span class="badge badge-light rounded-pill text-bg-success">Fresh Case</span>
            </td>

            <td>
                <p class="mb-0">9:10 AM - 9 June 2024</p>
                <p class="text-secondary small">Allergies -Dr. Ryan Sylia</p>
            </td>

            <td>
                <span class="badge badge-light rounded-pill text-bg-warning">Pending</span>
            </td>

            <td>
                <a href="investment-view-patient.html" class="btn btn-square btn-link" data-bs-toggle="tooltip" title="View">
                    <i class="bi bi-eye"></i>
                </a>
                <div class="dropdown d-inline-block">
                    <a class="btn btn-link no-caret" data-bs-toggle="dropdown">
                        <i class="bi bi-three-dots"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="javascript:void(0)">Edit</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0)">Move</a></li>
                        <li><a class="dropdown-item theme-red" href="javascript:void(0)">Delete</a></li>
                    </ul>
                </div>
            </td>
            
        </tr>
    </tbody>
</table>


<script>
"use strict";

$(document).ready(function () {                    
    /* Initialize dataTable */
    $('#clientScheduleGrid').DataTable({
        searching: true,
        lengthChange: true,
        autoWidth: false,
        columnDefs: [{ orderable: false, targets: 4 }],
        order: [[0, 'desc']],
        pageLength: 5,
        responsive: true,
    });

    /* responsive last visible table cell */
    lastvisibletd();            
});

$(window).on('resize', function () {
    /* resize */
    var table = $('#clientScheduleGrid').DataTable();
    table.columns.adjust().draw();
    lastvisibletd();                    
});                    

/* responsive last visible table cell after cell hides*/
function lastvisibletd() {
    $('.table tbody tr td').removeClass('lastvisible');
    $('.table tbody tr').each(function () {
        var thisis = $(this);
        thisis.find('td:visible:last').addClass('lastvisible');
    })
}                    
                    </script>