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()
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.