Create searchable, sortable, and filterable lists and tables with the simple but powerful List.js plugin. Please read the official plugin documentation for a full list of options.
<div id="basicList" class="card-list">
<div class="input-group">
<input class="form-control search mb-3" type="search" placeholder="Search...">
<div class="input-append">
<button class="sort btn btn-secondary" data-sort="username">
Sort by name
</button>
</div>
</div>
<div class="list">
<div class="item-list">
<div class="avatar">
<img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
</div>
<div class="info-user ml-3">
<div class="username">Jimmy Denis</div>
<div class="status">Graphic Designer</div>
</div>
<button class="btn btn-icon btn-primary btn-round btn-sm">
<i class="fa fa-plus"></i>
</button>
</div>
<div class="item-list">
<div class="avatar">
<img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
</div>
<div class="info-user ml-3">
<div class="username">Chad</div>
<div class="status">CEO Zeleaf</div>
</div>
<button class="btn btn-icon btn-primary btn-round btn-sm">
<i class="fa fa-plus"></i>
</button>
</div>
<div class="item-list">
<div class="avatar">
<img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
</div>
<div class="info-user ml-3">
<div class="username">Talha</div>
<div class="status">Front End Designer</div>
</div>
<button class="btn btn-icon btn-primary btn-round btn-sm">
<i class="fa fa-plus"></i>
</button>
</div>
<div class="item-list">
<div class="avatar">
<img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
</div>
<div class="info-user ml-3">
<div class="username">Chad</div>
<div class="status">CEO Zeleaf</div>
</div>
<button class="btn btn-icon btn-primary btn-round btn-sm">
<i class="fa fa-plus"></i>
</button>
</div>
<div class="item-list">
<div class="avatar">
<img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
</div>
<div class="info-user ml-3">
<div class="username">Talha</div>
<div class="status">Front End Designer</div>
</div>
<button class="btn btn-icon btn-primary btn-round btn-sm">
<i class="fa fa-plus"></i>
</button>
</div>
<div class="item-list">
<div class="avatar">
<img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
</div>
<div class="info-user ml-3">
<div class="username">Jimmy Denis</div>
<div class="status">Graphic Designer</div>
</div>
<button class="btn btn-icon btn-primary btn-round btn-sm">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
var usersList = new List('basicList', {
valueNames: ['username', 'status']
});