Tables

Basic Tables
Name Created On Number Status
Mark 21,Dec 2021 +1234-12340 Completed
Monika 29,April 2024 +1523-12459 Failed
Madina 30,Mar 2024 +1982-16234 Successful
Bhamako 18,Mar 2024 +1526-10729 Pending 
<div class="table-responsive">
        <table class="table text-nowrap">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Created On</th>
                    <th scope="col">Number</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Mark</th>
                    <td>21,Dec 2021</td>
                    <td>+1234-12340</td>
                    <td><span class="badge bg-outline-primary">Completed</span></td>
                </tr>
                <tr>
                    <th scope="row">Monika</th>
                    <td>29,April 2024</td>
                    <td>+1523-12459</td>
                    <td><span class="badge bg-outline-warning">Failed</span></td>
                </tr>
                <tr>
                    <th scope="row">Madina</th>
                    <td>30,Mar 2024</td>
                    <td>+1982-16234</td>
                    <td><span class="badge bg-outline-success">Successful</span></td>
                </tr>
                <tr>
                    <th scope="row">Bhamako</th>
                    <td>18,Mar 2024</td>
                    <td>+1526-10729</td>
                    <td><span class="badge bg-outline-secondary">Pending</span></td>
                </tr>
            </tbody>
        </table>
    </div>
Bordered Tables
User Status Email Action
img Sukuro Kim
Active kimosukuro@gmail.com
img Hasimna
Inactive hasimna2132@gmail.com
img Azimo Khan
Active azimokhan421@gmail.com
img Samantha Julia
Active julianasams143@gmail.com 
<div class="table-responsive">
        <table class="table text-nowrap table-bordered">
            <thead>
                <tr>
                    <th scope="col">User</th>
                    <th scope="col">Status</th>
                    <th scope="col">Email</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/13.jpg" alt="img">
                            </span>Sukuro Kim
                        </div>
                    </th>
                    <td><span class="badge bg-success-transparent">Active</span></td>
                    <td>kimosukuro@gmail.com</td>
                    <td>
                        <div class="hstack gap-2 flex-wrap">
                            <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                    class="ri-edit-line"></i></a>
                            <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                    class="ri-delete-bin-5-line"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 offline avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/6.jpg" alt="img">
                            </span>Hasimna
                        </div>
                    </th>
                    <td><span class="badge bg-light text-dark">Inactive</span></td>
                    <td>hasimna2132@gmail.com</td>
                    <td>
                        <div class="hstack gap-2 flex-wrap">
                            <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                    class="ri-edit-line"></i></a>
                            <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                    class="ri-delete-bin-5-line"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/15.jpg" alt="img">
                            </span>Azimo Khan
                        </div>
                    </th>
                    <td><span class="badge bg-success-transparent">Active</span></td>
                    <td>azimokhan421@gmail.com</td>
                    <td>
                        <div class="hstack gap-2 flex-wrap">
                            <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                    class="ri-edit-line"></i></a>
                            <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                    class="ri-delete-bin-5-line"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/5.jpg" alt="img">
                            </span>Samantha Julia
                        </div>
                    </th>
                    <td><span class="badge bg-success-transparent">Active</span></td>
                    <td>julianasams143@gmail.com</td>
                    <td>
                        <div class="hstack gap-2 flex-wrap">
                            <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                    class="ri-edit-line"></i></a>
                            <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                    class="ri-delete-bin-5-line"></i></a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
Bordered Primary
Order Date Customer Action
#0007 26-04-2022
img Violeta Tilly
Booked
#0008 15-02-2022
img Wicky Kross
Booked
#0009 23-05-2022
img Julia Cam
Booked 
<div class="table-responsive">
        <table class="table text-nowrap table-bordered border-primary">
            <thead>
                <tr>
                    <th scope="col">Order</th>
                    <th scope="col">Date</th>
                    <th scope="col">Customer</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">
                        #0007
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">26-04-2022</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/3.jpg" alt="img">
                            </span>Violeta Tilly
                        </div>
                    </td>
                    <td><span class="badge bg-primary-transparent">Booked</span></td>
                </tr>
                <tr>
                    <th scope="row">
                        #0008
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">15-02-2022</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/6.jpg" alt="img">
                            </span>Wicky Kross
                        </div>
                    </td>
                    <td><span class="badge bg-primary-transparent">Booked</span></td>
                </tr>
                <tr>
                    <th scope="row">
                        #0009
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">23-05-2022</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/1.jpg" alt="img">
                            </span>Julia Cam
                        </div>
                    </td>
                    <td><span class="badge bg-primary-transparent">Booked</span></td>
                </tr>

            </tbody>
        </table>
    </div>
Bordered Success
Order Date Customer Status
#0011 07-01-2022
img Helsenky
Delivered
#0012 18-05-2022
img Brodus
Delivered
#0013 19-03-2022
img Chikka Alen
Delivered 
<div class="table-responsive">
        <table class="table text-nowrap table-bordered border-success">
            <thead>
                <tr>
                    <th scope="col">Order</th>
                    <th scope="col">Date</th>
                    <th scope="col">Customer</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">
                        #0011
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">07-01-2022</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/10.jpg" alt="img">
                            </span>Helsenky
                        </div>
                    </td>
                    <td><span class="badge bg-success-transparent">Delivered</span></td>
                </tr>
                <tr>
                    <th scope="row">
                        #0012
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">18-05-2022</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/14.jpg" alt="img">
                            </span>Brodus
                        </div>
                    </td>
                    <td><span class="badge bg-success-transparent">Delivered</span></td>
                </tr>
                <tr>
                    <th scope="row">
                        #0013
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">19-03-2022</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/12.jpg" alt="img">
                            </span>Chikka Alen
                        </div>
                    </td>
                    <td><span class="badge bg-success-transparent">Delivered</span></td>
                </tr>
            </tbody>
        </table>
    </div>
