Идет поиск,

Сортировка по имени,

HTML-структура

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Table with Search and Sorting</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
  <input type="text" id="searchInput" placeholder="Search...">
  <table id="dataTable">
    <thead>
      <tr>
        <th data-sort="name">Name</th>
        <th data-sort="age">Age</th>
        <th data-sort="country">Country</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>
<script src="script.js"></script>
</body>
</html>

script.js

const data = [
  { name: 'John', age: 28, country: 'USA' },
  { name: 'Alice', age: 24, country: 'Canada' },
  { name: 'Bob', age: 32, country: 'UK' },
  // ... more data
];

const tableBody = document.querySelector('tbody');
const searchInput = document.getElementById('searchInput');

function renderTable(data) {
  tableBody.innerHTML = '';
  data.forEach(item => {
    const row = document.createElement('tr');
    row.innerHTML = `<td>${item.name}</td><td>${item.age}</td><td>${item.country}</td>`;
    tableBody.appendChild(row);
  });
}

function searchAndRender(query) {
  const filteredData = data.filter(item => {
    return (
      item.name.toLowerCase().includes(query) ||
      item.country.toLowerCase().includes(query)
    );
  });
  renderTable(filteredData);
}

searchInput.addEventListener('input', event => {
  const query = event.target.value.toLowerCase();
  searchAndRender(query);
});

const thElements = document.querySelectorAll('th[data-sort]');
thElements.forEach(th => {
  th.addEventListener('click', () => {
    const sortBy = th.getAttribute('data-sort');
    data.sort((a, b) => a[sortBy].localeCompare(b[sortBy]));
    renderTable(data);
  });
});

renderTable(data);

CSS

body {
  font-family: Arial, sans-serif;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  cursor: pointer;
}

th:hover {
  background-color: #f2f2f2;
}

tbody tr:hover {
  background-color: #f2f2f2;
}

Спасибо за прочтение

Я знаю, что всегда есть что улучшить. Пожалуйста, поделитесь своими мыслями