How to get details of clicked row or cell in gridjs-svelte using the rowClick event?

In the gridjs documentation, it suggests the following code should work to collect details on a clicked row or cell:

const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  sort: true,
  search: true,
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444'],
    ['Eoin', 'eo3n@yahoo.com',   '(05) 10 878 5554'],
    ['Nisen', 'nis900@gmail.com',   '313 333 1923']
  ]
});
   
grid.on('rowClick', (...args) => console.log('row: ' + JSON.stringify(args), args));
grid.on('cellClick', (...args) => console.log('cell: ' + JSON.stringify(args), args));

On the example app, page linked, when I try clicking on the table I get the following logged in the console, where the pointer event on the right side (args) is expandable.

row: [{"isTrusted":true},{"_id":"72c68d4c-8fc3-475d-9914-4e556e0cb9d5","_cells":[{"_id":"54d71a76-f69a-4023-a843-55f1f777c0c3","data":"John"},{"_id":"24d0eae9-b3e6-4cd7-b6b1-0bee6a9e5b74","data":"john@example.com"},{"_id":"172ab7e4-2406-4f6f-a8b6-8e852043c1fc","data":"(353) 01 222 3333"}]}] ➤ (2) [PointerEvent, e]

I am trying something similar in svelte(kit) 5 using the following +page.svelte verbatim:

<script lang="ts" >
import Grid from "gridjs-svelte"
</script>

<Grid
    data={[
        ['John', 'john@example.com', '(353) 01 222 3333'],
        ['Mark', 'mark@gmail.com',   '(01) 22 888 4444'],
        ['Eoin', 'eo3n@yahoo.com',   '(05) 10 878 5554'],
        ['Nisen', 'nis900@gmail.com',   '313 333 1923']
    ]}
    columns={['Name', 'Email', 'Phone Number']}
    sort="true"
    search="true"
    on:rowClick={ (...args) => {console.log(JSON.stringify(args));}}
/>

When I click on a row here, all that is logged is [{"isTrusted":false}] for some reason. Am I doing something wrong?

I am using the following npm package versions on Windows:

>npm list
+-- @sveltejs/adapter-auto@3.3.1
+-- @sveltejs/kit@2.15.2
+-- @sveltejs/vite-plugin-svelte@5.0.3
+-- gridjs-svelte@2.1.1
+-- gridjs@6.2.0
+-- svelte-check@4.1.4
+-- svelte@5.17.5
+-- typescript@5.7.3
`-- vite@6.0.7
...

I am wondering if there is a sort of bug with the event listener in gridjs-svelte. I would like to avoid using the plugin for selection if possible. If someone has a more frequently maintained svelte alternative to gridjs, that may be useful to me as well.

Solution

I believe the reason is that you must execute the rowClick function on client side, not the server side. If you define via onMount (svelte 4) or $effect() (svelte 5), the event is passed directly to the handler rather than abstractly passed. Here I define an instance reference for the <Grid ... /> in the client-side JS and modify the grid after the module is mounted by the client.

<script>
import { onMount } from "svelte"
import Grid from "gridjs-svelte"

let mygrid
$effect( () => {
    mygrid.on("rowClick", (...args) => {console.log(JSON.stringify(args));})
})
</script>

<Grid
    bind:instance={mygrid}
    data={[
        ['John', 'john@example.com', '(353) 01 222 3333'],
        ['Mark', 'mark@gmail.com',   '(01) 22 888 4444'],
        ['Eoin', 'eo3n@yahoo.com',   '(05) 10 878 5554'],
        ['Nisen', 'nis900@gmail.com',   '313 333 1923']
    ]}
    columns={['Name', 'Email', 'Phone Number']}
    sort="true"
    search="true"
/>

You can see this in that the isTrusted property is true via this method. Console log reads:

[{"isTrusted":true},{"_id":"a49394da-d0e1-42f0-ad29-ebb3deccd080","_cells":[{"_id":"e0aefb8a-c1be-46e0-b7b5-71bc0a4c3508","data":"John"},{"_id":"2dfe9565-60b2-4902-be71-77b1f21d14af","data":"john@example.com"},{"_id":"363a51e8-7765-40d2-972b-e8fea1b21fa7","data":"(353) 01 222 3333"}]}]

You could also collect the data in a clicked cell with something like

mygrid.on("cellClick", (event, cell) => {console.log(JSON.stringify(cell.data));})