docs: add Grid Pagination chapter and examples #4274
Conversation
AI Language ReviewThere are no issues that require improvement in the provided content. |
| private final TextField searchField = new TextField(); | ||
|
|
||
| // tag::snippet[] | ||
| private final DataProvider<Person, Void> dataProvider = DataProvider.fromCallbacks(query -> { |
There was a problem hiding this comment.
I would use fromFilteringCallbacks instead
private final CallbackDataProvider<Person, String> pagingDataProvider = DataProvider
.fromFilteringCallbacks(query -> {
|
|
||
| var offset = paginationControls.calculateOffset(); | ||
| var limit = paginationControls.getPageSize(); | ||
|
|
There was a problem hiding this comment.
// Update total item count here to avoid calling
// dataSource.count twice
paginationControls.update(itemCount);
| grid.addColumn(Person::getProfession).setHeader("Profession"); | ||
|
|
||
| grid.setAllRowsVisible(true); // this will prevent scrolling in the grid | ||
| grid.setDataProvider(dataProvider); |
There was a problem hiding this comment.
var dataProvider = pagingDataProvider.withConfigurableFilter();
grid.setDataProvider(dataProvider);
| grid.setAllRowsVisible(true); // this will prevent scrolling in the grid | ||
| grid.setDataProvider(dataProvider); | ||
|
|
||
| paginationControls.update(dataSource.count(searchField.getValue())); |
There was a problem hiding this comment.
paginationControls.update can be removed here when dataprovider did the update
| searchField.setPlaceholder("Search"); | ||
| searchField.setPrefixComponent(new Icon(VaadinIcon.SEARCH)); | ||
| searchField.setValueChangeMode(ValueChangeMode.EAGER); | ||
| searchField.addValueChangeListener(e -> { |
There was a problem hiding this comment.
Remove
paginationControls.update(dataSource.count(searchField.getValue()));
grid.getDataProvider().refreshAll();
And instead
// setFilter will refresh the data provider and trigger data
// provider fetch / count queries
dataProvider.setFilter(e.getValue());
…and pageSize state to the parent component
| const pageCount = calculatePageCount(totalItemCount, pageSize.value); | ||
|
|
||
| useEffect(() => { | ||
| // Adjust the current page if it exceeds the new page count as a side effect of the total item count changing. | ||
| if (currentPage.value > pageCount) { | ||
| onCurrentPageChanged(pageCount); | ||
| } | ||
| }, [totalItemCount]); |
There was a problem hiding this comment.
Consider also changing totalItemCount to Signal<number>
Then you could use useComputed for pageCount e.g. like this:
const pageCount = useComputed<number>(() => {
if (totalItemCount.value === 0) {
return 1; // Display one page even if there are no items
}
return Math.ceil(totalItemCount.value / pageSize.value);
});It might require some additional changes but it feels like signals should be used consistently.
Added a chapter to the Grid documentation about the differences between Infinite Scrolling and Pagination.
Added pros and cons for both.
Also added Pagination implementation example in Flow, Lit and React. At the end the text is not that long, so I've decided to not add a new tab for this topic, but rather place it under Lazy Loading chapter