How to apply data- attribute to rows from array of column headers

I have created a table in Angular using the column and row arrays at the bottom of this post. I have been trying to add a data-cell attribute to each row programmatically, which I have successfully done — I just can’t populate the attribute with data.

The desktop view is fine. On mobile devices, I am moving to a stacked version of the table (see image way at the bottom below the data) and I want to leverage the data-cell attribute to place the column headers above the appropriate cell data. If you look at the image, I want each column header to appear where the colons are currently appearing.

So far, I have the written this code. I just need a little help to get to the finish line, please and thank you.

const tds = Array.from(document.querySelectorAll('td'));

// Add data-cell attribute programatically
tds.forEach(td => {

  this.columns.forEach((col) => {
    console.log('HEADER: ', col.header);
    return col.header;
  })

  this.rows.forEach(row => {
    console.log('ROW: ', row)
    return row;
  })

  //td.setAttribute('data-cell', row.header)
})

=================================================================================

let columns: TableColumn[] = [
  {
    header: "Beverages",
    key: "name",
    sortable: true,
    cell: (item: any) => {
      return item.name;
    }
  },
  {
    header: "Cost",
    key: "cost",
    sortable: true,
    cell: (item: any) => {
      return item.cost;
    },
  },
  {
    header: "Text",
    key: "text",
    sortable: true,
    cell: (item: any) => {
      return item.text ? "Yes" : "No";
    },
  },
  {
    header: "Date",
    key: "date",
    sortable: true,
    cell: (item: any) => {
      return item.date;
    },
  },
  {
    header: "Unsortable",
    key: "unsortable",
    sortable: false,
    cell: (item: any) => {
      return item.unsortable;
    },
  }
]

let rows: any[] = [
  {
    id: 1,
    name: "Water",
    cost: 100,
    text: true,
    date: "05021967",
    unsortable: "12 Fountain Street, Andover, MA"
  },
  {
    id: 2,
    name: "Soda",
    cost: 250,
    text: false,
    date: "12121963",
    unsortable: "23 Oakland Avenue, Louisville, KY"
  },
  {
    id: 3,
    name: "Coffee/Tea",
    cost: 50,
    text: true,
    date: "03111964",
    unsortable: "4 Maple Road, Stone Mountain, GA"
  }
]