[Solved]-When creating an HTML table in D3, how can I make the first column th-d3.js

var columns = ['variable', 'aror', 'asd', 'maxdd'];

var data = [
  {
    variable: 'Convertible Arbitrage', aror: 0.077, asd: 0.069, maxdd: -0.292,
  },
  {
    variable: 'CTA Global', aror: 0.076, asd: 0.087, maxdd: -0.116,
  },
];


var table = d3.select('body').append('table');
var thead = table.append('thead');
var tbody = table.append('tbody');

thead.append('tr')
  .selectAll('th')
  .data(columns)
  .enter()
  .append('th')
  .text(function (d) { return d });

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

var rowHeaders = rows.selectAll('th')
  .data(function (row) {
    return [row.variable];
  })
  .enter()
  .append('th')
  .attr('scope', 'row')
  .text(function (d) { return d; });

var cells = rows.selectAll('td')
  .data(function (row) {
    return columns.filter(function (column) { return column !== 'variable'; }).map(function (column) {
      return { column: column, value: row[column] }
    })
  })
  .enter()
  .append('td')
  .text(function (d) { return d.value });

table {
  width: 100%;
  border: 3px solid black;
}

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