<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="learning-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>