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.
<div class="card card-lg" id="crmCompany" data-list="company_name,company_owner,company_category,company_rating,company_location">
<div class="card-header border-bottom-0">
<div class="row">
<div class="col-lg-4">
<input type="search" class="form-control listjs-search" placeholder="Search" />
</div>
<div class="col-lg-8 d-flex justify-content-end">
<div class="d-flex align-items-center gap-3">
<a href="#!"
class="btn btn-dark d-md-flex align-items-center gap-2" data-bs-toggle="modal"
data-bs-target="#contact-modal">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline
icon-tabler-plus"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path d="M12 5l0 14" />
<path d="M5 12l14 0" />
</svg>
Add Company</a
>
<button type="button" class="btn btn-white">Import</button>
</div>
</div>
</div>
</div>
<div class="table-responsive table-checkbox" data-simplebar style="height: 600px">
<table class="table text-nowrap table-centered table-hover
mb-0" data-check-container>
<thead class="sticky-top">
<tr>
<th class="pe-0">
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="checkAll" data-check-all />
<label class="form-check-label" for="checkAll"></label>
</div>
</th>
<th class="listjs-sorter ps-0" data-sort="company_name">Name</th>
<th class="listjs-sorter" data-sort="company_owner">Age</th>
<th class="listjs-sorter" data-sort="company_category">City</th>
<th class="listjs-sorter" data-sort="company_rating">Rating</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="pe-0">
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="contactCheckbox2" />
<label class="form-check-label" for="contactCheckbox2"></label>
</div>
</td>
<td class="company_name ps-0">
<div class="">
<a href="#!"
class="text-inherit">Jonas</a>
</div>
</td>
<td class="company_owner">-132 </td>
<td class="company_category">Berlin</td>
<td class="">
<span class="d-flex align-items-center gap-2 lh-1">
<span>3.9</span>
<span
><svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="currentColor"
class="icon icon-tabler icons-tabler-filled
icon-tabler-star text-warning"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44
1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1
1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38
-.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
/>
</svg>
</span>
</span>
</td>
</tr>
<tr>
<td class="pe-0">
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="contactCheckbox3" />
<label class="form-check-label" for="contactCheckbox3"></label>
</div>
</td>
<td class="company_name ps-0">
<a href="#!"
class="text-inherit">Fredrik </a>
</td>
<td class="company_owner">26</td>
<td class="company_category">Goteborg </td>
<td class="company_rating">
<span class="d-flex align-items-center gap-2 lh-1">
<span>4.9</span>
<span
><svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="currentColor"
class="icon icon-tabler icons-tabler-filled
icon-tabler-star text-warning"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44
1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1
1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38
-.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
/>
</svg>
</span>
</span>
</td>
</tr>
<tr>
<td class="pe-0">
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="contactCheckbox4" />
<label class="form-check-label" for="contactCheckbox4"></label>
</div>
</td>
<td class="company_name ps-0">
<a href="#!"
class="text-inherit">Jonny </a>
</td>
<td class="company_owner">27</td>
<td class="company_category">Stockholm </td>
<td class="company_rating">
<span class="d-flex align-items-center gap-2 lh-1">
<span>4.0</span>
<span
><svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="currentColor"
class="icon icon-tabler icons-tabler-filled
icon-tabler-star text-warning"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44
1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1
1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38
-.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
/>
</svg>
</span>
</span>
</td>
</tr>
<tr>
<td class="pe-0">
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="contactCheckbox5" />
<label class="form-check-label" for="contactCheckbox5"></label>
</div>
</td>
<td class="company_name ps-0">
<a href="#!"
class="text-inherit">Gustaf </a>
</td>
<td class="company_owner">23</td>
<td class="company_category">Sundsvall </td>
<td class="company_rating">
<span class="d-flex align-items-center gap-2 lh-1">
<span>3.0</span>
<span
><svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="currentColor"
class="icon icon-tabler icons-tabler-filled
icon-tabler-star text-warning"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44
1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1
1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38
-.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
/>
</svg>
</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="btn-toolbar card-footer border-top border-dashed
d-flex justify-content-between align-items-center">
<p class="mb-0 listjs-showing-items-label"></p>
<div class="d-flex gap-4">
<div class="d-flex align-items-center gap-2">
<label class="form-label text-nowrap mb-0">Rows per page:</label>
<select class="form-select listjs-items-per-page" data-choices="">
<option value="8"
selected>8</option>
<option value="11">11</option>
</select>
</div>
<div>
<div class="pagination-buttons d-flex">
<button class="btn btn-white prev">Previous</button>
<ul class="pagination mb-0 ms-1"></ul>
<button class="btn btn-white next">Next</button>
</div>
</div>
</div>
</div>
</div>