Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

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

$
0
0

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.


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>