iamyuu / gridjs-svelte

A Svelte wrapper component for Grid.js
https://npm.im/gridjs-svelte
MIT License
57 stars 13 forks source link

How to find the location of cell click #13

Closed jbeuria closed 2 years ago

jbeuria commented 2 years ago

<Grid {columns} sort search pagination={{ enabled: true, limit: 30 }} data={orderdata} on:cellClick={handleClick} />

How do I determine which cell has been clicked?

kevinJread commented 2 years ago

function handleClick(e) { console.log(e); }

the event (e) will have the cell info in the detail section

I have an id that is hidden in the first column, the following allows me to access what I need.

function handleClick(e) { let thisId = e.detail[1]._cells[0].data console.log(e.detail[1]._cells[1].data); // shows the Name }

jbeuria commented 2 years ago

Thanks Kevin, unfortunately it shows undefined for me. Although I can locate the column through id, the row index is nowhere to be found!

kevinJread commented 2 years ago

Ohh my bad, I just noticed that you're doing a cell Click not row Click..

In that case you don't need to specify the detail section. Here's a snippet I use for cells.

I add a button as the last column.

import Grid from "gridjs-svelte" import { html, h } from "gridjs"

let actionBtn = {name: 'Actions', formatter: (cell, row) => { return h('button', { className: 'btn btn-sm btn-info', onClick: () => handleClick(row) }, 'VIEW'); }}

//add it via the columns property:

let columns = ['ID','FIRSTNAME','LASTNAME','DOB',actionBtn]

function handleClick(e) { //console.log(e._cells); let thisId = e._cells[0].data // navigate to the detail page goto(/member/+ thisId); }

Hope that helps

jbeuria commented 2 years ago

thank you

iamyuu commented 2 years ago

thanks for your help @kevinJread! feel free to re-open or open new issues if you have