Table filter

by jahongirsobirov

HTML

<script src="https://signel.onrender.com/signel.js"></script>
<div id="app">
  Search: <input type="text" id="search" style="margin-bottom: 20px"> <button id="order">Sort GDP</button>
  <table id="country-table" border="1" cellpadding="6" cellspacing="0">
    <thead>
      <tr>
        <th>Country</th>
        <th>GDP (USD)</th>
      </tr>
    </thead>
    <tbody id="country-row">
      <!-- There will appear country name and country GDP -->
    </tbody>
  </table>
</div>

JavaScript

let allCountries = [
  { name: 'Argentina', gdp: 14000 },
  { name: 'USA', gdp: 80000 },
  { name: 'Uzbekistan', gdp: 3500 }
];

let state = el('#country-table', {
  search: '',
  order: 'increase'
});

function renderTable(countries) {
  const tbody = document.querySelector('#country-row');
  tbody.innerHTML = countries
    .map(c => `<tr><td>${c.name}</td><td>${c.gdp}</td></tr>`)
    .join('');
}

// initial render
renderTable(allCountries);

// search functionality
model('#search', state, 'search');
watch(state, 'search', value => {
  const v = value.toLowerCase();
  const filtered = allCountries.filter(c =>
    c.name.toLowerCase().includes(v)
  );
  renderTable(filtered);
});

// sort button
click('#order', () => {
  state.order = state.order === 'increase' ? 'decrease' : 'increase';
  const sorted = [...allCountries].sort((a, b) =>
    state.order === 'increase' ? a.gdp - b.gdp : b.gdp - a.gdp
  );
  renderTable(sorted);
  document.querySelector('#order').textContent =
    state.order === 'increase' ? 'Sort Desc' : 'Sort Asc';
});