<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Custom Tables')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Tables', 'title' => 'Custom')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Tables', 'title' => 'Custom')) ?>

                    <div class="container">
<div class="grid grid-cols-1 gap-base">
<div class="card" data-table="">
<div class="card-header">
<h4 class="card-title">Custom Table with Search</h4>
</div>
<div class="card-header border-0">
<span class="text-default-400">
                                        Add the
                                        <code>data-table</code>
                                        attribute to the parent container of the table and the search input container.
                                        <br/>
                                        Then, add
                                        <code>data-table-search</code>
                                        to the search input element to enable search functionality.
                                    </span>
</div>
<div class="card-header">
<div>
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" data-table-search="" placeholder="Search product name..." type="search"/>
</div>
</div>
</div>
<div class="table-wrapper">
<table class="table table-hover">
<thead class="font-semibold">
<tr class="bg-light/15 text-2xs uppercase">
<th class="py-2 ps-4.5 pe-2 text-start">Product</th>
<th class="p-2 text-start">SKU</th>
<th class="p-2 text-start">Category</th>
<th class="p-2 text-start">Stock</th>
<th class="p-2 text-start" data-column="price">Price</th>
<th class="p-2 text-start">Orders</th>
<th class="p-2 text-start">Rating</th>
<th class="p-2 text-start">Status</th>
<th class="p-2 text-start">Published</th>
<th class="py-2 text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/1.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Wireless Earbuds</a>
</h5>
<p class="text-default-400 text-2xs">by: My Furniture</p>
</div>
</div>
</td>
<td>WB-10245</td>
<td>Electronics</td>
<td>
<h5>56</h5>
</td>
<td>$59.99</td>
<td>124</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(87)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>18 Apr, 2025 <small class="text-default-400">12:24 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--trash text-base"></i></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/2.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Smart LED Desk Lamp</a>
</h5>
<p class="text-default-400 text-2xs">by: BrightLite</p>
</div>
</div>
</td>
<td>SL-89012</td>
<td>Home &amp; Office</td>
<td>
<h5>32</h5>
</td>
<td>$39.49</td>
<td>78</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(54)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>22 Apr, 2025 <small class="text-default-400">09:45 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--trash text-base"></i></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/3.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Men's Running Shoes</a>
</h5>
<p class="text-default-400 text-2xs">by: ActiveWear Co.</p>
</div>
</div>
</td>
<td>RS-20450</td>
<td>Fashion</td>
<td>
<h5>120</h5>
</td>
<td>$89.00</td>
<td>231</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(142)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>24 Apr, 2025 <small class="text-default-400">03:10 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--trash text-base"></i></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/4.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Fitness Tracker Watch</a>
</h5>
<p class="text-default-400 text-2xs">by: FitPulse</p>
</div>
</div>
</td>
<td>FT-67123</td>
<td>Fitness</td>
<td>
<h5>78</h5>
</td>
<td>$49.95</td>
<td>198</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(89)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025 <small class="text-default-400">10:12 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--trash text-base"></i></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/5.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Gaming Mouse RGB</a>
</h5>
<p class="text-default-400 text-2xs">by: HyperClick</p>
</div>
</div>
</td>
<td>GM-72109</td>
<td>Gaming</td>
<td>
<h5>120</h5>
</td>
<td>$29.99</td>
<td>243</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(102)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>19 Apr, 2025 <small class="text-default-400">05:56 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--trash text-base"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end card -->
<div class="card" data-table="">
<div class="card-header">
<h4 class="card-title">Custom table with checkbox select</h4>
</div>
<div class="card-header border-0">
<span class="text-default-400">
                                        Add the attribute
                                        <code>data-table</code>
                                        to the parent container of the table, and use
                                        <code>data-table-select-all</code>
                                        on the checkbox input in the table header to enable select all functionality.
                                    </span>
</div>
<div class="card-header">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" data-table-search="" placeholder="Search product name..." type="search"/>
</div>
</div>
<div class="table-wrapper">
<table class="table table-hover">
<thead class="font-semibold">
<tr class="bg-light/15 text-2xs uppercase">
<th class="py-2 ps-4.5 pe-2 text-start">
<input class="form-checkbox bg-light size-4.25" data-table-select-all="" type="checkbox"/>
</th>
<th class="p-2 text-start">Product</th>
<th class="p-2 text-start">SKU</th>
<th class="p-2 text-start">Category</th>
<th class="p-2 text-start">Stock</th>
<th class="p-2 text-start" data-column="price">Price</th>
<th class="p-2 text-start">Orders</th>
<th class="p-2 text-start">Rating</th>
<th class="p-2 text-start">Status</th>
<th class="p-2 text-start">Published</th>
<th class="p-2 text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/1.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Wireless Earbuds</a>
</h5>
<p class="text-default-400 text-2xs">by: My Furniture</p>
</div>
</div>
</td>
<td>WB-10245</td>
<td>Electronics</td>
<td>
<h5>56</h5>
</td>
<td>$59.99</td>
<td>124</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(87)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>18 Apr, 2025 <small class="text-default-400">12:24 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--trash text-base"></i></a>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/2.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Smart LED Desk Lamp</a>
</h5>
<p class="text-default-400 text-2xs">by: BrightLite</p>
</div>
</div>
</td>
<td>SL-89012</td>
<td>Home &amp; Office</td>
<td>
<h5>32</h5>
</td>
<td>$39.49</td>
<td>78</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(54)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>22 Apr, 2025 <small class="text-default-400">09:45 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--trash text-base"></i></a>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/3.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Men's Running Shoes</a>
</h5>
<p class="text-default-400 text-2xs">by: ActiveWear Co.</p>
</div>
</div>
</td>
<td>RS-20450</td>
<td>Fashion</td>
<td>
<h5>120</h5>
</td>
<td>$89.00</td>
<td>231</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(142)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>24 Apr, 2025 <small class="text-default-400">03:10 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--trash text-base"></i></a>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/4.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Fitness Tracker Watch</a>
</h5>
<p class="text-default-400 text-2xs">by: FitPulse</p>
</div>
</div>
</td>
<td>FT-67123</td>
<td>Fitness</td>
<td>
<h5>78</h5>
</td>
<td>$49.95</td>
<td>198</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(89)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025 <small class="text-default-400">10:12 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--trash text-base"></i></a>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/5.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Gaming Mouse RGB</a>
</h5>
<p class="text-default-400 text-2xs">by: HyperClick</p>
</div>
</div>
</td>
<td>GM-72109</td>
<td>Gaming</td>
<td>
<h5>120</h5>
</td>
<td>$29.99</td>
<td>243</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(102)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>19 Apr, 2025 <small class="text-default-400">05:56 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--trash text-base"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end card -->
<div class="card" data-table="">
<div class="card-header">
<h4 class="card-title">Custom table with delete buttons</h4>
</div>
<div class="card-header border-0">
<span class="text-default-400">
                                        Add the attribute
                                        <code>data-table</code>
                                        to the parent container of the table.
                                        <br/>
                                        For single row deletion, add
                                        <code>data-table-delete-row</code>
                                        to the delete button inside the row.
                                        <br/>
                                        For multiple row deletion, add
                                        <code>data-table-select-all</code>
                                        to the header checkbox and
                                        <code>data-table-delete-selected</code>
                                        to the bulk delete button.
                                    </span>
