Table does not load data until until I hover over something

Here is a video showing the problem:

Table won’t load data if I don’t hover over menu on the left. Data is fetched correctly. Strange behaviour right? Removing spinner does not help. Here are my settings, and the way I’m fetching data:

TABLE_SETTINGS_SUBJECT = {
        add: {
            addButtonContent: '<i class="nb-plus"></i>',
            createButtonContent: '<i class="nb-checkmark"></i>',
            cancelButtonContent: '<i class="nb-close"></i>',
            confirmCreate: true
        },
        edit: {
            editButtonContent: '<i class="nb-edit"></i>',
            saveButtonContent: '<i class="nb-checkmark"></i>',
            cancelButtonContent: '<i class="nb-close"></i>',
            confirmSave: true
        },
        actions: {
            delete: false
        },
        columns: {
            id: {
                title: 'ID',
                editable: false,
                creatable: false
            },
            name: {
                title: 'Name'
            }
        }
    };

Data fetching:

this._subject.getAllSubjects().subscribe((data: ISubject[]) => {
            this.subjects = data;
            this.dataSource.load(this.subjects);
            this.dataSource.reset();
            this.data_loading = false;
        },

Using latest ng2 smart table version, with ng2 completer and rxjs-compat for resolving issues with deprecation

Any suggestions?

[petermag90]

Thank you for taking your time. I realise now that my problem is related to changedetection. I was using the table inside a component with OnPush changedetection. Turning that off makes my scenario work. I must say that I am not completely comfortable with that changedetectionstrategy, but i am trying to use it as much as I can, but sometimes i stumble inte problems i do not fully understand. So the change itself did not trigger the changedetection, but when i hovered in the table the change was detected.

[victorwvieira]

Recently I had an experience using a smart-table component that some rows/data in the table just appears when the mouse hovers over the table or happens other interaction on the screen.

After investing some time in debugging I found the problem that create this strange behaviour. I’m using custom components and I developed some rules inside of these custom components, every time that these rules broke, the table stops loading the data and stay with this “hover” behaviour.

Solving the broken code inside of each custom component solved my problem and stopped this strange behaviour.

The broken code was a variable, type: number, using a string function like .toLowerCase() function.