Excel CSV Viewer

A Visual Studio Code extension for opening and editing .xlsx, legacy .xls, and .csv files as a fast, filterable data grid.

The extension is focused on viewing, analyzing, and editing tabular data without leaving Visual Studio Code. Changes are integrated with VS Code's normal dirty-state, undo/redo, save, revert, and hot-exit behavior.

Features

• XLSX support.
• Legacy Excel 97-2003 XLS support.
• CSV files separated by ; or ,, with automatic delimiter detection.
• UTF-8 and UTF-16 CSV files, plus a Windows-1252 fallback for common Windows-generated files.
• Multiple sheets in an Excel workbook.
• Bottom tabs for switching sheets.
• Independent filter for every column.
• Column sorting by clicking a header.
• Global search across every column in the active sheet.
• Single-cell and range selection with Ctrl+C copying.
• Copy selection button.
• Fixed source row numbers, even after sorting or filtering.
• Excel-style column letters (A, B, ..., AA, ...).
• Resizable column widths.
• Fit columns button to calculate useful widths from the data.
• Frozen header while scrolling vertically.
• Total and filtered row counts.
• Virtual rendering so large files do not create one HTML row for every data row.
• Visual integration with VS Code light and dark themes.
• Double-click cell editing with Enter to accept and Esc to cancel.
• Modified-cell highlighting until the document is saved.
• Native Ctrl+S / Save support for XLSX, XLS, and CSV.
• Native Ctrl+Z / Ctrl+Y undo and redo.
• Save As, Revert File, and VS Code hot-exit backups.
• XLSX saves remain XLSX, XLS saves remain BIFF8 XLS, and CSV saves remain CSV.

Try it locally

Requirements: Node.js and Visual Studio Code.

npm install

Open this folder in VS Code and press F5. A new Extension Development Host window will open.

In that window:

1. Open any .xlsx, .xls, or .csv file.
2. VS Code will open it with Excel CSV Viewer.
3. For CSV testing, you can use samples/produccion-punto-coma.csv and samples/ventas-coma.csv.
4. An Excel workbook with multiple sheets will show its sheet tabs in the bottom bar.

If VS Code already opened the file with another editor, choose Reopen Editor With... and select Excel CSV Viewer.

Usage

• Filter a column: type in the Filter… field below its header.
• Sort: click the column header; click again to reverse the direction.
• Search the sheet: use the search box in the top toolbar.
• Clear filters: click Clear filters.
• Resize a column: drag the edge of its header.
• Auto-fit columns: click Fit columns.
• Copy: drag to select a range and press Ctrl+C, or click Copy selection.
• Switch Excel sheets: click a sheet tab in the bottom bar.
• Edit: double-click a data cell, type the new value, and press Enter. Press Esc to cancel the edit.
• Save: press Ctrl+S (or use File > Save) to write the changes back to the original file.
• Undo/redo: use Ctrl+Z and Ctrl+Y just like in a normal VS Code editor.

Large files

The grid uses Tabulator's virtual DOM and only keeps the rows around the visible area in the DOM. This avoids rendering tens or hundreds of thousands of HTML rows at once.

There is no row limit by default. To limit how much data is sent to the grid, configure:

{
  "excelCsvViewer.maxRowsPerSheet": 100000
}

0 means unlimited.

For Excel files, the workbook is loaded once and only the active sheet is transformed into grid rows. When you switch tabs, the previous grid representation is released.

CSV configuration

The extension automatically detects whether the delimiter is ; or ,.

You can force a delimiter from VS Code Settings:

{
  "excelCsvViewer.csvDelimiter": ";"
}

Valid values are "auto", ";", and ",".

Editing and format notes

• The first non-empty row is used as the data header.
• Completely empty Excel rows are skipped, while the fixed number on the left still matches the workbook's real row number.
• Only data cells shown below the detected header row are editable; the detected header itself remains a column title in the grid.
• Editing a numeric or boolean cell keeps its basic value type when possible. Entering a value beginning with = creates a formula cell.
• XLSX editing uses ExcelJS. Unedited worksheets stay in the workbook and supported workbook data is written back to XLSX.
• Legacy XLS editing uses SheetJS CE and writes BIFF8 .xls. SheetJS Community Edition focuses on raw spreadsheet data, so advanced objects that its writer does not support (for example some charts, drawings, or specialized formatting) are not guaranteed to round-trip. Keep a backup when editing complex legacy workbooks.
• The extension does not calculate formulas itself. Excel-compatible applications can recalculate formulas when the saved workbook is opened.
• CSV saving preserves the detected delimiter, line ending, and supported source encoding (UTF-8, UTF-16 LE/BE, or Windows-1252). CSV quoting may be normalized while preserving cell values.

Development

npm run check
npm test
npm run package

The final command creates excel-csv-viewer.vsix, ready for manual installation in VS Code.

Technologies

• VS Code Custom Editor.
• JavaScript / Node.js.
• ExcelJS for XLSX reading and writing.
• SheetJS CE 0.20.3 for legacy XLS reading and BIFF8 writing.
• Papa Parse for CSV parsing.
• iconv-lite for preserving legacy CSV encodings on save.
• Tabulator for the grid, filters, sorting, selection, and virtual DOM.

License

MIT