Note: The planet UI design system is an extension of the bootstrap framework.
Please also referer to the bootstrap documentation for best pratices while using the framework.
Tables
Basic table
| Name | Contact | Billing Status | Account Manager | Locations | Contract creation | Contract renewal | Status | |
|---|---|---|---|---|---|---|---|---|
| Company123 |
Joe Bloggs 0871212121 |
Monthly
Paid |
Joe Bloggs | 5 | 01/02/2021 | 01/02/2021 | Active | |
| Company123 |
Joe Bloggs 0871212121 |
Monthly
Paid |
Joe Bloggs | 5 | 01/02/2021 | 01/02/2021 | Inactive | |
| Company123 |
Joe Bloggs 0871212121 |
Monthly
Paid |
Joe Bloggs | 5 | 01/02/2021 | 01/02/2021 | Active | |
| Company123 |
Joe Bloggs 0871212121 |
Monthly
Paid |
Joe Bloggs | 5 | 01/02/2021 | 01/02/2021 | Inactive | |
| Company123 |
Joe Bloggs 0871212121 |
Monthly
Paid |
Joe Bloggs | 5 | 01/02/2021 | 01/02/2021 | Active |
<div class="row mt-4">
<div class="col-7">
<!-- pagination component -->
</div>
<div class="col-5">
<div class="btn-toolbar float-end">
<div class="btn-group" role="group">
<button class="btn btn-link ms-2"><i class="fa planet-ds-icon-printer"></i> Print</button>
<button class="btn btn-link ms-2"><i class="fa planet-ds-icon-document-export"></i> Export<span
class="d-none d-md-inline"> to Excel</span></button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<table class="table">
<thead class="thead">
<tr>
<th scope="col" class="d-table-cell">
<span>Name</span>
</th>
<th scope="col" class="d-table-cell">
<span>Contact</span>
</th>
<th scope="col" class="d-none d-lg-table-cell">
<span>Billing Status</span>
</th>
<th scope="col" class="d-none d-lg-table-cell">
<span>Account Manager</span>
</th>
<th scope="col" class="d-none d-lg-table-cell">
<span>Locations</span>
</th>
<th scope="col" class="d-none d-lg-table-cell">
<span>Contract creation</span>
</th>
<th scope="col" class="d-none d-lg-table-cell">
<span>Contract renewal</span>
</th>
<th scope="col" class="d-none d-lg-table-cell">
<span>Status</span>
</th>
<th scope="col" class="d-table-cell">
<span></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="d-table-cell">
<span class="text-primary"><a href="#">Company123</a></span>
</td>
<td class="d-table-cell py-0">
<span class="text-primary">Joe Bloggs</span><br />
<span class="text-muted">0871212121</span>
</td>
<td class="d-none d-lg-table-cell py-0">
<span class="text-secondary">Monthly</span>
<br />
<span class="text-muted">Paid</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">Joe Bloggs</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">5</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">01/02/2021</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">01/02/2021</span>
</td>
<td class="d-none d-lg-table-cell py-0">
<span class="badge bg-active text-secondary">Active</span></td>
<td class="d-table-cell text-end">
<a href="" placement="bottom-end"><i class="fa fa-lg planet-ds-icon-ellipsis-vertical"></i></a>
</td>
</tr>
<tr>
<td class="d-table-cell">
<span class="text-primary"><a href="#">Company123</a></span>
</td>
<td class="d-table-cell py-0">
<span class="text-primary">Joe Bloggs</span><br />
<span class="text-muted">0871212121</span>
</td>
<td class="d-none d-lg-table-cell py-0">
<span class="text-secondary">Monthly</span>
<br />
<span class="text-muted">Paid</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">Joe Bloggs</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">5</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">01/02/2021</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">01/02/2021</span>
</td>
<td class="d-none d-lg-table-cell py-0"><span class="badge bg-inactive text-secondary">Inactive</span></td>
<td class="d-table-cell text-end">
<a href="" placement="bottom-end"><i class="fa fa-lg planet-ds-icon-ellipsis-vertical"></i></a>
</td>
</tr>
<tr>
<td class="d-table-cell">
<span class="text-primary"><a href="#">Company123</a></span>
</td>
<td class="d-table-cell py-0">
<span class="text-primary">Joe Bloggs</span><br />
<span class="text-muted">0871212121</span>
</td>
<td class="d-none d-lg-table-cell py-0">
<span class="text-secondary">Monthly</span>
<br />
<span class="text-muted">Paid</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">Joe Bloggs</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">5</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">01/02/2021</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">01/02/2021</span>
</td>
<td class="d-none d-lg-table-cell py-0">
<span class="badge bg-active text-secondary">Active</span></td>
<td class="d-table-cell text-end">
<a href="" placement="bottom-end"><i class="fa fa-lg planet-ds-icon-ellipsis-vertical"></i></a>
</td>
</tr>
<tr>
<td class="d-table-cell">
<span class="text-primary"><a href="#">Company123</a></span>
</td>
<td class="d-table-cell py-0">
<span class="text-primary">Joe Bloggs</span><br />
<span class="text-muted">0871212121</span>
</td>
<td class="d-none d-lg-table-cell py-0">
<span class="text-secondary">Monthly</span>
<br />
<span class="text-muted">Paid</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">Joe Bloggs</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">5</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">01/02/2021</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">01/02/2021</span>
</td>
<td class="d-none d-lg-table-cell py-0"><span class="badge bg-inactive text-secondary">Inactive</span></td>
<td class="d-table-cell text-end">
<a href="" placement="bottom-end"><i class="fa fa-lg planet-ds-icon-ellipsis-vertical"></i></a>
</td>
</tr>
<tr>
<td class="d-table-cell">
<span class="text-primary"><a href="#">Company123</a></span>
</td>
<td class="d-table-cell py-0">
<span class="text-primary">Joe Bloggs</span><br />
<span class="text-muted">0871212121</span>
</td>
<td class="d-none d-lg-table-cell py-0">
<span class="text-secondary">Monthly</span>
<br />
<span class="text-muted">Paid</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">Joe Bloggs</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">5</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">01/02/2021</span>
</td>
<td class="d-none d-lg-table-cell">
<span class="text-secondary">01/02/2021</span>
</td>
<td class="d-none d-lg-table-cell py-0">
<span class="badge bg-active text-secondary">Active</span></td>
<td class="d-table-cell text-end">
<a href="" placement="bottom-end"><i class="fa fa-lg planet-ds-icon-ellipsis-vertical"></i></a>
</td>
</tr>
</tbody>
</table>