crea una tabla html con conetnido dinamico y crea una paginacion para esa tabla in javascript

<table id="myTable">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Email</th>
      <th>Teléfono</th>
      <th>Dirección</th>
    </tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>

<div id="pagination">
  <button id="prevBtn" disabled>Anterior</button>
  <span id="page"></span>
  <button id="nextBtn">Siguiente</button>
</div>
343 chars
18 lines

index.tsx
const data = [
  { name: 'Juan', email: 'juan@example.com', phone: '1234567890', address: 'Av. Siempreviva 123' },
  { name: 'Pedro', email: 'pedro@example.com', phone: '0987654321', address: 'Calle Falsa 123' },
  { name: 'María', email: 'maria@example.com', phone: '5556667777', address: 'Calle 18 # 345' },
  { name: 'Carlos', email: 'carlos@example.com', phone: '1112223333', address: 'Av. la Paz 456' },
  //...
]

const itemsPerPage = 2; // número de elementos por página
let currentPage = 1; // página actual

function renderTable(page) {
  const tableBody = document.getElementById('tableBody');

  // limpiar la tabla antes de renderizar datos
  tableBody.innerHTML = '';

  // construir la tabla con los datos de la página actual
  const start = (page - 1) * itemsPerPage; // índice del primer elemento en la página actual
  const end = start + itemsPerPage; // índice del último elemento en la página actual
  const pageData = data.slice(start, end); // datos de la página actual

  pageData.forEach(d => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${d.name}</td>
      <td>${d.email}</td>
      <td>${d.phone}</td>
      <td>${d.address}</td>
    `;
    tableBody.appendChild(row);
  })
}

function renderPagination() {
  const pageEl = document.getElementById('page');

  // calcular el número de páginas a mostrar
  const pages = Math.ceil(data.length / itemsPerPage);

  // actualizar la etiqueta de páginas con la página actual
  pageEl.innerHTML = `Página ${currentPage} de ${pages}`;

  // activar o desactivar los botones de paginación según corresponda
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');
  prevBtn.disabled = currentPage === 1;
  nextBtn.disabled = currentPage === pages;

  // agregar los listeners a los botones de paginación
  prevBtn.addEventListener('click', () => {
    if (currentPage > 1) {
      currentPage--;
      renderTable(currentPage);
      renderPagination();
    }
  });
  nextBtn.addEventListener('click', () => {
    if (currentPage < pages) {
      currentPage++;
      renderTable(currentPage);
      renderPagination();
    }
  });
}

// renderizar la tabla y la paginación cuando se carga la página
renderTable(currentPage);
renderPagination();
2299 chars
70 lines