phaser-game-bs/src/pages/data-table.astro

<div class="container mx-auto p-4">
    <div class="flex justify-between items-center mb-4">
      <input
        type="text"
        id="searchInput"
        placeholder="Search..."
        class="p-2 border border-gray-300 rounded"
        onkeyup="searchTable()"
      />
      <select id="rowsPerPage" onchange="paginateTable()" class="p-2 border border-gray-300 rounded">
        <option value="5">5 rows</option>
        <option value="10">10 rows</option>
        <option value="15">15 rows</option>
      </select>
      <button
        class="p-2 bg-green-500 text-white rounded"
        onclick="exportTableToCSV()"
      >
        Export to CSV
      </button>
    </div>
  
    <table class="min-w-full table-auto border-collapse border border-gray-300 text-sm">
      <thead class="bg-gray-200">
        <tr>
          <th class="p-2 cursor-pointer" onclick="sortTable(0)">Name</th>
          <th class="p-2 cursor-pointer" onclick="sortTable(1)">Age</th>
          <th class="p-2 cursor-pointer" onclick="sortTable(2)">Country</th>
        </tr>
      </thead>
      <tbody id="dataTable">
        <!-- Table rows will be injected by JavaScript -->
      </tbody>
    </table>
  
    <div id="pagination" class="mt-4 flex justify-center space-x-2"></div>
  </div>
  
  <script is:inline>
    const tableData = [
    { name: "Alice", age: 25, country: "USA" },
    { name: "Bob", age: 30, country: "UK" },
    { name: "Charlie", age: 35, country: "Canada" },
    { name: "Alice", age: 25, country: "USA" },
    { name: "Bob", age: 30, country: "UK" },
    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
    { name: "Bob", age: 30, country: "UK" },
    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
    { name: "Bob", age: 30, country: "UK" },
    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
    { name: "Bob", age: 30, country: "UK" },
    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
    { name: "Bob", age: 30, country: "UK" },
    { name: "Suvodip", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
    { name: "Bob", age: 30, country: "UK" },
    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
    { name: "Bob", age: 30, country: "UK" },
    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
    { name: "Bob", age: 30, country: "UK" },
    { name: "Charlie", age: 35, country: "Canada" },
    // Add more data here
    ];

    let currentPage = 1;
    let rowsPerPage = 5;
    let currentData = [...tableData];

    function renderTable(data) {
    const tableBody = document.getElementById("dataTable");
    tableBody.innerHTML = "";
    
    const start = (currentPage - 1) * rowsPerPage;
    const paginatedData = data.slice(start, start + rowsPerPage);
    
    paginatedData.forEach(row => {
        const tr = document.createElement("tr");
        tr.classList.add("hover:bg-gray-100");
        tr.innerHTML = `
        <td class="border p-2">${row.name}</td>
        <td class="border p-2">${row.age}</td>
        <td class="border p-2">${row.country}</td>
        `;
        tableBody.appendChild(tr);
    });

    renderPagination(data.length);
    }

    function sortTable(colIndex) {
    currentData.sort((a, b) => {
        const column = Object.keys(a)[colIndex];
        return a[column] > b[column] ? 1 : -1;
    });
    renderTable(currentData);
    }

    function searchTable() {
    const query = document.getElementById("searchInput").value.toLowerCase();
    currentData = tableData.filter(row => {
        return Object.values(row).some(val => val.toString().toLowerCase().includes(query));
    });
    renderTable(currentData);
    }

    function paginateTable() {
    rowsPerPage = parseInt(document.getElementById("rowsPerPage").value);
    currentPage = 1;
    renderTable(currentData);
    }

    function renderPagination(totalRows) {
    const pagination = document.getElementById("pagination");
    pagination.innerHTML = "";
    const totalPages = Math.ceil(totalRows / rowsPerPage);

    for (let i = 1; i <= totalPages; i++) {
        const button = document.createElement("button");
        button.classList.add("p-2", "border", "border-gray-300", "rounded");
        if (i === currentPage) {
        button.classList.add("bg-blue-500");
        button.classList.add("text-white");
        }
        button.textContent = i;
        button.onclick = () => {
        currentPage = i;
        renderTable(currentData);
        };
        pagination.appendChild(button);
    }
    }

    // CSV Export Function
    function exportTableToCSV() {
    const csvRows = [];
    const headers = Object.keys(tableData[0]);
    csvRows.push(headers.join(","));

    currentData.forEach(row => {
        const values = headers.map(header => row[header]);
        csvRows.push(values.join(","));
    });

    const csvContent = csvRows.join("\n");
    const blob = new Blob([csvContent], { type: "text/csv" });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.setAttribute("hidden", "");
    a.setAttribute("href", url);
    a.setAttribute("download", "table_data.csv");
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    }

    // Initialize table
    paginateTable();



  </script>