Handsontable in a tab using Angular not rendered properly

Getting help Issues
1

I’m using handsontable inside a tab but only shows half of i it, i need to click on it to show the whole table, any help please?

<tab heading="Table" style=" transition-delay: 10ms; width: 100%; height:100%" >

                    <div class="card-main">

                         <div class="container-fluid px-1 py-1">

   

                            <div class="row">

                            <div class="form-group col-sm-6">

                               

                                    <hot-table style="margin-left: 40%;" [afterChange]="detectChanges" [settings]="tableSettings"  [hotId]="id" [data]="dataset">

                                    </hot-table>

                                </div>

   

                            </div>

                        </div>

                     </div>  

                </tab>
2

Hi @kotlins89

We would need to ask for a working demo, or video reproduction.

3

CaptureHandson
CaptureHandson476×236 923 Bytes

When i go to the Table tab, it only shows this part of the table when i click on the table (gray square over here) it renders the whole table.

4

Thank you for the image.

Could you check if adding

setTimeot(function(){
  instance.render()
})

to the event of clicking the Table tab solves the issue?

5

Hey @aleksandra_budnik I’m using angular with typescript.
This is my .html

<tab heading=“Table” (click)=“onTable()”>

                <div class="card-main">

                     <div class="container-fluid px-1 py-1">



                        <div class="row">

                        <div class="form-group col-sm-6">

                                <hot-table  class="hot" [afterChange]="detectChanges" [settings]="tableSettings"  [hotId]="id" [data]="dataset" >

                                </hot-table>

                            </div>



                        </div>

                    </div>

                 </div>  

            </tab>

This is the .ts

import { Component, OnInit } from '@angular/core';

import { FormGroup,FormBuilder,Validators } from '@angular/forms';

import { ContextMenu } from 'handsontable/plugins/contextMenu';

import {ThemePalette} from '@angular/material/core';

import { HotTableRegisterer, HOT_DESTROYED_WARNING } from '@handsontable/angular';

@Component({

  selector: 'app-shipment',

  templateUrl: './shipment.component.html',

  styleUrls: ['./shipment.component.css'],

})

export class shipmentComponent implements OnInit {

  color: ThemePalette = 'accent';

  checked = false;

  disabled = false;

  private hotRegisterer = new HotTableRegisterer();

  id = 'hotInstance';

  dataset: any[] ;

tableSettings: any = {

    data:[],

    maxRows: 22,

    rowHeaders: true,

    startRows: 1,

    startCols: 1,

    contextMenu : true,

    height: 800,

    width: 'auto',

    preventOverflow: 'horizontal',

    minSpareRows: 1,

    columns: [

      {

        data: ' product name',

        type: 'text',

        width: 300,

        height: 300

      },

      {

        data: 'manafacturer date',

        type: 'date',

        width: 100,

        height: 100

      }

    ],

    colHeaders: [' product name', 'manafacturer date'],

    licenseKey: 'non-commercial-and-evaluation',

    success: function (data) {

      console.log("data loaded");

      console.log(data)

      }

  };

onTable(){

    var hot = this.hotRegisterer.getInstance(this.id);

    hot.render();

  }

}
6

OK, so please try to use

onTable(){
    var hot = this.hotRegisterer.getInstance(this.id);
    setTimeot(function(){
        hot.render()
    }, 100)
}

instead of

onTable(){
    var hot = this.hotRegisterer.getInstance(this.id);
    hot.render();
}

and if that will not help we can try with the selection, and that would be

onTable(){
    var hot = this.hotRegisterer.getInstance(this.id);
    setTimeot(function(){
        hot.selectCell(0,0)
    }, 100)
}
1 Like