s1

src/pages/data-table.astro

@@ -0,0 +1,160 @@
+<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>