tabler/pages/_includes/cards/invoices.html

<div class="card">
   <div class="card-header">
      <h3 class="card-title">Invoices</h3>
   </div>
   <div class="table-responsive">
      <table class="table card-table table-vcenter text-nowrap datatable overflow-hidden">
         <thead>
            <tr>
               <th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
               <th class="w-1p">No.</th>
               <th>Invoice Subject</th>
               <th>Client</th>
               <th>VAT No.</th>
               <th>Created</th>
               <th>Status</th>
               <th>Price</th>
               <th></th>
            </tr>
         </thead>

         <tbody>
         {% for invoice in site.data.invoices limit: 5 %}
         <tr>
            <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
            <td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
            <td><a href="invoice.html" class="text-reset">{{ invoice.name }}</a></td>
            <td>
               {% include ui/flag.html flag=invoice.country %}
               {{ invoice.client }}
            </td>
            <td>
               {{ invoice.vat-no }}
            </td>
            <td>
               {{ invoice.date }}
            </td>
            <td>
               <span class="status-icon bg-{{ invoice.status }}"></span> {{ invoice.status-name }}
            </td>
            <td>{{ invoice.price }}</td>

            <td class="text-right">
               <span class="dropdown">
                  <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Actions</button>
                  {% include ui/dropdown-menu.html %}
               </span>
            </td>
         </tr>
         {% endfor %}
         </tbody>
      </table>
   </div>
</div>