Material-table: Help to understand how update totalCount using remote connection outside the table

[orestes22]

Hello,
I understand how to updated totalCount using your example Remote.

But let me ask> There is another way to access to totalCount? or page, etc , because I manage my API request outside of table, and only update the Array of object I passed to data={myData}
so if my database have 1000 element and only want pass 10 element per page, in my actual case the totalCount is always 10 because it obtain the dimension of the element in data.

Thanks in advatage for your time for take time y answer me,
This is a good table !!!

Best Regards

[mbrn]

Hi @orestes22 ,

Why do you manage you api request outside of table?

If you want to manage pagination you can override the pagination component like this:

<MaterialTable
                components={{
                  Pagination: props => <TablePagination {...props} count={1000} page={7} onChangePage={(e, page) => { /* handle page changes */ }} onChangeRowsPerPage={(event) => { /* handle page size change : event.target.value */}}/>
                }}
....
              />

You should call props.onChangeRowsPerPage(event) in your own onChangeRowsPerPage implementation. Or table datamanager will cut the data array according to original page size.

With this implementation we only change some pagination behaviour of MaterialTable. By this way, you can override many behaviour of other components such as header, body, row, cell and so on.

[orestes22]

TablePagination ?

[orestes22]

import from ?

[mbrn]

import from ?

import { TablePagination } from '@material-ui/core';

[orestes22]

Works !!
But, How I override the "Next PAge" button the event onClick, ?
Sorry, if Im asking dummy question and Im taking to much time from you

[orestes22]

I want use all the footer buttons

[mbrn]

You already did it. All of them call onChangePage function with different values. So pagination component has only 2 event.

1. page number change
2. page size change

[orestes22]

yes, Im wrote wrong my last idea, thanks for your faster answer.

I will work by my side, an try to find the solutions of my new doubt by my own. I will let you know.

Thanks again !!!

[mbrn]

So we can close this issue:)

[orestes22]

Hi, For some reason when I click the button Previous Page the onChangePage dont reduce a page it add another page, for example if Im in page 2, and I clicked Previous Page button then onChangePage give me page 4, and Im waiting page 1.
Do you have any comment it could help me?

Thanks for your time and Best Regards

[orestes22]

I finded how to resolve it. Thanks

[orestes22]

But, I can resolve the case when I change the Number of Row per page, the Table dont show all the values, only show 5, but in data it receiving 10.
How I can render again the Material Table and show all the element inside the data?

components={{
Pagination: props => (
{...props}
rowsPerPageOptions={[5, 10, 20, 30]}
rowsPerPage={this.state.numberRowPerPage}
count={this.state.totalRow}
page={firstLoad?this.state.pageNumber:this.state.pageNumber - 1}
onChangePage={(e, page) =>
this.handleChangePage(
page + 1,

                        )
                      }
                      onChangeRowsPerPage={event => {
                        this.handleChangeRowPerPage(

                          event.target.value
                        );
                      }}
                    />
                  )
                }}

[orestes22]

I tried with pageSize in option but I can change it after it appear first time.

[mbrn]

You should set rowsPerPage to 10. Can you check it?

[orestes22]

Yes, I did, check my code before. Im doing this:
rowsPerPage={this.state.numberRowPerPage}
And that state I set it, with the value of onChangeRowsPerPage

[orestes22]

I found a patch with PageSize option, .....It only show the element I have in my array that I sent in data={my Array} , if the quantity of element are < or = to PageSize
BUT I cant change PageSize after the first time

[mbrn]

Hi @orestes22 ,

You should call props.onChangeRowsPerPage(event) in your own onChangeRowsPerPage implementation. Or table datamanager will cut the data array according to original page size.

Can you check here please?

[orestes22]

Please, Could you give an example of how I can do that?

[orestes22]

This is what you mean? :

onChangeRowsPerPage={event => {
props.onChangeRowsPerPage(event)
this.handleChangeRowPerPage(event.target.value);
}}

[mbrn]

This is what you mean? :

onChangeRowsPerPage={event => {
props.onChangeRowsPerPage(event)
this.handleChangeRowPerPage(event.target.value);
}}

Yes. did you try with this?

[orestes22]

Yes, I did, and it is working. Thanks for the advice.
I thought you will saying me more deep code.

Last thing, if the data only have 12 element, and the user select 20 Rows Per Page, how I can avoid that appear empty space. ?
Do you have better solutions that control the selection in "rowsPerPageOptions" ?

[mbrn]

:) Just add emptyRowsWhenPaging: false to options of table

[orestes22]

LOL !!!!! WDF
:D
Thanks!!

For give me If I disturb you to much!!!

[mbrn]

No problem @orestes22

[MuddyBootsCode]

@mbrn Is there a way to auto enable this? So that table size just automatically increases when data is added?