Tables

Examples and usage guidelines for the Tables component.

Tables

Styled data presentation tables.

ID Name Status Invoices Invoice Amount Created At Actions
1 Brekke LLC Active 1 $ 253.22 May 24, 2019 @ 10:00PM
2 Paulo Trajano Active 4 $ 253.22 May 24, 2019 @ 10:00PM
3 Prohaska, Halvorson Active 3 $ 253.22 May 24, 2019 @ 10:00PM
4 Osinski PLC Active 0 $ 253.22 May 24, 2019 @ 10:00PM
Show Code
<div class="card border-0 shadow-sm">

  <div class="table-responsive">
    <table class="table table-striped mb-0 align-middle">
      <thead class="bg-primary text-white">
        <tr>
          <th class="border-0">ID</th>
          <th class="border-0">Name</th>
          <th class="border-0">Status</th>
          <th class="border-0">Invoices</th>
          <th class="border-0">Amount</th>
          <th class="border-0">Created At</th>
          <th class="border-0">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Brekke LLC</td>
          <td>Active</td>
          <td>1</td>
          <td>$ 253.22</td>
          <td>May 24, 2019 @ 10:00PM</td>
          <td>
            <div class="dropdown">
              <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                Aksi
              </button>
              <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0" style="font-size: 0.875rem;">
                <li><a class="dropdown-item" href="#">Preview</a></li>
                <li><a class="dropdown-item" href="#">Detail</a></li>
                <li><a class="dropdown-item" href="#">Edit</a></li>
                <li><hr class="dropdown-divider"></li>
                <li class="px-2 pb-1"><button class="btn btn-danger btn-sm w-100">Hapus</button></li>
              </ul>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>