Parse and Render

Type Detection

String cells are converted into numbers so quantities and prices can be formatted and aligned.

Program

CSV parsers start with strings. Browser table code often converts selected columns before formatting numeric output.

type_detection.html
Visuals: captured from real browser rendering
<script>
  const rows = [["item","qty","price"],["Cable","3","12.50"],["Hub","1","39.00"]];
  const typed = rows.slice(1).map(row => ({
    item: row[0],
    qty: Number(row[1]),
    price: Number(row[2])
  }));
  renderCurrencyTable(typed);
</script>

  1. Start with parsed CSV rows.

    The table-shaped data still stores numbers as strings.
    CSV cells arrive as text even when they look numeric.

  2. Create typed records from data rows.

    The header is skipped and two item records are built.
    slice(1) ignores the header row before mapping data.

  3. Convert quantity strings to numbers.

    Quantity cells can now be right-aligned and used in math.
    Number(row[1]) converts text to a numeric value.

  4. Convert price strings to numbers.

    Price cells are numeric and ready for currency formatting.
    Number(row[2]) converts decimal text.

  5. Render formatted numeric cells.

    The browser shows numeric columns aligned to the right.
    Formatting happens after conversion, not before parsing.
type conversion Type conversion changes text cells into numbers, dates, or booleans.
formatting Formatting controls how typed values appear in the rendered table.