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
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
100%
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
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
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
100%
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
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>