sam
/
baseddata.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

selectable tables that generate events

This commit is contained in:
Sam 2024-09-22 14:27:13 +01:00
parent 2d56c61856
commit 0e6e19d483
3 changed files with 134 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
layouts/partials/table.html Normal file
View File

@ -0,0 +1,120 @@
<script>
function createTable(
endpoint,
id,
headers,
maxHeight,
sortable,
valueId,
selectableRows,
) {
async function fetchDataForTable() {
try {
const apiEndpoint = `${apiURL}/${endpoint}`;
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;
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);
if (sortable == "true") {
table.className = "sortable";
sorttable.makeSortable(document.getElementById(id));
}
}
fetchDataForTable();
}
</script>

67
layouts/shortcodes/table.html
View File

@ -1,63 +1,8 @@
{{ partial "table.html" }}
<div id = '{{ .Get "id" }}-table-container'>
<script>
async function fetchDataForTable() {
try {
const apiEndpoint = `${apiURL}/{{ .Get "endpoint" }}`;
const response = await fetch(apiEndpoint);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const fetchedData = await response.json();
data = fetchedData;
console.log(data);
createTable(data);
} catch (error) {
console.error("Fetching data failed:", error);
}
}
function createTable(data) {
const jsonTableContainer = document.getElementById("jsonTableContainer");
jsonTableContainer.innerHTML = "";
jsonTableContainer.style.maxHeight = "{{ .Get `maxHeight` }}"
tableHeaderNames = Object.values({{ .Get `headers` | safeJS }});
tableHeaderKeys = Object.keys({{ .Get `headers` | safeJS }});
const table = document.createElement("table");
table.id = "{{ .Get `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');
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)
{{ if eq (.Get "sortable") "true" }}
table.className = "sortable"
sorttable.makeSortable(document.getElementById("{{ .Get `id` }}"));
{{ end }}
table.className = ""
}
document.addEventListener("DOMContentLoaded", function () {
createTable({{ .Get "endpoint" }}, {{ .Get "id" }}, {{ .Get "headers" | safeJS }}, {{ .Get "maxHeight" }}, {{ .Get "sortable" }}, {{ .Get "valueId" }}, {{ .Get "selectableRows" }})
});
</script>
<div id="jsonTableContainer"></div>
<script src="/js/lib/sorttable.js"></script>
</div>

9
static/css/tables.css
View File

@ -1,5 +1,5 @@
/* Tables */
#jsonTableContainer {
.jsonTableContainer {
display: flex;
overflow-y: auto;
}
@ -49,3 +49,10 @@ tr:nth-child(odd) {
background-color: var(--table-odd-row-bg-color);
font-size: var(--table-row-font-size);
}
tr:hover {
background-color: #f5f5f5;
}
tr.selected {
background-color: #d1ecf1;
}