I have a parent Node component and I want to change the data in the MaterialTable everytime the refresh state is change. To be more exact, I want to call the api which is getNodes everytime the refresh state is change and make the MaterialTable to be refresh.
const Node = () =>{
const [refresh,setRefresh] = useState(false);
const getNodes = (query) =>
new Promise((resolve, ) => {
let url_qp = "?";
url_qp += "per_page=" + query.pageSize;
url_qp += "&page=" + (query.page + 1);
url_qp += "&keyword=" + query.search.toUpperCase();
// console.log(query);
if (query.filters.length !== 0) {
let type_filter = query.filters[0].value.toUpperCase();
url_qp += "&type=" + type_filter;
}
let type = query.orderBy ? query.orderBy.field : "";
GetFilterNodes(url_qp)
.then((response) => {
resolve({
data: sortArray(response.data.nodes, type, query.orderDirection),
page: response.data.page - 1,
totalCount: response.data.total_count,
});
})
.catch(globalErrorHandler);
});
return (
<div>
<MaterialTable
title="Node List"
columns={columns}
data={getNodes}
options={{
actionsColumnIndex: -1,
pageSize: 10,
pageSizeOptions: [10, 20, 50, 100],
emptyRowsWhenPaging: false,
debounceInterval: 700,
filtering: true,
}}
actions={action}
/>
);
}