I'll create a CSV file visualizer that allows users to paste CSV data and see it rendered as a formatted table.
I've created a comprehensive CSV file visualizer with the following features:
Key Features:
- Text Input: Large textarea for pasting CSV data with a helpful placeholder showing the expected format
- Real-time Parsing: Automatically parses and displays the CSV data as you type
- Smart CSV Parser: Handles quoted fields, commas within quotes, and various CSV formats
- Data Statistics: Shows the number of columns and rows detected
- Responsive Table: Uses shadcn/ui Table component with horizontal scrolling for wide data
- Error Handling: Displays helpful error messages for invalid CSV format
- Empty States: Shows appropriate messages when no data is present
How it works:
- Users paste their CSV data into the textarea
- The component automatically parses the CSV using a custom parser that handles quoted fields
- The first row is treated as headers
- Data is displayed in a clean, formatted table
- Long cell content is truncated with ellipsis to maintain table layout
The visualizer handles common CSV edge cases like quoted fields containing commas and provides a clean, professional interface for viewing tabular data.