<title>Volt Laravel Dashboard - Bootstrap tables</title>
<div class="py-4">
    <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
        <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
            <li class="breadcrumb-item">
                <a href="#">
                    <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                </a>
            </li>
            <li class="breadcrumb-item"><a href="#">Tables</a></li>
            <li class="breadcrumb-item active" aria-current="page">Bootstrap tables</li>
        </ol>
    </nav>
    <div class="d-flex justify-content-between w-100 flex-wrap">
        <div class="mb-3 mb-lg-0">
            <h1 class="h4">Bootstrap tables</h1>
            <p class="mb-0">Dozens of reusable components built to provide buttons, alerts, popovers, and more.</p>
        </div>
        <div>
            <a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/components/tables/" class="btn btn-outline-gray-600 d-inline-flex align-items-center">
                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                Bootstrap Tables Docs
            </a>
        </div>
    </div>
</div>

<div class="card border-0 shadow mb-4">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-centered table-nowrap mb-0 rounded">
                <thead class="thead-light">
                    <tr>
                        <th class="border-0 rounded-start">#</th>
                        <th class="border-0">Traffic Source</th>
                        <th class="border-0">Source Type</th>
                        <th class="border-0">Category</th>
                        <th class="border-0">Global Rank</th>
                        <th class="border-0">Traffic Share</th>
                        <th class="border-0 rounded-end">Change</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Item -->
                    <tr>
                        <td><a href="#" class="text-primary fw-bold">1</a> </td>
                        <td class="fw-bold d-flex align-items-center">
                            <svg class="icon icon-xxs text-gray-500 me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd"></path></svg>
                            Direct
                        </td>
                        <td>
                            Direct
                        </td>
                        <td>
                           - 
                        </td>
                        <td>
                           --
                        </td>
                        <td>
                            <div class="row d-flex align-items-center">
                                <div class="col-12 col-xl-2 px-0">
                                    <div class="small fw-bold">51%</div>
                                </div>
                                <div class="col-12 col-xl-10 px-0 px-xl-1">
                                    <div class="progress progress-lg mb-0">
                                        <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="51" aria-valuemin="0" aria-valuemax="100" style="width: 51%;"></div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="text-success">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>                                   
                                <span class="fw-bold">2.45%</span>
                            </div>
                        </td>
                    </tr>
                    <!-- End of Item -->

                    <!-- Item -->
                    <tr>
                        <td><a href="#" class="text-primary fw-bold">2</a> </td>
                        <td class="fw-bold d-flex align-items-center">
                            <svg class="icon icon-xxs text-gray-500 me-2" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google"  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path fill="currentColor" d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"></path></svg>
                            Google Search
                        </td>
                        <td>
                            Search / Organic
                        </td>
                        <td>
                            -
                        </td>
                        <td>
                           --
                        </td>
                        <td>
                            <div class="row d-flex align-items-center">
                                <div class="col-12 col-xl-2 px-0">
                                    <div class="small fw-bold">18%</div>
                                </div>
                                <div class="col-12 col-xl-10 px-0 px-xl-1">
                                    <div class="progress progress-lg mb-0">
                                        <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100" style="width: 18%;"></div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="text-success">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>                                   
                                <span class="fw-bold">17.78%</span>
                            </div>                          
                        </td>
                    </tr>
                    <!-- End of Item -->

                    <!-- Item -->
                    <tr>
                        <td><a href="#" class="text-primary fw-bold">3</a> </td>
                        <td class="fw-bold d-flex align-items-center">
                            <svg class="icon icon-xxs text-gray-500 me-2" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg>
                            youtube.com
                        </td>
                        <td>
                            Social
                        </td>
                        <td>
                            <a class="small fw-bold" href="#">Arts and Entertainment</a>
                        </td>
                        <td>
                           #2
                        </td>
                        <td>
                            <div class="row d-flex align-items-center">
                                <div class="col-12 col-xl-2 px-0">
                                    <div class="small fw-bold">18%</div>
                                </div>
                                <div class="col-12 col-xl-10 px-0 px-xl-1">
                                    <div class="progress progress-lg mb-0">
                                        <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100" style="width: 18%;"></div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            -                                
                        </td>
                    </tr>
                    <!-- End of Item -->

                    <!-- Item -->
                    <tr>
                        <td><a href="#" class="text-primary fw-bold">4</a> </td>
                        <td class="fw-bold d-flex align-items-center">
                            <svg class="icon icon-xxs text-gray-500 me-2" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="yahoo" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M223.69,141.06,167,284.23,111,141.06H14.93L120.76,390.19,82.19,480h94.17L317.27,141.06Zm105.4,135.79a58.22,58.22,0,1,0,58.22,58.22A58.22,58.22,0,0,0,329.09,276.85ZM394.65,32l-93,223.47H406.44L499.07,32Z"></path></svg>
                            yahoo.com
                        </td>
                        <td>
                            Referral
                        </td>
                        <td>
                            <a class="small fw-bold" href="#">News and Media</a>
                        </td>
                        <td>
                           #11
                        </td>
                        <td>
                            <div class="row d-flex align-items-center">
                                <div class="col-12 col-xl-2 px-0">
                                    <div class="small fw-bold">8%</div>
                                </div>
                                <div class="col-12 col-xl-10 px-0 px-xl-1">
                                    <div class="progress progress-lg mb-0">
                                        <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100" style="width: 8%;"></div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="text-danger">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                                <span class="fw-bold">9.45%</span>
                            </div>                                
                        </td>
                    </tr>
                    <!-- End of Item -->

                    <!-- Item -->
                    <tr>
                        <td><a href="#" class="text-primary fw-bold">5</a> </td>
                        <td class="fw-bold d-flex align-items-center">
                            <svg class="icon icon-xxs text-gray-500 me-2" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
                            twitter.com
                        </td>
                        <td>
                            Social
                        </td>
                        <td>
                            <a class="small fw-bold" href="#">Social Networks</a>
                        </td>
                        <td>
                        #4
                        </td>
                        <td>
                            <div class="row d-flex align-items-center">
                                <div class="col-12 col-xl-2 px-0">
                                    <div class="small fw-bold">4%</div>
                                </div>
                                <div class="col-12 col-xl-10 px-0 px-xl-1">
                                    <div class="progress progress-lg mb-0">
                                        <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="4" aria-valuemin="0" aria-valuemax="100" style="width: 4%;"></div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            -                                
                        </td>
                    </tr>
                    <!-- End of Item -->
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="card border-0 shadow">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-centered table-nowrap mb-0 rounded">
                <thead class="thead-light">
                    <tr>
                        <th class="border-0 rounded-start">Country</th>
                        <th class="border-0">All</th>
                        <th class="border-0">All Change</th>
                        <th class="border-0">Travel & Local</th>
                        <th class="border-0">Travel & Local Change</th>
                        <th class="border-0">Widgets</th>
                        <th class="border-0 rounded-end">Widgets Change</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Item -->
                    <tr>
                        <td class="border-0">                                             
                            <a href="#" class="d-flex align-items-center">
                                <img class="me-2 image image-small rounded-circle" alt="Image placeholder" src="../../assets/img/flags/united-states-of-america.svg">
                                <div><span class="h6">United States</span></div>
                            </a>
                        </td>
                        <td class="border-0 fw-bold">106</td>
                        <td class="border-0 text-danger">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                                <span class="fw-bold">5</span>
                            </div> 
                        </td>
                        <td class="border-0 fw-bold">
                           3 
                        </td>
                        <td class="border-0">
                           =
                        </td>
                        <td class="border-0 fw-bold">
                           32  
                        </td>
                        <td class="border-0 text-success">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>                                   
                                <span class="fw-bold">3</span>
                            </div>
                        </td>
                    </tr>
                    <!-- End of Item -->

                   <!-- Item -->
                    <tr>
                        <td class="border-0">                                             
                            <a href="#" class="d-flex align-items-center">
                                <img class="me-2 image image-small rounded-circle" alt="Image placeholder" src="../../assets/img/flags/canada.svg">
                                <div><span class="h6">Canada</span></div>
                            </a>
                        </td>
                        <td class="border-0 fw-bold">76</td>
                        <td class="border-0 text-success">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>                                   
                                <span class="fw-bold">17</span>
                            </div>
                        </td>
                        <td class="border-0 fw-bold">
                        4 
                        </td>
                        <td class="border-0">
                        =
                        </td>
                        <td class="border-0 fw-bold">
                        30  
                        </td>
                        <td class="border-0 text-success">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>                                   
                                <span class="fw-bold">3</span>
                            </div>
                        </td>
                    </tr>
                    <!-- End of Item -->

                   <!-- Item -->
                    <tr>
                        <td class="border-0">                                             
                            <a href="#" class="d-flex align-items-center">
                                <img class="me-2 image image-small rounded-circle" alt="Image placeholder" src="../../assets/img/flags/united-kingdom.svg">
                                <div><span class="h6">United Kingdom</span></div>
                            </a>
                        </td>
                        <td class="border-0 fw-bold">147</td>
                        <td class="border-0 text-success">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>                                   
                                <span class="fw-bold">10</span>
                            </div>
                        </td>
                        <td class="border-0 fw-bold">
                        5 
                        </td>
                        <td class="border-0">
                        =
                        </td>
                        <td class="border-0 fw-bold">
                        34  
                        </td>
                        <td class="border-0 text-success">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>                                   
                                <span class="fw-bold">7</span>
                            </div>
                        </td>
                    </tr>
                    <!-- End of Item -->

                    <!-- Item -->
                    <tr>
                        <td class="border-0">                                             
                            <a href="#" class="d-flex align-items-center">
                                <img class="me-2 image image-small rounded-circle" alt="Image placeholder" src="../../assets/img/flags/france.svg">
                                <div><span class="h6">France</span></div>
                            </a>
                        </td>
                        <td class="border-0 fw-bold">112</td>
                        <td class="border-0 text-success">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>                                   
                                <span class="fw-bold">3</span>
                            </div>
                        </td>
                        <td class="border-0 fw-bold">
                        5 
                        </td>
                        <td class="border-0 text-success">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>                                   
                                <span class="fw-bold">1</span>
                            </div>
                        </td>
                        <td class="border-0 fw-bold">
                        34  
                        </td>
                        <td class="border-0 text-danger">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                                <span class="fw-bold">2</span>
                            </div> 
                        </td>
                    </tr>
                    <!-- End of Item -->

                    <!-- Item -->
                    <tr>
                        <td class="border-0">                                             
                            <a href="#" class="d-flex align-items-center">
                                <img class="me-2 image image-small rounded-circle" alt="Image placeholder" src="../../assets/img/flags/japan.svg">
                                <div><span class="h6">Japan</span></div>
                            </a>
                        </td>
                        <td class="border-0 fw-bold">115</td>
                        <td class="border-0 text-danger">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                                <span class="fw-bold">12</span>
                            </div> 
                        </td>
                        <td class="border-0 fw-bold">
                        6 
                        </td>
                        <td class="border-0 text-danger">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                                <span class="fw-bold">1</span>
                            </div> 
                        </td>
                        <td class="border-0 fw-bold">
                        37  
                        </td>
                        <td class="border-0 text-danger">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                                <span class="fw-bold">5</span>
                            </div> 
                        </td>
                    </tr>
                    <!-- End of Item -->

                    <!-- Item -->
                    <tr>
                        <td class="border-0">                                             
                            <a href="#" class="d-flex align-items-center">
                                <img class="me-2 image image-small rounded-circle" alt="Image placeholder" src="../../assets/img/flags/germany.svg">
                                <div><span class="h6">Germany</span></div>
                            </a>
                        </td>
                        <td class="border-0 fw-bold">220</td>
                        <td class="border-0 text-danger">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                                <span class="fw-bold">56</span>
                            </div> 
                        </td>
                        <td class="border-0 fw-bold">
                            7 
                        </td>
                        <td class="border-0 text-danger">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                                <span class="fw-bold">3</span>
                            </div> 
                        </td>
                        <td class="border-0 fw-bold">
                            30  
                        </td>
                        <td class="border-0 text-success">
                            <div class="d-flex align-items-center">
                                <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>                                   
                                <span class="fw-bold">2</span>
                            </div>
                        </td>
                    </tr>
                    <!-- End of Item -->
                </tbody>
            </table>
        </div>
    </div>
</div>