sql-insert-explorer

Explore and visualize SQL INSERT datasets with table auto-detection, instant search/filtering, and live previews, entirely in your browser. Nothing is ever uploaded; your .sql file is parsed locally on the page.

What it does

1. Load SQL, drag & drop a .sql file, click to browse, or paste/type a query.
2. Auto-detect tables, the parser scans every INSERT ... VALUES statement, groups rows by table, and tells you how many tables were found.
3. Pick a table, if more than one table is present, switch between them with tabs.
4. Explore the data, a fully responsive, sortable, paginated table with a sticky header and a frozen row-number column for wide tables (50+ columns).
5. Search instantly, a single search box filters across all columns, with full Persian / Arabic / English digit equivalence.
6. Export, download the current (filtered) view as a UTF-8 CSV.

Only INSERT statements are interpreted. UPDATE, SELECT, CREATE, etc. are detected and silently skipped (and counted in the stats).

Quick start

It's a static site, no build step, no dependencies to install.

# just open it
start index.html           # Windows
open index.html            # macOS

# …or serve it (recommended, so the browser allows file drops cleanly)
python -m http.server 8080
# then visit http://localhost:8080

Click Load sample in the UI, or drag in sample.sql, to see it work.

TailwindCSS is loaded via the official Play CDN and the Vazirmatn font from Google Fonts, so an internet connection is needed for styling. The parsing and search logic is 100% offline.

Supported SQL

The parser is deliberately permissive so real-world dumps (MySQL / SQL Server / PostgreSQL exports) work:

Feature	Example
Multi-column inserts	INSERT INTO t (a, b, c) VALUES (...)
Multi-row values	VALUES (1,'a'), (2,'b'), (3,'c')
Separate statements	many INSERTs in one file
Quoted identifiers	`tbl`, "tbl", [tbl]
Schema-qualified names	shop.Products, `db`.`t`
String escapes	'It''s ok', 'line1\nline2', N'unicode'
Keywords	NULL, DEFAULT
Modifiers	INSERT IGNORE, INSERT OR REPLACE, INSERT DELAYED
Comments	-- line, # line, /* block */
Column-subset inserts	later INSERTs with fewer columns merge correctly
Trailing clauses	ON DUPLICATE KEY UPDATE, RETURNING (ignored)

Rows whose INSERT listed only a subset of a table's columns simply leave the other cells blank; explicit NULLs are shown as a distinct NULL badge.

Persian / Arabic / English digit search

Numbers are normalized for both searching and sorting, so any of these match each other:

ASCII	Persian	Arabic-Indic
09121234567	۰۹۱۲۱۲۳۴۵۶۷	٠٩١٢١٢٣٤٥٦٧

Searching 123 finds ۱۲۳ and ١٢٣, and vice-versa. Light letter folding (ي→ی, ك→ک, harakat/ZWNJ stripping) is also applied so an Arabic-keyboard query matches Persian text.

Project structure

index.html        # markup + TailwindCSS utility classes (no inline CSS)
js/
  digits.js       # Persian/Arabic/English digit + text normalization
  sql-parser.js   # the INSERT parser (framework-free, unit-testable)
  app.js          # UI controller: load, render, search, sort, paginate, export
sample.sql        # demo dataset (2 tables, mixed languages & digit systems)

js/sql-parser.js and js/digits.js export via both window.* and module.exports, so they can be unit-tested under Node:

const { parse } = require('./js/sql-parser.js');
parse("INSERT INTO t (a) VALUES (1),(2);").tables; // → [{ name:'t', columns:['a'], rows:[…] }]

License

See LICENSE.