Bordered warning
Order Date Customer Action
#0014 21-02-2022
img Sukuro Kim
Accepted
#0018 26-03-2022
img Phillip John
Accepted
#0020 14-03-2022
img Pamila Anderson
Accepted 
<div class="table-responsive">
        <table class="table text-nowrap table-bordered border-warning">
            <thead>
                <tr>
                    <th scope="col">Order</th>
                    <th scope="col">Date</th>
                    <th scope="col">Customer</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">
                        #0014
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">21-02-2022</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/13.jpg" alt="img">
                            </span>Sukuro Kim
                        </div>
                    </td>
                    <td><span class="badge bg-warning-transparent">Accepted</span></td>
                </tr>
                <tr>
                    <th scope="row">
                        #0018
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">26-03-2022</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/11.jpg" alt="img">
                            </span>Phillip John
                        </div>
                    </td>
                    <td><span class="badge bg-warning-transparent">Accepted</span></td>
                </tr>
                <tr>
                    <th scope="row">
                        #0020
                    </th>
                    <td>
                        <span class="badge bg-light text-dark">14-03-2022</span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/2.jpg" alt="img">
                            </span>Pamila Anderson
                        </div>
                    </td>
                    <td><span class="badge bg-warning-transparent">Accepted</span></td>
                </tr>
            </tbody>
        </table>
    </div>
Table Without Borders
User Name Transaction Id Created Status
Harshrath #5182-3467 24 May 2024 Fixed
Zozo Hadid #5182-3412 02 July 2024 In Progress
Martiana #5182-3423 15 April 2024 Completed
Phillip John #5182-3456 17 March 2024 Pending 
<div class="table-responsive">
        <table class="table text-nowrap table-borderless">
            <thead>
                <tr>
                    <th scope="col">User Name</th>
                    <th scope="col">Transaction Id</th>
                    <th scope="col">Created</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Harshrath</th>
                    <td>#5182-3467</td>
                    <td>24 May 2024</td>
                    <td><span class="badge bg-primary">Fixed</span></td>
                </tr>
                <tr>
                    <th scope="row">Zozo Hadid</th>
                    <td>#5182-3412</td>
                    <td>02 July 2024</td>
                    <td><span class="badge bg-warning">In Progress</span></td>
                </tr>
                <tr>
                    <th scope="row">Martiana</th>
                    <td>#5182-3423</td>
                    <td>15 April 2024</td>
                    <td><span class="badge bg-success">Completed</span></td>
                </tr>
                <tr>
                    <th scope="row">Phillip John</th>
                    <td>#5182-3456</td>
                    <td>17 March 2024</td>
                    <td><span class="badge bg-danger">Pending</span></td>
                </tr>
            </tbody>
        </table>
    </div>
Table Group Divideres
Product Seller Sale Percentage Quantity Sold
Smart Watch Slowtrack.inc 24.23% 250/1786
White Sneakers American & Co.inc 12.45% 123/985
Baseball Bat Sports Company 06.64% 124/232
Black Hoodie Renonds Fabrics 14.42% 192/2456 
<div class="table-responsive">
        <table class="table text-nowrap">
            <thead>
                <tr>
                    <th scope="col">Product</th>
                    <th scope="col">Seller</th>
                    <th scope="col">Sale Percentage</th>
                    <th scope="col">Quantity Sold</th>
                </tr>
            </thead>
            <tbody class="table-group-divider">
                <tr>
                    <th scope="row">Smart Watch</th>
                    <td>Slowtrack.inc</td>
                    <td><a href="javascript:void(0);" class="text-success">24.23%<i
                                class="ri-arrow-up-fill ms-1"></i></a></td>
                    <td>250/1786</td>
                </tr>
                <tr>
                    <th scope="row">White Sneakers</th>
                    <td>American & Co.inc</td>
                    <td><a href="javascript:void(0);" class="text-danger">12.45%<i
                                class="ri-arrow-down-fill ms-1"></i></a></td>
                    <td>123/985</td>
                </tr>
                <tr>
                    <th scope="row">Baseball Bat</th>
                    <td>Sports Company</td>
                    <td><a href="javascript:void(0);" class="text-success">06.64%<i
                                class="ri-arrow-up-fill ms-1"></i></a></td>
                    <td>124/232</td>
                </tr>
                <tr>
                    <th scope="row">Black Hoodie</th>
                    <td>Renonds Fabrics</td>
                    <td><a href="javascript:void(0);" class="text-success">14.42%<i
                                class="ri-arrow-up-fill ms-1"></i></a></td>
                    <td>192/2456</td>
                </tr>
            </tbody>
        </table>
    </div>
