This is a very simple example of a ReactDataGrid component. I'm trying to get the selected row, but I am unsure of the syntax to get that out when calling my function.
I don't think this is the correct syntax to call, onSelectionChange to print out the selected row. What is the correct syntax? onSelectionChange={({ selected }) => this.onSelectionChange(selected)}
import React, { PropTypes, Component } from 'react';
import ReactDataGrid from 'react-data-grid';
class DataGridExample extends Component {
static propTypes = {
columns: PropTypes.array,
rows: PropTypes.array
};
constructor (props) {
super(props)
this.state = {
columns: [],
rows: []
}
this.rowGetter = this.rowGetter.bind(this);
}
componentDidMount() {
this.setState((prevState, props) => ({
rows: [
{key: 'd1', lname: 'Doe', quantity: 3},
{key: 'd2', lname: 'Simmons', quantity: 97},
{key: 'd3', lname: 'Walters', quantity: 6}
],
columns: [
{name: "Quantity", key: "quantity"},
{name: "Last Name", key: "lname"}
]
}));
}
rowGetter(i) {
return this.state.rows[i];
}
onSelectionChange = (selected) => {
console.log(`selected:${selected}`)
}
render() {
return (
<ReactDataGrid
columns={this.state.columns}
rowGetter={this.rowGetter}
rowsCount={this.state.rows.length}
minHeight={400}
onSelectionChange={({ selected }) => this.onSelectionChange(selected)}
/>);
}
}
export default DataGridExample;Found the answer. https://adazzle.github.io/react-data-grid/old/docs/ReactDataGrid#onrowclick
wrong param to use. do it this way. using param onRowClick, see documentation link for other params, you can also use onCellSelected
onSelectionChange = (sel) => {
this.setState({selected:sel});
console.log(`slected:${sel}`)
}
onCellSelected = (sel) => {
for (var k in sel) {
console.log(`k:${k}, ${sel[k]}`)
}
}
render() {
return (
<ReactDataGrid
columns={this.state.columns}
rowGetter={this.rowGetter}
rowsCount={this.state.rows.length}
minHeight={400}
onRowClick={this.onSelectionChange}
onCellSelected={this.onCellSelected}
}