Table Not Displaying Correctly

Expected behavior

the bottom of the table should look like this in terms of formatting.

Actual behavior

For some reason the pagination stops at column 1 and does not extend over to all 4 columns and there is no line under the remaining 3 columns either.

Resources (screenshots, code snippets etc.) Current JS code that populates this table:

const customDatatable = document.getElementById('datatable-custom');

const headers = ['Customer', 'Name', 'Phone', 'Email'];

let table = document.createElement('table'); table.className = 'table';

// Create placeholder rows const tbody = document.createElement('tbody'); const numPlaceholderRows = 7; for (let i = 0; i < numPlaceholderRows; i++) { const placeholderRow = document.createElement('tr'); headers.forEach(() => { const placeholderCell = document.createElement('td'); placeholderCell.innerHTML = ''; placeholderRow.appendChild(placeholderCell); }); tbody.appendChild(placeholderRow); } table.appendChild(tbody);

customDatatable.appendChild(table);

// Fetch and populate data from Firestore const customersRef = collection(db, "BCD_P22_Customers"); getDocs(customersRef) .then((snapshot) => { tbody.innerHTML = ''; // Clear placeholder rows

const customerData = snapshot.docs.map(doc => ({
  customer: doc.data().CONCAT_Name_No || "no data",
  name: doc.data().Contact || "no data",
  phone: doc.data().Phone_No || "no data",
  email: doc.data().Country_Region_Code || "no data"
}));

if (window.datatableInstance) {
  window.datatableInstance.destroy();
}

// Initialize the DataTable with new options
window.datatableInstance = new mdb.Datatable(table, {
  columns: headers.map(header => ({ label: header, field: header.toLowerCase() })),
  rows: customerData
});

document.getElementById('datatable-search-input').addEventListener('input', (e) => {
  window.datatableInstance.search(e.target.value);
});

}) .catch((error) => { console.error("Error fetching data:", error); });