Three Prompts: CSV Viewer

Introduction

Data is everywhere, but making sense of it requires the right tools. CSV (Comma-Separated Values) files are one of the most common formats for storing and exchanging tabular data, but viewing and analyzing them often requires specialized software or importing them into spreadsheet applications. What if you could quickly view, sort, filter, and manage CSV data right in your browser?

This project demonstrates how to build a powerful yet simple CSV viewer web application using React and PapaParse. The application was created entirely through AI assistance using just three carefully crafted prompts. Starting with a basic file parser, we progressively enhanced it to include advanced features like column sorting, management, and filtering—all while maintaining a clean, intuitive interface that works seamlessly in both light and dark modes.

The Three Prompts

Here are the exact prompts that were used to create this project:

@projects/csv-viewer Make a csv viewer using papaparse. I want to be able to drag and drop a file or paste in the contents.

Start super simple. Make sure the design is super simple as well.


/plan 


Continue after planning right away.
/execute 

Now add the following features 1 at a time.

1. column sorting
2. column management (reordering and allow turning on and off)
3. column filtering

Now move the column manager and filter buttons to be right above the csv table

Technologies Used

This project leverages several modern web technologies to create a responsive and feature-rich CSV viewer:

• React 19: For building the user interface with functional components and hooks
• Vite: As the build tool for fast development and optimized production builds
• PapaParse: A powerful CSV parsing library that handles various CSV formats
• HTML5 Drag and Drop API: For file uploads and column reordering functionality
• CSS Variables: For theming and seamless dark mode support

Key Features and Functionality

1. CSV Data Input

The application provides two convenient ways to input CSV data:

• Drag and Drop: Users can drag a CSV file directly onto the drop zone
• Paste CSV Content: Users can paste CSV text into a textarea and parse it

Both methods use PapaParse to intelligently parse the CSV data, automatically detecting headers and handling various CSV formats.

2. Column Sorting

Users can sort data by clicking on any column header:

• Click once to sort ascending (▲)
• Click again to sort descending (▼)
• The sorting logic intelligently handles both numeric and string data
• Visual indicators show which column is being sorted and in which direction

3. Column Management

The column management feature gives users control over which columns are displayed and in what order:

• Toggle Visibility: Show or hide specific columns using checkboxes
• Reorder Columns: Drag and drop columns to change their display order
• Collapsible Panel: The column manager can be toggled on/off as needed

4. Data Filtering

The filtering system allows users to quickly find specific data:

• Filter by any visible column using substring matching
• Case-insensitive filtering for better user experience
• Clear all filters with a single button click
• Visual feedback showing how many rows match the current filters

Implementation Details

State Management

The application uses React's useState and useMemo hooks to efficiently manage state and derived values:

const [csvData, setCsvData] = useState([])  // Original parsed CSV data
const [csvHeaders, setCsvHeaders] = useState([])  // All available headers
const [visibleHeaders, setVisibleHeaders] = useState([])  // Currently visible headers
const [headerOrder, setHeaderOrder] = useState([])  // Order of headers for display
const [sortConfig, setSortConfig] = useState({ key: null, direction: 'ascending' })
const [filters, setFilters] = useState({})  // Active filters by column

Derived state like filtered and sorted data is calculated using useMemo for performance optimization:

const filteredData = useMemo(() => {
  if (Object.keys(filters).length === 0) return csvData;
  
  return csvData.filter(row => {
    return Object.entries(filters).every(([header, filterValue]) => {
      const cellValue = String(row[header] || '').toLowerCase();
      return cellValue.includes(filterValue);
    });
  });
}, [csvData, filters]);

const sortedData = useMemo(() => {
  if (!sortConfig.key) return filteredData;
  // Sorting logic here
}, [filteredData, sortConfig]);

Drag and Drop Implementation

The application implements two separate drag and drop systems:

1. File Upload: Using the HTML5 File API for CSV file uploads
2. Column Reordering: A custom implementation using the HTML5 Drag and Drop API

The column reordering system tracks the dragged header and updates the header order state when dropped:

const handleHeaderDrop = (targetHeader) => {
  if (draggedHeader === null || draggedHeader === targetHeader) return;
  
  const newOrder = [...headerOrder];
  const draggedIndex = newOrder.indexOf(draggedHeader);
  const targetIndex = newOrder.indexOf(targetHeader);
  
  // Remove the dragged header
  newOrder.splice(draggedIndex, 1);
  // Insert it at the target position
  newOrder.splice(targetIndex, 0, draggedHeader);
  
  setHeaderOrder(newOrder);
  setDraggedHeader(null);
};

Responsive Design with Dark Mode

The application uses CSS variables for theming and a media query to detect the user's preferred color scheme:

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  /* Other light mode variables */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    /* Other dark mode variables */
  }
}

This approach ensures a consistent look and feel across the entire application while respecting the user's system preferences.

Challenges and Solutions

Challenge 1: Managing Complex State Interactions

With features like sorting, filtering, and column visibility all affecting the displayed data, managing state dependencies became complex.

Solution: We used React's useMemo hook to create derived state for filtered and sorted data. This approach ensures that when one aspect changes (like filters), the sorting is automatically reapplied to the newly filtered data.

Challenge 2: Implementing Drag-and-Drop Column Reordering

Implementing intuitive drag-and-drop for column reordering while maintaining state consistency was challenging.

Solution: We created a custom drag-and-drop system using the HTML5 Drag and Drop API with state tracking for the currently dragged header. The system updates the headerOrder state array when columns are reordered, which is then used to render the table headers and cells in the correct order.

Challenge 3: Optimizing Performance for Large Datasets

Sorting and filtering operations can become expensive with large datasets.

Solution: The application uses memoization with useMemo to avoid unnecessary recalculations. Filters and sorts are only recomputed when their dependencies change, not on every render.

Conclusion

This CSV Viewer project demonstrates how a seemingly simple tool can be progressively enhanced with powerful features while maintaining a clean, intuitive interface. Starting with basic CSV parsing functionality, we added sorting, column management, and filtering capabilities—all through just three carefully crafted prompts.

The project showcases several modern web development techniques:

• Using React hooks for efficient state management
• Implementing drag-and-drop functionality for both file uploads and UI interactions
• Creating responsive designs that adapt to different screen sizes and color schemes
• Optimizing performance with memoization for potentially large datasets

Potential future enhancements could include:

• Saving column configurations and filters to local storage
• Adding support for exporting modified data back to CSV
• Implementing more advanced filtering options like date ranges or regex
• Adding data visualization capabilities with charts and graphs

Try out the CSV Viewer yourself and explore how it handles your CSV data. You can also check out other projects in the Three Prompts collection to see what else can be built with just three carefully crafted prompts.

Write your conclusion here.