baseddata.io/layouts/partials/table.html

<script>
  function createTable(
    endpoint,
    id,
    headers,
    maxHeight,
    sortable,
    valueId,
    selectableRows,
    filterTargets,
    defaultFirstSelected,
  ) {
    async function fetchDataForTable(query) {
      try {
        const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
        const response = await fetch(apiEndpoint);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const fetchedData = await response.json();
        data = fetchedData;
        generateTable(data);
      } catch (error) {
        console.error("Fetching data failed:", error);
      }
    }

    function generateTable(data) {
      const jsonTableContainer = document.getElementById(`${id}--container`);
      jsonTableContainer.className = "jsonTableContainer";
      jsonTableContainer.innerHTML = "";
      jsonTableContainer.style.maxHeight = maxHeight;

      tableHeaderNames = Object.values(headers);
      tableHeaderKeys = Object.keys(headers);

      const table = document.createElement("table");
      table.id = `${id}`;
      const thead = document.createElement("thead");
      const tbody = document.createElement("tbody");
      const headerRow = document.createElement("tr");
      tableHeaderNames.forEach((header) => {
        const th = document.createElement("th");
        th.textContent = header;
        headerRow.appendChild(th);
      });
      thead.appendChild(headerRow);
      table.appendChild(thead);

      for (const key in data) {
        const row = document.createElement("tr");
        row.value = data[key][valueId];
        tableHeaderKeys.forEach((columnName) => {
          const td = document.createElement("td");
          const div = document.createElement("div");
          div.id = "scrollable";
          div.textContent = data[key][columnName];
          td.appendChild(div);
          row.appendChild(td);
          tbody.appendChild(row);
        });
      }
      table.appendChild(thead);
      table.appendChild(tbody);
      jsonTableContainer.appendChild(table);

      // sortable
      if (sortable == "true") {
        table.className = "sortable";
        sorttable.makeSortable(document.getElementById(`${id}`));
      }

      if (selectableRows === "multi" || selectableRows === "single") {
        const rows = table.getElementsByTagName("tr");
        for (let i = 1; i < rows.length; i++) {
          rows[i].addEventListener("click", function () {
            if (selectableRows === "multi") {
              this.classList.toggle("selected");
              if (this.classList.contains("selected")) {
                const event = new CustomEvent("filterChange", {
                  detail: {
                    filterId: valueId,
                    filterValue: this.value,
                    filterActions: ["selected"],
                    filterTargets: filterTargets,
                  },
                });
                document.dispatchEvent(event);
              } else {
                const event = new CustomEvent("filterChange", {
                  detail: {
                    filterId: valueId,
                    filterValue: this.value,
                    filterActions: ["deselected"],
                    filterTargets: filterTargets,
                  },
                });
                document.dispatchEvent(event);
              }
            } else if (selectableRows === "single") {
              if (this.classList.contains("selected")) {
                this.classList.remove("selected");
              } else {
                for (let j = 1; j < rows.length; j++) {
                  rows[j].classList.remove("selected");
                }
                this.classList.add("selected");
              }
            }
          });
          if (defaultFirstSelected == true) {
            if (i == 1) {
              rows[i].classList.add("selected");
              const event = new CustomEvent("filterChange", {
                detail: {
                  filterId: valueId,
                  filterValue: rows[i].value,
                  filterActions: ["selected"],
                  filterTargets: filterTargets,
                },
              });
              document.dispatchEvent(event);
            }
          }
        }
      }

    }

    // listen for filter events for this target
    document.addEventListener("filterChange", function (event) {
      tableId = document.getElementById(id).id;
      if (event.detail.filterTargets.includes(tableId)) {
        query = queryConstructor();
        fetchDataForTable(query);
      }
    });

    query = queryConstructor();
    fetchDataForTable(query);
  }
</script>