webdevpuneet.com

Related Snippets

85 in Tables category
24–29 of 60

CSV Paste-to-Populate Table

Table with Scroll Shadow Indicators

Table with Row Action Dropdown

Live Market Watchlist Table

Table Row Density Toggle — Compact / Comfortable / Spacious, Persisted

Table Export with Column Selector — Choose Exactly What Gets Exported

CSV Paste-to-Populate Table — Excel Clipboard Import JS

CSV Paste-to-Populate Table · Tables · Plain HTML, CSS & JS · Live preview

CategoryTables
TagsData Tables

Copy & paste

Source Code

<div class="pp-wrap">
  <div class="pp-head">
    <h3>Paste-to-Populate Table</h3>
    <p class="pp-sub">Copy cells from Excel, Google Sheets, or a CSV file, then click the paste zone and press Ctrl+V (or Cmd+V).</p>
  </div>

  <div class="pp-pastezone" id="ppZone" tabindex="0">
    <span class="pp-icon">⎘</span>
    <span>Click here, then paste tab or comma-separated data</span>
  </div>

  <div class="pp-options">
    <label><input type="checkbox" id="ppHeaderRow" checked> First pasted row is the header</label>
    <button type="button" id="ppSample">Load sample data</button>
    <button type="button" id="ppClear">Clear table</button>
    <span class="pp-status" id="ppStatus"></span>
  </div>

  <div class="pp-scroll">
    <table class="pp-table" id="ppTable">
      <thead id="ppThead"></thead>
      <tbody id="ppTbody">
        <tr><td class="pp-empty" colspan="6">No data yet — paste something above, or click "Load sample data".</td></tr>
      </tbody>
    </table>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Populates directly from a native browser paste event — no file picker, no upload step
Automatic tab-vs-comma delimiter detection handles both a spreadsheet range and a plain CSV blob
Toggleable "first row is header" option re-renders instantly from the already-parsed data
Visual flash feedback on the paste zone confirms a paste was received and parsed
Live status readout reports exactly how many rows and columns were populated
Built-in "Load sample data" button exercises the identical parse/render pipeline without needing a real paste
Plain DOM table rendering with no virtual-DOM or templating dependency
Clear button resets to an explicit empty state rather than leaving stale rows visible

About this UI Snippet

CSV Paste-to-Populate Table — Populating Rows Directly from a Clipboard Paste Event

Screenshot of the CSV Paste-to-Populate Table snippet rendered live

Uploading a CSV file is the wrong amount of friction when a user just wants to hand a table a handful of rows they already have selected in a spreadsheet. This snippet skips the file picker entirely: click a paste zone, press Ctrl+V (or Cmd+V), and whatever was copied from Excel, Google Sheets, or a plain CSV file renders directly as table rows, with an automatic guess at whether the first row is a header.

Listening for the native paste event

The paste zone is a focusable <div tabindex="0"> with a paste event listener — the same native browser event any input or textarea receives when a user pastes, available on any focusable element. e.preventDefault() stops the browser from also inserting the raw pasted text as literal DOM content inside the div, since the goal is to *parse* the clipboard payload, not display it verbatim. The actual data comes from (e.clipboardData || window.clipboardData).getData('text'), reading the plain-text representation of whatever was on the clipboard at paste time.

Why tab-or-comma delimiter detection matters

Copying a cell range out of Excel or Google Sheets puts the data on the clipboard as tab-separated rows, one row per newline — spreadsheet software uses tabs specifically so that commas embedded in real cell content (like "1,200" or "Smith, John") don't get misread as extra columns. A plain .csv file, by contrast, is comma-separated. parseRows() checks each line for a tab character first and only falls back to splitting on commas if none is found, so the same paste zone correctly handles both a spreadsheet range and a raw CSV blob pasted as text, without asking the user which format they are using.

First-row-is-header is a toggle, not a guess

Rather than trying to heuristically detect whether the first pasted row "looks like" a header (a genuinely unreliable guess — a header row and a data row can both be plain words), the snippet exposes a checkbox that is on by default and simply re-renders from the same parsed currentRows array whenever it changes. This keeps the behavior predictable: what the user sees is exactly what the checkbox says, and toggling it re-derives column headers as Column 1, Column 2, etc. when unchecked, without needing to re-paste.

