Tables

Examples and usage guidelines for the Tables component.

Tables

Styled data presentation tables. Default table surfaces should stay white or light gray, with subtle striping for long rows and horizontal scanning.

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 table-soft-bordered">

  <div class="table-responsive">
    <table class="table table-striped mb-0 align-middle">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Status</th>
          <th>Invoices</th>
          <th>Amount</th>
          <th>Created At</th>
          <th>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>