CSV Status Table - Web Replay Lab

A CSV string becomes an HTML table. The replay connects parsing steps to the browser-rendered header and rows.

Program

The source splits CSV text into arrays, then writes table headers and rows into the DOM. Watch how data becomes browser-rendered cells.

csv_status_table.js

const csv = `name,role,status
Ada,admin,active
Lin,editor,paused
Mia,viewer,active`;

const lines = csv.trim().split('\n');
const headers = lines[0].split(',');
const rows = lines.slice(1).map((line) => line.split(','));

const table = document.querySelector('#team');
const headerRow = table.createTHead().insertRow();
headers.forEach((header) => {
  const th = document.createElement('th');
  th.textContent = header;
  headerRow.appendChild(th);
});

const tbody = table.createTBody();
rows.forEach((row) => {
  const tr = tbody.insertRow();
  row.forEach((value) => {
    const td = tr.insertCell();
    td.textContent = value;
  });
  tr.dataset.status = row[2];
});

CSV CSV stores rows as lines and fields as comma-separated text.

table row An HTML table row groups related cells so the browser can render the data in columns.

data attribute A data attribute stores extra state on an element. CSS can use it to style matching rows.