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 svelte function onMount, 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
onMount( () => {
    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));})