Table does not load data until until I hover over something

[sebamed]

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]

Did you ever find the reason for this? I have pretty much the same problem.

[sebamed]

@petermag90 No, i haven't. After a little research, I started thinking that the problem is in ng2 completer or rxjs compat, since the problem is gone once I remove them from my deps. (but, the project was for learning purposes, so I just made myself hover over something every time I want to see the changes)

[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.

[nvmnghia]

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.

Could you explain your solution? In my case, the data isn't loaded at all, it shows No data found. However, after I click the add button, the data is displayed.

Edit: I did find out a parent component containing the table uses OnPush, however after removing it, only the initial data was loaded. I still have to manually add new data, or filter data,... to show the new data. Is there any way to force "refreshing" or "updating the table"? Thanks!

[ruslanguns]

In my case it fails when I use custom renderComponent. Hope we get a solution soon!

[ruslanguns]

In my case it fails when I use custom renderComponent. Hope we get a solution soon!

I fixed it by putting the onComponentInitFunction into the entryComponents (in the app.module)

[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.