Vortex
Vortex

Reputation: 33

How to display an appropriate response on <MaterialTable> when the search returns no results?

I'm using in React the table from https://material-table.com/ But I'm running a data search on promise. If the search doesn't return any results, the table will be loaded forever... My idea is to show some message. How can I do this optimally?

 <MaterialTable
    title="Documents"
    columns={cols}
    data={query =>
    new Promise((resolve, reject) => {
        let url = global.url_base+'service'
        fetch(url, {
            method: 'POST',
            body: JSON.stringify({
                        search: query.search,
                        pageSize: query.pageSize,
                        page: (query.page + 1),
                        id: sessionStorage.getItem('id')
            }),
            headers: {
                    "Content-type": "application/json; charset=UTF-8"
            }
            })
        .then(response => response.json())
        .then(result => {
            resolve({
            data: result.data,
            page: result.page - 1,
            totalCount: result.total,
            })
        })
    })
    }
/>

Upvotes: 0

Views: 39

Answers (1)

k-wasilewski
k-wasilewski

Reputation: 4623

You should fetch your data someplace else, eg. in componentDidMount(), where you set it as a state variable. Then, in your MaterialTable just put data={(this.state.response) ? response : 'Your error message'} or, if this table doesn't consume string as data, just toggle rendering the whole MaterialTable and your error message.

Upvotes: 1

Related Questions