Filter + MobX - MeteorJS

[josefheld]

Hi,

I have the following situation:
My container loads data from Meteor backend via a Meteor handleTableChange. When the data arrives I set it to an observed variable. This causes the table to be updated.
My problem is, that the value in the filter box is removed and it is unknown to the user what filter is used.
To get back to the original list, the user can only reload the whole page...

The examples in the story book use setState. But that is irrelevant for my case... My issue also appears when using setState.

What I am wondering is, that as soon as I type a letter, the function handleTableChange is called. I assumed it should only be called after pressing ENTER.

Here's my function handleTableChange:

handleTableChange = (type, {page, sizePerPage, filters, sortField, sortOrder, cellEdit}) => {
        this.loading = true;  // @observable loading = true;
        if (type === 'filter' || type === 'sort' || type === 'pagination') {
            Meteor.call('contractors.loadList', type, page, sizePerPage, filters, sortField, sortOrder, cellEdit, (err, res) => {
                if (res) {
                    this.data = res.data; //  @observable data = [];
                    this.listProps = res;  // @observable listProps = { page: 1, sizePerPage: 10, totalSize: 0 };
                }
                this.loading = false;
            });
        }
    };

The server loads data from database, does the sorting, filtering and paginating of the result set.

I hope you can give me some guidance where or if I am doing something wrong.

Thank you,
Josef

[AllenFang]

@josefheld text filter have a debounce(delay), it configure 500ms, so if user type faster, it should not call handleTableChange in every typing. You can configure the delay via filter.delay if you feel it is too short.

My problem is, that the value in the filter box is removed and it is unknown to the user what filter is used.
To get back to the original list, the user can only reload the whole page...

Sorry, I can get you for above description. Could you please explain again? Thanks

[josefheld]

Hello Allen,
first of all, thank you for responding.
I have sent you a link to my app via email, because I don't like to publish the app in its current state.

You will see a list of clients. When you enter a name in the filter box the new - filtered results - appear but the text in the filter box is gone.
Comparing to the storybox example this value should stay.

I hope this does make my problem clearer. 😃

Thank you,
Josef

[AllenFang]

@josefheld OK, I got you. Could you please share what version (react-bootstrap-table-next and react-bootstrap-table2-filter) u used now? Do u use react-bootstrap-table2-overlay?

Last one question is how u re-render the table? thanks

[josefheld]

Hello Allen,

I have these packages installed and use *-next, *-filter, *-overlay and *-paginator on my tables at the moment

"react-bootstrap-table-next": "^1.1.1",
"react-bootstrap-table2-editor": "^1.0.0",
"react-bootstrap-table2-filter": "^1.0.0",
"react-bootstrap-table2-overlay": "^1.0.0",
"react-bootstrap-table2-paginator": "^1.0.1",
"react-bootstrap-table2-toolkit": "^1.0.1",

The table is rerendered when new data arrives. This is how it is coded:

render() {
const {keyField, data, defaultSorted, columns, 
       onTableChange, pagination, loading} = this.props;
return (
<div>
<BootstrapTable
    remote={{filter: true, sort: true, pagination: true}}
    keyField={keyField}
    bootstrap4={true}
    data={data}
    defaultSorted={defaultSorted}
    columns={columns}
    onTableChange={onTableChange}
    pagination={pagination}
    filter={filterFactory()}
    striped  hover condensed
    noDataIndication={noDataIndication}
    loading={ loading }
    overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
/>
</div>);
}

Thank you and best regards,
Josef

[josefheld]

sorry... closing it was unintentional...

[AllenFang]

@josefheld try don't to use overlay.(react-bootstrap-table2-overlay )

[josefheld]

yes, that solved it. Thank you.
But why?

[AllenFang]

#360

It's a known issue but little hard to fixed, so currently, I will suggest to do not use react-bootstrap-table2-overlay particular in remote mode, instead you can custom the overlay via noDataIndication

Following is just a live demo.

I will try to fixed this issue if I can. Thank