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.