Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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

Kristóf Szőke free asked 5 years 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 5 years 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.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.18.1
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No