Striped rows
ID Date Customer Action
2022R-01 27-010-2022 Moracco
2022R-02 28-10-2022 Thornton
2022R-03 22-10-2022 Larry Bird
2022R-04 29-09-2022 Erica Sean 
<div class="table-responsive">
        <table class="table text-nowrap table-striped">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Date</th>
                    <th scope="col">Customer</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">2022R-01</th>
                    <td>27-010-2022</td>
                    <td>Moracco</td>
                    <td>
                        <button class="btn btn-sm btn-success btn-wave">
                            <i class="ri-download-2-line align-middle me-2 d-inline-block"></i>Download
                        </button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2022R-02</th>
                    <td>28-10-2022</td>
                    <td>Thornton</td>
                    <td>
                        <button class="btn btn-sm btn-success btn-wave">
                            <i class="ri-download-2-line align-middle me-2 d-inline-block"></i>Download
                        </button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2022R-03</th>
                    <td>22-10-2022</td>
                    <td>Larry Bird</td>
                    <td>
                        <button class="btn btn-sm btn-success btn-wave">
                            <i class="ri-download-2-line align-middle me-2 d-inline-block"></i>Download
                        </button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2022R-04</th>
                    <td>29-09-2022</td>
                    <td>Erica Sean</td>
                    <td>
                        <button class="btn btn-sm btn-success btn-wave">
                            <i class="ri-download-2-line align-middle me-2 d-inline-block"></i>Download
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
Striped columns
ID Date Customer Action
2022R-01 27-010-2022 Moracco
2022R-02 28-10-2022 Thornton
2022R-03 22-10-2022 Larry Bird
2022R-04 29-09-2022 Erica Sean 
<div class="table-responsive">
        <table class="table text-nowrap table-striped-columns">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Date</th>
                    <th scope="col">Customer</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">2022R-01</th>
                    <td>27-010-2022</td>
                    <td>Moracco</td>
                    <td>
                        <button class="btn btn-sm btn-danger btn-wave">
                            <i class="ri-delete-bin-line align-middle me-2 d-inline-block"></i>Delete
                        </button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2022R-02</th>
                    <td>28-10-2022</td>
                    <td>Thornton</td>
                    <td>
                        <button class="btn btn-sm btn-danger btn-wave">
                            <i class="ri-delete-bin-line align-middle me-2 d-inline-block"></i>Delete
                        </button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2022R-03</th>
                    <td>22-10-2022</td>
                    <td>Larry Bird</td>
                    <td>
                        <button class="btn btn-sm btn-danger btn-wave">
                            <i class="ri-delete-bin-line align-middle me-2 d-inline-block"></i>Delete
                        </button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2022R-04</th>
                    <td>29-09-2022</td>
                    <td>Erica Sean</td>
                    <td>
                        <button class="btn btn-sm btn-danger btn-wave">
                            <i class="ri-delete-bin-line align-middle me-2 d-inline-block"></i>Delete
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
Primary Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton @twitter 
<div class="table-responsive">
        <table class="table text-nowrap table-primary">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry the Bird</td>
                    <td>Thornton</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
Secondary Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton @twitter 
<div class="table-responsive">
        <table class="table text-nowrap table-secondary">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry the Bird</td>
                    <td>Thornton</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
Warning Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton @twitter 
<div class="table-responsive">
        <table class="table text-nowrap table-warning">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry the Bird</td>
                    <td>Thornton</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
Danger Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton @twitter 
<div class="table-responsive">
        <table class="table text-nowrap table-danger">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry the Bird</td>
                    <td>Thornton</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
Dark Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton @twitter 
<div class="table-responsive">
        <table class="table text-nowrap table-dark">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry the Bird</td>
                    <td>Thornton</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
Success Table With Striped Rows
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton @twitter 
<div class="table-responsive">
        <table class="table text-nowrap table-success table-striped">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry the Bird</td>
                    <td>Thornton</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
Hoverable Rows
Product Manager Category Team Status
img
Joanna Smith
joannasmith14@gmail.com
Fashion
img img img +5
img
Kara Kova
milesakara@gmail.com
Clothing
img img +6
img
Donald Trimb
donaldo21@gmail.com
Electronics
img img img +2
img
Justin Gaethje
justingae@gmail.com
Sports
img img +5 
<div class="table-responsive">
        <table class="table text-nowrap table-hover">
            <thead>
                <tr>
                    <th scope="col">Product Manager</th>
                    <th scope="col">Category</th>
                    <th scope="col">Team</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-2 avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/10.jpg" alt="img">
                            </div>
                            <div>
                                <div class="lh-1">
                                    <span>Joanna Smith</span>
                                </div>
                                <div class="lh-1">
                                    <span
                                        class="fs-11 text-muted">joannasmith14@gmail.com</span>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td><span class="badge bg-primary-transparent">Fashion</span></td>
                    <td>
                        <div class="avatar-list-stacked">
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/2.jpg" alt="img">
                            </span>
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/8.jpg" alt="img">
                            </span>
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/2.jpg" alt="img">
                            </span>
                            <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded"
                                href="javascript:void(0);">
                                +5
                            </a>
                        </div>
                    </td>
                    <td>
                        <div class="progress progress-xs">
                            <div class="progress-bar bg-primary" role="progressbar"
                                style="width: 52%" aria-valuenow="52" aria-valuemin="0"
                                aria-valuemax="100">
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-2 avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/2.jpg" alt="img">
                            </div>
                            <div>
                                <div class="lh-1">
                                    <span>Kara Kova</span>
                                </div>
                                <div class="lh-1">
                                    <span
                                        class="fs-11 text-muted">milesakara@gmail.com</span>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td><span class="badge bg-warning-transparent">Clothing</span></td>
                    <td>
                        <div class="avatar-list-stacked">
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/4.jpg" alt="img">
                            </span>
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/6.jpg" alt="img">
                            </span>
                            <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded"
                                href="javascript:void(0);">
                                +6
                            </a>
                        </div>
                    </td>
                    <td>
                        <div class="progress progress-xs">
                            <div class="progress-bar bg-primary" role="progressbar"
                                style="width: 40%" aria-valuenow="40" aria-valuemin="0"
                                aria-valuemax="100">
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-2 avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/16.jpg" alt="img">
                            </div>
                            <div>
                                <div class="lh-1">
                                    <span>Donald Trimb</span>
                                </div>
                                <div class="lh-1">
                                    <span
                                        class="fs-11 text-muted">donaldo21@gmail.com</span>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td><span class="badge bg-dark-transparent">Electronics</span></td>
                    <td>
                        <div class="avatar-list-stacked">
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/1.jpg" alt="img">
                            </span>
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/11.jpg" alt="img">
                            </span>
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/15.jpg" alt="img">
                            </span>
                            <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded"
                                href="javascript:void(0);">
                                +2
                            </a>
                        </div>
                    </td>
                    <td>
                        <div class="progress progress-xs">
                            <div class="progress-bar bg-primary" role="progressbar"
                                style="width: 17%" aria-valuenow="17" aria-valuemin="0"
                                aria-valuemax="100">
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-2 avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/13.jpg" alt="img">
                            </div>
                            <div>
                                <div class="lh-1">
                                    <span>Justin Gaethje</span>
                                </div>
                                <div class="lh-1">
                                    <span
                                        class="fs-11 text-muted">justingae@gmail.com</span>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td><span class="badge bg-danger-transparent">Sports</span></td>
                    <td>
                        <div class="avatar-list-stacked">
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/4.jpg" alt="img">
                            </span>
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/6.jpg" alt="img">
                            </span>
                            <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded"
                                href="javascript:void(0);">
                                +5
                            </a>
                        </div>
                    </td>
                    <td>
                        <div class="progress progress-xs">
                            <div class="progress-bar bg-primary" role="progressbar"
                                style="width: 72%" aria-valuenow="72" aria-valuemin="0"
                                aria-valuemax="100">
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
Hoverable rows With striped rows
Invoice Customer Status Date
IN-2032
img
Mark Cruise
markcruise24@gmail.com
Paid Jul 26,2022
IN-2022
img
Charanjeep
charanjeep@gmail.in
Paid Mar 14,2022
IN-2014
img
Samantha Julie
julie453@gmail.com
Cancelled Feb 1,2022
IN-2036
img
Simon Cohen
simon@gmail.com
Refunded Apr 24,2022 
<div class="table-responsive">
        <table class="table text-nowrap table-striped table-hover">
            <thead>
                <tr>
                    <th scope="col">Invoice</th>
                    <th scope="col">Customer</th>
                    <th scope="col">Status</th>
                    <th scope="col">Date</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">IN-2032</th>
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-2 avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/15.jpg" alt="img">
                            </div>
                            <div>
                                <div class="lh-1">
                                    <span>Mark Cruise</span>
                                </div>
                                <div class="lh-1">
                                    <span
                                        class="fs-11 text-muted">markcruise24@gmail.com</span>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td><span class="badge bg-success-transparent"><i
                                class="ri-check-fill align-middle me-1"></i>Paid</span></td>
                    <td>Jul 26,2022</td>
                </tr>
                <tr>
                    <th scope="row">IN-2022</th>
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-2 avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/12.jpg" alt="img">
                            </div>
                            <div>
                                <div class="lh-1">
                                    <span>Charanjeep</span>
                                </div>
                                <div class="lh-1">
                                    <span
                                        class="fs-11 text-muted">charanjeep@gmail.in</span>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td><span class="badge bg-success-transparent"><i
                                class="ri-check-fill align-middle me-1"></i>Paid</span></td>
                    <td>Mar 14,2022</td>
                </tr>
                <tr>
                    <th scope="row">IN-2014</th>
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-2 avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/5.jpg" alt="img">
                            </div>
                            <div>
                                <div class="lh-1">
                                    <span>Samantha Julie</span>
                                </div>
                                <div class="lh-1">
                                    <span class="fs-11 text-muted">julie453@gmail.com</span>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td><span class="badge bg-danger-transparent"><i
                                class="ri-close-fill align-middle me-1"></i>Cancelled</span>
                    </td>
                    <td>Feb 1,2022</td>
                </tr>
                <tr>
                    <th scope="row">IN-2036</th>
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-2 avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/11.jpg" alt="img">
                            </div>
                            <div>
                                <div class="lh-1">
                                    <span>Simon Cohen</span>
                                </div>
                                <div class="lh-1">
                                    <span class="fs-11 text-muted">simon@gmail.com</span>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td><span class="badge bg-light text-dark"><i
                                class="ri-reply-line align-middle me-1"></i>Refunded</span>
                    </td>
                    <td>Apr 24,2022</td>
                </tr>
            </tbody>
        </table>
    </div>
