feat(frontend): add support to copy a cell value in the clipboard in aggrid tables (#4286)

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>

frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte

@@ -40,7 +40,7 @@
 
 	const context = getContext<AppViewerContext>('AppViewerContext')
 	const contextPanel = getContext<ContextPanelContext>('ContextPanel')
-	const { app, selectedComponent, componentControl, darkMode } = context
+	const { app, selectedComponent, componentControl, darkMode, mode } = context
 
 	let css = initCss($app.css?.aggridcomponent, customCss)
 
@@ -442,7 +442,24 @@
 			class="ag-theme-alpine"
 			class:ag-theme-alpine-dark={$darkMode}
 		>
-			<div bind:this={eGui} style:height="100%" />
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				bind:this={eGui}
+				style:height="100%"
+				on:keydown={(e) => {
+					if ((e.ctrlKey || e.metaKey) && e.key === 'c' && $mode !== 'dnd') {
+						const selectedCell = api?.getFocusedCell()
+						if (selectedCell) {
+							const rowIndex = selectedCell.rowIndex
+							const colId = selectedCell.column?.getId()
+							const rowNode = api?.getDisplayedRowAtIndex(rowIndex)
+							const selectedValue = rowNode?.data?.[colId]
+							navigator.clipboard.writeText(selectedValue)
+							sendUserToast('Copied cell value to clipboard', false)
+						}
+					}
+				}}
+			/>
 		</div>
 		{#if resolvedConfig && 'footer' in resolvedConfig && resolvedConfig.footer}
 			<div class="flex gap-1 w-full justify-between items-center text-xs text-primary p-2">

frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte

@@ -55,7 +55,7 @@
 	const iterContext = getContext<ListContext>('ListWrapperContext')
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
-	const { app, worldStore, selectedComponent, componentControl, darkMode } = context
+	const { app, worldStore, selectedComponent, componentControl, darkMode, mode } = context
 
 	const rowHeights = {
 		normal: 40,
@@ -287,7 +287,6 @@
 						pagination: resolvedConfig?.pagination,
 						paginationAutoPageSize: resolvedConfig?.pagination,
 						suppressPaginationPanel: true,
-
 						defaultColDef: {
 							flex: resolvedConfig.flex ? 1 : 0,
 							editable: resolvedConfig?.allEditable,
@@ -514,7 +513,24 @@
 			>
 				{#key resolvedConfig?.pagination}
 					{#if loaded}
-						<div bind:this={eGui} style:height="100%" />
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div
+							bind:this={eGui}
+							style:height="100%"
+							on:keydown={(e) => {
+								if ((e.ctrlKey || e.metaKey) && e.key === 'c' && $mode !== 'dnd') {
+									const selectedCell = api?.getFocusedCell()
+									if (selectedCell) {
+										const rowIndex = selectedCell.rowIndex
+										const colId = selectedCell.column?.getId()
+										const rowNode = api?.getDisplayedRowAtIndex(rowIndex)
+										const selectedValue = rowNode?.data?.[colId]
+										navigator.clipboard.writeText(selectedValue)
+										sendUserToast('Copied cell value to clipboard', false)
+									}
+								}
+							}}
+						/>
 					{:else}
 						<Loader2 class="animate-spin" />
 					{/if}