Paste a Table from a Spreadsheet

ProNew

Paste cells copied from Excel or Sheets into a text area, see them as a table with a header toggle, row and column counts and ragged rows flagged, then import. Use this when a file picker is more steps than people want for a quick paste.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

People move small tables from a spreadsheet into your app and a file upload is too heavy.

Do not use it when: For large data or needing column mapping, use the CSV column mapper.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onImport`	`({ headers, rows }) => void \| Promise<void>`	The pasted table.

parseTsv(text) is exported.

Accessibility

The text area has a visible label; the preview is a real table with column headers, a status line with the counts, and a list of problems in words. A row with missing cells shows "(missing)" in the empty cells rather than leaving them blank.
The header option is a labelled checkbox, and the Import button names the number of rows and is disabled while rows are uneven, with the reason written below.
Large pastes are previewed up to 50 rows in a scroll box; the counts show the full size.

Testing

The pattern ships with a Testing Library test (csv-paste-table-import.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

People move small tables from a spreadsheet into your app and a file upload is too heavy.

Do not use it when: For large data or needing column mapping, use the CSV column mapper.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onImport`	`({ headers, rows }) => void \| Promise<void>`	The pasted table.

parseTsv(text) is exported.

Accessibility

The text area has a visible label; the preview is a real table with column headers, a status line with the counts, and a list of problems in words. A row with missing cells shows "(missing)" in the empty cells rather than leaving them blank.
The header option is a labelled checkbox, and the Import button names the number of rows and is disabled while rows are uneven, with the reason written below.
Large pastes are previewed up to 50 rows in a scroll box; the counts show the full size.

Testing

The pattern ships with a Testing Library test (csv-paste-table-import.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.