Table Filter

by LyndseyB

HTML

<div class="container">
<table class="tbl-filter">
	<thead>
		<tr>
			<th>Name</th>
			<th>Username</th>
			<th>Login Level</th>
			<th>Added</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Lyndsey Browning</td>
			<td>[email protected]</td>
			<td>Internal</td>
			<td>12/08/2016</td>
		</tr>
		<tr>
			<td>Gareth Coombs</td>
			<td>[email protected]</td>
			<td>Internal</td>
			<td>11/08/2016</td>
		</tr>
		<tr>
			<td>Chris Leyshon</td>
			<td>[email protected]</td>
			<td>Premium</td>
			<td>12/08/2016</td>
		</tr>
	</tbody>
</table>
</div>

SCSS

.container {
  width: 80%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  font-size: 1.1em;
}

th, td {
  padding: 4px;
  border: 1px solid #e3e2de;
}

th {
  background-color: #eee;
}

.tbl-filter th {
    position: relative;
}

.tbl-filter__btn {
  position: absolute;
  right: 0;
  bottom: 0;
}

.tbl-filter__search {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  padding: 0.5em;
    
  border: 1px solid #e3e2de;
  background-color: #eee;
    
  input[type="search"] {
    max-width: 150px;
    padding: 0.1em;
  }
    
}

.hide {
  display: none;
}

Babel + JSX

(() => {

	const filter = document.querySelectorAll('.tbl-filter');
  const btn = `tbl-filter__btn`;
  const search = `tbl-filter__search`;
  
  [].forEach.call(filter, (table) => {
  	let headers = table.querySelectorAll('th');    
    if(!headers.length) return; // if there's no headers, don't do anything
    
    [].forEach.call(headers, (header) => {
    	header.innerHTML += `<button class="${btn}">&#x25BC;</button>`;
      header.innerHTML += `
      <div class="tbl-filter__search hide">
      	<input type="search" placeholder="search">
      </div>     
      `;
   
      header.querySelector(`.${btn}`).addEventListener('click', () => {
      	header.querySelector(`.${search}`).classList.remove('hide');
      });
    });    
  }); 
  

})();