Hi!
So I’m having an issue combining the DataGrid element with the paginator element.
My app is set up to conditionally render either a list of items (styled as tiles) or a datagrid, depending on the value of a toggle. Both the list of items and the datagrid are bound to the same collection (containing Airtable data), as is a paginator element.
When the browser displays the item list (as tiles), clicking through pages in the paginator correctly cycles through records. However, when rendering the datagrid, clicking through pages only shows one record. If I toggle back to tile view, don’t change the page, and then toggle back to the datagrid view, then the datagrid shows all the expected records.
What might be causing this issue?
(I have a video screen recording of the issue but I don’t know how to attach it)
Any idea why this might be happening?
I’m experiencing the same issue.
I’m using Supabase as a backend. My collection is paginated.
I don’t know how to implement backend pagination with the new Datagrid component.
I used to accomplish it with the table component plus the paginator, but it doesn’t work in the same way.
The paginator component makes the datagrid display only one row. However, the built-in pagination of the Datagrid component does not show the second page either.
How can we implement backend pagination with the new Datagrid component?
It might be happening because the DataGrid isn’t refreshing or re-binding correctly when switching views between the tiles and the DataGrid. Since you’re using the same collection, try ensuring that when toggling between the views, the DataGrid is explicitly told to re-fetch or re-bind the data after the page change. You might also want to check if the paginator is being correctly reset or triggered when switching between the two views. If the DataGrid is relying on a page state, you may need to make sure that the page state is correctly initialized each time the view changes.
