Merge pull request #38 from gzimbron/row-click-event

Added rowClick and rowDblClick events suggested in issue #36

.changeset/seven-bottles-complain.md

@@ -0,0 +1,6 @@
+---
+"@gzim/svelte-datagrid": minor
+"website": patch
+---
+
+Added rowClick and rowDblClick events suggested in issue #36

README.md

@@ -303,6 +303,8 @@ const scrollToRow: (rowIndex: number, behavior: ScrollBehavior = 'smooth') => vo
 - `xScroll` - Triggered when the grid is scrolled on X axis. The X scroll percent position can be accessed from `event.detail`
 - `valueUpdated` - Triggered when a cell's value is updated. The updated value can be accessed from `event.value`, other data can be accessed from `event.row`, `event.column` and `event.rowIndex`
 - `columnsSwapped` - Triggered when columns are swapped. `event.detail` contains `from`, `to` and new `columns` order properties
+- `rowClick` - Triggered when a row is clicked. The clicked row can be accessed from `event.detail`
+- `rowDblClick` - Triggered when a row is double clicked. The clicked row can be accessed from `event.detail`
 
 ## Bugs? Suggestions?
 

apps/website/.prettierignore

@@ -2,3 +2,4 @@
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+node_modules

apps/website/src/routes/+page.svelte

@@ -140,14 +140,15 @@
 		headerRowHeight={30}
 		{columns}
 		{rowsPerPage}
+		{allColumnsResizable}
 		bind:getGridState
 		bind:scrollToRow
 		bind:rows
 		bind:rowHeight
 		on:valueUpdated={onValueUpdated}
 		on:scroll={gridScrolled}
 		on:columnsSwapped={({ detail }) => console.log(detail)}
-		{allColumnsResizable}
+		on:rowClick={({ detail }) => console.log(detail)}
 	/>
 </section>
 

packages/svelte-datagrid/.prettierignore

@@ -4,4 +4,5 @@ package-lock.json
 yarn.lock
 /.changeset
 /dist
-/.github
+/.github
+node_modules

packages/svelte-datagrid/src/lib/components/Datagrid.svelte

@@ -87,6 +87,10 @@
 		valueUpdated: GridCellUpdated<T>;
 		// eslint-disable-next-line no-undef
 		columnsSwapped: { from: GridColumn<T>; to: GridColumn<T>; columns: $$Props['columns'] };
+		// eslint-disable-next-line no-undef
+		rowClick: { row: GridRow<T> };
+		// eslint-disable-next-line no-undef
+		rowDblClick: { row: GridRow<T> };
 	};
 	const dispatch = createEventDispatcher<ComponentEventsList>();
 
@@ -241,6 +245,16 @@
 		columns = [...detail.columns];
 		dispatch('columnsSwapped', detail);
 	};
+
+	// eslint-disable-next-line no-undef
+	const rowClick = (row: GridRow<T>) => {
+		dispatch('rowClick', { row });
+	};
+
+	// eslint-disable-next-line no-undef
+	const rowDblClick = (row: GridRow<T>) => {
+		dispatch('rowDblClick', { row });
+	};
 </script>
 
 <div
@@ -345,6 +359,10 @@
 				style:top="{getRowTop(row.i, rowHeight)}px"
 				role="row"
 				aria-rowindex={row.i}
+				tabindex={row.i}
+				on:keydown={() => {}}
+				on:click={() => rowClick(row)}
+				on:dblclick={() => rowDblClick(row)}
 			>
 				{#each columns as column, j (j)}
 					<div