Working with CSV Files: Viewing, Filtering, and Analyzing Data

Why View CSV in a Browser?

Opening a CSV in Excel is the default instinct, but it has problems: Excel auto-converts values (turning 1-2 into a date, stripping leading zeros from zip codes), has row limits, and requires loading a heavy application for a quick inspection. A browser-based viewer loads instantly, preserves all values as-is, and works on any device.

What a Good CSV Viewer Does

• Renders as a table: Columns aligned, headers frozen, row numbers shown
• Handles large files: Virtualizes rows so only visible rows are rendered in the DOM
• Supports search/filter: Live filtering to quickly find rows matching a pattern
• Column sorting: Click header to sort ascending/descending
• Preserves raw values: No auto-formatting of dates, numbers, or scientific notation

Parsing CSV in the Browser

CSV parsing is deceptively tricky. A naive line.split(',') breaks on quoted fields. A proper parser tracks quote state:

function parseCSVRow(row) {
  const fields = [];
  let current = '';
  let inQuotes = false;

  for (let i = 0; i < row.length; i++) {
    const ch = row[i];
    if (ch === '"') {
      if (inQuotes && row[i + 1] === '"') {
        current += '"'; i++;    // escaped quote
      } else {
        inQuotes = !inQuotes;
      }
    } else if (ch === ',' && !inQuotes) {
      fields.push(current); current = '';
    } else {
      current += ch;
    }
  }
  fields.push(current);
  return fields;
}

Common CSV Data Quality Issues

When you open a CSV file in a viewer, these are the issues to look for first:

Encoding problems

Garbled characters (like é instead of é) indicate a UTF-8/Latin-1 mismatch. The file was saved in one encoding and read in another. Fix by re-opening with the correct encoding or converting the file.

Inconsistent row lengths

If some rows have fewer or more columns than the header, either the data is corrupt or there are unquoted commas in field values. Viewing the raw row number alongside the column count helps pinpoint the offending rows.

Excel-corrupted values

Excel notoriously corrupts gene names (MARCH1 → 1-Mar), leading zeros (00123 → 123), and large numbers (123456789012345 → 1.23E+14). A viewer that shows raw string values without type coercion lets you verify this damage.

Embedded newlines

A quoted field can contain a newline — the field spans multiple lines in the file. Naive line-by-line reading breaks on these. A proper parser handles multi-line fields correctly.

Filtering and Sorting Large Files

For large CSV files (thousands of rows), browser-based filtering works by keeping all rows in memory and filtering the rendered subset:

const query = 'London';
const filtered = rows.filter(row =>
  Object.values(row).some(v =>
    String(v).toLowerCase().includes(query.toLowerCase())
  )
);

Column sorting uses a stable sort to avoid reordering equal rows unexpectedly.

When to Use a Dedicated Tool Instead

• Files over ~50 MB: Browser memory limits make very large files impractical — use command-line tools like csvkit, xsv, or duckdb
• Complex analysis: Aggregations, joins, pivot tables — use pandas or SQL
• Data cleaning at scale: OpenRefine handles messy CSV at scale with clustering and transformation recipes