Clipboard & Export

<script lang="ts">
	import { DataTable, type CellRange } from '@svelte-lean/table';
	import { applyEdit } from '@svelte-lean/table/editing';
	import { copyRange, pasteRange } from '@svelte-lean/table/clipboard';
	import { memberColumns, pick } from '$lib/demo/columns';
	import { people } from '$lib/demo/data';

	let rows = $state(people(6));
	const columns = pick(memberColumns(), ['name', 'team', 'region', 'revenue']).map((column) => ({
		...column,
		editable: column.id !== 'name'
	}));
	let range = $state<CellRange | null>({ start: { row: 1, column: 'team' }, end: { row: 3, column: 'revenue' } });
	let tsv = $state('');
	let notice = $state('');

	async function copy() {
		if (!range) return;
		tsv = copyRange(range, rows, columns, (row) => row.id);
		try {
			await navigator.clipboard.writeText(tsv);
			notice = 'Copied as tab-separated text.';
		} catch {
			notice = 'Clipboard unavailable; the text is shown below.';
		}
	}
	// pasteRange returns validated EditEvents; the application applies them.
	function paste() {
		if (!range) return;
		const start = {
			row: rows.findIndex((row) => row.id === range!.start.row),
			column: columns.findIndex((column) => column.id === range!.start.column)
		};
		const changes = pasteRange(tsv, start, rows, columns, (row) => row.id);
		rows = changes.reduce((next, change) => applyEdit(next, change, columns, (row) => row.id), rows);
		notice = `${changes.length} cells updated.`;
	}
</script>

<button type="button" data-slean="button" data-variant="outline" onclick={copy}>Copy range</button>
<button type="button" data-slean="button" data-variant="outline" onclick={paste} disabled={!tsv}>Paste at range start</button>
<button type="button" data-slean="button" data-variant="outline" onclick={() => (range = null)}>Clear range</button>

<!-- Click a cell, then Shift+click (or Shift+arrow) another cell to extend the rectangle. -->
<DataTable data={rows} {columns} getRowId={(row) => row.id} cellRange={range} onCellRangeChange={(next) => (range = next)} pagination={false} label="Members: range and clipboard" />

<textarea aria-label="Tab-separated text" bind:value={tsv}></textarea>
<p role="status">{notice}</p>

<script lang="ts">
	import { DataTable } from '@svelte-lean/table';
	import { downloadText, toCsv } from '@svelte-lean/table/export';
	import { memberColumns, pick } from '$lib/demo/columns';
	import { people, type Person } from '$lib/demo/data';

	// One value starts with "=": the export prefixes it so a spreadsheet does not run it as a formula.
	const data: Person[] = people(5).map((row, index) =>
		index === 0 ? { ...row, name: '=HYPERLINK("https://example.com")' } : row
	);
	const columns = pick(memberColumns(), ['name', 'team', 'region', 'revenue']);
	const csv = toCsv(data, columns); // format() applies, header row included, BOM for spreadsheets
</script>

<button type="button" data-slean="button" data-variant="outline" onclick={() => downloadText(csv, 'members.csv')}>
	Download CSV
</button>

<DataTable {data} {columns} getRowId={(row) => row.id} pagination={false} label="Members: CSV export" />
<pre>{csv}</pre>