[DataGrid] server side pagination not working

[wilmveel]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Second page not loading

Expected Behavior 🤔

Pagination should work correct

Steps to Reproduce 🕹

https://material-ui.com/components/data-grid/pagination/#server-side-pagination

Steps:

1. Click next page

[oliviertassinari]

It was broken in #412.

[oliviertassinari]

Here is a failing test case that we would need to add to avoid regressions:

describe('pagination', () => {
  it('should support server side pagination', () => {
    const ServerPaginationGrid = () => {
      const [page, setPage] = React.useState(1);
      const [rows, setRows] = React.useState<typeof defaultProps['rows']>([]);

      const handlePageChange = (params) => {
        setPage(params.page);
      };

      React.useEffect(() => {
        let active = true;

        (async () => {
          const newRows = [
            {
              id: page,
              brand: `Nike ${page}`,
            },
          ];

          if (!active) {
            return;
          }

          setRows(newRows);
        })();

        return () => {
          active = false;
        };
      }, [page]);

      return (
        <div style={{ height: 300, width: 300 }}>
          <DataGrid
            {...defaultProps}
            rows={rows}
            pagination
            pageSize={1}
            rowCount={3}
            paginationMode="server"
            onPageChange={handlePageChange}
          />
        </div>
      );
    };

    render(<ServerPaginationGrid />);
    expect(getColumnValues()).to.deep.equal(['Nike 1']);
    fireEvent.click(screen.getByRole('button', { name: /next page/i }));
    expect(getColumnValues()).to.deep.equal(['Nike 2']);
  });
});

[janderson215]

Hi Olivier,

Firstly, thanks to you and the maintainers for this wonderful library.

I'm also having this issue. Is there a way to override the functionality temporarily as a workaround? I made a new component using DataGrid, but had to rework using MaterialTable because of the server-side pagination issue. I'm not able to get what I want using MaterialTable because I want to be able to search certain fields from a separate form, but I can't use a function for a remote data source AND data that is otherwise saved in the state via custom fetch function. No bueno.

Thanks for any guidance you're able to offer.
Jon

Edit: DUH, my temporary solution is yarn add @material-ui/data-grid@4.0.0-alpha.8
Edit 2: Looks like the joke is on me again. alpha.8 has it's own set of issues. I'm going to use Table Sorting since DataGrid is still in alpha. This is probably my fault, but I did not notice that DataGrid was still in alpha until after I tried to rollback to alpha.8. I don't see it documented anywhere and only noticed because I looked at my package.json

[oliviertassinari]

alpha.8 has it's own set of issues

@janderson215 Which issue did you face?

I did not notice that DataGrid was still in alpha

Maybe we should move the component under the lab navigation in the documentation? cc @dtassone, @mbrookes

[janderson215]

alpha.8 has it's own set of issues

@janderson215 Which issue did you face?

Don't want to take this issue off-topic, but here's a description:
My external search form works properly to filter the results, but when I clear my search parameters to show the unfiltered results(limited to 10 results), the previous first result is prepended to the unfiltered rows, and, despite the state reflecting only 10 rows, I can see 11 rows. This is repeatable.

I feel my language is not clear, so here are the steps I follow and the outcome of these steps:
Default state: first 10 ordered by ID asc

1. Search by ID from external form: result correctly shows 1 row
2. Clear the filter: 11 rows now showing with the first row being the previous result
3. Search by the same ID: now I see 2 rows
4. Clear the filter: 12 rows now showing
5. So on and so forth…

[oliviertassinari]

@janderson215 Ok thanks

[samrudhsshetty]

Installing @material-ui/data-grid@4.0.0-alpha.8 did not resolve the server side pagination for me. Is there any work around?.

[janderson215]

Did you stop running your web app and do another yarn/npm start? I’ve found that I need to do that pretty often after changes in the dependencies. It seems like it should not be the case, but I know that it is for my setup.

…

On Nov 18, 2020, at 7:47 AM, samrudh ***@***.***> wrote:  Installing @***@***.*** did not resolve the server side pagination for me. Is there any work around?. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[samrudhsshetty]

Hey @janderson215 I did try those steps, along with clearing cache and removing and installing node modules again - but it did not work. I will use a different table library. Thanks.

[visheshd]

Since this is a paid product ... wanted to check if there is an ETA on this fix? ... Being able to load the second page is going to be a pretty obvious step for all users

[oliviertassinari]

@visheshd Mind that the feature is part of the MIT DataGrid component. Contributions from the community are welcome too :)

[jodinathan]

I am new to material-ui and react altogether and lost 2 hours already thinking I was doing something wrong.
It is probably a good idea to remove data-grid from the official website until this is fixed.

[mbrookes]

Maybe we should move the component under the lab navigation in the documentation?

Yes