Table Head Primary
User Name Transaction Id Created Status
Harshrath #5182-3467 24 May 2024
Zozo Hadid #5182-3412 02 July 2024
Martiana #5182-3423 15 April 2024
Phillip John #5182-3456 17 March 2024 
<div class="table-responsive">
        <table class="table text-nowrap">
            <thead class="table-primary">
                <tr>
                    <th scope="col">User Name</th>
                    <th scope="col">Transaction Id</th>
                    <th scope="col">Created</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Harshrath</th>
                    <td>#5182-3467</td>
                    <td>24 May 2024</td>
                    <td>
                        <div class="hstack gap-2 fs-15">
                            <a href="javascript:void(0);"
                                class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                                    class="ri-download-2-line"></i></a>
                            <a href="javascript:void(0);"
                                class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                    class="ri-edit-line"></i></a>
                            <a href="javascript:void(0);"
                                class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                    class="ri-delete-bin-line"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Zozo Hadid</th>
                    <td>#5182-3412</td>
                    <td>02 July 2024</td>
                    <td>
                        <div class="hstack gap-2 fs-15">
                            <a href="javascript:void(0);"
                                class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                                    class="ri-download-2-line"></i></a>
                            <a href="javascript:void(0);"
                                class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                    class="ri-edit-line"></i></a>
                            <a href="javascript:void(0);"
                                class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                    class="ri-delete-bin-line"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Martiana</th>
                    <td>#5182-3423</td>
                    <td>15 April 2024</td>
                    <td>
                        <div class="hstack gap-2 fs-15">
                            <a href="javascript:void(0);"
                                class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                                    class="ri-download-2-line"></i></a>
                            <a href="javascript:void(0);"
                                class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                    class="ri-edit-line"></i></a>
                            <a href="javascript:void(0);"
                                class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                    class="ri-delete-bin-line"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Phillip John</th>
                    <td>#5182-3456</td>
                    <td>17 March 2024</td>
                    <td>
                        <div class="hstack gap-2 fs-15">
                            <a href="javascript:void(0);"
                                class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                                    class="ri-download-2-line"></i></a>
                            <a href="javascript:void(0);"
                                class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                    class="ri-edit-line"></i></a>
                            <a href="javascript:void(0);"
                                class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                    class="ri-delete-bin-line"></i></a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
