Create Render Event Handling Help

[rgfx]

Hi, I am pretty sure I can't create an Dispatcher with Create Render. So I think best option is create a click event. But I am having troubles getting it work. If you could be so kind as to steer me in the right direction.

	const handleClick = (ev, value) => {
		console.log('click', ev, value);
	}
                table.column({
			header: "",
			accessor: "id",
			cell: ({ value }) =>
				createRender(EditButton, {
					id: value,
				}).on('click', (ev) => handleClick(ev, value)),
		}),

I created this repl to show my issue.
https://svelte.dev/repl/dc243ee1ecc4421faa71865992800b9f?version=3.48.0

[bryanmylee]

You can use a dispatcher with createRender! It will handle all events that the component dispatches, including native and createEventDispatcher events.

The issue with your example is that your EditButton.svelte isn't dispatching any events.

You can fix it by using Svelte's event forwarding:

<!-- EditButton.svelte -->
<script>
  export let id;
</script>

<button on:click>
  {id}
</button>

or using an event dispatcher:

<!-- EditButton.svelte -->
<script>
  import {createEventDispatcher} from 'svelte';

  const dispatch = createEventDispatcher();
  export let id;
</script>

<button on:click={() => dispatch('click')}>
  {id}
</button>

[rgfx]

Thank you, I should of tried that :)