Creating a HTML table from CSV data using D3

data.csv

index.js

// Map the HTML table headings to the CSV data headings
var columns = [
  {  head: 'Name', html: 'car name'},
  {  head: 'Milage', html: 'miles/gallon'},
  {  head: 'Cylinders', html: 'cylinders'},
  {  head: 'Displacement', html: 'displacement'},
  {  head: 'Horsepower', html: 'horsepower'},
  {  head: 'Weight', html: 'weight'},
  {  head: 'Acceleration', html: 'acceleration'},
  {  head: 'Model Year', html: 'model year'},
  {  head: 'Origin', html: 'origin'},
]

d3.text("data.csv").then(csvData => {

  var parsedCSV = d3.csvParse(csvData);
  
  let table = d3.select('.container')
      .append("table")
      .style("border-collapse", "collapse")
      .style("border", "2px black solid")

    table.append('thead')
    .append('tr')
    .selectAll('th')
    .data(columns).enter()
    .append('th')
    .text(d => d.head)

    table.append('tbody')
    .selectAll('tr')
    .data(parsedCSV)
    .enter()
    .append('tr')
    .selectAll('td')
    .data(row => 
      columns.map(column => ({ value: row[column['html']] }))
    ).enter()
    .append('td')
    .html(d => d['value'])
    .style("border", "1px black solid")
    .style("padding", "10px")
    .style('text-align', 'center')
  });