React Material-Table, How to bind data that is obtained remotely? - reactjs

Question

The question comes from a issue where I need data binding and save it to a reducer so I can use pusher to modify the data when needed and it changes in real-time. The problems I find are that:
I am new in react and I don't really know much about how to bind data variables.
I am using remote data with fetch so the data can be refreshed but it can't seem to find a way to properly bind or even save it to a reducer.
Below, the relevant code:
class MainTable extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<MaterialTable
tableRef={this.tableRef}
columns={columnsSetup}
options={materialTableOptions}
data={query =>
new Promise((resolve, reject) => {
pageQuery = query.page;
pageSizeQuery = query.pageSize;
let url = GET_ORDERS_URL;
url += 'qtt=' + pageSizeQuery;
url += '&page=' + pageQuery;
fetch(url)
.then(response => response.json())
.then(result => {
resolve({
data: result.data,
page: result.page,
totalCount: result.totalElems
});
});
})
}
/>
);
}
}

Answer 1

Data fetching should be done in one of the react lifecycle methods. These are build-in functions that will be called on specific "life" events of your component, for example when it gets mounted (componentDidMount).
You should read the docs thoroughly to really get the hang of it.
To give you an example of the implementation of a lifecycle method, I fixed your code below.
A couple of important, but also opinionated, subjects to look into are: lifecycle methods, state, Async/await (instead of promises), Components: classes and hooks.
class MainTable extends React.Component {
state = {
data: {}
};
componentDidMount() {
this.fetchData();
}
fetchData = async query => {
let url = `${GET_ORDERS_URL}qtt=${query.pageSize}&page=${query.page}`;
const response = await fetch(url);
const result = response.json();
this.setState({
data: {
data: result.data,
page: result.page,
totalCount: result.totalElems
}
});
};
render() {
return (
<MaterialTable
tableRef={this.tableRef}
columns={columnsSetup}
options={materialTableOptions}
data={this.state.data}
/>
);
}
}
Below is a functional component (exactly the same logic as above) that uses hooks:
import React, { useEffect, useState } from 'react';
function MainTable() {
const [data, setData] = useState({});
useEffect(() => {
const fetchData = async query => {
let url = `${GET_ORDERS_URL}qtt=${query.pageSize}&page=${query.page}`;
const response = await fetch(url);
const result = response.json();
setData({
data: result.data,
page: result.page,
totalCount: result.totalElems
});
};
fetchData();
}, [data]);
return (
<MaterialTable
columns={columnsSetup}
options={materialTableOptions}
data={data}
/>
);
}

Answer 2

Material-table is a fantastic out the box soloution for tables however, I don't particularity like the way the pagination is handled. I use await and async operators rather than promises and wanted my component to be responsible for managing the state rather than these promise methods that material-table wants you to provide. Material-table provide a way to completely override their pagination logic so this is what I did.
material-table's Pagination component appears to just be a wrapper Material UI's TablePagination component.
const [data,setData] = React.useState([])
const [pagination, setPagination] = React.useState({take: 20, page: 0})
const [count, setCount] = React.useState(0)
React.useEffect(() => {
async function fetch() {
var {result, count} = await someAsyncCallToServer()
setData(fetch)
setCount(count)
}
fetch()
}
,[pagination])
const handleChangePage = (event, newPage) => {
setPagination(old => ({...old, page: newPage}))
}
...
<MaterialTable
data={data}
...
components = {{
Pagination : props =>
<TablePagination
rowsPerPage={pagination.take}
onChangeRowsPerPage={take => setPagination(old=> ({...old, take}))}
page={pagination.page}
count={count}
onChangePage={handleChangePage}
/>
}}
/>