List.js

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.

Examples

Basic
...
Jimmy Denis
Graphic Designer
...
Chad
CEO Zeleaf
...
Talha
Front End Designer
...
Chad
CEO Zeleaf
...
Talha
Front End Designer
...
Jimmy Denis
Graphic Designer
								
									<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']
	});