CSV Table Visualizer Component

Here's a React component that allows users to paste CSV data and visualizes it as a table with basic styling for better readability:

How to Use

1. Import this component into your React application
2. Render it where you want the CSV visualizer to appear
3. Users can paste CSV data into the text area and click "Visualize CSV"
4. The component will parse the data and display it as a styled table

Features

• Simple Interface: Clean textarea for pasting CSV data
• Basic Parsing: Converts CSV string to a structured table

• Styled Table:

  • Distinct header row
  • Alternating row colors for better readability
  • Proper cell padding and borders
• Error Handling: Shows helpful messages for empty input or parsing errors
• Responsive Design: Table has horizontal scrolling for wide datasets

Example CSV Data

Try pasting this sample data:

Notes

• This is a basic implementation that splits on commas. For more complex CSV parsing (like handling quoted values containing commas), you would need to enhance the parsing logic.
• The component assumes the first row contains headers.
• The table is responsive with horizontal scrolling for wide datasets.

I'll enhance the CSV parsing logic to properly handle quoted values with commas. This is a common requirement for CSV files that contain text fields with embedded commas.

Enhanced CSV Parsing for Quoted Values

I've improved the CSV parsing logic to properly handle quoted values with commas. This enhancement allows the component to correctly parse CSV data where fields may contain commas enclosed in quotes.

What's Changed

The parsing algorithm now:

1. Tracks quote context: Keeps track of whether it's currently inside a quoted field
2. Respects quoted commas: Only treats commas as field separators when they're not inside quotes
3. Handles quote removal: Automatically removes surrounding quotes from fields
4. Preserves data integrity: Maintains the structure of complex CSV data with embedded commas

Example with Quoted Values

Try pasting this sample data that includes quoted values with commas:

Without the enhanced parsing, the commas inside quotes would incorrectly split fields. With this improvement, the data will be displayed correctly in the table.

How It Works

The parser now uses a state machine approach:

• It tracks whether it's inside or outside quotes
• It only uses commas as field separators when outside quotes
• It handles the cleanup of quoted fields automatically

This makes the component much more robust for real-world CSV data that often contains quoted text with commas, such as addresses, descriptions, or any text that might contain comma punctuation.