Use List.js with table and a filter box for each column

Question

I am attempting to use List.js for a filter option for a table. I am able to get it to filter over one column with one search box, but what I want to do is have a filter box for each column. This is the HTML for the table:

<div id="myTable">
    <h1>My Table</h1>
    <div>
        <input class="search" placeholder="Filter ID" />
    </div>
    <table>
        <thead>
            <tr>
                <th id="cols" class="sortable" >ID</th>
                <th id="cols" class="sortable" >First Name</th>
                <th id="cols" class="sortable" >Last Name</th>
            </tr>
        </thead>
        <tbody class="list">
            <tr class="even">
                <td id="cols" class="id">12345</td>
                <td id="cols" class="firstName">Billy</td> 
                <td id="cols" class="lastName">Joe</td> 
            </tr>
        </tbody>
    </table>
</div>

And this is the JavaScript code:

var options = {
     valueNames: ['id']
};
var userList = new List('myTable', options)

Answer 1

You can simply use the List API search method to filter the columns by id .

 var searchInputs = document.querySelectorAll('input'); var options = { valueNames: ['id', 'firstName', 'lastName'] }; var userList = new List('myTable', options) function search ( e ) { userList.search(this.value, e.target.dataset.searchType) } searchInputs.forEach(function(input) { input.addEventListener('input', search) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.3.0/list.min.js"></script> <div id="myTable"> <h1>My Table</h1> <div> <input data-search-type="id" class="search" placeholder="Search ID" /> <input data-search-type="firstName" class="search" placeholder="Search First Name" /> <input data-search-type="lastName" class="search" placeholder="Search Last Name" /> </div> <table> <thead> <tr> <th id="cols" class="sortable" >ID</th> <th id="cols" class="sortable" >First</th> <th id="cols" class="sortable" >Last</th> </tr> </thead> <tbody class="list"> <tr class="even"> <td id="cols" class="id">1</td> <td id="cols" class="firstName">John</td> <td id="cols" class="lastName">Doe</td> </tr> <tr class="even"> <td id="cols" class="id">2</td> <td id="cols" class="firstName">Jane</td> <td id="cols" class="lastName">Doe</td> </tr> <tr class="even"> <td id="cols" class="id">3</td> <td id="cols" class="firstName">Foo</td> <td id="cols" class="lastName">Bar</td> </tr> </tbody> </table> </div> 

Another option would be to use the filter method.

 var searchInputs = document.querySelectorAll('input'); var options = { valueNames: ['id', 'firstName', 'lastName'] }; var userList = new List('myTable', options) function search ( e ) { var curr = e.target; userList.filter(function(item) { if(item.values()[curr.dataset.searchType].indexOf(curr.value) > -1) { return true } else { return false; } }) } searchInputs.forEach(function(input) { input.addEventListener('input', search) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.3.0/list.min.js"></script> <div id="myTable"> <h1>My Table</h1> <div> <input data-search-type="id" class="search" placeholder="Search ID" /> <input data-search-type="firstName" class="search" placeholder="Search First Name" /> <input data-search-type="lastName" class="search" placeholder="Search Last Name" /> </div> <table> <thead> <tr> <th id="cols" class="sortable" >ID</th> <th id="cols" class="sortable" >First</th> <th id="cols" class="sortable" >Last</th> </tr> </thead> <tbody class="list"> <tr class="even"> <td id="cols" class="id">1</td> <td id="cols" class="firstName">John</td> <td id="cols" class="lastName">Doe</td> </tr> <tr class="even"> <td id="cols" class="id">2</td> <td id="cols" class="firstName">Jane</td> <td id="cols" class="lastName">Doe</td> </tr> <tr class="even"> <td id="cols" class="id">3</td> <td id="cols" class="firstName">Foo</td> <td id="cols" class="lastName">Bar</td> </tr> </tbody> </table> </div>