A modern, client-side Excel file viewer and data management tool built with React. Upload your Excel files, view them in a clean table interface, scan/search by column values (e.g., barcode scanning), highlight matching rows, customize visible columns, filter data, and export filtered results — all running entirely in your browser with full localStorage persistence.
Live Demo: https://webisso.github.io/excel-editor
- Drag & drop or click-to-browse file upload
- Supports
.xlsx,.xls, and.csvformats - Instant parsing powered by SheetJS (xlsx)
- Clean, responsive HTML table rendering of your Excel data
- Row numbers for easy reference
- Sticky table headers for scrolling large datasets
- Highlighted (scanned) rows with yellow background
- Select any column as the search target
- Type or scan a value and press Enter to highlight matching rows
- Ideal for warehouse/inventory barcode scanning workflows
- Clear all highlights with one click
- Slide-out settings panel to show/hide specific columns
- Search columns by name
- Select All / Deselect All shortcuts
- Preferences are persisted across sessions
- Total Data — total number of rows
- Scanned — number of highlighted (matched) rows
- Not Scanned — remaining rows
- Click any stat card to instantly filter the table
- Filter view: All / Scanned Only / Not Scanned
- Syncs with stat card clicks
- Filter preference is saved in localStorage
- Export currently filtered and visible data to Excel (.xlsx), Excel (.xls), or CSV (.csv)
- Only visible columns and filtered rows are included in the export
- One-click dropdown menu for format selection
- Exported file is automatically named based on the original file
- Full Turkish (TR) and English (EN) language support
- Language switcher available on both the upload screen and the editor screen
- Selected language is persisted in localStorage
- All data is stored in localStorage — no server required
- Excel data, column settings, highlighted rows, active filters, selected language — everything survives page refreshes and browser restarts
- "Delete Data" button to clear all stored data and return to the upload screen
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| SheetJS (xlsx) | Excel/CSV file parsing & export |
| i18next + react-i18next | Internationalization |
| gh-pages | GitHub Pages deployment |
| CSS (custom) | Modern, responsive styling with CSS variables |
- Node.js (v18 or higher recommended)
- npm
git clone https://github.com/webisso/excel-editor.git
cd excel-editor
npm install --legacy-peer-depsnpm startOpens http://localhost:3000 in your browser. The page hot-reloads on file changes.
npm run buildCreates an optimized production build in the build/ folder.
npm run deployThis runs npm run build automatically, then publishes the build/ folder to the gh-pages branch.
excel-editor/
├── public/
│ ├── index.html # HTML template
│ ├── fav.svg # SVG favicon
│ └── manifest.json # PWA manifest
├── src/
│ ├── components/
│ │ ├── FileUpload.js # File upload screen (drag & drop)
│ │ ├── DataView.js # Main editor: table, toolbar, search
│ │ ├── StatsBar.js # Statistics cards (Total, Scanned, Not Scanned)
│ │ ├── ColumnSettings.js # Column visibility settings panel
│ │ └── LanguageSwitcher.js # TR/EN language toggle button
│ ├── i18n.js # i18next configuration & translations
│ ├── App.js # Root component with localStorage hydration
│ ├── App.css # All application styles
│ ├── index.js # Entry point
│ └── index.css # Base styles
├── package.json
└── README.md
- Upload — User uploads an Excel file (
.xlsx,.xls,.csv) via drag & drop or file picker - Parse — SheetJS reads the file and converts the first sheet to JSON
- Store — JSON data, column names, and filename are saved to
localStorage - Display — Data renders in a responsive HTML table with sticky headers
- Search — User selects a column (e.g., "Serial Number") and scans/types a value; matching rows are highlighted in yellow
- Filter — Filter the table by All / Scanned / Not Scanned
- Export — Export the currently filtered and visible data as
.xlsx,.xls, or.csv - Persist — All highlights, filter settings, visible columns, and language preference are saved to
localStorage - Refresh safe — Reloading the page restores the complete state from
localStorage
- Warehouse inventory scanning — Upload a stock list, scan barcodes to mark items as checked, then export the scanned/unscanned lists
- Data review — Upload any spreadsheet and browse it in a clean web interface
- Field operations — Works offline after initial load since everything is client-side
- Filtered reports — Apply filters and export only the data you need
This project is developed by WebissoLLC.
Contributions, issues, and feature requests are welcome. Feel free to open an issue or submit a pull request.