</div>
<div class="card-header">
<div class="flex gap-2">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" data-table-search="" placeholder="Search product name..." type="search"/>
</div>
<button class="hidden btn bg-danger text-white hover:bg-danger-hover" data-table-delete-selected="">Delete</button>
</div>
</div>
<div class="table-wrapper">
<table class="table table-hover">
<thead class="font-semibold">
<tr class="bg-light/15 text-2xs uppercase">
<th class="py-2 ps-4.5 pe-2 text-start">
<input class="form-checkbox bg-light size-4.25" data-table-select-all="" type="checkbox"/>
</th>
<th class="p-2 text-start">Product</th>
<th class="p-2 text-start">SKU</th>
<th class="p-2 text-start">Category</th>
<th class="p-2 text-start">Stock</th>
<th class="p-2 text-start">Price</th>
<th class="p-2 text-start">Orders</th>
<th class="p-2 text-start">Rating</th>
<th class="p-2 text-start">Status</th>
<th class="p-2 text-start">Published</th>
<th class="p-2 text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/1.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Wireless Earbuds</a>
</h5>
<p class="text-default-400 text-2xs">by: My Furniture</p>
</div>
</div>
</td>
<td>WB-10245</td>
<td>Electronics</td>
<td>
<h5>56</h5>
</td>
<td>$59.99</td>
<td>124</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(87)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>18 Apr, 2025 <small class="text-default-400">12:24 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn bg-danger btn-icon btn-sm hover:text-primary size-7.5 rounded-full text-white" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/2.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Smart LED Desk Lamp</a>
</h5>
<p class="text-default-400 text-2xs">by: BrightLite</p>
</div>
</div>
</td>
<td>SL-89012</td>
<td>Home &amp; Office</td>
<td>
<h5>32</h5>
</td>
<td>$39.49</td>
<td>78</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(54)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>22 Apr, 2025 <small class="text-default-400">09:45 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/3.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Men's Running Shoes</a>
</h5>
<p class="text-default-400 text-2xs">by: ActiveWear Co.</p>
</div>
</div>
</td>
<td>RS-20450</td>
<td>Fashion</td>
<td>
<h5>120</h5>
</td>
<td>$89.00</td>
<td>231</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(142)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>24 Apr, 2025 <small class="text-default-400">03:10 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/4.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Fitness Tracker Watch</a>
</h5>
<p class="text-default-400 text-2xs">by: FitPulse</p>
</div>
</div>
</td>
<td>FT-67123</td>
<td>Fitness</td>
<td>
<h5>78</h5>
</td>
<td>$49.95</td>
<td>198</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(89)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025 <small class="text-default-400">10:12 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/5.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Gaming Mouse RGB</a>
</h5>
<p class="text-default-400 text-2xs">by: HyperClick</p>
</div>
</div>
</td>
<td>GM-72109</td>
<td>Gaming</td>
<td>
<h5>120</h5>
</td>
<td>$29.99</td>
<td>243</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(102)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>19 Apr, 2025 <small class="text-default-400">05:56 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end card -->
<div class="card" data-table="" data-table-rows-per-page="5">
<div class="card-header">
<h4 class="card-title">Custom table with pagination</h4>
</div>
<div class="card-header border-0">
<span class="text-default-400">
                                        Add the
                                        <code>data-table</code>
                                        attribute to the container of the table.
                                        <br/>
                                        To set the number of rows per page, add
                                        <code>data-table-rows-per-page="5"</code>
                                        (default 10) on the same container.
                                        <br/>
                                        To enable pagination, add the
                                        <code>data-table-pagination</code>
                                        attribute to the pagination element.
                                        <br/>
                                        To set rows per page dynamically, add the
                                        <code>data-table-set-rows-per-page</code>
                                        attribute to a
                                        <code>&lt;select&gt;</code>
                                        element with numeric options.
                                    </span>
</div>
<div class="border-default-300 flex flex-wrap justify-between gap-2.5 border-b border-dashed px-5 py-4">
<div class="flex gap-2">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" data-table-search="" placeholder="Search product name..." type="search"/>
</div>
<button class="hidden btn bg-danger text-white hover:bg-danger-hover" data-table-delete-selected="">Delete</button>
</div>
<div>
<select class="form-select" data-table-set-rows-per-page="">
<option selected="" value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
</div>
<div class="table-wrapper">
<table class="table table-hover">
<thead class="font-semibold">
<tr class="bg-light/15 text-2xs uppercase">
<th class="py-2 ps-4.5 pe-2 text-start">
<input class="form-checkbox bg-light size-4.25" data-table-select-all="" type="checkbox"/>
</th>
<th class="p-2 text-start">Product</th>
<th class="p-2 text-start">SKU</th>
<th class="p-2 text-start">Category</th>
<th class="p-2 text-start">Stock</th>
<th class="p-2 text-start">Price</th>
<th class="p-2 text-start">Orders</th>
<th class="p-2 text-start">Rating</th>
<th class="p-2 text-start">Status</th>
<th class="p-2 text-start">Published</th>
<th class="p-2 text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/1.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Wireless Earbuds</a>
</h5>
<p class="text-default-400 text-2xs">by: My Furniture</p>
</div>
</div>
</td>
<td>WB-10245</td>
<td>Electronics</td>
<td>
<h5>56</h5>
</td>
<td>$59.99</td>
<td>124</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(87)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>18 Apr, 2025 <small class="text-default-400">12:24 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn bg-danger btn-icon btn-sm hover:text-primary size-7.5 rounded-full text-white" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/2.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Smart LED Desk Lamp</a>
</h5>
<p class="text-default-400 text-2xs">by: BrightLite</p>
</div>
</div>
</td>
<td>SL-89012</td>
<td>Home &amp; Office</td>
<td>
<h5>32</h5>
</td>
<td>$39.49</td>
<td>78</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(54)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>22 Apr, 2025 <small class="text-default-400">09:45 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/3.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Men's Running Shoes</a>
</h5>
<p class="text-default-400 text-2xs">by: ActiveWear Co.</p>
</div>
</div>
</td>
<td>RS-20450</td>
<td>Fashion</td>
<td>
<h5>120</h5>
</td>
<td>$89.00</td>
<td>231</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(142)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>24 Apr, 2025 <small class="text-default-400">03:10 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/4.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Fitness Tracker Watch</a>
</h5>
<p class="text-default-400 text-2xs">by: FitPulse</p>
</div>
</div>
</td>
<td>FT-67123</td>
<td>Fitness</td>
<td>
<h5>78</h5>
</td>
<td>$49.95</td>
<td>198</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(89)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025 <small class="text-default-400">10:12 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/5.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Gaming Mouse RGB</a>
</h5>
<p class="text-default-400 text-2xs">by: HyperClick</p>
</div>
</div>
</td>
<td>GM-72109</td>
<td>Gaming</td>
<td>
<h5>120</h5>
</td>
<td>$29.99</td>
<td>243</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(102)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>19 Apr, 2025 <small class="text-default-400">05:56 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/6.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Modern Lounge Chair</a>
</h5>
<p class="text-default-400 text-2xs">by: UrbanLiving</p>
</div>
</div>
</td>
<td>FC-31220</td>
<td>Furniture</td>
<td>
<h5>24</h5>
</td>
<td>$199.00</td>
<td>38</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(27)</a></span>
</td>
<td>
<span class="badge text-2xs bg-danger/15 text-danger"> Out of Stock </span>
</td>
<td>18 Apr, 2025<small class="text-default-400"> 11:30 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/7.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Plush Toy Bear</a>
</h5>
<p class="text-default-400 text-2xs">by: Softies</p>
</div>
</div>
</td>
<td>TY-00788</td>
<td>Toys</td>
<td>
<h5>150</h5>
</td>
<td>$15.99</td>
<td>305</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(120)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>17 Apr, 2025<small class="text-default-400"> 04:21 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/8.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">55" Ultra HD Smart TV</a>
</h5>
<p class="text-default-400 text-2xs">by: ViewMaster</p>
</div>
</div>
</td>
<td>TV-5588</td>
<td>Electronics</td>
<td>
<h5>64</h5>
</td>
<td>$499.00</td>
<td>142</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(88)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>25 Apr, 2025<small class="text-default-400"> 10:10 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/9.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Apple iMac 24" M3</a>
</h5>
<p class="text-default-400 text-2xs">by: Apple</p>
</div>
</div>
</td>
<td>IMAC-M3-24</td>
<td>Computers</td>
<td>
<h5>18</h5>
</td>
<td>$1,399.00</td>
<td>29</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(16)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>24 Apr, 2025<small class="text-default-400">02:14 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-default-50">
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/10.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Smart Watch Pro X2</a>
</h5>
<p class="text-default-400 text-2xs">by: FitTech</p>
</div>
</div>
</td>
<td>SWPX2-GL</td>
<td>Wearables</td>
<td>
<h5>85</h5>
</td>
<td>$149.50</td>
<td>197</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(16)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025<small class="text-default-400">08:00 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer flex justify-end">
<div data-table-pagination=""></div>
</div>
</div>
<!-- end card -->
<div class="card" data-table="" data-table-rows-per-page="5">
<div class="card-header">
<h4 class="card-title">Custom table with pagination info</h4>
</div>
<div class="card-header border-0">
<span class="text-default-400">
                                        Add the
                                        <code>data-table</code>
                                        attribute to the container of the table.
                                        <br/>
                                        To set the number of rows per page, add
                                        <code>data-table-rows-per-page="5"</code>
                                        to the same container (default is 10).
                                        <br/>
                                        To enable pagination, add the
                                        <code>data-table-pagination</code>
                                        attribute to the pagination element.
                                        <br/>
                                        To show pagination info, add the
                                        <code>data-table-pagination-info</code>
                                        attribute to the info element.
                                        <br/>
                                        By default, it displays:
                                        <code>Showing 1 to ... entries</code>
                                        . You can customize it by setting
                                        <code>data-table-pagination-info="products"</code>
                                        to show:
                                        <code>Showing 1 to ... products</code>
                                        .
                                    </span>
