Dynamic Table

To meet the requirements, we will create a dynamic and responsive table using vanilla JavaScript, HTML, and CSS. We'll ensure the table supports sorting and filtering by columns, and we'll add pagination for better data management. Here's a step-by-step approach: ### Step 1: HTML Structure First, create the basic HTML structure for the table. ```html Dynamic Table

``` ### Step 2: CSS Styling Next, add some basic styling to make the table look good and responsive. ```css /* styles.css */ body { font-family: Arial, sans-serif; } #table-container { margin: 20px; } table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } th { cursor: pointer; } tr:hover { background-color: #f1f1f1; } .pagination { margin-top: 10px; } ``` ### Step 3: JavaScript Functionality Now, implement the JavaScript code to handle data rendering, sorting, filtering, and pagination. ```javascript // script.js const users = [ { id: 1, name: 'John Doe', email: 'john.doe@example.com', role: 'Admin' }, { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com', role: 'User' }, { id: 3, name: 'Mike Johnson', email: 'mike.johnson@example.com', role: 'Moderator' }, // More user objects... ]; let currentPage = 1; const rowsPerPage = 5; document.addEventListener('DOMContentLoaded', () => { renderTable(users); }); function renderTable(data) { const container = document.getElementById('table-container'); container.innerHTML = ''; const table = document.createElement('table'); const thead = document.createElement('thead'); const headerRow = document.createElement('tr'); const headers = ['ID', 'Name', 'Email', 'Role']; headers.forEach(headerText => { const th = document.createElement('th'); th.textContent = headerText; th.addEventListener('click', () => sortTable(data, headerText.toLowerCase())); headerRow.appendChild(th); }); thead.appendChild(headerRow); const tbody = document.createElement('tbody'); data.slice((currentPage - 1) * rowsPerPage, currentPage * rowsPerPage).forEach(user => { const row = document.createElement('tr'); Object.values(user).forEach(text => { const cell = document.createElement('td'); cell.textContent = text; row.appendChild(cell); }); tbody.appendChild(row); }); table.appendChild(thead); table.appendChild(tbody); container.appendChild(table); renderPagination(data.length); } function sortTable(data, column) { const sortedData = [...data].sort((a, b) => (a[column] > b[column] ? 1 : -1)); renderTable(sortedData); } function renderPagination(totalRows) { const container = document.getElementById('table-container'); const paginationContainer = document.createElement('div'); paginationContainer.classList.add('pagination'); const totalPages = Math.ceil(totalRows / rowsPerPage); for (let i = 1; i <= totalPages; i++) { const pageButton = document.createElement('button'); pageButton.textContent = i; if (i === currentPage) { pageButton.disabled = true; } pageButton.addEventListener('click', () => changePage(i)); paginationContainer.appendChild(pageButton); } container.appendChild(paginationContainer); } function changePage(pageNumber) { currentPage = pageNumber; renderTable(users); } ``` ### Explanation: 1. **HTML**: - A `div` with an ID of `table-container` where our table will be dynamically inserted. 2. **CSS**: - Basic styling for the table to make it look clean and responsive. 3. **JavaScript**: - **Initialization**: - The `users` array contains our data. - We define `currentPage` and `rowsPerPage` for pagination. - On DOMContentLoaded event, we call `renderTable`. - **renderTable**: - Clears any existing content in the `table-container`. - Creates a new table with headers that are clickable for sorting. - Populates the table body with a slice of data based on the current page. - Calls `renderPagination` to display pagination buttons. - **sortTable**: - Sorts the data based on the clicked column header and re-renders the table. - **renderPagination**: - Creates pagination buttons based on total rows and appends them to the container. - **changePage**: - Changes the current page and re-renders the table. This setup provides a dynamic and responsive table with sorting and pagination functionalities. You can extend it further by adding filtering options or more advanced features as needed.

⌘Langbase

Langbase