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.
Project Budget Status Users Completion
Image placeholder
MRGi Design System
$2500 USD pending
60%
Image placeholder
Website redesign
$1800 USD completed
100%
Image placeholder
MRGInnovations website launch
$3150 USD delayed
72%
Image placeholder
MRGi Website UI Kit
$4400 USD on schedule
90%
Image placeholder
Prototype MRGi Dashboard
$2200 USD completed
100%
Image placeholder
Bootstrap Framework 5.0
$2500 USD pending
60%
Image placeholder
MRGi Design System
$2500 USD pending
60%
Image placeholder
Website redesign
$1800 USD completed
100%
Image placeholder
MRGInnovations website launch
$3150 USD delayed
72%
Image placeholder
MRGi Website UI Kit
$4400 USD on schedule
90%
Image placeholder
Prototype MRGi Dashboard
$2200 USD completed
100%
Image placeholder
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>