</div>
<div class="border-default-300 flex flex-wrap justify-between gap-2.5 border-b border-dashed px-5 py-4">
<div class="flex gap-2">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" data-table-search="" placeholder="Search product name..." type="search"/>
</div>
<button class="hidden btn bg-danger text-white hover:bg-danger-hover" data-table-delete-selected="">Delete</button>
</div>
<div>
<select class="form-select" data-table-set-rows-per-page="">
<option selected="" value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
</div>
<div class="table-wrapper">
<table class="table table-hover">
<thead class="font-semibold">
<tr class="bg-light/15 text-2xs uppercase">
<th class="py-2 ps-4.5 pe-2 text-start">
<input class="form-checkbox bg-light size-4.25" data-table-select-all="" type="checkbox"/>
</th>
<th class="p-2 text-start">Product</th>
<th class="p-2 text-start">SKU</th>
<th class="p-2 text-start">Category</th>
<th class="p-2 text-start">Stock</th>
<th class="p-2 text-start">Price</th>
<th class="p-2 text-start">Orders</th>
<th class="p-2 text-start">Rating</th>
<th class="p-2 text-start">Status</th>
<th class="p-2 text-start">Published</th>
<th class="p-2 text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/1.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Wireless Earbuds</a>
</h5>
<p class="text-default-400 text-2xs">by: My Furniture</p>
</div>
</div>
</td>
<td>WB-10245</td>
<td>Electronics</td>
<td>
<h5>56</h5>
</td>
<td>$59.99</td>
<td>124</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(87)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>18 Apr, 2025 <small class="text-default-400">12:24 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn bg-danger btn-icon btn-sm hover:text-primary size-7.5 rounded-full text-white" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/2.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Smart LED Desk Lamp</a>
</h5>
<p class="text-default-400 text-2xs">by: BrightLite</p>
</div>
</div>
</td>
<td>SL-89012</td>
<td>Home &amp; Office</td>
<td>
<h5>32</h5>
</td>
<td>$39.49</td>
<td>78</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(54)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>22 Apr, 2025 <small class="text-default-400">09:45 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/3.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Men's Running Shoes</a>
</h5>
<p class="text-default-400 text-2xs">by: ActiveWear Co.</p>
</div>
</div>
</td>
<td>RS-20450</td>
<td>Fashion</td>
<td>
<h5>120</h5>
</td>
<td>$89.00</td>
<td>231</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(142)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>24 Apr, 2025 <small class="text-default-400">03:10 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/4.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Fitness Tracker Watch</a>
</h5>
<p class="text-default-400 text-2xs">by: FitPulse</p>
</div>
</div>
</td>
<td>FT-67123</td>
<td>Fitness</td>
<td>
<h5>78</h5>
</td>
<td>$49.95</td>
<td>198</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(89)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025 <small class="text-default-400">10:12 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/5.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Gaming Mouse RGB</a>
</h5>
<p class="text-default-400 text-2xs">by: HyperClick</p>
</div>
</div>
</td>
<td>GM-72109</td>
<td>Gaming</td>
<td>
<h5>120</h5>
</td>
<td>$29.99</td>
<td>243</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(102)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>19 Apr, 2025 <small class="text-default-400">05:56 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/6.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Modern Lounge Chair</a>
</h5>
<p class="text-default-400 text-2xs">by: UrbanLiving</p>
</div>
</div>
</td>
<td>FC-31220</td>
<td>Furniture</td>
<td>
<h5>24</h5>
</td>
<td>$199.00</td>
<td>38</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(27)</a></span>
</td>
<td>
<span class="badge text-2xs bg-danger/15 text-danger"> Out of Stock </span>
</td>
<td>18 Apr, 2025<small class="text-default-400"> 11:30 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/7.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Plush Toy Bear</a>
</h5>
<p class="text-default-400 text-2xs">by: Softies</p>
</div>
</div>
</td>
<td>TY-00788</td>
<td>Toys</td>
<td>
<h5>150</h5>
</td>
<td>$15.99</td>
<td>305</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(120)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>17 Apr, 2025<small class="text-default-400"> 04:21 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/8.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">55" Ultra HD Smart TV</a>
</h5>
<p class="text-default-400 text-2xs">by: ViewMaster</p>
</div>
</div>
</td>
<td>TV-5588</td>
<td>Electronics</td>
<td>
<h5>64</h5>
</td>
<td>$499.00</td>
<td>142</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(88)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>25 Apr, 2025<small class="text-default-400"> 10:10 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/9.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Apple iMac 24" M3</a>
</h5>
<p class="text-default-400 text-2xs">by: Apple</p>
</div>
</div>
</td>
<td>IMAC-M3-24</td>
<td>Computers</td>
<td>
<h5>18</h5>
</td>
<td>$1,399.00</td>
<td>29</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(16)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>24 Apr, 2025<small class="text-default-400">02:14 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-default-50">
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/10.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Smart Watch Pro X2</a>
</h5>
<p class="text-default-400 text-2xs">by: FitTech</p>
</div>
</div>
</td>
<td>SWPX2-GL</td>
<td>Wearables</td>
<td>
<h5>85</h5>
</td>
<td>$149.50</td>
<td>197</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(16)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025<small class="text-default-400">08:00 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<div data-table-pagination-info="products"></div>
<div data-table-pagination=""></div>
</div>
</div>
<!-- end card -->
<div class="card" data-table="" data-table-rows-per-page="5">
<div class="card-header">
<h4 class="card-title">Custom table with filters</h4>
</div>
<div class="card-header border-0">
<span class="text-default-400">
                                        Add the
                                        <code>data-table</code>
                                        attribute to the container of the table.
                                        <br/>
                                        To enable filtering, add the
                                        <code>data-table-filter="filter-name"</code>
                                        attribute to a
                                        <code>&lt;select&gt;</code>
                                        element with options that match the values in the target column.
                                        <br/>
                                        Also, add
                                        <code>data-column="filter-name"</code>
                                        to the corresponding column header to link the filter to that column.
                                    </span>
