diff --git a/.changeset/seven-bottles-complain.md b/.changeset/seven-bottles-complain.md new file mode 100644 index 0000000..b634f4d --- /dev/null +++ b/.changeset/seven-bottles-complain.md @@ -0,0 +1,6 @@ +--- +"@gzim/svelte-datagrid": minor +"website": patch +--- + +Added rowClick and rowDblClick events suggested in issue #36 diff --git a/README.md b/README.md index b56b544..5a651aa 100644 --- a/README.md +++ b/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? diff --git a/apps/website/.prettierignore b/apps/website/.prettierignore index cc41cea..3a324b2 100644 --- a/apps/website/.prettierignore +++ b/apps/website/.prettierignore @@ -2,3 +2,4 @@ pnpm-lock.yaml package-lock.json yarn.lock +node_modules \ No newline at end of file diff --git a/apps/website/src/routes/+page.svelte b/apps/website/src/routes/+page.svelte index a3e2861..c362853 100644 --- a/apps/website/src/routes/+page.svelte +++ b/apps/website/src/routes/+page.svelte @@ -140,6 +140,7 @@ headerRowHeight={30} {columns} {rowsPerPage} + {allColumnsResizable} bind:getGridState bind:scrollToRow bind:rows @@ -147,7 +148,7 @@ on:valueUpdated={onValueUpdated} on:scroll={gridScrolled} on:columnsSwapped={({ detail }) => console.log(detail)} - {allColumnsResizable} + on:rowClick={({ detail }) => console.log(detail)} /> diff --git a/packages/svelte-datagrid/.prettierignore b/packages/svelte-datagrid/.prettierignore index 36bd2e7..cf528a9 100644 --- a/packages/svelte-datagrid/.prettierignore +++ b/packages/svelte-datagrid/.prettierignore @@ -4,4 +4,5 @@ package-lock.json yarn.lock /.changeset /dist -/.github \ No newline at end of file +/.github +node_modules \ No newline at end of file diff --git a/packages/svelte-datagrid/src/lib/components/Datagrid.svelte b/packages/svelte-datagrid/src/lib/components/Datagrid.svelte index f22f02a..9412606 100644 --- a/packages/svelte-datagrid/src/lib/components/Datagrid.svelte +++ b/packages/svelte-datagrid/src/lib/components/Datagrid.svelte @@ -87,6 +87,10 @@ valueUpdated: GridCellUpdated; // eslint-disable-next-line no-undef columnsSwapped: { from: GridColumn; to: GridColumn; columns: $$Props['columns'] }; + // eslint-disable-next-line no-undef + rowClick: { row: GridRow }; + // eslint-disable-next-line no-undef + rowDblClick: { row: GridRow }; }; const dispatch = createEventDispatcher(); @@ -241,6 +245,16 @@ columns = [...detail.columns]; dispatch('columnsSwapped', detail); }; + + // eslint-disable-next-line no-undef + const rowClick = (row: GridRow) => { + dispatch('rowClick', { row }); + }; + + // eslint-disable-next-line no-undef + const rowDblClick = (row: GridRow) => { + dispatch('rowDblClick', { row }); + };
{}} + on:click={() => rowClick(row)} + on:dblclick={() => rowDblClick(row)} > {#each columns as column, j (j)}