Table Head warning
User Name Transaction Id Created Status
Harshrath #5182-3467 24 May 2024
Zozo Hadid #5182-3412 02 July 2024
Martiana #5182-3423 15 April 2024
Phillip John #5182-3456 17 March 2024 
<div class="table-responsive">
        <table class="table text-nowrap">
            <thead class="table-warning">
                <tr>
                    <th scope="col">User Name</th>
                    <th scope="col">Transaction Id</th>
                    <th scope="col">Created</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Harshrath</th>
                    <td>#5182-3467</td>
                    <td>24 May 2024</td>
                    <td>
                        <button class="btn btn-sm btn-primary-light">Pending</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Zozo Hadid</th>
                    <td>#5182-3412</td>
                    <td>02 July 2024</td>
                    <td>
                        <button class="btn btn-sm btn-primary-light">Pending</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Martiana</th>
                    <td>#5182-3423</td>
                    <td>15 April 2024</td>
                    <td>
                        <button class="btn btn-sm btn-danger-light">Rejected</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Phillip John</th>
                    <td>#5182-3456</td>
                    <td>17 March 2024</td>
                    <td>
                        <button class="btn btn-sm btn-success-light">Processed</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
Table Head Success
User Name Transaction Id Created Status
Harshrath #5182-3467 24 May 2024
Zozo Hadid #5182-3412 02 July 2024
Martiana #5182-3423 15 April 2024
Phillip John #5182-3456 17 March 2024 
<div class="table-responsive">
        <table class="table text-nowrap">
            <thead class="table-success">
                <tr>
                    <th scope="col">User Name</th>
                    <th scope="col">Transaction Id</th>
                    <th scope="col">Created</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Harshrath</th>
                    <td>#5182-3467</td>
                    <td>24 May 2024</td>
                    <td>
                        <button class="btn btn-sm btn-primary-light">Pending</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Zozo Hadid</th>
                    <td>#5182-3412</td>
                    <td>02 July 2024</td>
                    <td>
                        <button class="btn btn-sm btn-primary-light">Pending</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Martiana</th>
                    <td>#5182-3423</td>
                    <td>15 April 2024</td>
                    <td>
                        <button class="btn btn-sm btn-danger-light">Rejected</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Phillip John</th>
                    <td>#5182-3456</td>
                    <td>17 March 2024</td>
                    <td>
                        <button class="btn btn-sm btn-success-light">Processed</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
Table Head Info
User Name Transaction Id Created Status
Harshrath #5182-3467 24 May 2024
Zozo Hadid #5182-3412 02 July 2024
Martiana #5182-3423 15 April 2024
Phillip John #5182-3456 17 March 2024 
<div class="table-responsive">
        <table class="table text-nowrap">
            <thead class="table-info">
                <tr>
                    <th scope="col">User Name</th>
                    <th scope="col">Transaction Id</th>
                    <th scope="col">Created</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Harshrath</th>
                    <td>#5182-3467</td>
                    <td>24 May 2024</td>
                    <td>
                        <button class="btn btn-sm btn-primary-light">Pending</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Zozo Hadid</th>
                    <td>#5182-3412</td>
                    <td>02 July 2024</td>
                    <td>
                        <button class="btn btn-sm btn-primary-light">Pending</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Martiana</th>
                    <td>#5182-3423</td>
                    <td>15 April 2024</td>
                    <td>
                        <button class="btn btn-sm btn-danger-light">Rejected</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Phillip John</th>
                    <td>#5182-3456</td>
                    <td>17 March 2024</td>
                    <td>
                        <button class="btn btn-sm btn-success-light">Processed</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
Table Head Secondary
User Name Transaction Id Created Status
Harshrath #5182-3467 24 May 2024
Zozo Hadid #5182-3412 02 July 2024
Martiana #5182-3423 15 April 2024
Phillip John #5182-3456 17 March 2024 
<div class="table-responsive">
        <table class="table text-nowrap">
            <thead class="table-secondary">
                <tr>
                    <th scope="col">User Name</th>
                    <th scope="col">Transaction Id</th>
                    <th scope="col">Created</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Harshrath</th>
                    <td>#5182-3467</td>
                    <td>24 May 2024</td>
                    <td>
                        <button class="btn btn-sm btn-primary-light">Pending</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Zozo Hadid</th>
                    <td>#5182-3412</td>
                    <td>02 July 2024</td>
                    <td>
                        <button class="btn btn-sm btn-primary-light">Pending</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Martiana</th>
                    <td>#5182-3423</td>
                    <td>15 April 2024</td>
                    <td>
                        <button class="btn btn-sm btn-danger-light">Rejected</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Phillip John</th>
                    <td>#5182-3456</td>
                    <td>17 March 2024</td>
                    <td>
                        <button class="btn btn-sm btn-success-light">Processed</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
Table Head Danger
User Name Transaction Id Created Status
Harshrath #5182-3467 24 May 2024
Zozo Hadid #5182-3412 02 July 2024
Martiana #5182-3423 15 April 2024
Phillip John #5182-3456 17 March 2024 
<div class="table-responsive">
        <table class="table text-nowrap">
            <thead class="table-danger">
                <tr>
                    <th scope="col">User Name</th>
                    <th scope="col">Transaction Id</th>
                    <th scope="col">Created</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Harshrath</th>
                    <td>#5182-3467</td>
                    <td>24 May 2024</td>
                    <td>
                        <button class="btn btn-sm btn-primary-light">Pending</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Zozo Hadid</th>
                    <td>#5182-3412</td>
                    <td>02 July 2024</td>
                    <td>
                        <button class="btn btn-sm btn-primary-light">Pending</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Martiana</th>
                    <td>#5182-3423</td>
                    <td>15 April 2024</td>
                    <td>
                        <button class="btn btn-sm btn-danger-light">Rejected</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">Phillip John</th>
                    <td>#5182-3456</td>
                    <td>17 March 2024</td>
                    <td>
                        <button class="btn btn-sm btn-success-light">Processed</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