</div>
<div class="border-default-300 flex flex-wrap justify-between gap-2.5 border-b border-dashed px-5 py-4">
<div class="flex gap-2">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" data-table-search="" placeholder="Search product name..." type="search"/>
</div>
<button class="hidden btn bg-danger text-white hover:bg-danger-hover" data-table-delete-selected="">Delete</button>
</div>
<div class="flex flex-wrap items-center gap-2.5 md:flex-nowrap">
<span class="me-2.5 font-semibold text-nowrap">Filter By:</span>
<div class="input-icon-group">
<i class="iconify tabler--tag input-icon"></i>
<select class="form-select" data-table-filter="category">
<option value=" All">Category</option>
<option value="Electronics">Electronics</option>
<option value="Fashion">Fashion</option>
<option value="Home">Home</option>
<option value="Sports">Sports</option>
<option value="Beauty">Beauty</option>
</select>
</div>
<div class="input-icon-group">
<i class="iconify tabler--box input-icon"></i>
<select class="form-input" data-table-filter="status">
<option value="">Status</option>
<option value="Published">Published</option>
<option value="Pending">Pending</option>
<option value="Out of Stock">Out of Stock</option>
</select>
</div>
<div>
<select class="form-select" data-table-set-rows-per-page="">
<option selected="" value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
</div>
</div>
<div class="table-wrapper">
<table class="table table-hover">
<thead class="font-semibold">
<tr class="bg-light/15 text-2xs uppercase">
<th class="py-2 ps-4.5 pe-2 text-start">
<input class="form-checkbox bg-light size-4.25" data-table-select-all="" type="checkbox"/>
</th>
<th class="p-2 text-start">Product</th>
<th class="p-2 text-start">SKU</th>
<th class="p-2 text-start" data-column="category">Category</th>
<th class="p-2 text-start">Stock</th>
<th class="p-2 text-start">Price</th>
<th class="p-2 text-start">Orders</th>
<th class="p-2 text-start">Rating</th>
<th class="p-2 text-start" data-column="status">Status</th>
<th class="p-2 text-start">Published</th>
<th class="p-2 text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/1.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Wireless Earbuds</a>
</h5>
<p class="text-default-400 text-2xs">by: My Furniture</p>
</div>
</div>
</td>
<td>WB-10245</td>
<td>Electronics</td>
<td>
<h5>56</h5>
</td>
<td>$59.99</td>
<td>124</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(87)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>18 Apr, 2025 <small class="text-default-400">12:24 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn bg-danger btn-icon btn-sm hover:text-primary size-7.5 rounded-full text-white" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/2.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Smart LED Desk Lamp</a>
</h5>
<p class="text-default-400 text-2xs">by: BrightLite</p>
</div>
</div>
</td>
<td>SL-89012</td>
<td>Home &amp; Office</td>
<td>
<h5>32</h5>
</td>
<td>$39.49</td>
<td>78</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(54)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>22 Apr, 2025 <small class="text-default-400">09:45 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/3.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Men's Running Shoes</a>
</h5>
<p class="text-default-400 text-2xs">by: ActiveWear Co.</p>
</div>
</div>
</td>
<td>RS-20450</td>
<td>Fashion</td>
<td>
<h5>120</h5>
</td>
<td>$89.00</td>
<td>231</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(142)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>24 Apr, 2025 <small class="text-default-400">03:10 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/4.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Fitness Tracker Watch</a>
</h5>
<p class="text-default-400 text-2xs">by: FitPulse</p>
</div>
</div>
</td>
<td>FT-67123</td>
<td>Fitness</td>
<td>
<h5>78</h5>
</td>
<td>$49.95</td>
<td>198</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(89)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025 <small class="text-default-400">10:12 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/5.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Gaming Mouse RGB</a>
</h5>
<p class="text-default-400 text-2xs">by: HyperClick</p>
</div>
</div>
</td>
<td>GM-72109</td>
<td>Gaming</td>
<td>
<h5>120</h5>
</td>
<td>$29.99</td>
<td>243</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(102)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>19 Apr, 2025 <small class="text-default-400">05:56 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/6.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Modern Lounge Chair</a>
</h5>
<p class="text-default-400 text-2xs">by: UrbanLiving</p>
</div>
</div>
</td>
<td>FC-31220</td>
<td>Furniture</td>
<td>
<h5>24</h5>
</td>
<td>$199.00</td>
<td>38</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(27)</a></span>
</td>
<td>
<span class="badge text-2xs bg-danger/15 text-danger"> Out of Stock </span>
</td>
<td>18 Apr, 2025<small class="text-default-400"> 11:30 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/7.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Plush Toy Bear</a>
</h5>
<p class="text-default-400 text-2xs">by: Softies</p>
</div>
</div>
</td>
<td>TY-00788</td>
<td>Toys</td>
<td>
<h5>150</h5>
</td>
<td>$15.99</td>
<td>305</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(120)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>17 Apr, 2025<small class="text-default-400"> 04:21 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/8.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">55" Ultra HD Smart TV</a>
</h5>
<p class="text-default-400 text-2xs">by: ViewMaster</p>
</div>
</div>
</td>
<td>TV-5588</td>
<td>Electronics</td>
<td>
<h5>64</h5>
</td>
<td>$499.00</td>
<td>142</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(88)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>25 Apr, 2025<small class="text-default-400"> 10:10 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/9.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Apple iMac 24" M3</a>
</h5>
<p class="text-default-400 text-2xs">by: Apple</p>
</div>
</div>
</td>
<td>IMAC-M3-24</td>
<td>Computers</td>
<td>
<h5>18</h5>
</td>
<td>$1,399.00</td>
<td>29</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(16)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>24 Apr, 2025<small class="text-default-400">02:14 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-default-50">
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/10.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Smart Watch Pro X2</a>
</h5>
<p class="text-default-400 text-2xs">by: FitTech</p>
</div>
</div>
</td>
<td>SWPX2-GL</td>
<td>Wearables</td>
<td>
<h5>85</h5>
</td>
<td>$149.50</td>
<td>197</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(16)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025<small class="text-default-400">08:00 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<div data-table-pagination-info="products"></div>
<div data-table-pagination=""></div>
</div>
</div>
<!-- end card -->
<div class="card" data-table="" data-table-rows-per-page="5">
<div class="card-header">
<h4 class="card-title">Custom table with range filters</h4>
</div>
<div class="card-header border-0">
<span class="text-default-400">
                                        Add the
                                        <code>data-table</code>
                                        attribute to the container of the table.
                                        <br/>
                                        To enable filtering, add the
                                        <code>data-table-range-filter="filter-name"</code>
                                        attribute to a
                                        <code>&lt;select&gt;</code>
                                        element with options that match the values in the target column.
                                        <br/>
                                        Also, add
                                        <code>data-column="filter-name"</code>
                                        to the corresponding column header to link the filter to that column.
                                    </span>
