How to reference handsontable instance from a different file?

Tags: #<Tag:0x00007f8b1cfc60d0>
#1

I am using handsontable in my react component like the following:

class SchTable extends Component {
constructor(props) {
super(props);
this.hotSettings = scheduleTableSettings; //scheduleTableSettings is set and import from another file
this.hotTableComponent = React.createRef();
this.id = ‘hot’;
}
render() {
if(this.hotTableComponent.current) {
var hotInstance = this.hotTableComponent.current.hotInstance
hotInstance.addHook(‘afterOnCellMouseDown’, function(event, coords, td){

            let thisBlockObject = selectedSchedule.scheduleObject[coords.row];

            const metaDataObject = thisBlockObject.blockRaceMetaData
            if(metaDataObject) {
                $('#Season').val(metaDataObject.season);
                $('#Type').val(metaDataObject.Type);
                $('#Level').val(metaDataObject.level);
                $('#IRT').val(metaDataObject.IRT);
                $('#Group').val(metaDataObject.group);
                $('#Heat').val(metaDataObject.heat);
            }
        })   
    }
    return (
        <div>
            <HotTable 
                id={this.id}
                ref={this.hotTableComponent}
                data={selectedSchedule}
                settings={this.hotSettings}
            />
        </div>
    )
}

};

Am i using the hooks correctly by having it right before returning the JSX?
I also want to reference this handsontable from a different javascript file, how can i do that? For example, i have an onClick button in another react component that wants to grab all the data from this handsontable, how can the other react component reference this HotTable in this component in order to get all the data thats in this table? Thank you!

#2

Hey @jenny

here https://codepen.io/anon/pen/OjyEXg?editors=0010 is an example of a hook use and a reference to a hotInstance.

#3

Hey Aleksandra, thanks for your response. I just looked over the example on codepen and it doesn’t see to have what i am looking for. Maybe i need to further explain what i am looking for.

The following code is in a non react component.
I am grabbing the element with the id ‘EventProductionNotesContainer’ that is located in a react component.

> var createEventProductionNotesContainer = document.getElementById('EventProductionNotesContainer');
> var editableEventProduction = new Handsontable(createEventProductionNotesContainer, { //Code omitted for abbreviation })

In a different react component, i want to access all the data in “editableEventProduction” instance, how can i do that?

#4

Hey Jenny,

sorry for keeping you waiting. I need to consult this subject with ur developer.

He prepared a demo that you may find useful https://codepen.io/handsoncode/pen/JqMXZa?editors=1010

#5

Thanks, Aleksandra.

I think the demo it’s a good way of getting to where i want to go.

I changed the code body of the onClick function in the Button Component to the following:

handleClick = () => {
var hotInstance = this.hotTableComponent.current.hotInstance;
var exportPlugin = hotInstance.getPlugin(‘exportFile’);
return exportPlugin.downloadFile(‘csv’, {filename: ‘Exported CSV File’});
}

I want the button to export the data from the Handsontable in ExampleComponent, but when referencing this.hotTableComponent in the handClick function it was giving me the following error:

TypeError: Cannot read property ‘hotInstance’ of null

How do i solve that issue without having to place the button in the ExampleComponent?

Thank you for your help!

#6

One more thing, and if i wanted to export data into a CSV file in ExampleComponent, how would i do that? thanks!

#7

Hey @jenny

here’s a demo for export to file using React https://codepen.io/anon/pen/wLwPRY?editors=0010
Does it meet your requirements?

#8