Table Foot
S.No Team Matches Won Win Ratio
01 Manchester 232 42%
02 Barcelona 175 58%
03 Portugal 126 32%
Total United States 558 56% 
<div class="table-responsive">
        <table class="table text-nowrap">
            <thead class="table-primary">
                <tr>
                    <th scope="col">S.No</th>
                    <th scope="col">Team</th>
                    <th scope="col">Matches Won</th>
                    <th scope="col">Win Ratio</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">
                        01
                    </th>
                    <td>
                        Manchester
                    </td>
                    <td>
                        232
                    </td>
                    <td>
                        <span class="badge bg-primary">42%</span>
                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        02
                    </th>
                    <td>
                        Barcelona
                    </td>
                    <td>
                        175
                    </td>
                    <td><span class="badge bg-primary">58%</span></td>
                </tr>
                <tr>
                    <th scope="row">
                        03
                    </th>
                    <td>
                        Portugal
                    </td>
                    <td>
                        126
                    </td>
                    <td><span class="badge bg-primary">32%</span></td>
                </tr>
            </tbody>
            <tfoot class="table-primary">
                <tr>
                    <th scope="row">
                        Total
                    </th>
                    <td>
                        United States
                    </td>
                    <td>
                        558
                    </td>
                    <td><span class="badge bg-primary">56%</span></td>
                </tr>
            </tfoot>
        </table>
    </div>
Table With Caption
Top 3 Countries
S.No Country Medals Won No Of Athletes
01 United States 2012 1823
02 United Kingdom 1012 992
03 Germany 914 875 
<div class="table-responsive">
        <table class="table text-nowrap">
            <thead class="table-primary">
                <tr>
                    <th scope="col">S.No</th>
                    <th scope="col">Team</th>
                    <th scope="col">Matches Won</th>
                    <th scope="col">Win Ratio</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">
                        01
                    </th>
                    <td>
                        Manchester
                    </td>
                    <td>
                        232
                    </td>
                    <td>
                        <span class="badge bg-primary">42%</span>
                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        02
                    </th>
                    <td>
                        Barcelona
                    </td>
                    <td>
                        175
                    </td>
                    <td><span class="badge bg-primary">58%</span></td>
                </tr>
                <tr>
                    <th scope="row">
                        03
                    </th>
                    <td>
                        Portugal
                    </td>
                    <td>
                        126
                    </td>
                    <td><span class="badge bg-primary">32%</span></td>
                </tr>
            </tbody>
            <tfoot class="table-primary">
                <tr>
                    <th scope="row">
                        Total
                    </th>
                    <td>
                        United States
                    </td>
                    <td>
                        558
                    </td>
                    <td><span class="badge bg-primary">56%</span></td>
                </tr>
            </tfoot>
        </table>
    </div>
Table With Top Caption
Top IT Companies
S.No Name Revenue Country
1 Microsoft $170 billion United States
2 HP $72 billion United States
3 IBM $84 billion United States 
<div class="table-responsive">
        <table class="table text-nowrap caption-top">
            <caption>Top IT Companies</caption>
            <thead>
                <tr>
                    <th scope="col">S.No</th>
                    <th scope="col">Name</th>
                    <th scope="col">Revenue</th>
                    <th scope="col">Country</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Microsoft</td>
                    <td>$170 billion</td>
                    <td>United States</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>HP</td>
                    <td>$72 billion</td>
                    <td>United States</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>IBM</td>
                    <td>$84 billion</td>
                    <td>United States</td>
                </tr>
            </tbody>
        </table>
    </div>
Active Tables
Name Created On Number Status
Mark 21,Dec 2021 +1234-12340 Completed
Monika 29,April 2024 +1523-12459 Failed
Madina 30,Mar 2024 +1982-16234 Successful
Bhamako 18,Mar 2024 +1526-10729 Pending 
<div class="table-responsive">
        <table class="table text-nowrap">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Created On</th>
                    <th scope="col">Number</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr class="table-active">
                    <th scope="row">Mark</th>
                    <td>21,Dec 2021</td>
                    <td>+1234-12340</td>
                    <td><span class="badge bg-primary">Completed</span></td>
                </tr>
                <tr>
                    <th scope="row">Monika</th>
                    <td>29,April 2024</td>
                    <td>+1523-12459</td>
                    <td><span class="badge bg-warning">Failed</span></td>
                </tr>
                <tr>
                    <th scope="row">Madina</th>
                    <td>30,Mar 2024</td>
                    <td class="table-active">+1982-16234</td>
                    <td><span class="badge bg-success">Successful</span></td>
                </tr>
                <tr>
                    <th scope="row">Bhamako</th>
                    <td>18,Mar 2024</td>
                    <td>+1526-10729</td>
                    <td><span class="badge bg-secondary">Pending</span></td>
                </tr>
            </tbody>
        </table>
    </div>
