Fixed Data Tables function onRowClick not returning row Data

Question

Here is the Table Class, Im trying to return the row data object onRowClick in the Table options. when i log all three arguments the object returns empty. the index and click event console.log perfectly fine returning this here is the event: Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent, _dispatchInstances: ReactDOMComponent, nativeEvent: MouseEvent, type: "click"…} the index: 0 the object: Object {}Anybody know why or how to get the data returned? Perhaps use a different function?

class BPTable extends React.Component {
constructor(props) {
super(props);
    // console.log(props.result);
}

logArgs(event,index,object){
console.log('here is the event:',event,'the index:',index, 'the object:',object);
}

render() {
//reset the state of BP Data on search click. 
this.state = {
  bpTableData: [
  ],
};
//creation of each data object to display
for (var i = 0; i < this.props.result.length; i++) {
    this.state.bpTableData.push({
        cc: this.props.result[i]['CardCode'],
        name: this.props.result[i]['BPName'],
        cPerson: this.props.result[i]['ContactPerson'],
        address: this.props.result[i]['Address'],
        email: this.props.result[i]['Email']
    });
}

return (
    <Table 
        onRowClick={this.logArgs}
        rowsCount={this.state.bpTableData.length}
        rowHeight={50}
        headerHeight={50}
        width={1200}
        height={1000}
        {...this.props}>
    <Column 
      header={<Cell>Card Code</Cell>}
      cell={props => (
        <Cell {...props}
        data={this.state.bpTableData[props.rowIndex].cc}>
          {this.state.bpTableData[props.rowIndex].cc}
        </Cell>

      )}
      width={200}
    />        
    <Column
      header={<Cell>Buisness Name</Cell>}
      cell={props => (
        <Cell {...props}
          data = {this.state.bpTableData[props.rowIndex].name}
        >
          {this.state.bpTableData[props.rowIndex].name}
        </Cell>

      )}
      width={200}
    /> 
    <Column
      header={<Cell>Contact Person</Cell>}
      cell={props => (
        <Cell {...props}>
          {this.state.bpTableData[props.rowIndex].cPerson}
        </Cell>

      )}
      width={200}
    />                
    <Column
      header={<Cell>Address</Cell>}
      cell={props => (
        <Cell {...props}>
          {this.state.bpTableData[props.rowIndex].address}
        </Cell>

      )}
      width={400}
    />        
    <Column
      header={<Cell>Email</Cell>}
      cell={props => (
        <Cell {...props}>
          {this.state.bpTableData[props.rowIndex].email}
        </Cell>

      )}
      width={100}
    />
  </Table>
);
}

Seems your `logArgs` thing is not bound to component's context. Simply try changing `logArgs(event,index,object){` to `logArgs = (event, index, object) => {` or bind explictly in `constructor` ( `this.logArgs = this.logArgs.bind(this)` right after your `super`) — Ilya Lopukhin, Aug 25 '16 at 17:13
`onRowClick={function(event,index,object){ console.log('here is the event:',event,'the index:',index, 'the object:',object); }}` returns the same thing. I changed the constructor like this `constructor(props) { super(props); this.logArgs = this.logArgs.bind(this) // console.log(props.result); }` And it still isnt working. — Kyas, Aug 25 '16 at 17:17
what do you expect to return from the event? What should be inside that object? ( also nevermind my prev comment, i got you wrong at the first time) — Ilya Lopukhin, Aug 25 '16 at 17:25
Im exiecting the data row information. I want to click on the row. and return three things: the event, the row index and the data in the row. theo nly thing missing is the data. it returns an empty object. Say i have a row that has a first and last name. onRowClick should return `{firstname: Kyas, lastname: Fletcher}` — Kyas, Aug 25 '16 at 17:47

score 4 · Answer 1 · answered Aug 30 '16 at 13:25

It looks like onRowClick only has args: event, index. I got around this by using the index to access the appropriate table data I had created as part of the state.

In your case, it would be:

logArgs(event,index){
  console.log( 'here is the event:',event,
               'the index:',index,
               'the object:',this.state.bpTableData[index]
  );
}

Fixed Data Tables function onRowClick not returning row Data

1 Answers1