Csv Editor

csv_editor - Info

CSV Editor App

This project is a web-based CSV editor built using FastHTML, HTMX, and SQLite.

Key Technologies and Techniques

  1. FastHTML: A Python-based framework for building web applications with a focus on web fundamentals.
  2. HTMX: Used to create dynamic server-side content updates that let you interact with the app without page reloads.
  3. SQLite: A lightweight, serverless database used to store and manage CSV data.
  4. FastSQL: A library that simplifies database operations and integrates well with FastHTML.
  5. httpx: An asynchronous HTTP client for Python, used to fetch example CSV data.

How It Works

Server-Side Logic

The app uses FastHTML to define routes and handle CSV operations. Key routes include:

  • GET /: The main page that renders the CSV upload interface.
  • GET /get_test_file: Provides an example CSV file for download.
  • POST /upload: Handles CSV file uploads and displays the data.
  • POST /update: Updates individual CSV rows.
  • DELETE /remove: Deletes specific rows from the CSV data.
  • GET /download: Allows downloading the current CSV data.

Data Management

CSV data is stored in an SQLite database:

  • A unique table is created for each session, storing the CSV data with an 'id' column as the primary key.

Dynamic Content

HTMX is used to create a dynamic user interface:

  • hx-post attribute on the upload button triggers a POST request to upload and display CSV data.
  • hx-delete and hx-post attributes on row buttons handle row deletion and updates.
  • hx-target specifies where the response from the server should be inserted.
  • hx-swap determines how the new content should be added or replaced.
  • hx-include is used to include specific form data in requests.

Key Features

  1. CSV Upload: Users can upload CSV files to view and edit the data.
  2. Example CSV: An example CSV file is provided for download.
  3. Data Display: Uploaded CSV data is displayed in an editable table format.
  4. Row Editing: Each row can be updated or deleted individually.
  5. Data Download: The current state of the CSV data can be downloaded at any time.
  6. Session Management: Each user session has its own unique data storage.
  7. File Size Limit: Only the first 50 rows of a CSV file are processed and displayed.

This CSV Editor app demonstrates how FastHTML and HTMX can be combined to create a responsive, server-side web application for data manipulation tasks.