selectedRegionTransform to handle onClick on Blueprint JS Table cell

Question

I´m trying to capture onClick events on cells in Blueprints JS-table. My goal is to trigger a method in a sibbling component that will show info about the selected (clicked) row in the table.

When googling the subject I found this pull request where the contributor comment from themadcreator hint´s to use selectedRegionTransform. He also refers to an example

If you want to click a row, you should use a selectedRegionTransform. This will allow drag-select and multi-select to remain intact. There is an example in the PR preview page that does this.

Sadly, I can not find that example.

In my component I have these two methods (a bit simplified)

test(a,b) {
    console.log(a,b)
}

render() {
    return(
        <Table numRows={this.state.data.length} selectedRegionTransform={this.test}>
            <Column name="Title" cellRenderer={this.renderTitleCell} />
        </Table>
    )
}

This works in the sense that log(a,b) in the method test shows me two objects. One with grid coordinates and one with mouse event info. Then it breaks with this message.

Uncaught TypeError: Cannot read property 'cols' of undefined
at Function../node_modules/@blueprintjs/table/lib/esm/regions.js.Regions.getRegionCardinality (regions.js:97)
at Table._this.styleMenuRegion (table.js:259)
...

I´m sure it´s because I don´t know how to use selectedRegionTransform and therefor need som help.

I want the table to respond to events as normal. All I need is a hook to trigger my own function along with the normal functionality of the table.

Can someone please help me understand how this is done? Thanks!

Answer 1

You are getting that error because selectedRegionTransform expects that you return a new IRegion object. This function allows you to intercept your current region selection and change it before it is rendered. In my case I have used it to convert a cell selection into a row selection.

selectedRegionTransform={(e) => {
    return {
        rows: e.rows
    }
}}

Note: you can also return cols to specify what columns you want to select.