Tabular CSV Viewer

An interactive, high-performance tabular data grid custom editor for Visual Studio Code. This extension allows developers to view, sort, filter, resize, and edit CSV and delimited text files natively with automatic theme synchronization, infinite scrolling, and real-time column analysis statistics.

Demo

Features

• Sheets-Style Grid: A horizontal row-and-column layout with visual gridlines and resizeable columns.
• Infinite Scrolling (Virtual DOM): Loads only the first 100 values initially. As you scroll down, it dynamically loads more records. It maintains a tiny memory footprint, keeping scroll speeds buttery-smooth even on huge datasets.
• Real-Time Column Analysis Drawer:
  • A collapsible, styled bottom panel showing detailed analytics for the selected column.
  • Auto-Sync: Clicking on any cell or column header in the table automatically focuses the panel on that column.
  • Basic Info: Column name, data type (Numeric vs. Text), and total row count.
  • Fill Metrics: Number of populated cells vs. missing (NA) cells with a visual completion progress bar.
  • Range & Averages: Dynamic calculation of Min/Max range, Average (Avg), and Median for numerical columns.
  • Data Quality: Total count of unique values and a duplicate warning indicating the exact number of duplicate records.
• Broad Delimiter Support: Auto-detects Comma (,), Tab (\t), Semicolon (;), Pipe (|), Percent (%), and Hash (#) delimiters automatically.
• Text File Support (.txt): Right-click any .txt file and select "Open With..." -> "Tabular CSV Viewer" to parse and view structured text files.
• Interactive Editing: Double-click any cell to edit it. The underlying file updates automatically, integrating with VS Code's native undo/redo and dirty save states.
• Auto Theme Sync: Adapts perfectly to your active VS Code theme (Light, Dark, or High Contrast) by using native theme CSS tokens.
• Persistent State: Automatically remembers your scroll coordinates, active filters, column sorting, and custom column widths when switching tabs.

Installation & Usage

Installing Locally

1. Run vsce package in your terminal to build the .vsix file.
2. Open the Extensions sidebar in VS Code (Ctrl+Shift+X).
3. Click the ... menu at the top-right, choose Install from VSIX..., and select the generated file.

Opening Files

• CSV and TSV files: Automatically open in the Tabular CSV Viewer by default when clicked.
• Text files (.txt): Right-click on the file in the Explorer sidebar, choose Open With..., and select Tabular CSV Viewer.

Development

To run the extension in development mode:

1. Open the project in VS Code.
2. Press F5 to launch the Extension Development Host window.
3. Open any delimited file inside that host window.