Cursor App Template #8 — Data Cleaning & Transformation

Data Cleaning & Transformation

Upload spreadsheets, clean data, and export polished results.

Overview

This browser-based data cleaning tool helps analysts and operations teams fix messy spreadsheets before analysis or import. Upload a CSV or Excel file—or start with sample employee data—then trim whitespace, remove duplicates, standardize text, fill blanks, detect column types, and export a cleaned workbook. Everything runs in one HTML page with no server required.

Key features

Upload and grid

Upload CSV/Excel loads the first sheet via SheetJS and displays rows in an editable AG Grid. Load Sample restores eight intentionally messy employee records (extra whitespace, duplicates, mixed case, missing values). Cells are editable inline; changes sync back to the working dataset.

Quick clean actions

One-click tools in the side panel:

  • Trim whitespace on all cells
  • Remove duplicates (full-row match)
  • Convert to Title Case on text columns
  • Fill empty cells with a value you specify, for one column or all columns

Column type detection and transforms

The app detects each column as date, number, or text by sampling values. Select a column and Apply type format to normalize values—dates to `yyyy-MM-dd` (Luxon), numbers with locale formatting, text trimmed. Before and After preview panels show a sample cell transformation.

Find, replace, and filter

  • Find & replace across all columns or one column (case-insensitive)
  • Filter rows by text contained in any column or a specific column
  • Clear filter restores the full dataset view

Summary stats and history

KPI cards show Rows, Columns, Missing Values, and Actions Applied. A transformation history log timestamps every cleaning step (upload, trim, dedupe, export, etc.).

Export and appearance

Save Cleaned Data downloads the current dataset as `cleaned-data.xlsx`. A dark mode toggle persists your theme preference. A status banner confirms each action with success, info, or error styling. Tools are organized in a sidebar panel beside the grid on large screens.

Data & persistence

Sample data includes eight employee-style rows with common data-quality issues. Dark mode preference is saved in localStorage. The working dataset lives in memory until you export or reload.

Built with

Tailwind CSS, AG Grid Community, Alpine.js, SheetJS (xlsx), and Luxon—all loaded from CDNs in one self-contained HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.

Data Cleaning & Transformation — Polished app

Data Cleaning & Transformation

Upload spreadsheets, clean data, and export polished results.

Sample data loaded. Try quick-clean actions in the side panel.

Rows

6

Columns

7

Missing Values

3

Actions Applied

2

idnameemaildepartmenthire_datesalary
001John Smithjohn@email.comSales2024-03-1555,000
006Carlos Ruizcarlos@email.comSales2023-11-0271,000

Before preview

55000
71000
N/A

After preview

55,000
71,000
N/A

Transformation history

  • 10:45:12 Removed 1 duplicate row
  • 10:45:01 Loaded sample dataset (8 rows)

Leave a Reply