Using getData within the afterChange Hook

#1

Hi there,

I just started using Handsontable and I’m trying to use getData() within the afterChange hook so that I can retrieve the data from the table whenever a cell is updated. Problem is that I keep getting “this.getData is not a function”. I also tried within the afterRender hook and I still get the same result. I am using the React wrapper and the my component code is below.

Any help would be much appreciated!

class myTable extends Component {
	constructor(props) {
		super(props);
		this.tableSettings = {
			data: [
				[5, null, null, 5, null, null, 7, null, null, 7, null, null],
				[5.5, null, null, 5.5, null, null, 7.5, null, null, 7.5, null, null],
				[6, null, null, 6, null, null, 8, null, null, 8, null, null],
				[6.5, null, null, 6.5, null, null, 8.5, null, null, 8.5, null, null],
				[5, null, null, 5, null, null, 7, null, null, 7, null, null],
				[5.5, null, null, 5.5, null, null, 7.5, null, null, 7.5, null, null],
				[6, null, null, 6, null, null, 8, null, null, 8, null, null],
				[6.5, null, null, 6.5, null, null, 8.5, null, null, 8.5, null, null]
			],
			afterChange: () => {
				console.log(this.getData());
			},
			colHeaders: true,
			rowHeaders: true,
			colWidths: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
			rowHeights: [50, 50, 50, 50, 50, 50, 50, 50],
			className: 'htCenter htMiddle',
			cells: setCellRules,
			mergeCells
		};
	}

	render() {
		return (
			<Fragment>
				<HotTable id="myTable" settings={this.tableSettings} />
			</Fragment>
		);
	}
}

export default myTable;
#2

Also tried to pass it in as a prop to the HotTable component and I still get error “_this2.getData is not a function”

render() {
		return (
			<Fragment>
				<HotTable
					ref={this.phTable}
					id="pHLayout"
					settings={this.tableSettings}
					afterChange={() => console.log(this.getData())}
				/>
			</Fragment>
		);
	}
#3

For some reason though, this works…

document.addEventListener("DOMContentLoaded", function() {

  function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2011, price_usd: 7000, price_eur: 7000},
      {car: "Citroen C4 Coupe", year: 2012, price_usd: 8330, price_eur: 8330},
      {car: "Audi A4 Avant", year: 2013, price_usd: 33900, price_eur: 33900},
      {car: "Opel Astra", year: 2014, price_usd: 5000, price_eur: 5000},
      {car: "BMW 320i Coupe", year: 2015, price_usd: 30500, price_eur: 30500}
    ];
  }
  
  var
    container = document.getElementById('example1'),
    hot;
  
  hot = new Handsontable(container, {
    data: getCarData(),
    colHeaders: true,
    afterChange: function(r,c){
    	var data = this.getData();
      console.log(data)
    }
  });
});
#4

Just kidding, I figured it out. Issue was the lexical scoping with arrow functions vs regular functions

#5

That’s a quick update. I’m glad that you’ve figured it out :slight_smile:
I guess that we can close the issue

1 Like
#6