Small Tables
Invoice Created Date Status Action
25-Apr-2021 Paid
29-April-2022 Pending
30-Nov-2022 Paid
01-Jan-2022 Paid
14-Feb-2022 Pending 
<div class="table-responsive">
        <table class="table text-nowrap table-sm">
            <thead>
                <tr>
                    <th scope="col">Invoice</th>
                    <th scope="col">Created Date</th>
                    <th scope="col">Status</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="checkebox-sm" checked="">
                            <label class="form-check-label" for="checkebox-sm">
                                Zelensky
                            </label>
                        </div>
                    </th>
                    <td>25-Apr-2021</td>
                    <td><span class="badge bg-success-transparent">Paid</span></td>
                    <td>
                        <div class="hstack gap-2 fs-15">
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="checkebox-sm1">
                            <label class="form-check-label" for="checkebox-sm1">
                                Kim Jong
                            </label>
                        </div>
                    </th>
                    <td>29-April-2022</td>
                    <td><span class="badge bg-danger-transparent">Pending</span></td>
                    <td>
                        <div class="hstack gap-2 fs-15">
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="checkebox-sm2">
                            <label class="form-check-label" for="checkebox-sm2">
                                Obana
                            </label>
                        </div>
                    </th>
                    <td>30-Nov-2022</td>
                    <td><span class="badge bg-success-transparent">Paid</span></td>
                    <td>
                        <div class="hstack gap-2 fs-15">
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="checkebox-sm3">
                            <label class="form-check-label" for="checkebox-sm3">
                                Sean Paul
                            </label>
                        </div>
                    </th>
                    <td>01-Jan-2022</td>
                    <td><span class="badge bg-success-transparent">Paid</span></td>
                    <td>
                        <div class="hstack gap-2 fs-15">
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="checkebox-sm4">
                            <label class="form-check-label" for="checkebox-sm4">
                                Karizma
                            </label>
                        </div>
                    </th>
                    <td>14-Feb-2022</td>
                    <td><span class="badge bg-danger-transparent">Pending</span></td>
                    <td>
                        <div class="hstack gap-2 fs-15">
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
Color variants tables
Color Client State Quantity Total Price
Default Rita Book Processed 22 $2,012
Primary Rhoda Report Processed 22 $4,254
Secondary Rita Book Processed 26 $1,234
Success Anne Teak Processed 42 $2,623
Danger Dee End Processed 52 $32,132
Warning Lee Nonmi Processed 10 $1,434
Info Lynne Gwistic Processed 63 $1,854
Light Fran Tick Processed 05 $823
Dark Polly Pipe Processed 35 $1,832 
<div class="table-responsive">
        <table class="table text-nowrap">
            <thead>
                <tr>
                    <th scope="col">Color</th>
                    <th scope="col">Client</th>
                    <th scope="col">State</th>
                    <th scope="col">Quantity</th>
                    <th scope="col">Total Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Default</th>
                    <td>Rita Book</td>
                    <td><span class="badge bg-primary-transparent">Processed</span></td>
                    <td>22</td>
                    <td>$2,012</td>
                </tr>

                <tr class="table-primary">
                    <th scope="row">Primary</th>
                    <td>Rhoda Report</td>
                    <td><span class="badge bg-primary">Processed</span></td>
                    <td>22</td>
                    <td>$4,254</td>
                </tr>
                <tr class="table-secondary">
                    <th scope="row">Secondary</th>
                    <td>Rita Book</td>
                    <td><span class="badge bg-secondary">Processed</span></td>
                    <td>26</td>
                    <td>$1,234</td>
                </tr>
                <tr class="table-success">
                    <th scope="row">Success</th>
                    <td>Anne Teak</td>
                    <td><span class="badge bg-success">Processed</span></td>
                    <td>42</td>
                    <td>$2,623</td>
                </tr>
                <tr class="table-danger">
                    <th scope="row">Danger</th>
                    <td>Dee End</td>
                    <td><span class="badge bg-danger">Processed</span></td>
                    <td>52</td>
                    <td>$32,132</td>
                </tr>
                <tr class="table-warning">
                    <th scope="row">Warning</th>
                    <td>Lee Nonmi</td>
                    <td><span class="badge bg-warning">Processed</span></td>
                    <td>10</td>
                    <td>$1,434</td>
                </tr>
                <tr class="table-info">
                    <th scope="row">Info</th>
                    <td>Lynne Gwistic</td>
                    <td><span class="badge bg-info">Processed</span></td>
                    <td>63</td>
                    <td>$1,854</td>
                </tr>
                <tr class="table-light">
                    <th scope="row">Light</th>
                    <td>Fran Tick</td>
                    <td><span class="badge bg-light text-dark">Processed</span></td>
                    <td>05</td>
                    <td>$823</td>
                </tr>
                <tr class="table-dark">
                    <th scope="row">Dark</th>
                    <td>Polly Pipe</td>
                    <td><span class="badge bg-dark text-white">Processed</span></td>
                    <td>35</td>
                    <td>$1,832</td>
                </tr>
            </tbody>
        </table>
    </div>
Nesting
# First Last Handle
1 Mark Otto @mdo
Alphabets Users Email
A Dino King dinoking231@gmail.com
B Poppins sams pops@gmail.com
C Brian Shaw swanbrian@gmail.com
3 Larry the Bird @twitter
4 Jimmy the Ostrich Dummy Text
5 Cobra Kai the Snake Another Name 
<div class="table-responsive">
        <table class="table text-nowrap table-striped table-bordered">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <td colspan="4">
                        <table class="table text-nowrap mb-0">
                            <thead>
                                <tr>
                                    <th scope="col">Aplhabets</th>
                                    <th scope="col">Users</th>
                                    <th scope="col">Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">A</th>
                                    <td>Dino King</td>
                                    <td>dinoking231@gmail.com</td>
                                </tr>
                                <tr>
                                    <th scope="row">B</th>
                                    <td>Poppins sams</td>
                                    <td>pops@gmail.com</td>
                                </tr>
                                <tr>
                                    <th scope="row">C</th>
                                    <td>Brian Shaw</td>
                                    <td>swanbrian@gmail.com</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>Jimmy</td>
                    <td>the Ostrich</td>
                    <td>Dummy Text</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td>Cobra Kai</td>
                    <td>the Snake</td>
                    <td>Another Name</td>
                </tr>
            </tbody>
        </table>
    </div>
