CSV Table

Browse and edit CSV files as readable tables in VS Code. Customize colors and alignment by data type or by selected range, and use conditional formatting to make values easier to scan.

Features

• Readable preview. Turn dense CSV text into a structured table.
• Direct editing. Edit cells in the table and update the source CSV.
• Type-aware formatting. Detect text, numbers, dates, and booleans; customize colors and alignment or set a column's type when values include currency or units.
• Range styling. Set colors, alignment, and overflow for columns, rows, cells, or ranges.
• Conditional formatting. Apply supported styles based on a cell value or another field.
• Flexible columns. Fit widths to content or set limits; wrap or truncate long values.
• Table navigation. Use comment rows to divide sections, follow row numbers and column letters, and freeze rows or columns.
• Reusable views. Configure all files, a workspace, or selected files.

CSV Table detects common separators and supports quoted and multiline fields, including tab-separated files (TSV).

Choose CSV Table from the Reopen Editor With… menu to open a file as a table. The normal text editor remains available through the same menu.

Settings

CSV Table is configured by default to make most CSV files easy to read. The settings below let you tailor colors, alignment, and other parts of the view to your needs.

Configure a view at three levels. Later levels can refine earlier ones:

Workspace settings can also select groups of files by name or path. Those file rules belong to the Workspace level; their syntax is in the configuration reference below.

Available settings

✓ marks supported targets; blank cells mean unsupported. Indented rows belong to the object above them.

Customize a view

Use CSV Table’s Edit Table Settings command to create or open a sidecar next to a CSV file. Its name is the CSV filename plus .table.json, for example orders.csv.table.json. Each sidecar example below stands on its own. The examples include comments for explanation; remove them before saving a sidecar, which requires strict JSON.

1. Settings for the whole table

{
  "separator": "semicolon", // Use `;` as the separator
  "commentPrefix": "//", // CSV comments start with `//`
  "hasHeaderRow": false,    // Treat the first row as data
  "showCoordinates": false, // Hide column letters and row numbers
  "frozenRows": 0,          // Unfreeze the first row
  "frozenColumns": 1        // Freeze the first column
}

2. Table settings and targeted rules

{
  "booleanValues": ["paid", "unpaid"], // Replace boolean values with `paid` and `unpaid`
  "typeColors": {
    "number": "blue"                   // Number color: `yellow` to `blue`
  },
  "typeAlignments": {
    "date": "left"                     // Date alignment: `right` to `left`
  },
  "rules": [
    // RULE 1: AMOUNT
    {
      "target": {
        "column": {
          "firstCell": "amount"        // Match `amount` in the first row
        }
      },
      "settings": {
        "dataType": "number"           // Style currency values as `number`
      }
    },
    // RULE 2: NOTES
    {
      "target": {
        "column": "H"                  // Select column `H` by letter
      },
      "settings": {
        "columnSizing": {
          "mode": "fix",               // Keep the width fixed
          "value": 48                  // Width: `48` characters
        },
        "contentOverflow": "truncate"  // Hover for full text; focus to edit
      }
    },
    // RULE 3: ORDER
    {
      "target": {
        "row": {
          "firstCell": "1001"          // Match `1001` in the first column
        }
      },
      "settings": {
        "coloring": "green"            // Color this row `green`
      }
    }
  ]
}

Use one of these selectors inside target (or a single value in a conditional source):

Each target selects exactly one of column, row, or cell. Use "*" to select all of that kind, or omit target to apply a rule to the whole table. A source identifies one column, row, or cell, without ranges, lists, or "*".

firstCell selects by exact text in the first data row for a column, or in the first column for a row. It works whether or not the table has a header row. Values are case-sensitive after trimming surrounding spaces. A missing or duplicate value is skipped with a warning. Row numbers are physical file lines: comments and blank lines count, and a header uses its actual line number.

3. Conditional formatting

{
  "rules": [
    // RULE 1: STATUS COLUMN
    {
      "target": {
        "column": {
          "firstCell": "status"   // Match `status` in the first row
        }
      },
      "settings": {
        "alignment": "right"      // Align `status` to the `right`
      }
    },
    // RULE 2: OPEN ROWS
    {
      "target": {
        "row": "*"                // Select all rows with `*`
      },
      "when": {
        "source": {
          "column": {
            "firstCell": "status" // Read `status` in the same row
          }
        },
        "operator": "equals",     // Compare exact values
        "value": "open"           // Match `open`
      },
      "settings": {
        "coloring": "yellow"      // Color matching rows `yellow`
      }
    }
  ]
}

when tests each selected cell by default. Use source to test a column in the same row, a row in the same column, or a fixed cell instead. In the example above, each row is colored yellow when the value at its intersection with the status column is open.

Use these names in operator: equals (=), notEquals (!=), greaterThan (>), greaterThanOrEqual (>=), lessThan (<), lessThanOrEqual (<=).

Equality operators accept strings or numbers; string comparisons are case-sensitive. Ordering operators require a number. Numeric comparisons skip empty and non-numeric cells.

4. User or Workspace settings

{
  "CSVTable.showCoordinates": false, // Hide coordinates in scope
  "CSVTable.rules": [
    // RULE 1: ORDERS FILES
    {
      "files": "**/orders.csv",      // Match `orders.csv` in any folder
      "settings": {
        "frozenColumns": 1           // Freeze the first column
      }
    }
  ]
}

Use VS Code User settings for all CSV files, or Workspace settings for the current workspace. Top-level properties use the CSVTable. prefix; nested properties stay unprefixed. VS Code settings accept comments.

In a rule, files accepts a workspace-relative path, a glob, or a list of either, using / as the path separator. For example, "**/orders.csv" matches that filename in any folder, while "exports/*.csv" matches CSV files directly in exports. Omit files to match all files in scope. A sidecar already applies to its adjacent CSV, so it usually needs no files selector.

Configure with an AI assistant

If the settings feel difficult to configure, ask an AI agent of your choice for help. It should have access to the CSV Table extension's settings documentation and schema, which describe the available options.

For example:

In orders.csv, freeze the first column. Make the notes column muted and wider so I can read more of each note.

Roadmap

• Sort rows
• Filter rows
• Reorder rows and columns
• Add rows and columns
• Delete rows and columns
• Hide rows and columns
• Choose between text and background coloring
• Apply conditional color scales
• Color text or backgrounds from hex values stored in cells

License

MIT; see LICENSE.