more_horiz
Table widgets
Transactions
Date | Description | Category | Amount | Status | |
---|---|---|---|---|---|
2 July, 2020 | Spotify Subscriptoin fee | Music | -$10 | pending | |
3 July, 2020 | App Store Payment | Software | -$100 | done | |
6 July, 2020 | Software Purchase | Software | -$140 | done | |
6 July, 2020 | Adsense Revenue | Advertising | +$2100 | done |
<div class="table-responsive p-md">
<table class="table borderless table-hover">
<thead>
<tr>
<th scope="col" class="text-muted border-0"></th>
<th scope="col" class="text-muted border-0">Date</th>
<th scope="col" class="text-muted border-0">Description</th>
<th scope="col" class="text-muted border-0">Category</th>
<th scope="col" class="text-muted border-0">Amount</th>
<th scope="col" class="text-muted border-0">Status</th>
</tr>
</thead>
<tbody class="shadow">
<tr>
<td class="align-middle border-0">
<img class="avatar-xs rounded ml-md" src="assets/images/logos/001-spotify.svg" />
</td>
<td class="align-middle text-muted border-0">2 July, 2020</td>
<td scope="row" class="align-middle border-0">
<span class="font-weight-semi">Spotify Subscriptoin fee</span>
</td>
<td class="align-middle border-0">
<span class="font-weight-semi">Music</span>
</td>
<td class="align-middle border-0">
<span class="font-weight-semi text-danger">-$10</span>
</td>
<td class="align-middle border-0">
<span class="badge badge-opacity badge-warning rounded-circle badge-xs">
<i class="material-icons">pending</i></div>
</span>
</td>
</tr>
<tr>
<td class="align-middle">
<img class="avatar-xs rounded ml-md" src="assets/images/logos/003-apple.svg" />
</td>
<td class="align-middle text-muted">3 July, 2020</td>
<td scope="row" class="align-middle">
<span class="font-weight-semi">App Store Payment</span>
</td>
<td class="align-middle">
<span class="font-weight-semi">Software</span>
</td>
<td class="align-middle">
<span class="font-weight-semi text-danger">-$100</span>
</td>
<td class="align-middle">
<span class="badge badge-opacity badge-success rounded-circle badge-xs">
<i class="material-icons">done</i></div>
</span>
</td>
</tr>
<tr>
<td class="align-middle">
<img class="avatar-xs rounded ml-md" src="assets/images/logos/004-windows.svg" />
</td>
<td class="align-middle text-muted">6 July, 2020</td>
<td scope="row" class="align-middle">
<span class="font-weight-semi">Software Purchase</span>
</td>
<td class="align-middle">
<span class="font-weight-semi">Software</span>
</td>
<td class="align-middle">
<span class="font-weight-semi text-danger">-$140</span>
</td>
<td class="align-middle">
<span class="badge badge-opacity badge-success rounded-circle badge-xs">
<i class="material-icons">done</i></div>
</span>
</td>
</tr>
<tr>
<td class="align-middle">
<img class="avatar-xs rounded ml-md" src="assets/images/logos/005-google.svg" />
</td>
<td class="align-middle text-muted">6 July, 2020</td>
<td scope="row" class="align-middle">
<span class="font-weight-semi">Adsense Revenue</span>
</td>
<td class="align-middle">
<span class="font-weight-semi">Advertising</span>
</td>
<td class="align-middle">
<span class="font-weight-semi text-success">+$2100</span>
</td>
<td class="align-middle">
<span class="badge badge-opacity badge-success rounded-circle badge-xs">
<i class="material-icons">done</i></div>
</span>
</td>
</tr>
</tbody>
</table>
</div>
Files
Name | Date | Members | ||
---|---|---|---|---|
Project_alpha_report.pdf | 01/10/2020 |
|
|
|
Project_alpha_UI.pdf | 01/10/2020 |
|
|
|
Project_alpha_report.pdf | 01/10/2020 |
|
|
<div class="table-responsive p-md">
<table class="table borderless table-hover">
<thead>
<tr>
<th scope="col" class="text-muted border-0"></th>
<th scope="col" class="text-muted border-0">Name</th>
<th scope="col" class="text-muted border-0">Date</th>
<th scope="col" class="text-muted border-0">Members</th>
<th scope="col" class="text-muted border-0"></th>
</tr>
</thead>
<tbody class="shadow">
<tr>
<td class="align-middle border-0">
<img class="avatar-sm rounded ml-md" src="assets/images/file-types/001-pdf.svg" />
</td>
<td class="align-middle font-weight-semi border-0">
a.text-body(href="") Project_alpha_report.pdf
</td>
<td class="align-middle border-0">
<span class="text-muted">01/10/2020</span>
</td>
<td class="align-middle border-0">
<div class="col-md-4 d-flex align-items-center avatar-group m-0">
<img class="avatar-sm rounded-circle" src="assets/images/avatars/001-man.svg" data-toggle="tooltip" data-placement="top" title="John M">
<img class="avatar-sm rounded-circle" src="assets/images/avatars/002-woman.svg" data-toggle="tooltip" data-placement="top" title="Alison W">
<img class="avatar-sm rounded-circle" src="assets/images/avatars/007-woman-2.svg" data-toggle="tooltip" data-placement="top" title="Alisa J">
</div>
</td>
<td class="align-middle border-0">
<div class="dropdown d-inline">
<button class="btn btn-light btn-icon btn-sm rounded-circle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
i.material-icons more_horiz
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"><i class="material-icons icon icon-sm">assignment</i>Open file</a>
<a class="dropdown-item" href="#"><i class="material-icons icon icon-sm">person</i>View members</a>
<a class="dropdown-item" href="#"><i class="material-icons icon icon-sm">person_add</i>Add member</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle border-0">
<img class="avatar-sm rounded ml-md" src="assets/images/file-types/002-psd.svg" />
</td>
<td class="align-middle font-weight-semi border-0">
a.text-body(href="") Project_alpha_UI.pdf
</td>
<td class="align-middle border-0">
<span class="text-muted">01/10/2020</span>
</td>
<td class="align-middle border-0">
<div class="col-md-4 d-flex align-items-center avatar-group m-0">
<img class="avatar-sm rounded-circle" src="assets/images/avatars/003-man-1.svg" data-toggle="tooltip" data-placement="top" title="John M">
<img class="avatar-sm rounded-circle" src="assets/images/avatars/004-bald.svg" data-toggle="tooltip" data-placement="top" title="Alison W">
<img class="avatar-sm rounded-circle" src="assets/images/avatars/006-woman-1.svg" data-toggle="tooltip" data-placement="top" title="Alisa J">
</div>
</td>
<td class="align-middle border-0">
<div class="dropdown d-inline">
<button class="btn btn-light btn-icon btn-sm rounded-circle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
i.material-icons more_horiz
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"><i class="material-icons icon icon-sm">assignment</i>Open file</a>
<a class="dropdown-item" href="#"><i class="material-icons icon icon-sm">person</i>View members</a>
<a class="dropdown-item" href="#"><i class="material-icons icon icon-sm">person_add</i>Add member</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle border-0">
<img class="avatar-sm rounded ml-md" src="assets/images/file-types/005-documents.svg" />
</td>
<td class="align-middle font-weight-semi border-0">
a.text-body(href="") Project_alpha_report.pdf
</td>
<td class="align-middle border-0">
<span class="text-muted">01/10/2020</span>
</td>
<td class="align-middle border-0">
<div class="col-md-4 d-flex align-items-center avatar-group m-0">
<img class="avatar-sm rounded-circle" src="assets/images/avatars/006-woman-1.svg" data-toggle="tooltip" data-placement="top" title="John M">
<img class="avatar-sm rounded-circle" src="assets/images/avatars/002-woman.svg" data-toggle="tooltip" data-placement="top" title="Alison W">
<img class="avatar-sm rounded-circle" src="assets/images/avatars/007-woman-2.svg" data-toggle="tooltip" data-placement="top" title="Alisa J">
</div>
</td>
<td class="align-middle border-0">
<div class="dropdown d-inline">
<button class="btn btn-light btn-icon btn-sm rounded-circle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
i.material-icons more_horiz
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"><i class="material-icons icon icon-sm">assignment</i>Open file</a>
<a class="dropdown-item" href="#"><i class="material-icons icon icon-sm">person</i>View members</a>
<a class="dropdown-item" href="#"><i class="material-icons icon icon-sm">person_add</i>Add member</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Enrolled courses
Started | Course | Progress | Action | |
---|---|---|---|---|
20 May, 20200 | Angular Beyond The Basics |
|
||
20 May, 20200 | React Development Course |
|
||
20 May, 20200 | Webpack For Busy Developer |
|
||
20 May, 20200 | Complete SASS Course |
|
||
20 May, 2020 | Bootstrap For Everyone |
|
<div class="card table-responsive">
<table class="table borderless table-hover">
<thead>
<tr>
<th scope="col" class="text-muted"></th>
<th scope="col" class="text-muted">Started</th>
<th scope="col" class="text-muted">Course</th>
<th scope="col" class="text-muted">Progress</th>
<th scope="col" class="text-muted">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle">
<img class="avatar-xs rounded ml-md" src="assets/images/logos/angular.png" />
</td>
<td class="align-middle text-muted">20 May, 20200</td>
<th scope="row" class="align-middle">
<span class="font-weight-semi">Angular Beyond The Basics</span>
</th>
<td class="align-middle">
<div class="progress-wrapper">
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="align-middle">
<button class="btn btn-warning rounded-circle btn-icon">
<i class="material-icons text-25">play_circle_filled</i><div class="ripple-container"></div>
</button>
</td>
</tr>
<tr>
<td class="align-middle">
<img class="avatar-xs rounded ml-md" src="assets/images/logos/react.png">
</td>
<td class="align-middle text-muted">20 May, 20200</td>
<th scope="row" class="align-middle">
<span class="font-weight-semi">React Development Course</span>
</th>
<td class="align-middle">
<div class="progress-wrapper">
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="align-middle">
<button class="btn btn-warning rounded-circle btn-icon">
<i class="material-icons text-25">play_circle_filled</i><div class="ripple-container"></div>
</button>
</td>
</tr>
<tr>
<td class="align-middle">
<img class="avatar-xs rounded ml-md" src="assets/images/logos/webpack.png">
</td>
<td class="align-middle text-muted">20 May, 20200</td>
<th scope="row" class="align-middle">
<span class="font-weight-semi">Webpack For Busy Developer</span>
</th>
<td class="align-middle">
<div class="progress-wrapper">
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 60%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="align-middle">
<button class="btn btn-warning rounded-circle btn-icon">
<i class="material-icons text-25">play_circle_filled</i><div class="ripple-container"></div>
</button>
</td>
</tr>
<tr>
<td class="align-middle">
<img class="avatar-xs rounded ml-md" src="assets/images/logos/sass.png">
</td>
<td class="align-middle text-muted">20 May, 20200</td>
<th scope="row" class="align-middle">
<span class="font-weight-semi">Complete SASS Course</span>
</th>
<td class="align-middle">
<div class="progress-wrapper">
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 30%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="align-middle">
<button class="btn btn-warning rounded-circle btn-icon">
<i class="material-icons text-25">play_circle_filled</i><div class="ripple-container"></div>
</button>
</td>
</tr>
<tr>
<td class="align-middle">
<img class="avatar-xs rounded ml-md" src="assets/images/logos/bootstrap.png">
</td>
<td class="align-middle text-muted">20 May, 2020</td>
<th scope="row" class="align-middle">
<span class="font-weight-semi">Bootstrap For Everyone</span>
</th>
<td class="align-middle">
<div class="progress-wrapper">
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 10%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="align-middle">
<button class="btn btn-warning rounded-circle btn-icon">
<i class="material-icons text-25">play_circle_filled</i><div class="ripple-container"></div>
</button>
</td>
</tr>
</tbody>
</table>
</div>
Buy Arctic
All rights reserved © UI Lib 2020