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.
Usage
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 | |
|---|---|---|---|---|---|
| $2500 USD | pending |
|
60%
|
||
| $1800 USD | completed |
|
100%
|
||
| $3150 USD | delayed |
|
72%
|
||
| $4400 USD | on schedule |
|
90%
|
||
| $2200 USD | completed |
|
100%
|
||
| $2500 USD | pending |
|
60%
|
||
| $2500 USD | pending |
|
60%
|
||
| $1800 USD | completed |
|
100%
|
||
| $3150 USD | delayed |
|
72%
|
||
| $4400 USD | on schedule |
|
90%
|
||
| $2200 USD | completed |
|
100%
|
||
| $2500 USD | pending |
|
60%
|
<div class="table-responsive" data-toggle="list" data-list-values='["name", "budget", "status", "completion"]'>
<table class="table 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/img/theme/light/brand-avatar-1.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<a href="overview.html" class="name mb-0 h6 text-sm">Purpose Website UI</a>
</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/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/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" style="width: 100px;">
<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">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-2.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<a href="overview.html" class="name mb-0 h6 text-sm">Website Redesign</a>
</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/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/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" style="width: 100px;">
<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">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-3.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<a href="overview.html" class="name mb-0 h6 text-sm">Webpixels Website</a>
</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/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/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" style="width: 100px;">
<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">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-4.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<a href="overview.html" class="name mb-0 h6 text-sm">Purpose Application UI</a>
</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/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/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" style="width: 100px;">
<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">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-5.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<a href="overview.html" class="name mb-0 h6 text-sm">Purpose Dashboard UI</a>
</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/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/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" style="width: 100px;">
<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">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-6.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<a href="overview.html" class="name mb-0 h6 text-sm">Bootstrap Framework</a>
</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/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/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" style="width: 100px;">
<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">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-1.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<a href="overview.html" class="name mb-0 h6 text-sm">Component Library</a>
</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/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/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" style="width: 100px;">
<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">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-2.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<a href="overview.html" class="name mb-0 h6 text-sm">Website Builder</a>
</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/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/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" style="width: 100px;">
<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">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-3.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<a href="overview.html" class="name mb-0 h6 text-sm">Website Launch</a>
</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/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/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" style="width: 100px;">
<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">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-4.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<a href="overview.html" class="name mb-0 h6 text-sm">Payment Integration</a>
</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/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/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" style="width: 100px;">
<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">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-5.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<a href="overview.html" class="name mb-0 h6 text-sm">Newsletter Templates</a>
</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/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/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" style="width: 100px;">
<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">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<div>
<img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-6.png" class="avatar rounded-circle">
</div>
<div class="media-body ml-4">
<a href="overview.html" class="name mb-0 h6 text-sm">Laravel Back-end</a>
</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/img/theme/light/team-1-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
<a href="#" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/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" style="width: 100px;">
<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">
<div class="dropdown" data-toggle="dropdown">
<a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">Refresh</a>
<a href="#" class="dropdown-item">Manage Widgets</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>