Pagination in material-table

Question

I have a page with some input fields for the user to type some search keywords, once the user clicks the submit button the backend will return 10 results at a time. What I want to achieve is to return the next 10 results when clicking the 'next page' icon at the bottom right of the table. I know there's "remote data" example to illustrate such use case but it by default will try to retrieve from the backend on page load while my page requires user input to start with, how do we customize the 'next page' icon's behavior so that it does not do the initial fetch?

--UPDATE--

Take the below code as an example, I have a couple of text fields and a submit button, only after user type some criterials (e.g. 15 in age field) and click submit button then it will initiate the first query to the backend, the query code in front-end is pretty much just normal https async request:

.... text fields .......
{/*submit button*/}
<div className="submit-button">
    <Button variant="contained" size="large" color="primary" className={classes.margin}
            disabled={submitButtonDisabled()} onClick={handleSubmitForm}>
        {hasMoreRecords ? 'Load More' : 'Submit'}
    </Button>
</div>
{/*es query result table*/}
<div className="s3-key-table">
    <MaterialTable
        columns={[
            {
                title: 'Case Number', field: 'caseNumber', width: '0px',
                render: rowData => <Link href='#' onClick={() => handleCdsCaseRetrieval(rowData.s3_key)}
                                         color='secondary'>{rowData.case_number}</Link>
            },
            {title: 'Account Id', field: 'account_id', width: '0px'},
            {title: 'Customer Id', field: 'customer_id', width: '0px'},
            {title: 'Status', field: 'status', width: '0px'},
            {title: 'Tenant', field: 'tenant', width: '0px'},
            {title: 'Business', field: 'business', width: '0px'},
            {title: 'Owner', field: 'owner', width: '0px'},
            {title: 'Created Date', field: 'created_date', width: '0px'},
            {title: 'Closed Date', field: 'closed_date', width: '0px'},
        ]}
        data={queryResult}
        title="Salesforce Cases"
        icons={tableIcons}
        options={{
            pageSize: 10,
            pageSizeOptions: [10]
        }}
    />
</div>

Are you able to add a working example or some code to your question? — ksav, Jan 05 '21 at 03:25
Have you tried this [solution](https://stackoverflow.com/questions/56214292/any-example-for-custom-pagination-in-material-table-and-reactjs)? I think that what you are looking for could be achieved by overriding the pagination component. — NicoE, Jan 05 '21 at 12:54

score 0 · Answer 1 · answered Jan 05 '21 at 03:32

0

The way I did it is using data-tables - hide all options on load. Then as the user types something the options would load.

answered Jan 05 '21 at 03:32

Dmitri K

634
6
13

Pagination in material-table

1 Answers1