javascript-d3How can I create a table using JavaScript and D3?

Creating a table using JavaScript and D3 is a simple process. To start, you will need to include the D3 library in your HTML page.

<script src="https://d3js.org/d3.v5.min.js"></script>

Then, you will need to create a selection of the HTML element where you want the table to be rendered.

var table = d3.select("body").append("table");

Next, you will need to create the table header, which will contain the column titles.

var thead = table.append("thead");
var trow = thead.append("tr");
trow.selectAll("th").data(["Name", "Age", "Country"]).enter().append("th").text(function(d) {
    return d;
});

The next step is to create the table body, which will contain the data for each row.

var tbody = table.append("tbody");
var rows = tbody.selectAll("tr").data(data).enter().append("tr");

rows.selectAll("td").data(function(d) {
    return [d.name, d.age, d.country];
}).enter().append("td").text(function(d) {
    return d;
});

Finally, you can style the table using CSS as you would any other HTML element.

The example code above will create a table with the following output:

Name | Age | Country
John | 25  | USA
Bob  | 30  | UK

Code explanation

d3.select("body").append("table"): Selects the <body> element and appends a <table> element.
thead.append("tr"): Appends a <tr> element to the <thead> element.
trow.selectAll("th").data(["Name", "Age", "Country"]).enter().append("th").text(function(d) { return d; }): Selects all <th> elements within the <tr> element and binds the data from the array ["Name", "Age", "Country"] to them. The text() method is used to set the text of each element to the corresponding value from the array.
tbody.selectAll("tr").data(data).enter().append("tr"): Selects all <tr> elements within the <tbody> element and binds the data from the data array to them.
rows.selectAll("td").data(function(d) { return [d.name, d.age, d.country]; }).enter().append("td").text(function(d) { return d; }): Selects all <td> elements within the <tr> element and binds the data from the array [d.name, d.age, d.country] to them. The text() method is used to set the text of each element to the corresponding value from the array.

Helpful links

Edit this code on GitHub

More of Javascript D3

See more codes...