Documentation for Dynamic Table with Northwind Customer Data

Overview

This project implements a dynamic table that displays customer data from the Northwind database. The table supports pagination, editing, and deleting of customer records, along with a search functionality. Users can also choose the number of rows displayed per page (3, 5, or 10).

Features

• Dynamic Table: Displays customer data in a structured format.
• Pagination: Allows navigation through pages of customer data.
• Row Selection: Users can select the number of rows displayed per page.
• Search Functionality: Enables users to filter customer records based on input.
• Edit and Delete Options: Users can modify or remove customer records.

Technologies Used

• HTML: Structure of the web page.
• JavaScript: Logic for dynamic interaction and data manipulation.
• Tailwind CSS: Styling for the user interface.

Implementation Details

1. Table Structure and Data Rendering

• The table is dynamically created using JavaScript.
• Data is stored in an array of customer objects.
• Each row displays customer details along with an avatar.
• Edit and delete buttons are included in each row.

Code Snippet and Explanation:

<table
  id="customerTable"
  class="table-auto w-full border-collapse border border-gray-300"
>
  <thead>
    <tr>
      <th class="border px-4 py-2">Name</th>
      <th class="border px-4 py-2">Company</th>
      <th class="border px-4 py-2">Actions</th>
    </tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>

• The <table> element creates a structured format for displaying customer data.
• The <thead> section defines column headers for Name, Company, and Actions.
• The <tbody> section is dynamically populated with customer data using JavaScript.

2. Pagination

• Users can navigate between pages using pagination controls.
• The number of rows per page can be adjusted dynamically.

Code Snippet and Explanation:

function paginateTable(pageNumber, rowsPerPage) {
  const start = (pageNumber - 1) * rowsPerPage;
  const end = start + rowsPerPage;
  const paginatedData = customers.slice(start, end);
  renderTable(paginatedData);
}

• start calculates the first row index of the current page.
• end determines the last row index based on rows per page.
• slice(start, end) extracts the required data from the customer array.
• renderTable(paginatedData) updates the table with the new page data.

3. Search Functionality

• Users can enter text to filter customers based on name, company, or other attributes.

Code Snippet and Explanation:

document.getElementById("searchInput").addEventListener("input", function () {
  const searchValue = this.value.toLowerCase();
  const filteredData = customers.filter(
    (customer) =>
      customer.name.toLowerCase().includes(searchValue) ||
      customer.company.toLowerCase().includes(searchValue)
  );
  renderTable(filteredData);
});

• The input event listener detects user input in the search box.
• The searchValue is converted to lowercase for case-insensitive searching.
• The filter() function checks if searchValue matches customer name or company.
• The filtered results are rendered using renderTable(filteredData).

4. Edit Functionality

• Users can edit a customer’s information through a modal form.
• Changes are saved and reflected in the table immediately.

Code Snippet and Explanation:

function editCustomer(index) {
  const customer = customers[index];
  document.getElementById("editName").value = customer.name;
  document.getElementById("editCompany").value = customer.company;
  document.getElementById("saveEdit").onclick = function () {
    customers[index].name = document.getElementById("editName").value;
    customers[index].company = document.getElementById("editCompany").value;
    renderTable(customers);
  };
}

• Retrieves the customer object based on index.
• Populates the edit form fields with current values.
• Updates the customer object with new input when 'Save' is clicked.
• Calls renderTable(customers) to refresh the table with updated data.

5. Delete Functionality

• A confirmation modal appears before deleting a customer.
• Deleted records are removed from the table and data array.

Code Snippet and Explanation:

function deleteCustomer(index) {
  if (confirm("Are you sure you want to delete this customer?")) {
    customers.splice(index, 1);
    renderTable(customers);
  }
}

• The confirm() function prompts the user for deletion confirmation.
• If confirmed, splice(index, 1) removes the customer from the array.
• Calls renderTable(customers) to update the table.

Conclusion

This dynamic table provides an interactive way to manage customer data, allowing for efficient viewing, searching, editing, and deletion of records. The use of modern JavaScript and Tailwind CSS enhances the user experience and interface design.