You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在gridjs-svelte中通过rowClick事件获取点击行/单元格详情?

问题:GridJS-Svelte行点击事件无法获取行数据,寻求替代组件

问题背景

GridJS官方文档中提供了获取点击行/单元格详情的示例代码:

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));

在官方示例页面点击表格时,控制台会输出包含PointerEvent和行数据的参数。

但在SvelteKit 5的+page.svelte中使用如下代码时:

<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));}}
/>

点击行时控制台仅输出[{"isTrusted":false}],无法获取到行数据。

当前使用的依赖版本

>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
...

需求

怀疑gridjs-svelte的事件监听器存在bug,希望避免使用GridJS的选择插件,同时寻求维护更活跃的Svelte表格替代组件。

内容的提问来源于stack exchange,提问作者T. Zack Crawford

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.15 00:49:56