# 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 Documentation

## 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.
Show code

Project | Budget | Status | Users | Completion |
--- | --- | --- | --- | --- | ---
Purpose Website UI | $2500 USD | pending |  | 60% |
Website Redesign | $1800 USD | completed |  | 100% |
Webpixels Website | $3150 USD | delayed |  | 72% |
Purpose Application UI | $4400 USD | on schedule |  | 90% |
Purpose Dashboard UI | $2200 USD | completed |  | 100% |
Bootstrap Framework | $2500 USD | pending |  | 60% |
Component Library | $2500 USD | pending |  | 60% |
Website Builder | $1800 USD | completed |  | 100% |
Website Launch | $3150 USD | delayed |  | 72% |
Payment Integration | $4400 USD | on schedule |  | 90% |
Newsletter Templates | $2200 USD | completed |  | 100% |
Laravel Back-end | $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/person-1.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-3.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 data-feather="more-vertical"></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/person-1.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-3.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 data-feather="more-vertical"></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/person-1.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-3.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 data-feather="more-vertical"></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/person-1.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-3.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 data-feather="more-vertical"></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/person-1.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-3.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 data-feather="more-vertical"></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/person-1.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-3.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 data-feather="more-vertical"></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/person-1.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-3.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 data-feather="more-vertical"></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/person-1.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-3.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 data-feather="more-vertical"></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/person-1.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-3.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 data-feather="more-vertical"></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/person-1.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-3.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 data-feather="more-vertical"></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/person-1.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-3.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 data-feather="more-vertical"></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/person-1.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

    </a>
        <a href="#" class="avatar rounded-circle avatar-sm">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-3.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 data-feather="more-vertical"></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>