Angular Tables
Our Angular Tables are designed to be opt-in due to the
widespread use of tables across third-party widgets like calendars
and date pickers.
Keep reading some Angular Tables examples to see how these tables
work.
Examples
| Project | Budget | Status | Users | Completion | |
|---|---|---|---|---|---|
Argon Design System
|
$2500 USD | pending |
|
60%
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
React Material Dashboard
|
$4400 USD | on schedule |
|
90%
|
|
Vue Paper UI Kit PRO
|
$2200 USD | completed |
|
100%
|
|
|
Argon Design System
|
$2500 USD | pending |
|
60%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
React Material Dashboard
|
$4400 USD | on schedule |
|
90%
|
<div class=" table-responsive">
<table class=" table align-items-center table-flush">
<thead class=" thead-light">
<tr>
<th class=" sort" data-sort="name" scope="col">Project</th>
<th class=" sort" data-sort="budget" scope="col">Budget</th>
<th class=" sort" data-sort="status" scope="col">Status</th>
<th scope="col">Users</th>
<th class=" sort" data-sort="completion" scope="col">
Completion
</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class=" list">
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/bootstrap.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Argon Design System
</span>
</div>
</div>
</th>
<td class=" budget">$2500 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-warning"> </i>
<span class=" status"> pending </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 60% </span>
<div>
<div class=" progress">
<progressbar type="warning" [value]="60">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret">
<a
id="button-basic"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-basic"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a class="dropdown-item" href="javascript:;">
Action
</a>
<a class="dropdown-item" href="javascript:;">
Another action
</a>
<a class="dropdown-item" href="javascript:;">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/angular.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Angular Now UI Kit PRO
</span>
</div>
</div>
</th>
<td class=" budget">$1800 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-success"> </i>
<span class=" status"> completed </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 100% </span>
<div>
<div class=" progress">
<progressbar type="success" [value]="100">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret">
<a
id="button-basic"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-basic"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/sketch.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Black Dashboard
</span>
</div>
</div>
</th>
<td class=" budget">$3150 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-danger"> </i>
<span class=" status"> delayed </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 72% </span>
<div>
<div class=" progress">
<progressbar type="danger" [value]="72">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret">
<a
id="button-basic"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-basic"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/react.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
React Material Dashboard
</span>
</div>
</div>
</th>
<td class=" budget">$4400 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-info"> </i>
<span class=" status"> on schedule </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 90% </span>
<div>
<div class=" progress">
<progressbar type="info" [value]="90">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret">
<a
id="button-basic"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-basic"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/vue.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Vue Paper UI Kit PRO
</span>
</div>
</div>
</th>
<td class=" budget">$2200 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-success"> </i>
<span class=" status"> completed </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 100% </span>
<div>
<div class=" progress">
<progressbar type="success" [value]="100">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret">
<a
id="button-basic"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-basic"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/bootstrap.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Argon Design System
</span>
</div>
</div>
</th>
<td class=" budget">$2500 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-warning"> </i>
<span class=" status"> pending </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 60% </span>
<div>
<div class=" progress">
<progressbar type="warning" [value]="60">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret">
<a
id="button-basic"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-basic"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/angular.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Angular Now UI Kit PRO
</span>
</div>
</div>
</th>
<td class=" budget">$1800 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-success"> </i>
<span class=" status"> completed </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 100% </span>
<div>
<div class=" progress">
<progressbar type="success" [value]="100">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret">
<a
id="button-basic"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-basic"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/sketch.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Black Dashboard
</span>
</div>
</div>
</th>
<td class=" budget">$3150 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-danger"> </i>
<span class=" status"> delayed </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 72% </span>
<div>
<div class=" progress">
<progressbar type="danger" [value]="72">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret" [dropup]="'true'">
<a
id="button-dropup"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-dropup"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/angular.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Angular Now UI Kit PRO
</span>
</div>
</div>
</th>
<td class=" budget">$1800 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-success"> </i>
<span class=" status"> completed </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 100% </span>
<div>
<div class=" progress">
<progressbar type="success" [value]="100">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret" [dropup]="'true'">
<a
id="button-dropup"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-dropup"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Dark Tables Example
| Project | Budget | Status | Users | Completion | |
|---|---|---|---|---|---|
|
Argon Design System
|
$2500 USD | pending |
|
60%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
React Material Dashboard
|
$4400 USD | on schedule |
|
90%
|
|
|
Vue Paper UI Kit PRO
|
$2200 USD | completed |
|
100%
|
|
|
Argon Design System
|
$2500 USD | pending |
|
60%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
React Material Dashboard
|
$4400 USD | on schedule |
|
90%
|
<div class=" table-responsive">
<table class=" table table-dark align-items-center">
<thead class=" thead-light">
<tr>
<th class=" sort" data-sort="name" scope="col">Project</th>
<th class=" sort" data-sort="budget" scope="col">Budget</th>
<th class=" sort" data-sort="status" scope="col">Status</th>
<th scope="col">Users</th>
<th class=" sort" data-sort="completion" scope="col">
Completion
</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class=" list">
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/bootstrap.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Argon Design System
</span>
</div>
</div>
</th>
<td class=" budget">$2500 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-warning"> </i>
<span class=" status"> pending </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 60% </span>
<div>
<div class=" progress">
<progressbar type="warning" [value]="60">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret">
<a
id="button-basic"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-basic"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a class="dropdown-item" href="javascript:;">
Action
</a>
<a class="dropdown-item" href="javascript:;">
Another action
</a>
<a class="dropdown-item" href="javascript:;">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/angular.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Angular Now UI Kit PRO
</span>
</div>
</div>
</th>
<td class=" budget">$1800 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-success"> </i>
<span class=" status"> completed </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 100% </span>
<div>
<div class=" progress">
<progressbar type="success" [value]="100">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret">
<a
id="button-basic"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-basic"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/sketch.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Black Dashboard
</span>
</div>
</div>
</th>
<td class=" budget">$3150 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-danger"> </i>
<span class=" status"> delayed </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 72% </span>
<div>
<div class=" progress">
<progressbar type="danger" [value]="72">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret">
<a
id="button-basic"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-basic"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/react.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
React Material Dashboard
</span>
</div>
</div>
</th>
<td class=" budget">$4400 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-info"> </i>
<span class=" status"> on schedule </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 90% </span>
<div>
<div class=" progress">
<progressbar type="info" [value]="90">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret">
<a
id="button-basic"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-basic"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/vue.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Vue Paper UI Kit PRO
</span>
</div>
</div>
</th>
<td class=" budget">$2200 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-success"> </i>
<span class=" status"> completed </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 100% </span>
<div>
<div class=" progress">
<progressbar type="success" [value]="100">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret">
<a
id="button-basic"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-basic"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/bootstrap.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Argon Design System
</span>
</div>
</div>
</th>
<td class=" budget">$2500 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-warning"> </i>
<span class=" status"> pending </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 60% </span>
<div>
<div class=" progress">
<progressbar type="warning" [value]="60">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret">
<a
id="button-basic"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-basic"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/angular.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Angular Now UI Kit PRO
</span>
</div>
</div>
</th>
<td class=" budget">$1800 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-success"> </i>
<span class=" status"> completed </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 100% </span>
<div>
<div class=" progress">
<progressbar type="success" [value]="100">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret">
<a
id="button-basic"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-basic"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/sketch.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Black Dashboard
</span>
</div>
</div>
</th>
<td class=" budget">$3150 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-danger"> </i>
<span class=" status"> delayed </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 72% </span>
<div>
<div class=" progress">
<progressbar type="danger" [value]="72">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret" [dropup]="'true'">
<a
id="button-dropup"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-dropup"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class=" media align-items-center">
<a
class=" avatar rounded-circle mr-3"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/angular.jpg"
/>
</a>
<div class=" media-body">
<span class=" name mb-0 text-sm">
Angular Now UI Kit PRO
</span>
</div>
</div>
</th>
<td class=" budget">$1800 USD</td>
<td>
<span class=" badge badge-dot mr-4">
<i class=" bg-success"> </i>
<span class=" status"> completed </span>
</span>
</td>
<td>
<div class=" avatar-group">
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Ryan Thompson"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-1.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Romina Hadid"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-2.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Alexander Smith"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-3.jpg"
/>
</a>
<a
class=" avatar avatar-sm rounded-circle"
tooltip="Jessica Doe"
placement="top"
href="javascript:;"
>
<img
alt="Image placeholder"
src="./assets/img/theme/team-4.jpg"
/>
</a>
</div>
</td>
<td>
<div class=" d-flex align-items-center">
<span class=" completion mr-2"> 100% </span>
<div>
<div class=" progress">
<progressbar type="success" [value]="100">
</progressbar>
</div>
</div>
</div>
</td>
<td class=" text-right">
<div dropdown class="dropdown no-caret" [dropup]="'true'">
<a
id="button-dropup"
dropdownToggle
role="button"
class="btn btn-sm btn-icon-only text-light dropdown-toggle"
aria-controls="dropdown-dropup"
>
<i class=" fas fa-ellipsis-v"> </i>
</a>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
*dropdownMenu
>
<a href="javascript:;" class="dropdown-item">
Action
</a>
<a href="javascript:;" class="dropdown-item">
Another action
</a>
<a href="javascript:;" class="dropdown-item">
Something else here
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>