Datatable: Text in search filter disregards after refresh co


Topic: Datatable: Text in search filter disregards after refresh comes

Kristóf Szőke asked 10 months ago

Expected behavior

When a refresh comes the filter should apply according what is specified in the search field.

Actual behavior

I write something in the search field and it is filtered as expected, but when a periodical asynchronous refresh comes the filtering is gone even though a text is still in the search field and the state of the datatable is not saved.

Resources (screenshots, code snippets etc.)

render() {
    let val = this.state;
    let date = this.state.date;
    if (date == null)
        date = "";
    let serviceRunning = "Service is running on " + this.state.host;
    let cssName = "pt-md-4 pl-md-3 text-success";
    if (this.state.invoked == null) {
        serviceRunning = "Connecting to service...";
        cssName = "pt-md-4 pl-md-3 text-warning";
    }
    if (this.state.error != null) {
        serviceRunning = this.state.error + " on host " + this.state.host;
        cssName = "pt-md-4 pl-md-3 text-danger";
    }
    return (
        <div className="service">
            <Header/>

            <table style={tableStyle}>
                <tbody>
                <tr>
                    <td>
                        <h3 className={cssName}>{serviceRunning}</h3>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h5 className={cssName}>{date}</h5>
                    </td>
                </tr>
                </tbody>
            </table>

            <MDBDataTable
                          className="pr-md-4 pl-md-4"
                          striped
                          bordered
                          searching={true}
                          responsive
                          theadColor="indigo"
                          theadTextWhite
                          paging={false}
                          data={val}
                          data-class-name="text-success"
                          options={this.options}
            />
        </div>
    );
}

}

And addition to this I've tried this option:

<MDBDataTable search={ value => console.log(value) } 

Seems that it doesn't work as expected. The value is not written in the console log.

Is there a proper way to fix this issue? Somehow to save the state of the datatable after refreshing the page?


Piotr Glejzer staff answered 10 months ago

Hi,

I'm afraid to say that but I checked the code of DataTable and we don't have 'async' function inside this component. You probably have to write your own to store data in local storage/cookies or some database.


Please insert min. 20 characters.