Rendering rows without a template library

render() rebuilds <thead> and <tbody> from scratch on every paste or option change, creating one <th> per header cell and one <tr>/<td> set per body row with plain DOM APIs — deliberately simple because the whole point of the snippet is the parsing and paste-handling logic, not a virtualized or diffed render, which would be overkill for the size of data a clipboard paste realistically carries.

A sample-data button as a substitute for real clipboard access

Because triggering a real paste programmatically is not something a webpage is allowed to do (clipboard access requires an actual user paste gesture, by design, for security), a "Load sample data" button runs the exact same parseRows() and render() pipeline against a hardcoded tab-separated string — letting anyone see the feature work immediately without needing to open a spreadsheet first, while still exercising the identical code path a real paste would use.

Step by step

How to Use

  1. 1
    Copy a range from a spreadsheetSelect a range of cells in Excel or Google Sheets (or any tab/comma-separated text) and copy it with Ctrl+C or Cmd+C.
  2. 2
    Click the paste zone, then pasteClick inside the dashed box to focus it, then press Ctrl+V or Cmd+V — the table below populates immediately.
  3. 3
    Toggle the header row optionUncheck "First pasted row is the header" if your clipboard data has no header row — columns are relabeled Column 1, 2, 3 automatically.
  4. 4
    Try it without a spreadsheetClick "Load sample data" to see the exact same parsing pipeline run against a built-in tab-separated sample.
  5. 5
    Clear and paste againClick "Clear table" to reset, then paste a different range — each paste fully replaces the previous table content.
  6. 6
    Wire it to your own data modelRead currentRows after any paste to get a plain 2D array of strings ready to send to your backend or app state.

Real-world uses

Common Use Cases

Bulk data entry tools
Let users paste a batch of rows from a spreadsheet they already maintain instead of manually re-typing each field into individual form inputs.
Admin panels for seeding sample or import data
A faster onboarding path than a CSV upload dialog when an admin just needs to get a handful of rows into a system quickly.
Internal tools and scripts UIs
Pair with the CSV Import Mapper for a two-stage flow — quick paste for simple cases, full column mapping for complex imports.
Prototyping and QA test-data tools
Quickly populate a table with realistic test data copied straight out of a spec spreadsheet during manual QA or demos.
Teaching clipboard event handling
A clear, minimal example of reading clipboardData.getData(), which is the same primitive behind any custom paste-handling feature.

Got questions?

Frequently Asked Questions

Copying a cell range out of Excel or Google Sheets puts tab-separated values on the clipboard, specifically so commas that appear inside real cell content (like "1,200" or "Smith, John") are not mistaken for column separators. Checking each line for a tab first and only falling back to commas means the same paste zone correctly handles both a spreadsheet range and a plain comma-separated CSV blob.

Browsers deliberately do not allow a webpage to programmatically trigger a real paste event or read the clipboard without an actual user gesture, for security reasons. The sample button runs the identical parseRows() and render() functions against a hardcoded string instead, so you can see the feature work without needing to copy something from a real spreadsheet first.

Rendering iterates using the header row's column count as the source of truth; a shorter data row renders empty cells for any missing trailing columns, and any extra columns beyond the header count are simply not shown. For strict validation you would want to detect and flag column-count mismatches before rendering.

This snippet strips simple surrounding double quotes but does not implement full RFC 4180 CSV quoting (an embedded comma or newline inside a quoted field). For strict CSV files with quoted fields containing delimiters, use a dedicated CSV parsing function or library instead of the simple split-based parser here.

currentRows holds the parsed 2D array of string rows at all times after a paste, sample load, or clear. Read it directly, or extend the paste and sample handlers to also call your own onData(rows) callback right after render() runs.

Yes. Keep the parsed rows in component state instead of a plain variable, run parseRows() inside the paste event handler exactly as here, and let your framework's templating re-render the table from that state — the parsing logic itself needs no changes.