Reacttable event


#1

Hi how i can implement in reacttable plugin an evento when row is clicked?
i like to use it to show a form or execute other actions!
i’m tryong this but with no success…
this.getReactWebJSXCode = function(exporter) {
return `<ReactTable
data={${this._dataVarName}}
columns={${this._columnsVarName}}
defaultPageSize={${this._data.defaultPageSize}}
filterable={true}
className={"-striped -highlight"}
getTrProps={(state, rowInfo) => {
return{
onClick:(e,handleOriginal)=>
{
{${exporter.getCallbackForInteractEvent(“valueChange”)}};
console.log(rowInfo);
}

	}
}}

/>
`;
}

this.reactWebInteractEventsForStudioUI = [
“valueChange”
];

this.describeReactWebInteractEvent = function (exporter, eventName) {
if (eventName == “valueChange”) {
return {
“actionMethod”: {
“arguments”: [“ev”],
“getDataExpression”: ““test””
}
};
}
}

regards Paolo


#2

Hi Paolo,

your code was almost correct :+1: I just made a few fixes based on your example:

this.getReactWebJSXCode = function(exporter) {
  return `<ReactTable
  data={${this._dataVarName}}
  columns={${this._columnsVarName}}
  defaultPageSize={${this._data.defaultPageSize}}
  getTrProps={(state, rowInfo) => {
    return {
      onClick:(e,handleOriginal) => {
        ${exporter.getCallbackForInteractEvent("valueChange")}(rowInfo);
        console.log(rowInfo);
      }
    }
  }}
  />
`;
}

this.reactWebInteractEventsForStudioUI = [
  "valueChange"
];

this.describeReactWebInteractEvent = function (exporter, eventName) {
  if (eventName == "valueChange") {
    return {
      "actionMethod": {
        "arguments": ["rowInfo"],
        "getDataExpression": "rowInfo.index"
      }
    };
  }
}

That will create ‘Save data to data slot’ interaction for the plugin.


#3

Hi tanks for your answer,
running your code i obtain

TypeError: null is not a function. (In ‘null(rowInfo)’, ‘null’ is null)
onClick
src/StartScreen.js:79
76 | getTrProps={(state, rowInfo) => {
77 | return {
78 | onClick:(e,handleOriginal) => {

79 | null(rowInfo);
| ^ 80 | console.log(rowInfo);
81 | }
82 | }

why???


#4

so works… with
return {
onClick: e => {

this.getReactWebJSXCode = function(exporter) {
var onValueChange = exporter.getCallbackForInteraction(‘valueChange’);
return `
<ReactTable
data={${this._dataVarName}}
columns={${this._columnsVarName}}
defaultPageSize={${this._data.defaultPageSize}}
filterable={true}
className={"-striped -highlight"}
getTrProps={(state, rowInfo) => {
return {
onClick: e => {
document.getElementById(“pp”).value =rowInfo.original.email;
${exporter.getCallbackForInteractEvent(“valueChange”)}(rowInfo);
},
style: {

				}
        }}
}

/>

`;
}

this.describeReactWebInteractEvent = function (exporter, valueChange) {
if (valueChange == “valueChange”) {
return {
“actionMethod”: {
“arguments”: [“rowInfo”],
“getDataExpression”: “rowInfo.index”
}
};
}
}


#5

Hi, please make sure you enable and assign proper values to the plugin’s Value Change event in React Studio’s Interact-tab.