</div>
<div class="border-default-300 flex flex-wrap justify-between gap-2.5 border-b border-dashed px-5 py-4">
<div class="flex gap-2">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" data-table-search="" placeholder="Search product name..." type="search"/>
</div>
<button class="hidden btn bg-danger text-white hover:bg-danger-hover" data-table-delete-selected="">Delete</button>
</div>
<div class="flex flex-wrap items-center gap-2.5 md:flex-nowrap">
<span class="me-2.5 font-semibold text-nowrap">Filter By:</span>
<div class="input-icon-group">
<i class="iconify tabler--currency-dollar input-icon"></i>
<select class="form-select" data-table-range-filter="price">
<option value="">Price Range</option>
<option value="0-50">$0 - $50</option>
<option value="51-150">$51 - $150</option>
<option value="151-500">$151 - $500</option>
<option value="500+">$500+</option>
</select>
</div>
<div class="input-icon-group">
<i class="iconify tabler--calendar input-icon"></i>
<select class="form-select" data-table-range-filter="date">
<option value="All">Date Range</option>
<option value="Today">Today</option>
<option value="Last 7 Days">Last 7 Days</option>
<option value="Last 30 Days">Last 30 Days</option>
<option value="This Year">This Year</option>
</select>
</div>
<div>
<select class="form-select" data-table-set-rows-per-page="">
<option selected="" value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
</div>
</div>
<div class="table-wrapper">
<table class="table table-hover">
<thead class="font-semibold">
<tr class="bg-light/15 text-2xs uppercase">
<th class="py-2 ps-4.5 pe-2 text-start">
<input class="form-checkbox bg-light size-4.25" data-table-select-all="" type="checkbox"/>
</th>
<th class="p-2 text-start">Product</th>
<th class="p-2 text-start">SKU</th>
<th class="p-2 text-start">Category</th>
<th class="p-2 text-start">Stock</th>
<th class="p-2 text-start" data-column="price">Price</th>
<th class="p-2 text-start">Orders</th>
<th class="p-2 text-start">Rating</th>
<th class="p-2 text-start">Status</th>
<th class="p-2 text-start" data-column="date">Published</th>
<th class="p-2 text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/1.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Wireless Earbuds</a>
</h5>
<p class="text-default-400 text-2xs">by: My Furniture</p>
</div>
</div>
</td>
<td>WB-10245</td>
<td>Electronics</td>
<td>
<h5>56</h5>
</td>
<td>$59.99</td>
<td>124</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(87)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>18 Apr, 2025 <small class="text-default-400">12:24 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn bg-danger btn-icon btn-sm hover:text-primary size-7.5 rounded-full text-white" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/2.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Smart LED Desk Lamp</a>
</h5>
<p class="text-default-400 text-2xs">by: BrightLite</p>
</div>
</div>
</td>
<td>SL-89012</td>
<td>Home &amp; Office</td>
<td>
<h5>32</h5>
</td>
<td>$39.49</td>
<td>78</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(54)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>22 Apr, 2025 <small class="text-default-400">09:45 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/3.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Men's Running Shoes</a>
</h5>
<p class="text-default-400 text-2xs">by: ActiveWear Co.</p>
</div>
</div>
</td>
<td>RS-20450</td>
<td>Fashion</td>
<td>
<h5>120</h5>
</td>
<td>$89.00</td>
<td>231</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(142)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>24 Apr, 2025 <small class="text-default-400">03:10 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/4.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Fitness Tracker Watch</a>
</h5>
<p class="text-default-400 text-2xs">by: FitPulse</p>
</div>
</div>
</td>
<td>FT-67123</td>
<td>Fitness</td>
<td>
<h5>78</h5>
</td>
<td>$49.95</td>
<td>198</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(89)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025 <small class="text-default-400">10:12 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/5.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Gaming Mouse RGB</a>
</h5>
<p class="text-default-400 text-2xs">by: HyperClick</p>
</div>
</div>
</td>
<td>GM-72109</td>
<td>Gaming</td>
<td>
<h5>120</h5>
</td>
<td>$29.99</td>
<td>243</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(102)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>19 Apr, 2025 <small class="text-default-400">05:56 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/6.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Modern Lounge Chair</a>
</h5>
<p class="text-default-400 text-2xs">by: UrbanLiving</p>
</div>
</div>
</td>
<td>FC-31220</td>
<td>Furniture</td>
<td>
<h5>24</h5>
</td>
<td>$199.00</td>
<td>38</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(27)</a></span>
</td>
<td>
<span class="badge text-2xs bg-danger/15 text-danger"> Out of Stock </span>
</td>
<td>18 Apr, 2025<small class="text-default-400"> 11:30 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/7.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Plush Toy Bear</a>
</h5>
<p class="text-default-400 text-2xs">by: Softies</p>
</div>
</div>
</td>
<td>TY-00788</td>
<td>Toys</td>
<td>
<h5>150</h5>
</td>
<td>$15.99</td>
<td>305</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(120)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>17 Apr, 2025<small class="text-default-400"> 04:21 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/8.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">55" Ultra HD Smart TV</a>
</h5>
<p class="text-default-400 text-2xs">by: ViewMaster</p>
</div>
</div>
</td>
<td>TV-5588</td>
<td>Electronics</td>
<td>
<h5>64</h5>
</td>
<td>$499.00</td>
<td>142</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(88)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>25 Apr, 2025<small class="text-default-400"> 10:10 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/9.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Apple iMac 24" M3</a>
</h5>
<p class="text-default-400 text-2xs">by: Apple</p>
</div>
</div>
</td>
<td>IMAC-M3-24</td>
<td>Computers</td>
<td>
<h5>18</h5>
</td>
<td>$1,399.00</td>
<td>29</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(16)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>24 Apr, 2025<small class="text-default-400">02:14 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-default-50">
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/10.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Smart Watch Pro X2</a>
</h5>
<p class="text-default-400 text-2xs">by: FitTech</p>
</div>
</div>
</td>
<td>SWPX2-GL</td>
<td>Wearables</td>
<td>
<h5>85</h5>
</td>
<td>$149.50</td>
<td>197</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(16)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025<small class="text-default-400">08:00 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<div data-table-pagination-info="products"></div>
<div data-table-pagination=""></div>
</div>
</div>
<!-- end card -->
<div class="card" data-table="" data-table-rows-per-page="5">
<div class="card-header">
<h4 class="card-title">Custom table with sort</h4>
</div>
<div class="card-header border-0">
<span class="text-default-400">
                                        Add the
                                        <code>data-table</code>
                                        attribute to the container of the table.
                                        <br/>
                                        To enable sorting, add
                                        <code>data-table-sort</code>
                                        on header of column.
                                    </span>
</div>
<div class="border-default-300 flex flex-wrap justify-between gap-2.5 border-b border-dashed px-5 py-4">
<div class="flex gap-2">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" data-table-search="" placeholder="Search product name..." type="search"/>
</div>
<button class="hidden btn bg-danger text-white hover:bg-danger-hover" data-table-delete-selected="">Delete</button>
</div>
<div class="flex flex-wrap items-center gap-2.5 md:flex-nowrap">
<span class="me-2.5 font-semibold text-nowrap">Filter By:</span>
<div class="input-icon-group">
<i class="iconify tabler--tag input-icon"></i>
<select class="form-select" data-table-filter="category">
<option value=" All">Category</option>
<option value="Electronics">Electronics</option>
<option value="Fashion">Fashion</option>
<option value="Home">Home</option>
<option value="Sports">Sports</option>
<option value="Beauty">Beauty</option>
</select>
</div>
<div class="input-icon-group">
<i class="iconify tabler--box input-icon"></i>
<select class="form-select" data-table-filter="status">
<option value="">Status</option>
<option value="Published">Published</option>
<option value="Pending">Pending</option>
<option value="Out of Stock">Out of Stock</option>
</select>
</div>
<div class="input-icon-group">
<i class="iconify tabler--currency-dollar input-icon"></i>
<select class="form-select" data-table-range-filter="price">
<option value="">Price Range</option>
<option value="0-50">$0 - $50</option>
<option value="51-150">$51 - $150</option>
<option value="151-500">$151 - $500</option>
<option value="500+">$500+</option>
</select>
</div>
<div>
<select class="form-select" data-table-set-rows-per-page="">
<option selected="" value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
</div>
</div>
<div class="table-wrapper">
<table class="table table-hover">
<thead class="font-semibold">
<tr class="bg-light/15 text-2xs uppercase">
<th class="py-2 ps-4.5 pe-2 text-start">
<input class="form-checkbox bg-light size-4.25" data-table-select-all="" type="checkbox"/>
</th>
<th class="p-2 text-start">Product</th>
<th class="p-2 text-start">SKU</th>
<th class="p-2 text-start" data-table-sort="">Category</th>
<th class="p-2 text-start" data-table-sort="">Stock</th>
<th class="p-2 text-start" data-column="price" data-table-sort="">Price</th>
<th class="p-2 text-start" data-table-sort="">Orders</th>
<th class="p-2 text-start">Rating</th>
<th class="p-2 text-start" data-table-sort="">Status</th>
<th class="p-2 text-start" data-column="date" data-table-sort="">Published</th>
<th class="p-2 text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/1.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Wireless Earbuds</a>
</h5>
<p class="text-default-400 text-2xs">by: My Furniture</p>
</div>
</div>
</td>
<td>WB-10245</td>
<td>Electronics</td>
<td>
<h5>56</h5>
</td>
<td>$59.99</td>
<td>124</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(87)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>18 Apr, 2025 <small class="text-default-400">12:24 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn bg-danger btn-icon btn-sm hover:text-primary size-7.5 rounded-full text-white" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/2.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Smart LED Desk Lamp</a>
</h5>
<p class="text-default-400 text-2xs">by: BrightLite</p>
</div>
</div>
</td>
<td>SL-89012</td>
<td>Home &amp; Office</td>
<td>
<h5>32</h5>
</td>
<td>$39.49</td>
<td>78</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(54)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>22 Apr, 2025 <small class="text-default-400">09:45 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/3.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Men's Running Shoes</a>
</h5>
<p class="text-default-400 text-2xs">by: ActiveWear Co.</p>
</div>
</div>
</td>
<td>RS-20450</td>
<td>Fashion</td>
<td>
<h5>120</h5>
</td>
<td>$89.00</td>
<td>231</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(142)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>24 Apr, 2025 <small class="text-default-400">03:10 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/4.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Fitness Tracker Watch</a>
</h5>
<p class="text-default-400 text-2xs">by: FitPulse</p>
</div>
</div>
</td>
<td>FT-67123</td>
<td>Fitness</td>
<td>
<h5>78</h5>
</td>
<td>$49.95</td>
<td>198</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(89)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025 <small class="text-default-400">10:12 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/5.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Gaming Mouse RGB</a>
</h5>
<p class="text-default-400 text-2xs">by: HyperClick</p>
</div>
</div>
</td>
<td>GM-72109</td>
<td>Gaming</td>
<td>
<h5>120</h5>
</td>
<td>$29.99</td>
<td>243</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(102)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>19 Apr, 2025 <small class="text-default-400">05:56 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/6.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Modern Lounge Chair</a>
</h5>
<p class="text-default-400 text-2xs">by: UrbanLiving</p>
</div>
</div>
</td>
<td>FC-31220</td>
<td>Furniture</td>
<td>
<h5>24</h5>
</td>
<td>$199.00</td>
<td>38</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(27)</a></span>
</td>
<td>
<span class="badge text-2xs bg-danger/15 text-danger"> Out of Stock </span>
</td>
<td>18 Apr, 2025<small class="text-default-400"> 11:30 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/7.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Plush Toy Bear</a>
</h5>
<p class="text-default-400 text-2xs">by: Softies</p>
</div>
</div>
</td>
<td>TY-00788</td>
<td>Toys</td>
<td>
<h5>150</h5>
</td>
<td>$15.99</td>
<td>305</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(120)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>17 Apr, 2025<small class="text-default-400"> 04:21 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/8.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">55" Ultra HD Smart TV</a>
</h5>
<p class="text-default-400 text-2xs">by: ViewMaster</p>
</div>
</div>
</td>
<td>TV-5588</td>
<td>Electronics</td>
<td>
<h5>64</h5>
</td>
<td>$499.00</td>
<td>142</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(88)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>25 Apr, 2025<small class="text-default-400"> 10:10 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/9.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Apple iMac 24" M3</a>
</h5>
<p class="text-default-400 text-2xs">by: Apple</p>
</div>
</div>
</td>
<td>IMAC-M3-24</td>
<td>Computers</td>
<td>
<h5>18</h5>
</td>
<td>$1,399.00</td>
<td>29</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(16)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>24 Apr, 2025<small class="text-default-400">02:14 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-default-50">
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/10.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a href="/ecommerce-product-details">Smart Watch Pro X2</a>
</h5>
<p class="text-default-400 text-2xs">by: FitTech</p>
</div>
</div>
</td>
<td>SWPX2-GL</td>
<td>Wearables</td>
<td>
<h5>85</h5>
</td>
<td>$149.50</td>
<td>197</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" href="/ecommerce-reviews">(16)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025<small class="text-default-400">08:00 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<div data-table-pagination-info="products"></div>
<div data-table-pagination=""></div>
</div>
</div>
<!-- end card -->
<div class="card" data-table="" data-table-rows-per-page="5">
<div class="card-header">
<h4 class="card-title">Custom table with sort (for complex cell)</h4>
</div>
<div class="card-header border-0">
<span class="text-default-400">
                                        Add the
                                        <code>data-table</code>
                                        attribute to the container of the table.
                                        <br/>
                                        To enable sorting, add
                                        <code>data-table-sort="sort-name"</code>
                                        to the header cell of the column.
                                        <br/>
                                        Also, add
                                        <code>data-sort="sort-name"</code>
                                        to the element inside each corresponding table cell that should be used for sorting.
                                    </span>
