Here is a snippet (works but is a still a work in progress), I am using boostrap tables CDN which is the reason for the specific element classes and content.
<script type="text/javascript">
require([
"esri/request"
], function (esriRequest) {
populateAttributesTable();
function populateAttributesTable(e) {
let queryurl = "service url";
let queryOptions = {
responseType: "json",
query:
{
f: "json",
where:"1=1",
returnCountOnly: false,
outFields: "*",
resultRecordCount: "1000"
}
}
esriRequest(queryurl, queryOptions).then(response => {
console.log("The response is: ", response);
let tableWrapper = document.getElementById("tableWrapper");
let table = document.createElement("table");
table.id = "dataTable";
table.className = "table table-striped table-hover";
let header = document.createElement("thead");
table.appendChild(header);
let tableRowHeader = document.createElement("tr");
header.appendChild(tableRowHeader);
for (let i = 0; i < 5; i++) {
let headTable = document.createElement("th");
headTable.innerHTML = response.data.fields[i].alias;
tableRowHeader.appendChild(headTable);
}
let headTableOptions = document.createElement("th");
headTableOptions.innerHTML = "Options";
tableRowHeader.appendChild(headTableOptions);
let tableBody = document.createElement("tbody");
table.appendChild(tableBody);
for (let j = 0; j < response.data.features.length; j++)
{
let feature = response.data.features[j];
let tableRowBody = document.createElement("tr");
tableBody.appendChild(tableRowBody);
for (let i = 0; i < 5; i++)
{
let field = response.data.fields[i];
let divTable =
document.createElement("td");
divTable.innerHTML =
feature.attributes[field.name];
tableRowBody.appendChild(divTable);
}
let footerTD = document.createElement("td");
tableRowBody.appendChild(footerTD);
let editModal = document.createElement("a");
editModal.setAttribute("href", "#editModal");
editModal.className = "edit";
editModal.setAttribute("data-toggle", "modal");
footerTD.appendChild(editModal);
let editModalIcon = document.createElement("i");
editModalIcon.className = "material-icons";
editModalIcon.setAttribute("data-toggle", "tooltip");
editModalIcon.setAttribute("title", "Edit");
editModalIcon.innerHTML = "";
editModal.appendChild(editModalIcon);
let deleteModal = document.createElement("a");
deleteModal.setAttribute("href", "#deleteModal");
deleteModal.className = "delete";
deleteModal.setAttribute("data-toggle", "modal");
footerTD.appendChild(deleteModal);
let deleteModalIcon = document.createElement("i");
deleteModalIcon.className = "material-icons";
deleteModalIcon.setAttribute("data-toggle", "tooltip");
deleteModalIcon.setAttribute("title", "Delete");
deleteModalIcon.innerHTML = "";
deleteModal.appendChild(deleteModalIcon);
}
tableWrapper.appendChild(table);
require(["https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"], function () {
$(document).ready(function () {
$('#dataTable').DataTable();
$('.dataTables_length').addClass('bs-select');
$('[data-toggle="tooltip"]').tooltip();
var checkbox = $('table tbody input[type="checkbox"]');
$("#selectAll").click(function () {
if (this.checked) {
checkbox.each(function () {
this.checked = true;
});
} else {
checkbox.each(function () {
this.checked = false;
});
}
});
checkbox.click(function () {
if (!this.checked) {
$("#selectAll").prop("checked", false);
}
});
});
});
});
};
});
</script>