Mono provides a variety of datatables components with a little customization that suits its design standards. For more information, please see the official Datatables Documentaion.

Products Inventory


<table id="productsTable" class="table table-hover table-product" style="width:100%">
  <thead>
    <tr>
      <th>Image</th>
      <th>Product Name</th>
      <th>ID</th>
      <th>Qty</th>
      <th>Variants</th>
      <th>Committed</th>
      <th>User Activity</th>
      <th>Sold</th>
      <th>In Stock</th>
      <th></th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-01.jpg" alt="Product Image">
      </td>
      <td>Coach Swagger</td>
      <td>24541</td>
      <td>27</td>
      <td>1</td>
      <td>2</td>
      <td>
        <div id="tbl-chart-01"></div>
      </td>
      <td>4</td>
      <td>18</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-02.jpg" alt="Product Image">
      </td>
      <td>Toddler Shoes, Gucci Watch</td>
      <td>24542</td>
      <td>18</td>
      <td>7</td>
      <td>5</td>
      <td>
        <div id="tbl-chart-02"></div>
      </td>
      <td>1</td>
      <td>14</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-03.jpg" alt="Product Image">
      </td>
      <td>Hat Black Suits</td>
      <td>24543</td>
      <td>20</td>
      <td>3</td>
      <td>7</td>
      <td>
        <div id="tbl-chart-03"></div>
      </td>
      <td>6</td>
      <td>26</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-04.jpg" alt="Product Image">
      </td>
      <td>Backpack Gents</td>
      <td>24544</td>
      <td>37</td>
      <td>8</td>
      <td>3</td>
      <td>
        <div id="tbl-chart-04"></div>
      </td>
      <td>6</td>
      <td>7</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-05.jpg" alt="Product Image">
      </td>
      <td>Speed 500 Ignite</td>
      <td>24545</td>
      <td>8</td>
      <td>3</td>
      <td>4</td>
      <td>
        <div id="tbl-chart-05"></div>
      </td>
      <td>8</td>
      <td>42</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-06.jpg" alt="Product Image">
      </td>
      <td>Olay</td>
      <td>24546</td>
      <td>19</td>
      <td>6</td>
      <td>6</td>
      <td>
        <div id="tbl-chart-06"></div>
      </td>
      <td>79</td>
      <td>12</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-07.jpg" alt="Product Image">
      </td>
      <td>Ledger Nano X</td>
      <td>24547</td>
      <td>61</td>
      <td>46</td>
      <td>18</td>
      <td>
        <div id="tbl-chart-07"></div>
      </td>
      <td>76</td>
      <td>36</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-08.jpg" alt="Product Image">
      </td>
      <td>Surface Laptop 2</td>
      <td>24548</td>
      <td>33</td>
      <td>56</td>
      <td>89</td>
      <td>
        <div id="tbl-chart-08"></div>
      </td>
      <td>38</td>
      <td>5</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-09.jpg" alt="Product Image">
      </td>
      <td>TIGI Bed Head Superstar Queen</td>
      <td>24549</td>
      <td>3</td>
      <td>9</td>
      <td>15</td>
      <td>
        <div id="tbl-chart-09"></div>
      </td>
      <td>6</td>
      <td>46</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-10.jpg" alt="Product Image">
      </td>
      <td>Wattbike Atom</td>
      <td>24550</td>
      <td>61</td>
      <td>56</td>
      <td>68</td>
      <td>
        <div id="tbl-chart-10"></div>
      </td>
      <td>3</td>
      <td>19</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-11.jpg" alt="Product Image">
      </td>
      <td>Smart Watch</td>
      <td>24551</td>
      <td>19</td>
      <td>76</td>
      <td>38</td>
      <td>
        <div id="tbl-chart-11"></div>
      </td>
      <td>3</td>
      <td>17</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-12.jpg" alt="Product Image">
      </td>
      <td>Magic Bullet Blender</td>
      <td>24552</td>
      <td>12</td>
      <td>30</td>
      <td>14</td>
      <td>
        <div id="tbl-chart-12"></div>
      </td>
      <td>26</td>
      <td>9</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-13.jpg" alt="Product Image">
      </td>
      <td>Kanana rucksack</td>
      <td>24553</td>
      <td>14</td>
      <td>65</td>
      <td>39</td>
      <td>
        <div id="tbl-chart-13"></div>
      </td>
      <td>9</td>
      <td>55</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-14.jpg" alt="Product Image">
      </td>
      <td>Copic Opaque White</td>
      <td>24554</td>
      <td>43</td>
      <td>29</td>
      <td>75</td>
      <td>
        <div id="tbl-chart-14"></div>
      </td>
      <td>7</td>
      <td>15</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td class="py-0">
        <img src="images/products/products-xs-15.jpg" alt="Product Image">
      </td>
      <td>Headphones</td>
      <td>24555</td>
      <td>17</td>
      <td>6</td>
      <td>7</td>
      <td>
        <div id="tbl-chart-15"></div>
      </td>
      <td>6</td>
      <td>98</td>
      <td>
        <div class="dropdown">
          <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
          </a>

          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

      
Image Product Name ID Qty Variants Committed User Activity Sold In Stock
Product Image Coach Swagger 24541 27 1 2
4 18
Product Image Toddler Shoes, Gucci Watch 24542 18 7 5
1 14
Product Image Hat Black Suits 24543 20 3 7
6 26
Product Image Backpack Gents 24544 37 8 3
6 7
Product Image Speed 500 Ignite 24545 8 3 4
8 42
Product Image Olay 24546 19 6 6
79 12
Product Image Ledger Nano X 24547 61 46 18
76 36
Product Image Surface Laptop 2 24548 33 56 89
38 5
Product Image TIGI Bed Head Superstar Queen 24549 3 9 15
6 46
Product Image Wattbike Atom 24550 61 56 68
3 19
Product Image Smart Watch 24551 19 76 38
3 17
Product Image Magic Bullet Blender 24552 12 30 14
26 9
Product Image Kanana rucksack 24553 14 65 39
9 55
Product Image Copic Opaque White 24554 43 29 75
7 15
Product Image Headphones 24555 17 6 7
6 98

Contacts

Add New