</div>
<div class="border-default-300 flex flex-wrap justify-between gap-2.5 border-b border-dashed px-5 py-4">
<div class="flex gap-2">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" data-table-search="" placeholder="Search product name..." type="search"/>
</div>
<button class="hidden btn bg-danger text-white hover:bg-danger-hover" data-table-delete-selected="">Delete</button>
</div>
<div class="flex flex-wrap items-center gap-2.5 md:flex-nowrap">
<span class="me-2.5 font-semibold text-nowrap">Filter By:</span>
<div class="input-icon-group">
<i class="iconify tabler--tag input-icon"></i>
<select class="form-select" data-table-filter="category">
<option value=" All">Category</option>
<option value="Electronics">Electronics</option>
<option value="Fashion">Fashion</option>
<option value="Home">Home</option>
<option value="Sports">Sports</option>
<option value="Beauty">Beauty</option>
</select>
</div>
<div class="input-icon-group">
<i class="iconify tabler--box input-icon"></i>
<select class="form-select" data-table-filter="status">
<option value="">Status</option>
<option value="Published">Published</option>
<option value="Pending">Pending</option>
<option value="Out of Stock">Out of Stock</option>
</select>
</div>
<div class="input-icon-group">
<i class="iconify tabler--currency-dollar input-icon"></i>
<select class="form-select" data-table-range-filter="price">
<option value="">Price Range</option>
<option value="0-50">$0 - $50</option>
<option value="51-150">$51 - $150</option>
<option value="151-500">$151 - $500</option>
<option value="500+">$500+</option>
</select>
</div>
<div>
<select class="form-select" data-table-set-rows-per-page="">
<option selected="" value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
</div>
</div>
<div class="table-wrapper">
<table class="table table-hover">
<thead class="font-semibold">
<tr class="bg-light/15 text-2xs uppercase">
<th class="py-2 ps-4.5 pe-2 text-start">
<input class="form-checkbox bg-light size-4.25" data-table-select-all="" type="checkbox"/>
</th>
<th class="p-2 text-start" data-table-sort="product">Product</th>
<th class="p-2 text-start">SKU</th>
<th class="p-2 text-start" data-column="category">Category</th>
<th class="p-2 text-start">Stock</th>
<th class="p-2 text-start" data-column="price">Price</th>
<th class="p-2 text-start">Orders</th>
<th class="p-2 text-start" data-table-sort="rating">Rating</th>
<th class="p-2 text-start" data-column="status">Status</th>
<th class="p-2 text-start">Published</th>
<th class="p-2 text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/1.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Wireless Earbuds</a>
</h5>
<p class="text-default-400 text-2xs">by: My Furniture</p>
</div>
</div>
</td>
<td>WB-10245</td>
<td>Electronics</td>
<td>
<h5>56</h5>
</td>
<td>$59.99</td>
<td>124</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(87)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>18 Apr, 2025 <small class="text-default-400">12:24 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn bg-danger btn-icon btn-sm hover:text-primary size-7.5 rounded-full text-white" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/2.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Smart LED Desk Lamp</a>
</h5>
<p class="text-default-400 text-2xs">by: BrightLite</p>
</div>
</div>
</td>
<td>SL-89012</td>
<td>Home &amp; Office</td>
<td>
<h5>32</h5>
</td>
<td>$39.49</td>
<td>78</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(54)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>22 Apr, 2025 <small class="text-default-400">09:45 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/3.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Men's Running Shoes</a>
</h5>
<p class="text-default-400 text-2xs">by: ActiveWear Co.</p>
</div>
</div>
</td>
<td>RS-20450</td>
<td>Fashion</td>
<td>
<h5>120</h5>
</td>
<td>$89.00</td>
<td>231</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(142)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>24 Apr, 2025 <small class="text-default-400">03:10 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/4.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Fitness Tracker Watch</a>
</h5>
<p class="text-default-400 text-2xs">by: FitPulse</p>
</div>
</div>
</td>
<td>FT-67123</td>
<td>Fitness</td>
<td>
<h5>78</h5>
</td>
<td>$49.95</td>
<td>198</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(89)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025 <small class="text-default-400">10:12 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/5.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Gaming Mouse RGB</a>
</h5>
<p class="text-default-400 text-2xs">by: HyperClick</p>
</div>
</div>
</td>
<td>GM-72109</td>
<td>Gaming</td>
<td>
<h5>120</h5>
</td>
<td>$29.99</td>
<td>243</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(102)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>19 Apr, 2025 <small class="text-default-400">05:56 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/6.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Modern Lounge Chair</a>
</h5>
<p class="text-default-400 text-2xs">by: UrbanLiving</p>
</div>
</div>
</td>
<td>FC-31220</td>
<td>Furniture</td>
<td>
<h5>24</h5>
</td>
<td>$199.00</td>
<td>38</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(27)</a></span>
</td>
<td>
<span class="badge text-2xs bg-danger/15 text-danger"> Out of Stock </span>
</td>
<td>18 Apr, 2025<small class="text-default-400"> 11:30 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/7.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Plush Toy Bear</a>
</h5>
<p class="text-default-400 text-2xs">by: Softies</p>
</div>
</div>
</td>
<td>TY-00788</td>
<td>Toys</td>
<td>
<h5>150</h5>
</td>
<td>$15.99</td>
<td>305</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(120)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>17 Apr, 2025<small class="text-default-400"> 04:21 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/8.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">55" Ultra HD Smart TV</a>
</h5>
<p class="text-default-400 text-2xs">by: ViewMaster</p>
</div>
</div>
</td>
<td>TV-5588</td>
<td>Electronics</td>
<td>
<h5>64</h5>
</td>
<td>$499.00</td>
<td>142</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(88)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>25 Apr, 2025<small class="text-default-400"> 10:10 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/9.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Apple iMac 24" M3</a>
</h5>
<p class="text-default-400 text-2xs">by: Apple</p>
</div>
</div>
</td>
<td>IMAC-M3-24</td>
<td>Computers</td>
<td>
<h5>18</h5>
</td>
<td>$1,399.00</td>
<td>29</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(16)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>24 Apr, 2025<small class="text-default-400">02:14 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-default-50">
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/10.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Smart Watch Pro X2</a>
</h5>
<p class="text-default-400 text-2xs">by: FitTech</p>
</div>
</div>
</td>
<td>SWPX2-GL</td>
<td>Wearables</td>
<td>
<h5>85</h5>
</td>
<td>$149.50</td>
<td>197</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(16)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025<small class="text-default-400">08:00 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<div data-table-pagination-info="products"></div>
<div data-table-pagination=""></div>
</div>
</div>
<!-- end card -->
<div class="card" data-table="" data-table-rows-per-page="5">
<div class="card-header">
<h4 class="card-title">Complete Custom Table</h4>
</div>
<div class="border-default-300 flex flex-wrap justify-between gap-2.5 border-b border-dashed px-5 py-4">
<div class="flex gap-2">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" data-table-search="" placeholder="Search product name..." type="search"/>
</div>
<button class="hidden btn bg-danger text-white hover:bg-danger-hover" data-table-delete-selected="">Delete</button>
</div>
<div class="flex flex-wrap items-center gap-2.5 md:flex-nowrap">
<span class="me-2.5 font-semibold text-nowrap">Filter By:</span>
<div class="input-icon-group">
<i class="iconify tabler--tag input-icon"></i>
<select class="form-select" data-table-filter="category">
<option value=" All">Category</option>
<option value="Electronics">Electronics</option>
<option value="Fashion">Fashion</option>
<option value="Home">Home</option>
<option value="Sports">Sports</option>
<option value="Beauty">Beauty</option>
</select>
</div>
<div class="input-icon-group">
<i class="iconify tabler--box input-icon"></i>
<select class="form-select" data-table-filter="statu">
<option value="">Status</option>
<option value=" Published">Published</option>
<option value="Pending">Pending</option>
<option value="Out of Stock">Out of Stock</option>
</select>
</div>
<div class="input-icon-group">
<i class="iconify tabler--currency-dollar input-icon"></i>
<select class="form-select" data-table-range-filter="price">
<option value="">Price Range</option>
<option value="0-50">$0 - $50</option>
<option value="51-150">$51 - $150</option>
<option value="151-500">$151 - $500</option>
<option value="500+">$500+</option>
</select>
</div>
<div>
<select class="form-select" data-table-set-rows-per-page="">
<option selected="" value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
</div>
</div>
<div class="table-wrapper">
<table class="table table-hover">
<thead class="font-semibold">
<tr class="uppercase bg-light/15 text-2xs">
<th class="ps-4.5 pe-2 py-2 text-start" style="width: 1%">
<input class="form-checkbox bg-light size-4.25" data-table-select-all="" type="checkbox" value="option"/>
</th>
<th class="p-2 text-start" data-table-sort="product">Product</th>
<th class="p-2 text-start">SKU</th>
<th class="p-2 text-start" data-column="category" data-table-sort="">Category</th>
<th class="p-2 text-start" data-table-sort="">Stock</th>
<th class="p-2 text-start" data-column="price" data-table-sort="">Price</th>
<th class="p-2 text-start" data-table-sort="">Orders</th>
<th class="p-2 text-start" data-table-sort="rating">Rating</th>
<th class="p-2 text-start" data-column="status" data-table-sort="">Status</th>
<th class="p-2 text-start" data-table-sort="">Published</th>
<th class="text-center pe-4.5 py-2 ps-2" style="width: 1%">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/1.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Wireless Earbuds</a>
</h5>
<p class="text-default-400 text-2xs">by: My Furniture</p>
</div>
</div>
</td>
<td>WB-10245</td>
<td>Electronics</td>
<td>
<h5>56</h5>
</td>
<td>$59.99</td>
<td>124</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(87)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>18 Apr, 2025 <small class="text-default-400">12:24 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn bg-light btn-icon btn-sm text-default-800 hover:text-primary size-7.5 rounded-full" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn bg-danger btn-icon btn-sm hover:text-primary size-7.5 rounded-full text-white" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/2.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Smart LED Desk Lamp</a>
</h5>
<p class="text-default-400 text-2xs">by: BrightLite</p>
</div>
</div>
</td>
<td>SL-89012</td>
<td>Home &amp; Office</td>
<td>
<h5>32</h5>
</td>
<td>$39.49</td>
<td>78</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(54)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>22 Apr, 2025 <small class="text-default-400">09:45 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/3.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Men's Running Shoes</a>
</h5>
<p class="text-default-400 text-2xs">by: ActiveWear Co.</p>
</div>
</div>
</td>
<td>RS-20450</td>
<td>Fashion</td>
<td>
<h5>120</h5>
</td>
<td>$89.00</td>
<td>231</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(142)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>24 Apr, 2025 <small class="text-default-400">03:10 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/4.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Fitness Tracker Watch</a>
</h5>
<p class="text-default-400 text-2xs">by: FitPulse</p>
</div>
</div>
</td>
<td>FT-67123</td>
<td>Fitness</td>
<td>
<h5>78</h5>
</td>
<td>$49.95</td>
<td>198</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(89)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025 <small class="text-default-400">10:12 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/5.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Gaming Mouse RGB</a>
</h5>
<p class="text-default-400 text-2xs">by: HyperClick</p>
</div>
</div>
</td>
<td>GM-72109</td>
<td>Gaming</td>
<td>
<h5>120</h5>
</td>
<td>$29.99</td>
<td>243</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(102)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>19 Apr, 2025 <small class="text-default-400">05:56 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/6.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Modern Lounge Chair</a>
</h5>
<p class="text-default-400 text-2xs">by: UrbanLiving</p>
</div>
</div>
</td>
<td>FC-31220</td>
<td>Furniture</td>
<td>
<h5>24</h5>
</td>
<td>$199.00</td>
<td>38</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(27)</a></span>
</td>
<td>
<span class="badge text-2xs bg-danger/15 text-danger"> Out of Stock </span>
</td>
<td>18 Apr, 2025<small class="text-default-400"> 11:30 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/7.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Plush Toy Bear</a>
</h5>
<p class="text-default-400 text-2xs">by: Softies</p>
</div>
</div>
</td>
<td>TY-00788</td>
<td>Toys</td>
<td>
<h5>150</h5>
</td>
<td>$15.99</td>
<td>305</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(120)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>17 Apr, 2025<small class="text-default-400"> 04:21 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/8.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">55" Ultra HD Smart TV</a>
</h5>
<p class="text-default-400 text-2xs">by: ViewMaster</p>
</div>
</div>
</td>
<td>TV-5588</td>
<td>Electronics</td>
<td>
<h5>64</h5>
</td>
<td>$499.00</td>
<td>142</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(88)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>25 Apr, 2025<small class="text-default-400"> 10:10 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/9.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Apple iMac 24" M3</a>
</h5>
<p class="text-default-400 text-2xs">by: Apple</p>
</div>
</div>
</td>
<td>IMAC-M3-24</td>
<td>Computers</td>
<td>
<h5>18</h5>
</td>
<td>$1,399.00</td>
<td>29</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(16)</a></span>
</td>
<td>
<span class="badge text-2xs bg-warning/15 text-warning"> Pending </span>
</td>
<td>24 Apr, 2025<small class="text-default-400">02:14 PM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-default-50">
<td>
<input class="form-checkbox bg-light size-4.25" type="checkbox"/>
</td>
<td>
<div class="flex">
<div>
<div class="me-base size-5 lg:size-9">
<img alt="Product" class="size-5 rounded lg:size-9" src="/images/products/10.png"/>
</div>
</div>
<div>
<h5 class="text-default-800 hover:text-primary mb-1.25">
<a data-sort="product" href="/ecommerce-product-details">Smart Watch Pro X2</a>
</h5>
<p class="text-default-400 text-2xs">by: FitTech</p>
</div>
</div>
</td>
<td>SWPX2-GL</td>
<td>Wearables</td>
<td>
<h5>85</h5>
</td>
<td>$149.50</td>
<td>197</td>
<td>
<span class="text-warning">
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star-filled"></i>
<i class="iconify tabler--star"></i>
</span>
<span class="ms-1.25"><a class="hover:text-primary font-semibold" data-sort="rating" href="/ecommerce-reviews">(16)</a></span>
</td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Published </span>
</td>
<td>23 Apr, 2025<small class="text-default-400">08:00 AM</small></td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--eye text-base"></i></a>
<a class="btn btn-icon btn-sm rounded-full size-7.5 bg-light text-dark hover:text-primary" href="#"><i class="iconify tabler--edit text-base"></i></a>
<button class="btn btn-icon btn-sm rounded-full size-7.5 bg-danger text-white hover:bg-danger-hover" data-table-delete-row="" type="button">
<i class="iconify tabler--trash text-base"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<div data-table-pagination-info="products"></div>
<div data-table-pagination=""></div>
</div>
</div>
<!-- end card -->
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>

        <!-- Custom table -->
<script src="/js/pages/custom-table.js"></script>
</body>
</html>