-
-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Redux with Remote Data #630
Comments
Can you share your table usage code, please? |
Table Code:
Reducer code:
|
What is data that you set to MT? Actually MT does not care you retrieve data from redux store or state. |
userListTableData: { |
you should give a data array or function that returns a promise. This is not proper way to give data to MT. Use |
Ok. When I give data this way data={userListTableData.data} retrieves the data, but does not get page and totalCount |
Yes. This means MT will manage pagination. |
but when I can't get totalCount or page i cannot print the size of the data 16-20 of TotalCount |
You must set totalCount. Pagination works according to totalCount |
I'm trying to ask you that. How should I give totalCount? Give an "TypeError: data.map is not a function" when I give the object I sent to the data in previous messages. |
data={query => |
When I give data like this:
It gives an ERROR: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of |
This is not data related error. Please check your imports |
I found the error. But the table should be empty first and then click on the button, then access the data and fill the table but the data in the table is not updated. |
Please check data in console. It should work. |
I checked the data coming right. But there is a continuous circularprogrees icon in the table. |
Sorry @ismaildervisoglu , I could not help you without code. Please check examples in documentation |
Table Container:
Table Component:
|
If you use remote data feature and change data manually, you should call onQueryChange function of table manually after data changes. Please check documentation examples of remote data feature. It has an example of tableRef usage. |
I understand the solution, but it is far to be simple. I believe that given the fact that redux is one of the most recommended architecture for react, the paging feature should be more "redux friendly". Actually the problem is exactly the same regarding to the editable feature that is 100% not "redux friendly". I can take care of this improvement if you want. |
Hi @paillave Any contribution is apprepriatable:). MT is controlled component for paging. If you want to make it uncontrolled you can override the paging component. |
I made a trick to handle pagination handling the TablePagination component, controlling manually the pagination on the state, but just for a temporary solution. As @paillave said, is not really redux-friendly. data={props.data}
components={{
Pagination: (componentProps) => <TablePagination
{...componentProps}
count={response.count}
page={page}
rowsPerPage={skip}
onChangePage={(evt, page) => {
let nextPage = page + 1
this.setState({page: nextPage})
props.doList({ order: 'created_at,DESC', limit: 10, offset: nextPage * skip })
}}
/>
}} |
As this may be the best material grid, I am trying to work on it to make it more redux friendly. |
@paillave any updates on this? |
Can anyone provide a good example for using MT with redux remote data? Me along many other people having trouble with that. |
Luckily my response header contains const getData = (query): Promise<QueryResult<ITodo>> => {
return new Promise((resolve, reject) => {
Promise.resolve(props.getEntities(query.page, query.pageSize)).then((data) => {
const temp: IResponseData<ITodo> = data as unknown as IResponseData<ITodo>; // hmm..
const axRes: AxiosResponse = temp.value;
const totalCount = Number(axRes.headers['x-total-count']);
resolve({
data: axRes.data,
page: query.page,
totalCount,
});
});
});
}; <MaterialTable
title=""
data={getData}
columns={[
... |
Try mine with Redux and hook base on @sebaranowski. It works for me. const getData = query => {
return new Promise((resolve, reject) => {
Promise.resolve(dispatch(fetchAllItems(query))
.then((data) => {
const TableData = data.payload.items.map(r => ({ ...r }))
const totalCount = data.payload.totalCount; // Or from x-total-count in header
resolve({
data: TableData,
page: query.page,
totalCount,
});
}))
});
}; |
in other pro
in other proyect I use this with thunk buttttt with sagas? i cant find a way |
Can you show where in documentation? I only see it being used as an action button but not onChangePage |
plz tell me about pegination in material table with firebase database (remote data) in react-hook redux |
I'm pulling data into the table using redux. It works seamlessly when I send the data directly without paging, but it does not
{
data: // your data array
page: // current page number
totalCount: // total page number
}
I get an error when I try to send it this way.
The text was updated successfully, but these errors were encountered: