JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v6.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" charset="utf-8"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" charset="utf-8"> </script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.css" />

JavaScript

function tabulate(data) {
  const table = d3.select('body').append('table').attr("id", "example").attr("class", "display nowrap")
  const thead = table.append('thead')
  const tbody = table.append('tbody')

  thead.append('tr')
    .selectAll(null)
    .data(data.shift())
    .enter()
    .append('th')
    .text(d => d)

  const rows = tbody.selectAll(null)
    .data(data)
    .enter()
    .append('tr')

  rows.selectAll(null)
    .data(d => d)
    .enter()
    .append('td')
    .text(d => d)

  return table;
}

d3.text("https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports-extended.dat")
  .then(d3.csvParseRows)
  .then(tabulate)
  .then(() => $('#example').DataTable());