Handsontable not rendering properly?

Question

I was using React Handsontable for adding multiple rows,

import { HotTable } from '@handsontable/react';
import 'handsontable-pro/dist/handsontable.full.css';

In the render I was loading hotTable in collapse bootstrap panel

<div className="panel-group" id="accordion">
<div className="panel panel-default">
  <div className="panel-heading">
    <h4 className="panel-title">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
    </h4>
  </div>
  <div id="collapse1" className="panel-collapse collapse in">
    <div className="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  </div>
</div>
<div className="panel panel-default">
  <div className="panel-heading">
    <h4 className="panel-title">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
    </h4>
  </div>
  <div id="collapse2" className="panel-collapse collapse">
    <div className="panel-body">
          <div className="page-content">
               <div className="">
                  <div id="hot-app">
                    <HotTable root="hot" ref="hot" settings={this.state.settings} strechH="all" />
                  </div>
                </div>
            </div>

    </div>
  </div>
</div>

In the state i am maintaining the settings of the handsontable

this.state = {
  settings: {
            colHeaders:['Job Title', 'Name', 'Telephone','Fax','Handphone' , 'Email'],
            data: [{title:"", contactName:"", telephone: "", fax: "", handphone: "",  email: ""}],

           columns: [

                { data:"title"},
                { data: "contactName"},
                { data: "telephone"},
                { data:"fax"},
                { data:"handphone"},
                { data:"email"},

             ],

            minSpareRows: 1,
            contextMenu: true,
            rowHeaders:true,
            manualColumnResize: true,
            columnSorting: true,
            manualRowResize: true,
            manualRowMove: true,  
            manualColumnMove: true,
            colWidths: [150, 150, 100,150, 150, 150],


          },
}

.

Let me know intially on component render why it is not coming, DO i need to render anything before i was facing this problem i cannot able to resolve this, If i am using seperatly with handsontable alone its working fine, Anyone Please help me in rendering this.

Thanks in advance

Answer 1

Pretty common issue when a component is rendered inside display: none; container but its dimensions calculations are based on styles / visibility.

Use a callback from Bootstrap or other event (ie. MutationObserver ) to refresh Handsontable when it's visible again. An Angular (yeah, I know) example to show the idea: https://jsfiddle.net/xfzqtw3p/1/