​

const myPopoverId = "myPopover"

const myPopover = `

    <span

      id="${myPopoverId}"

      class="fa fa-info-circle"

      data-mdb-toggle="popover"

      data-mdb-content="My popover content"

      data-mdb-title="My popover title"

      data-mdb-trigger="hover focus"

      >

    </span>`

​

const columns = [

  { label: `New Confirmed ${myPopover}`, field: "NewConfirmed" },

  { label: "Total Confirmed", field: "TotalConfirmed" },

  { label: "New Deaths", field: "NewDeaths" },

  { label: "Total Deaths", field: "TotalDeaths" },

];

​

​

const asyncTable = new mdb.Datatable(

  document.getElementById('datatable'),

  {

    columns,

  },        

  { hover: true, clickableRows: true, loading: true }

​

);

​

fetch('https://api.covid19api.com/summary')

  .then((response) => response.json())

  .then((data) => {

  console.log(data);

  asyncTable.update({

    rows: [data.Global],

  }, { loading: false });

});

​