Suitable and Responsive
I am starting with react and trying to set up handsontable in my react app like this react-handsontable
// import React...
import React from 'react';
import ReactDOM from 'react-dom';
// ... Handsontable with its main dependencies...
import moment from 'moment';
import numbro from 'numbro';
import pikaday from 'pikaday';
import Zeroclipboard from 'zeroclipboard';
import Handsontable from 'handsontable';
// ... and HotTable
import HotTable from 'react-handsontable';
class ExampleComponent extends React.Component {
constructor(props) {
super(props);
this.handsontableData = [
["", "Ford", "Volvo", "Toyota", "Honda"],
["2016", 10, 11, 12, 13],
["2017", 20, 11, 14, 13],
["2018", 30, 15, 12, 13]
];
}
render() {
return (
<div id="example-component">
<HotTable root="hot" data={this.handsontableData} colHeaders={true} rowHeaders={true} width="600" height="300" stretchH="all" />
</div>
);
}
}
Works so far, but how do I get the table instance like in pure javascript
var ht = new Handsontable(document.getElementById('example1'), options);
ht.setDataAtCell(0, 0, 'new value');
Thanks Tim
source to share
It's pretty simple to write your own react wrapper for convenience, and then you can link to your HOT instance. Here's some sample code for a React component:
componentWillReceiveProps({ gridSpec }) {
if (gridSpec) {
const {columns, colHeaders, data} = gridSpec;
const container = document.getElementById(GRID_ID);
this.hotInstance = new handsontable(container, {
columns,
colHeaders,
data,
height: 600
});
}
}
shouldComponentUpdate () {
return false;
}
render () {
return (
<div style={{overflowX: 'hidden', height: '600px'}}>
<div id={GRID_ID} />
</div>
)
}
source to share
If you are trying to access the main methods such as "setDataAtCell ()", you can use references to access them.
For example, add the "ref = 'xyz" attribute to an HTML element and you can call it with "this.refs.xyz". I've illustrated your example below. It adds a button that onClick triggers the "setDataAtCell" function.
// import React...
import React from 'react';
import ReactDOM from 'react-dom';
// ... Handsontable with its main dependencies...
import moment from 'moment';
import numbro from 'numbro';
import pikaday from 'pikaday';
import Zeroclipboard from 'zeroclipboard';
import Handsontable from 'handsontable';
// ... and HotTable
import HotTable from 'react-handsontable';
class ExampleComponent extends React.Component {
constructor(props) {
super(props);
this.handsontableData = [
["", "Ford", "Volvo", "Toyota", "Honda"],
["2016", 10, 11, 12, 13],
["2017", 20, 11, 14, 13],
["2018", 30, 15, 12, 13]
];
}
handleClick(e) {
this.refs.hot.hotInstance.setDataAtCell(0, 0, 'new value')
}
render() {
return (
<div id="example-component">
<HotTable root="hot"
data={this.handsontableData}
colHeaders={true}
rowHeaders={true}
width="600"
height="300"
stretchH="all"
ref="hot"
/>
<br/>
<button onClick={(e)=>this.handleClick(e)}>Click Me</button>
</div>
);
}
}
export default ExampleComponent
This method can be used to access other methods, such as "getData ()", which can be used to get a snapshot of the data in the table, which can be stored in a state or similar. Therefore it is longer than "ht", you can use "this.refs.hot.hotInstance" for a similar effect.
You can learn more about the ref attribute in Refs and DOM in the React documentation.
source to share
you have the data as an array defined in the constructor.
this.handsonetableData = [[First row],[second row]]
You can simply bind this data to the state and setState inside your component. It should be very simple.
this.state = {
table: [[first line], [second line]]
}
Finally, you can write your own method that updates the specific value of this array.
constructor (props) {
super(props)
this.state = {
table: [[first row], [second row]]
}
}
updateValueInTable (row, col, value)
checkIdontDoAnythingStupid()
let newTable = this.state.table
newTable[row][col] = value
this.setState({ table: newTable})
}
If you don't want to use state and use something like redux, you put logic in reducer and triggers in actions. And there you are!
Of course it's up to you how to properly manage your array, many libraries can help (lodash and co.)
source to share