baseddata.io/layouts/partials/table.html

<script>
  function createTable(
    endpoint,
    id,
    headers,
    maxHeight,
    sortable,
    valueId,
    selectableRows,
  ) {
    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}--table-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}--table`;
      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);

      // selectable rows
      let currentlySelectedRow = null;

      if (selectableRows === "multi" || selectableRows === "single") {
        const rows = table.getElementsByTagName("tr");

        for (let i = 1; i < rows.length; i++) {
          // Skip the header row
          rows[i].addEventListener("click", function () {
            if (selectableRows === "single") {
              // Deselect the currently selected row, if any
              if (currentlySelectedRow && currentlySelectedRow !== this) {
                currentlySelectedRow.classList.remove("selected");
                const deselectEvent = new CustomEvent("rowDeselected", {
                  detail: { row: currentlySelectedRow },
                });
                document.dispatchEvent(deselectEvent);
              }

              // Toggle the selected class on the clicked row
              this.classList.toggle("selected");

              // Update the currently selected row
              currentlySelectedRow = this.classList.contains("selected")
                ? this
                : null;
            } else {
              // Multi-select behavior
              this.classList.toggle("selected");
            }

            const event = new CustomEvent(
              this.classList.contains("selected")
                ? "rowSelected"
                : "rowDeselected",
              {
                detail: {
                  row: this,
                  selectableRows: selectableRows,
                  valueId: valueId,
                },
              },
            );

            document.dispatchEvent(event);
          });
        }
      }
      jsonTableContainer.appendChild(table);

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

    document.addEventListener("filterChange", function (event) {
      query = queryConstructor()
      fetchDataForTable(query);
    });

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