React rowClick Event

[LightwithoutLisonlyight]

I want use a global event 'rowClick' with gridjs-react and on the docs I can't found a "react version" of this feature.
Please help.

I would also like to pass an entire json object to each table row but only render some keys of it in the cells. When I click on some row I want the whole object returned to me as I initially passed it, without the default formatting

_cells:[
    {
        _id: 'some-id',
       _data: 'my data'
    },
   {
        _id: 'some-id',
       _data: 'my data'
    },
   ....
]

So if I pass an object like this one to the "data"

  data: [
    { name: 'John', email: 'john@example.com', phoneNumber: {number: '(353) 01 222 3333',country:'US'} },
    { name: 'Mark', email: 'mark@gmail.com', phoneNumber:{number: '(01) 22 888 4444',country:'US'} },
  ]

and i render only name and email value, when i click on that row i want that the returned object to be:

     {name: 'John', email: 'john@example.com', phoneNumber: {number: '(353) 01 222 3333',country:'US'} }

(the initial object should be contained into "args") like so:

     (...args)=>console.log(args)
     // so
     (...args) = (event, formattedObjectData, initialObject)

How can I achieve this ?

Thanks ❤️

P.S.
With the button component I already solved the problem, but now I need to use the rowClick event, so without using button.

[lamilsage]

Hi @LightwithoutLisonlyight ,

I needed the exact same feature and found a way to do it.

I created a plugin that display nothing but listen to rowClick event then raised the event

class GridRowSelection extends BaseComponent<Props, State> {
    constructor(props: Props, context: any) {
        super(props, context);
        this.onRowClick = this.onRowClick.bind(this);
        this.config?.instance && this.config.instance.on("rowClick", this.onRowClick);
    }

    componentWillUnmount() {
        this.config.instance.off("rowClick", this.onRowClick);
    }

    onRowClick(mouseEvent: any, data: any) {
        this.props.plugin.onRowClick(data);
    }

    render() {
        return undefined;
    }
}

export default GridRowSelection;

Then simply bind my plugin to my grid

plugins={
                            [
                                {
                                    id: "rowSelectionPlugin",
                                    component: GridRowSelection,
                                    position: PluginPosition.Footer,
                                    onRowClick: this.onRowClick
                                }
                            ]
                        }

Hope it can help

[LightwithoutLisonlyight]

Hi @lamilsage you don't just helped me, you actually solved my issue...my problem's root was how to bind a plugin to the react wrapper.
Thanks a lot, I really appreciated your help. 🤗