How can I display data from a server in a material-table? - node.js

Question

I use React js on the client side and Node js on the server side and I'm new.
On the client side, I use a button and a table (I use the material-table component)
export default function UserProfile() {
const handleClick = () => {
return axios({
method: "post",
url: "/searchResult",
data: { data }
});
};
return (
<div className="App">
<button onClick={handleClick}> search <button/>
<RemoteData />
</div>
);
}
And RemoteData ...
import MaterialTable from 'material-table';
class RemoteData extends React.Component {
render() {
return (
<MaterialTable
title=""
columns={[
{ title: 'Id', field: 'id' },
]}
data={query =>
new Promise((resolve, reject) => {
let url = '/searchResult1'
fetch(url)
.then(res => res.json())
.then(result => {
resolve({
data: result.data,
})
})
})
}
/>
)
}
}
export default RemoteData;
Clicking the button sends the data from the client to the server and is processed.(To save your time, I write part of the code).
And Server side...
method.post('/searchResult1', searchResult1);
searchResult1: (req, res) => {
let query = "SELECT id FROM `information` WHERE 1=1"
db.query(query, (err, result) => {
if (err) {
res.redirect('/');
}
console.log(result)
})
}
Here we display the 'result' without any problems.
My question is: how can I update and display the 'result' in the material-table with each click of the button?

Answer 1

In material-table documentation you have a section called Remote Data. There is an example with a Refresh button material-ui-table-remote
The code that may interest you:
class RefreshData extends React.Component {
constructor(props) {
super(props);
this.tableRef = React.createRef();
}
render() {
return (
<MaterialTable
title="Refresh Data Preview"
tableRef={this.tableRef}
columns={[
{
title: 'Avatar',
field: 'avatar',
render: rowData => (
<img
style={{ height: 36, borderRadius: '50%' }}
src={rowData.avatar}
/>
),
},
{ title: 'Id', field: 'id' },
{ title: 'First Name', field: 'first_name' },
{ title: 'Last Name', field: 'last_name' },
]}
data={query =>
new Promise((resolve, reject) => {
let url = 'https://reqres.in/api/users?'
url += 'per_page=' + query.pageSize
url += '&page=' + (query.page + 1)
fetch(url)
.then(response => response.json())
.then(result => {
resolve({
data: result.data,
page: result.page - 1,
totalCount: result.total,
})
})
})
}
actions={[
{
icon: 'refresh',
tooltip: 'Refresh Data',
isFreeAction: true,
onClick: () => this.tableRef.current && this.tableRef.current.onQueryChange(), // This line
}
]}
/>
)
}
}