
                        <!-- Page header -->
                        <div class="page-header">
                            <div>
                                <h1>Tables</h1>
                                <p class="subtitle">Modern data tables with sortable columns, status badges, and inline row actions.</p>
                            </div>
                            <div class="page-header__actions">
                                <button type="button" class="m-btn m-btn--ghost">
                                    <i class="fa-solid fa-download" aria-hidden="true"></i>
                                    Export
                                </button>
                                <button type="button" class="m-btn m-btn--primary">
                                    <i class="fa-solid fa-plus" aria-hidden="true"></i>
                                    Add row
                                </button>
                            </div>
                        </div>

                        <!-- Earnings + Top countries -->
                        <div class="row row-tight">
                            <div class="col-lg-8">
                                <section class="m-card" aria-labelledby="earnings-title">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title" id="earnings-title">Recent earnings</h2>
                                            <p class="m-card__subtitle">Last 8 orders across all storefronts.</p>
                                        </div>
                                    </header>
                                    <div class="table-responsive">
                                        <table class="table table-borderless table-striped table-earning">
                                            <thead>
                                                <tr>
                                                    <th>Date</th>
                                                    <th>Order</th>
                                                    <th>Name</th>
                                                    <th class="text-end">Price</th>
                                                    <th class="text-end">Qty</th>
                                                    <th class="text-end">Total</th>
                                                    <th>Customer</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Jan 15, 14:32</td><td>#100398</td><td>iPhone 17 128GB Titanium</td>
                                                    <td class="text-end">$999.00</td><td class="text-end">1</td><td class="text-end">$999.00</td>
                                                    <td>John Smith</td><td><span class="badge bg-success">Completed</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Jan 15, 14:32</td><td>#100397</td><td>Samsung Galaxy S25 Ultra</td>
                                                    <td class="text-end">$756.00</td><td class="text-end">1</td><td class="text-end">$756.00</td>
                                                    <td>Jane Doe</td><td><span class="badge bg-warning">Processing</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Jan 15, 14:32</td><td>#100396</td><td>Game Console Controller</td>
                                                    <td class="text-end">$22.00</td><td class="text-end">2</td><td class="text-end">$44.00</td>
                                                    <td>Mike Johnson</td><td><span class="badge bg-success">Completed</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Jan 15, 14:32</td><td>#100395</td><td>iPhone 17 Pro Max 1TB</td>
                                                    <td class="text-end">$1,199.00</td><td class="text-end">1</td><td class="text-end">$1,199.00</td>
                                                    <td>Sarah Wilson</td><td><span class="badge bg-danger">Cancelled</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Jan 15, 14:32</td><td>#100393</td><td>USB-C Thunderbolt 5 Cable</td>
                                                    <td class="text-end">$10.00</td><td class="text-end">3</td><td class="text-end">$30.00</td>
                                                    <td>David Chen</td><td><span class="badge bg-success">Completed</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Jan 15, 14:32</td><td>#100392</td><td>Smartwatch 4.0 LTE</td>
                                                    <td class="text-end">$199.00</td><td class="text-end">6</td><td class="text-end">$1,194.00</td>
                                                    <td>Emily Rodriguez</td><td><span class="badge bg-info">Shipped</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Jan 15, 14:32</td><td>#100391</td><td>Camera C430W 4k</td>
                                                    <td class="text-end">$699.00</td><td class="text-end">1</td><td class="text-end">$699.00</td>
                                                    <td>Robert Taylor</td><td><span class="badge bg-warning">Processing</span></td>
                                                </tr>
                                                <tr>
                                                    <td>Jan 14, 16:22</td><td>#100390</td><td>Wireless Earbuds Pro Max</td>
                                                    <td class="text-end">$249.00</td><td class="text-end">2</td><td class="text-end">$498.00</td>
                                                    <td>Lisa Anderson</td><td><span class="badge bg-success">Completed</span></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </section>
                            </div>
                            <div class="col-lg-4">
                                <section class="m-card" aria-labelledby="countries-title">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title" id="countries-title">Top countries</h2>
                                            <p class="m-card__subtitle">Revenue by region this month.</p>
                                        </div>
                                    </header>
                                    <table class="table-top-countries">
                                        <tbody>
                                            <tr><td>United States</td><td class="text-end">$119,366.96</td></tr>
                                            <tr><td>Australia</td><td class="text-end">$70,261.65</td></tr>
                                            <tr><td>United Kingdom</td><td class="text-end">$46,399.22</td></tr>
                                            <tr><td>Turkey</td><td class="text-end">$35,364.90</td></tr>
                                            <tr><td>Germany</td><td class="text-end">$20,366.96</td></tr>
                                            <tr><td>France</td><td class="text-end">$10,366.96</td></tr>
                                            <tr><td>Italy</td><td class="text-end">$1,639.32</td></tr>
                                        </tbody>
                                    </table>
                                </section>
                            </div>
                        </div>

                        <!-- User data + Top campaigns -->
                        <div class="row row-tight" style="margin-top: 16px;">
                            <div class="col-lg-6">
                                <section class="m-card" aria-labelledby="users-title">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title" id="users-title">Users</h2>
                                            <p class="m-card__subtitle">Manage roles and permissions.</p>
                                        </div>
                                        <div class="user-data filters">
                                            <div class="select-wrapper">
                                                <select class="form-select" name="property" aria-label="Filter properties">
                                                    <option selected>All properties</option>
                                                    <option>Products</option>
                                                    <option>Services</option>
                                                </select>
                                            </div>
                                            <div class="select-wrapper">
                                                <select class="form-select" name="time" aria-label="Filter by time">
                                                    <option selected>All time</option>
                                                    <option>By month</option>
                                                    <option>By day</option>
                                                </select>
                                            </div>
                                        </div>
                                    </header>
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th style="width:24px;"><label class="au-checkbox"><input type="checkbox" aria-label="Select all"><span class="au-checkmark"></span></label></th>
                                                    <th>Name</th>
                                                    <th>Role</th>
                                                    <th>Permission</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><label class="au-checkbox"><input type="checkbox"><span class="au-checkmark"></span></label></td>
                                                    <td>
                                                        <div class="table-data__info">
                                                            <h6>Lori Lynch</h6>
                                                            <span><a href="#">lori@example.com</a></span>
                                                        </div>
                                                    </td>
                                                    <td><span class="role admin">Admin</span></td>
                                                    <td>
                                                        <div class="select-wrapper">
                                                            <select class="form-select" aria-label="Permission">
                                                                <option selected>Full control</option>
                                                                <option>Post</option>
                                                                <option>Watch</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td><span class="more"><i class="fa-solid fa-ellipsis-vertical"></i></span></td>
                                                </tr>
                                                <tr>
                                                    <td><label class="au-checkbox"><input type="checkbox" checked><span class="au-checkmark"></span></label></td>
                                                    <td>
                                                        <div class="table-data__info">
                                                            <h6>John Doe</h6>
                                                            <span><a href="#">john@example.com</a></span>
                                                        </div>
                                                    </td>
                                                    <td><span class="role user">User</span></td>
                                                    <td>
                                                        <div class="select-wrapper">
                                                            <select class="form-select" aria-label="Permission">
                                                                <option>Full control</option>
                                                                <option selected>Post</option>
                                                                <option>Watch</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td><span class="more"><i class="fa-solid fa-ellipsis-vertical"></i></span></td>
                                                </tr>
                                                <tr>
                                                    <td><label class="au-checkbox"><input type="checkbox"><span class="au-checkmark"></span></label></td>
                                                    <td>
                                                        <div class="table-data__info">
                                                            <h6>Diane Myers</h6>
                                                            <span><a href="#">diane@example.com</a></span>
                                                        </div>
                                                    </td>
                                                    <td><span class="role user">User</span></td>
                                                    <td>
                                                        <div class="select-wrapper">
                                                            <select class="form-select" aria-label="Permission">
                                                                <option>Full control</option>
                                                                <option selected>Post</option>
                                                                <option>Watch</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td><span class="more"><i class="fa-solid fa-ellipsis-vertical"></i></span></td>
                                                </tr>
                                                <tr>
                                                    <td><label class="au-checkbox"><input type="checkbox"><span class="au-checkmark"></span></label></td>
                                                    <td>
                                                        <div class="table-data__info">
                                                            <h6>Cynthia Harvey</h6>
                                                            <span><a href="#">cynthia@example.com</a></span>
                                                        </div>
                                                    </td>
                                                    <td><span class="role member">Member</span></td>
                                                    <td>
                                                        <div class="select-wrapper">
                                                            <select class="form-select" aria-label="Permission">
                                                                <option selected>Full control</option>
                                                                <option>Post</option>
                                                                <option>Watch</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td><span class="more"><i class="fa-solid fa-ellipsis-vertical"></i></span></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="user-data__footer">
                                        <button class="au-btn-load" type="button">Load more</button>
                                    </div>
                                </section>
                            </div>
                            <div class="col-lg-6">
                                <section class="m-card" aria-labelledby="campaigns-title">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title" id="campaigns-title">Top campaigns</h2>
                                            <p class="m-card__subtitle">Revenue by campaign · last 90 days.</p>
                                        </div>
                                        <a href="#" class="m-btn m-btn--ghost" style="height:30px; padding:0 10px; font-size:12.5px;">View all</a>
                                    </header>
                                    <ul class="rank-list">
                                        <li>
                                            <span class="rank-list__rank">1</span>
                                            <span class="rank-list__title">Q1 product launch — paid</span>
                                            <span class="rank-list__value">$74,310</span>
                                            <span class="rank-list__bar" style="--rank-pct: 100%;"></span>
                                        </li>
                                        <li>
                                            <span class="rank-list__rank">2</span>
                                            <span class="rank-list__title">Black Friday early access</span>
                                            <span class="rank-list__value">$58,920</span>
                                            <span class="rank-list__bar" style="--rank-pct: 79%;"></span>
                                        </li>
                                        <li>
                                            <span class="rank-list__rank">3</span>
                                            <span class="rank-list__title">Spring sale — apparel</span>
                                            <span class="rank-list__value">$42,165</span>
                                            <span class="rank-list__bar" style="--rank-pct: 57%;"></span>
                                        </li>
                                        <li>
                                            <span class="rank-list__rank">4</span>
                                            <span class="rank-list__title">Reactivation email flow</span>
                                            <span class="rank-list__value">$36,400</span>
                                            <span class="rank-list__bar" style="--rank-pct: 49%;"></span>
                                        </li>
                                        <li>
                                            <span class="rank-list__rank">5</span>
                                            <span class="rank-list__title">Affiliate partner push</span>
                                            <span class="rank-list__value">$24,850</span>
                                            <span class="rank-list__bar" style="--rank-pct: 33%;"></span>
                                        </li>
                                        <li>
                                            <span class="rank-list__rank">6</span>
                                            <span class="rank-list__title">May newsletter digest</span>
                                            <span class="rank-list__value">$18,720</span>
                                            <span class="rank-list__bar" style="--rank-pct: 25%;"></span>
                                        </li>
                                        <li>
                                            <span class="rank-list__rank">7</span>
                                            <span class="rank-list__title">Influencer takeover — IG</span>
                                            <span class="rank-list__value">$14,330</span>
                                            <span class="rank-list__bar" style="--rank-pct: 19%;"></span>
                                        </li>
                                        <li>
                                            <span class="rank-list__rank">8</span>
                                            <span class="rank-list__title">Bundle promo — accessories</span>
                                            <span class="rank-list__value">$9,580</span>
                                            <span class="rank-list__bar" style="--rank-pct: 13%;"></span>
                                        </li>
                                    </ul>
                                </section>
                            </div>
                        </div>

                        <!-- Data table with toolbar -->
                        <div class="row row-tight" style="margin-top: 16px;">
                            <div class="col-md-12">
                                <section class="m-card" aria-labelledby="orders-title">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title" id="orders-title">Orders</h2>
                                            <p class="m-card__subtitle">All orders, with inline actions.</p>
                                        </div>
                                    </header>
                                    <div class="table-data__tool">
                                        <div class="table-data__tool-left">
                                            <div class="select-wrapper">
                                                <select class="form-select" aria-label="Filter properties">
                                                    <option selected>All properties</option>
                                                    <option>Option 1</option>
                                                    <option>Option 2</option>
                                                </select>
                                            </div>
                                            <div class="select-wrapper">
                                                <select class="form-select" aria-label="Time range">
                                                    <option selected>Today</option>
                                                    <option>3 days</option>
                                                    <option>1 week</option>
                                                </select>
                                            </div>
                                            <button class="au-btn-filter" type="button">
                                                <i class="fa-solid fa-filter" aria-hidden="true"></i> Filters
                                            </button>
                                        </div>
                                        <div class="table-data__tool-right">
                                            <button class="au-btn au-btn--green au-btn--small" type="button">
                                                <i class="fa-solid fa-plus" aria-hidden="true"></i> Add item
                                            </button>
                                            <div class="select-wrapper">
                                                <select class="form-select" aria-label="Export">
                                                    <option selected>Export</option>
                                                    <option>CSV</option>
                                                    <option>Excel</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-data2">
                                            <thead>
                                                <tr>
                                                    <th style="width:24px;"><label class="au-checkbox"><input type="checkbox" aria-label="Select all"><span class="au-checkmark"></span></label></th>
                                                    <th>Name</th>
                                                    <th>Email</th>
                                                    <th>Description</th>
                                                    <th>Date</th>
                                                    <th>Status</th>
                                                    <th>Price</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><label class="au-checkbox"><input type="checkbox"><span class="au-checkmark"></span></label></td>
                                                    <td>Lori Lynch</td>
                                                    <td><a class="block-email" href="#">lori@example.com</a></td>
                                                    <td>Samsung Galaxy S25 Ultra</td>
                                                    <td>Jan 15, 14:32</td>
                                                    <td><span class="status--process">Processed</span></td>
                                                    <td>$679.00</td>
                                                    <td>
                                                        <div class="table-data-feature">
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="Send"><i class="fa-solid fa-paper-plane"></i></button>
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="Delete"><i class="fa-solid fa-trash"></i></button>
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="More"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><label class="au-checkbox"><input type="checkbox"><span class="au-checkmark"></span></label></td>
                                                    <td>John Smith</td>
                                                    <td><a class="block-email" href="#">john@example.com</a></td>
                                                    <td>iPhone 17 128GB Titanium</td>
                                                    <td>Jan 15, 14:32</td>
                                                    <td><span class="status--process">Processed</span></td>
                                                    <td>$999.00</td>
                                                    <td>
                                                        <div class="table-data-feature">
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="Send"><i class="fa-solid fa-paper-plane"></i></button>
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="Delete"><i class="fa-solid fa-trash"></i></button>
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="More"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><label class="au-checkbox"><input type="checkbox"><span class="au-checkmark"></span></label></td>
                                                    <td>Sarah Wilson</td>
                                                    <td><a class="block-email" href="#">sarah@example.com</a></td>
                                                    <td>iPhone 17 Pro Max 1TB</td>
                                                    <td>Jan 15, 14:32</td>
                                                    <td><span class="status--denied">Denied</span></td>
                                                    <td>$1,199.00</td>
                                                    <td>
                                                        <div class="table-data-feature">
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="Send"><i class="fa-solid fa-paper-plane"></i></button>
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="Delete"><i class="fa-solid fa-trash"></i></button>
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="More"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><label class="au-checkbox"><input type="checkbox"><span class="au-checkmark"></span></label></td>
                                                    <td>Robert Taylor</td>
                                                    <td><a class="block-email" href="#">robert@example.com</a></td>
                                                    <td>Camera C430W 4k</td>
                                                    <td>Jan 15, 14:32</td>
                                                    <td><span class="status--process">Processed</span></td>
                                                    <td>$699.00</td>
                                                    <td>
                                                        <div class="table-data-feature">
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="Send"><i class="fa-solid fa-paper-plane"></i></button>
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="Delete"><i class="fa-solid fa-trash"></i></button>
                                                            <button class="item" type="button" data-bs-toggle="tooltip" title="More"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </section>
                            </div>
                        </div>

                        <!-- Sales table -->
                        <div class="row row-tight" style="margin-top: 16px;">
                            <div class="col-md-12">
                                <section class="m-card" aria-labelledby="sales-title">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title" id="sales-title">Sales by category</h2>
                                            <p class="m-card__subtitle">All sales for the past 30 days.</p>
                                        </div>
                                    </header>
                                    <div class="table-responsive">
                                        <table class="table table-borderless table-data3">
                                            <thead>
                                                <tr>
                                                    <th>Date</th>
                                                    <th>Category</th>
                                                    <th>Description</th>
                                                    <th>Status</th>
                                                    <th>Price</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr><td>Jan 15, 14:32</td><td>Mobile</td><td>iPhone 17 128GB Titanium</td><td><span class="status--process">Processed</span></td><td>$999.00</td></tr>
                                                <tr><td>Jan 15, 14:32</td><td>Mobile</td><td>Samsung Galaxy S25 Ultra</td><td><span class="status--process">Processed</span></td><td>$756.00</td></tr>
                                                <tr><td>Jan 15, 14:32</td><td>Game</td><td>Game Console Controller</td><td><span class="status--denied">Denied</span></td><td>$22.00</td></tr>
                                                <tr><td>Jan 15, 14:32</td><td>Mobile</td><td>iPhone 17 Pro Max 1TB</td><td><span class="status--denied">Denied</span></td><td>$1,199.00</td></tr>
                                                <tr><td>Jan 15, 14:32</td><td>Accessories</td><td>USB-C Thunderbolt 5 Cable</td><td><span class="status--process">Processed</span></td><td>$10.00</td></tr>
                                                <tr><td>Jan 15, 14:32</td><td>Wearables</td><td>Smartwatch 4.0 LTE</td><td><span class="status--denied">Denied</span></td><td>$199.00</td></tr>
                                                <tr><td>Jan 15, 14:32</td><td>Camera</td><td>Camera C430W 4k</td><td><span class="status--process">Processed</span></td><td>$699.00</td></tr>
                                                <tr><td>Jan 15, 14:32</td><td>Computers</td><td>MacBook Pro M5</td><td><span class="status--process">Processed</span></td><td>$1,799.00</td></tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </section>
                            </div>
                        </div>

                        <!-- Footer -->
                        <div class="row" style="margin-top: 28px;">
                            <div class="col-md-12">
                                <div class="copyright">
                                    <p>Copyright © 2026 Colorlib. All rights reserved. Template by <a href="https://colorlib.com" rel="nofollow" target="_blank">Colorlib</a>.</p>
                                </div>
                            </div>
                        </div>

