List
Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.
Official DocumentationUsage
JS
In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer:
<script src="/assets/libs/list.js/dist/list.min.js"></script>Initialization
Table
Add data-toggle="list" on any table in order to activate the sorting functionality.
Next, you will need to specify the columns that you want to add the sorting option to by adding the data-list-values='["NAME_1", "NAME_2"]'.
Thead
Inside the thead element you will need to make sortable the columns you specified in the data-list-values by adding a data-sort attribute with the colums’s name (e.g data-sort="NAME_1") next to the .sort class.
Tbody
In order to correlate the sortable actions you will need to add the class with the same name as data-sort on the element with the value you want to sort by (e.g class="NAME_1")
Example
For now we added the sortable functionality only on table. Soon, we will add it on other components too.
Table
Note! The table below is an advanced example in order to demonstrate the power of this plugin that can sort items even when columns have many different components such as images, progress bars etc.
| Project | Budget | Status | Users | Completion | |
|---|---|---|---|---|---|
MRGi Design System
|
$2500 USD | pending |
|
60%
|
|
Website redesign
|
$1800 USD | completed |
|
100%
|
|
MRGInnovations website launch
|
$3150 USD | delayed |
|
72%
|
|
MRGi Website UI Kit
|
$4400 USD | on schedule |
|
90%
|
|
Prototype MRGi Dashboard
|
$2200 USD | completed |
|
100%
|
|
Bootstrap Framework 5.0
|
$2500 USD | pending |
|
60%
|
|
|
MRGi Design System
|
$2500 USD | pending |
|
60%
|
|
|
Website redesign
|
$1800 USD | completed |
|
100%
|
|
|
MRGInnovations website launch
|
$3150 USD | delayed |
|
72%
|
|
|
MRGi Website UI Kit
|
$4400 USD | on schedule |
|
90%
|
|
|
Prototype MRGi Dashboard
|
$2200 USD | completed |
|
100%
|
|
|
Bootstrap Framework 5.0
|
$2500 USD | pending |
|
60%
|
<div class="table-responsive" data-toggle="list" data-list-values='["name", "budget", "status", "completion"]'>
<table class="table table-cards align-items-center table-flush">
<thead class="">
<tr>
<th scope="col" class="sort" data-sort="name">Project</th>
<th scope="col" class="sort" data-sort="budget">Budget</th>
<th scope="col" class="sort" data-sort="status">Status</th>
<th scope="col">Users</th>
<th scope="col" class="sort" data-sort="completion">Completion</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class="list">
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="/assets/media/images/theme/light/brand-avatar-1.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">MRGi 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 href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">60%</span>
<div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="/assets/media/images/theme/light/brand-avatar-2.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">Website redesign</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 href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">100%</span>
<div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="/assets/media/images/theme/light/brand-avatar-3.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">MRGInnovations website launch</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 href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">72%</span>
<div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="/assets/media/images/theme/light/brand-avatar-4.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">MRGi Website UI Kit</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 href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">90%</span>
<div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="/assets/media/images/theme/light/brand-avatar-5.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">Prototype MRGi Dashboard</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 href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">100%</span>
<div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="/assets/media/images/theme/light/brand-avatar-6.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">Bootstrap Framework 5.0</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 href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">60%</span>
<div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="/assets/media/images/theme/light/brand-avatar-1.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">MRGi 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 href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">60%</span>
<div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="/assets/media/images/theme/light/brand-avatar-2.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">Website redesign</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 href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">100%</span>
<div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="/assets/media/images/theme/light/brand-avatar-3.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">MRGInnovations website launch</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 href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">72%</span>
<div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="/assets/media/images/theme/light/brand-avatar-4.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">MRGi Website UI Kit</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 href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">90%</span>
<div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="/assets/media/images/theme/light/brand-avatar-5.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">Prototype MRGi Dashboard</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 href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">100%</span>
<div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
<tr class="table-divider"></tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="/assets/media/images/theme/light/brand-avatar-6.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<span class="name mb-0 text-sm">Bootstrap Framework 5.0</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 href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">60%</span>
<div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<!-- Actions -->
<div class="actions ml-3">
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Quick view">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="#" class="action-item mr-2" data-toggle="tooltip" title="Edit">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="action-item text-danger mr-2" data-toggle="tooltip" title="Move to trash">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>