diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 4e56ca758d..52a74befa9 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -5621,6 +5621,21 @@ "label": "High contrast", "key": "stripeRows", "defaultValue": false + }, + { + "type": "event", + "label": "On row click", + "key": "onRowClick", + "context": [ + { + "label": "Clicked row", + "key": "row" + } + ], + "dependsOn": { + "setting": "allowEditRows", + "value": false + } } ] }, diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index 9bdea52124..916f1aa447 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -14,12 +14,14 @@ export let initialSortOrder = null export let fixedRowHeight = null export let columns = null + export let onRowClick = null const component = getContext("component") const { styleable, API, builderStore, notificationStore } = getContext("sdk") $: columnWhitelist = columns?.map(col => col.name) $: schemaOverrides = getSchemaOverrides(columns) + $: handleRowClick = allowEditRows ? undefined : onRowClick const getSchemaOverrides = columns => { let overrides = {} @@ -56,6 +58,7 @@ showControls={false} notifySuccess={notificationStore.actions.success} notifyError={notificationStore.actions.error} + on:row-click={e => handleRowClick?.({ row: e.detail })} /> diff --git a/packages/frontend-core/src/components/grid/layout/GridRow.svelte b/packages/frontend-core/src/components/grid/layout/GridRow.svelte index fe74f05663..260898da56 100644 --- a/packages/frontend-core/src/components/grid/layout/GridRow.svelte +++ b/packages/frontend-core/src/components/grid/layout/GridRow.svelte @@ -17,6 +17,7 @@ columnHorizontalInversionIndex, contentLines, isDragging, + dispatch, } = getContext("grid") $: rowSelected = !!$selectedRows[row._id] @@ -30,6 +31,7 @@ on:focus on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} + on:click={() => dispatch("row-click", row)} > {#each $renderedColumns as column, columnIdx (column.name)} {@const cellId = `${row._id}-${column.name}`} diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte index f3af0d9362..e005a945dd 100644 --- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte +++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte @@ -74,6 +74,7 @@ class="row" on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} + on:click={() => dispatch("row-click", row)} > {#if $stickyColumn}