1// Set up column visibility toggles
 2
 3let sortColumn = "name";
 4let sortDirection = "asc";
 5let data = [];
 6let columns = [];
 7
 8function setupColumnToggles(columns) {
 9  const togglesContainer = document.querySelector(".column-toggles");
10  columns.forEach((column) => {
11    const label = document.createElement("label");
12    const checkbox = document.createElement("input");
13    checkbox.type = "checkbox";
14    checkbox.checked = column.visible;
15    checkbox.dataset.column = column.id;
16    checkbox.addEventListener("change", function () {
17      columns.find((col) => col.id === column.id).visible = this.checked;
18      renderTable();
19    });
20
21    label.appendChild(checkbox);
22    label.appendChild(document.createTextNode(` ${column.label}`));
23    togglesContainer.appendChild(label);
24  });
25}
26
27// Sort function
28function sortData(columnId) {
29  if (sortColumn === columnId) {
30    sortDirection = sortDirection === "asc" ? "desc" : "asc";
31  } else {
32    sortColumn = columnId;
33    sortDirection = "asc";
34  }
35  renderTable();
36}
37
38function renderTable() {
39  const tableHead = document.querySelector("#data-table thead tr");
40  const tableBody = document.querySelector("#data-table tbody");
41  const searchTerm = document
42    .getElementById("search-input")
43    .value.toLowerCase();
44
45  // Clear existing content
46  tableHead.innerHTML = "";
47  tableBody.innerHTML = "";
48
49  // Add table headers
50  columns.forEach((column) => {
51    if (column.visible) {
52      const th = document.createElement("th");
53      th.textContent = column.label;
54      th.classList.add("sortable");
55      if (sortColumn === column.id) {
56        th.classList.add(sortDirection);
57      }
58      th.addEventListener("click", () => sortData(column.id));
59      tableHead.appendChild(th);
60    }
61  });
62
63  // Filter and sort data
64  const filteredData = data.filter((d) => {
65    return Object.values(d).some((value) =>
66      String(value).toLowerCase().includes(searchTerm)
67    );
68  });
69
70  const sortedData = [...filteredData].sort((a, b) => {
71    const valueA = String(a[sortColumn] || "");
72    const valueB = String(b[sortColumn] || "");
73
74    return sortDirection === "asc"
75      ? valueA.localeCompare(valueB)
76      : valueB.localeCompare(valueA);
77  });
78
79  // Populate table rows
80  sortedData.forEach((r) => {
81    const row = document.createElement("tr");
82
83    columns.forEach((column) => {
84      if (column.visible) {
85        const cell = document.createElement("td");
86        cell.textContent = r[column.id] || "";
87        row.appendChild(cell);
88      }
89    });
90
91    tableBody.appendChild(row);
92  });
93}