Public
Edited
Oct 3, 2022
Inputs.table(data)
An HTML table is denoted with a <table> tag. Two major components of a table are the header and body each represented by the thead and tbody element respectively.
<table>
<thead>
<th>Column A</th>
<th>Column B - Test</th>
<th>Column C</th>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</tbody>
</table>
filteredData = data.filter(d => d["Residence"] !== "No Data" && d["Role/Affiliate"] !== "No Data");
subset = filteredData.slice(0,10)
columns = Object.keys(subset[0]).map(col => ({title: col, sorted: null, type: ''})) // Sorted by no column initially.
{
const parentDiv = d3.create("div");
const table = parentDiv.append("table");
const header = table.append("thead");
const body = table.append("tbody");
const headerRow = header.selectAll("th")
.data(columns)
.join("th")
.text(d => d.title)
.classed("sort", d => d.sorted)
const tableRows = body.selectAll("tr")
.data(subset)
.join("tr")
const cells = tableRows.selectAll("td").data(d => {
console.log(d);
console.log(Object.entries(d));
return Object.entries(d);
})
.join("td").text(d => d[1])
return parentDiv.node()
}
<style>
.table-style {
overflow-x: scroll;
text-align: center;
}
.table-style thead th {
padding: 10px;
min-width: 150px;
text-align: center;
}
.table-style tbody tr:nth-child(even) {
background-color: #d1e3dd;
}
.table-style tbody tr:hover > * {
background-color: #32292f;
color: #fff;
border-right: solid 3px rgba(255,255,255,0.3);
border-left: solid 3px rgba(255,255,255,0.3);
}
.table-style thead th:hover {
background-color: #eee;
}
.table-style tbody td {
border-left: solid 3px rgba(0,0,0,0.3);
border-right: solid 3px rgba(0,0,0,0.3);
}
<style>
{
const parentDiv = d3.create("div").style('overflow', 'auto');
const table = parentDiv.append("table").classed("table-style", true);
const header = table.append("thead");
const body = table.append("tbody");
const headerRow = header.selectAll("th")
.data(columns)
.join("th")
.text(d => d.title)
.attr("class", d => d.sorted ? d.sorted : "");
const tableRows = body.selectAll("tr")
.data(subset)
.join("tr")
const cells = tableRows.selectAll("td").data(d => {
console.log(d);
console.log(Object.entries(d));
return Object.entries(d);
})
.join("td").text(d => d[1])
return parentDiv.node()
}
{
const parentDiv = d3.create("div").style("padding", "1em").style('overflow', 'auto');
const table = parentDiv.append("table").classed("table-style", true);
const header = table.append("thead");
const body = table.append("tbody");
drawTable(subset, columns);
function drawTable(dataset, cols) {
const headerRow = header.selectAll("th")
.data(cols)
.join("th")
.text(d => d.sorted ? `${d.title} - ${d.sorted.substring(0,1).toUpperCase()}` : d.title)
.attr("class", d => d.sorted ? d.sorted : "");
const tableRows = body.selectAll("tr")
.data(dataset)
.join("tr")
const cells = tableRows.selectAll("td")
.data(d => Object.entries(d))
.join("td").text(d => d[1])
headerRow.on("click", function(e, d,i) {
columns.filter(s => s !== d).forEach(col => col.sorted = null);
if (d.sorted !== "asc") {
let newData = dataset.sort((a,b) => {
return a[d.title] < b[d.title] ? -1 : 1
});
d.sorted = "asc";
drawTable(newData, columns);
} else if (d.sorted === "asc") {
let newData = dataset.sort((a,b) => a[d.title] > b[d.title] ? -1 : 1);
d.sorted = "dsc";
drawTable(newData, columns);
}
})
}
return parentDiv.node()
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
