Reputation: 33
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
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