datatables

pages/_data/menu.yml

@@ -18,9 +18,9 @@ base:
     cards:
       url: cards.html
       title: Cards
-    c:
-      url: c.html
-      title: C
+    datatables:
+      url: datatables.html
+      title: Data Tables
 
 charts:
   url: charts.html

pages/_includes/cards/invoices.html

@@ -2,6 +2,24 @@
    <div class="card-header">
       <h3 class="card-title">Invoices</h3>
    </div>
+   <div class="card-body d-flex justify-content-between flex-nowrap table-responsive border-bottom text-nowrap">
+
+      <div class="mb-0">
+         Show
+         <div class="mx-2 d-inline-block" style="width: 4rem;">
+            <input type="text" class="form-control" value="10">
+         </div>
+         entries
+      </div>
+      
+      <div class="mb-0 ml-4">
+            Serach:
+            <div class="ml-2 d-inline-block" style="width: 10rem;">
+               <input type="text" class="form-control">
+            </div>
+      </div>
+
+   </div>
    <div class="table-responsive">
       <table class="table card-table table-vcenter text-nowrap datatable">
          <thead>
@@ -40,8 +58,9 @@
             <td>{{ invoice.price }}</td>
 
             <td class="text-right">
-               <span class="dropdown">
-                  <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Actions</button>
+               <button class="btn btn-secondary btn-sm">Manage</button> 
+               <span class="dropdown ml-1">
+                  <button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
                   {% include ui/dropdown-menu.html %}
                </span>
             </td>
@@ -50,4 +69,4 @@
          </tbody>
       </table>
    </div>
-</div>
+</div>
\ No newline at end of file

pages/datatables.html

+---
+title: Data Tables
+---
+
+{% include cards/invoices.html %}
\ No newline at end of file