CODEWITHSUNDEEP
reactjsdatatablenpmfixed-data-table
Kyas
Kyas

Reputation: 39

Fixed Data Tables function onRowClick not returning row Data

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>
);
}

Upvotes: 1

Views: 4072

Answers (1)

C S
C S

Reputation: 1535

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]
  );
}

Upvotes: 4

Related Questions