Always responsive
Team Head Category Role Gmail Team Work Progress Revenue Action
img Violeta Tilly
Manufacturer Team Lead mayorkrlly@gmail.com
img img img +4
$10,984.29
img Danny Raj
Managing Director Director andrewgarfield@gmail.com
img img img img +4
$1.4billion
img Red Stark
Service Manager Manager simoncowel234@gmail.com
img img +10
$7,123.21
img Sissera William
Recruiter Employee mirindahers@gmail.com
img img img +6
$2,325.45 
<div class="table-responsive">
        <table class="table text-nowrap">
            <thead>
                <tr>
                    <th scope="col"><input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="..."></th>
                    <th scope="col">Team Head</th>
                    <th scope="col">Category</th>
                    <th scope="col">Role</th>
                    <th scope="col">Gmail</th>
                    <th scope="col">Team</th>
                    <th scope="col">Work Progress</th>
                    <th scope="col">Revenue</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row"><input class="form-check-input" type="checkbox" id="checkboxNoLabel1" value="" aria-label="..."></th>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/3.jpg" alt="img">
                            </span>Violeta Tilly
                        </div>
                    </td>
                    <td>Manufacturer</td>
                    <td><span class="badge bg-primary-transparent">Team Lead</span></td>
                    <td>mayorkrlly@gmail.com</td>
                    <td>
                        <div class="avatar-list-stacked">
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/2.jpg" alt="img">
                            </span>
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/8.jpg" alt="img">
                            </span>
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/2.jpg" alt="img">
                            </span>
                            <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded" href="javascript:void(0);">
                                +4
                            </a>
                        </div>
                    </td>
                    <td>
                        <div class="progress progress-xs">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 52%" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </td>
                    <td>$10,984.29</td>
                    <td>
                        <div class="hstack gap-2 fs-15">
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-success"><i class="ri-download-2-line"></i></a>
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info"><i class="ri-edit-line"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row"><input class="form-check-input" type="checkbox" id="checkboxNoLabel2" value="" aria-label="..."></th>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/12.jpg" alt="img">
                            </span>Danny Raj
                        </div>
                    </td>
                    <td>Managing Director</td>
                    <td><span class="badge bg-warning-transparent">Director</span></td>
                    <td>andrewgarfield@gmail.com</td>
                    <td>
                        <div class="avatar-list-stacked">
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/1.jpg" alt="img">
                            </span>
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/5.jpg" alt="img">
                            </span>
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/11.jpg" alt="img">
                            </span>
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/15.jpg" alt="img">
                            </span>
                            <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded" href="javascript:void(0);">
                                +4
                            </a>
                        </div>
                    </td>
                    <td>
                        <div class="progress progress-xs">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 91%" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </td>
                    <td>$1.4billion</td>
                    <td>
                        <div class="hstack gap-2 fs-15">
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-success"><i class="ri-download-2-line"></i></a>
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info"><i class="ri-edit-line"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row"><input class="form-check-input" type="checkbox" id="checkboxNoLabel3" value="" aria-label="..."></th>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/14.jpg" alt="img">
                            </span>Red Stark
                        </div>
                    </td>
                    <td>Service Manager</td>
                    <td><span class="badge bg-success-transparent">Manager</span></td>
                    <td>simoncowel234@gmail.com</td>
                    <td>
                        <div class="avatar-list-stacked">
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/6.jpg" alt="img">
                            </span>
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/16.jpg" alt="img">
                            </span>
                            <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded" href="javascript:void(0);">
                                +10
                            </a>
                        </div>
                    </td>
                    <td>
                        <div class="progress progress-xs">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </td>
                    <td>$7,123.21</td>
                    <td>
                        <div class="hstack gap-2 fs-15">
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-success"><i class="ri-download-2-line"></i></a>
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info"><i class="ri-edit-line"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row"><input class="form-check-input" type="checkbox" id="checkboxNoLabel13" value="" aria-label="..."></th>
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-xs me-2 online avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/5.jpg" alt="img">
                            </span>Sissera William
                        </div>
                    </td>
                    <td>Recruiter</td>
                    <td><span class="badge bg-danger-transparent">Employee</span></td>
                    <td>mirindahers@gmail.com</td>
                    <td>
                        <div class="avatar-list-stacked">
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/3.jpg" alt="img">
                            </span>
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/10.jpg" alt="img">
                            </span>
                            <span class="avatar avatar-sm avatar-rounded">
                                <img src="https://laravelui.spruko.com/xintra/build/assets/images/faces/14.jpg" alt="img">
                            </span>
                            <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded" href="javascript:void(0);">
                                +6
                            </a>
                        </div>
                    </td>
                    <td>
                        <div class="progress progress-xs">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 21%" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </td>
                    <td>$2,325.45</td>
                    <td>
                        <div class="hstack gap-2 fs-15">
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-success"><i class="ri-download-2-line"></i></a>
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info"><i class="ri-edit-line"></i></a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
Vertical alignment
Heading 1 Heading 2 Heading 3 Heading 4
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell is aligned to the top. This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. 
<div class="table-responsive">
        <table class="table align-middle">
            <thead>
                <tr>
                    <th scope="col" class="w-25">Heading 1</th>
                    <th scope="col" class="w-25">Heading 2</th>
                    <th scope="col" class="w-25">Heading 3</th>
                    <th scope="col" class="w-25">Heading 4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>This cell inherits <code>vertical-align: middle;</code> from
                        the
                        table</td>
                    <td>This cell inherits <code>vertical-align: middle;</code> from
                        the
                        table</td>
                    <td>This cell inherits <code>vertical-align: middle;</code> from
                        the
                        table</td>
                    <td>This here is some placeholder text, intended to take up
                        quite a
                        bit of vertical space, to demonstrate how the vertical
                        alignment
                        works in the preceding cells.</td>
                </tr>
                <tr class="align-bottom">
                    <td>This cell inherits <code>vertical-align: bottom;</code> from
                        the
                        table row</td>
                    <td>This cell inherits <code>vertical-align: bottom;</code> from
                        the
                        table row</td>
                    <td>This cell inherits <code>vertical-align: bottom;</code> from
                        the
                        table row</td>
                    <td>This here is some placeholder text, intended to take up
                        quite a
                        bit of vertical space, to demonstrate how the vertical
                        alignment
                        works in the preceding cells.</td>
                </tr>
                <tr>
                    <td>This cell inherits <code>vertical-align: middle;</code> from
                        the
                        table</td>
                    <td>This cell inherits <code>vertical-align: middle;</code> from
                        the
                        table</td>
                    <td class="align-top">This cell is aligned to the top.</td>
                    <td>This here is some placeholder text, intended to take up
                        quite a
                        bit of vertical space, to demonstrate how the vertical
                        alignment
                        works in the preceding cells.</td>
                </tr>
            </tbody>
        </table>
    </div>