Current behaviour
Pagination drop-down (onItemsPerPageChange) not working inside modal (working fine in screen)
Expected behaviour
Pagination drop-down (onItemsPerPageChange) need to open drop down options when click on (onItemsPerPageChange)
How to
reproduce?
const itemPerPage = 5,totalRecords = 25 (but it depends on data coming from backend)
const [page,setPage] = useState(1);
<DataTable.Pagination
style={styles.rowJusCen}
page={page === 1 ? 0 : page - 1}
numberOfPages={
itemPerPage === "All"
? 0
: Math.ceil(totalRecords / itemPerPage) === 1
? 0
: Math.ceil(totalRecords / itemPerPage)
}
onPageChange={(p: number) => {
setPage(p >= page ? p + 1 : p === 0 ? 1 : p);
}}
numberOfItemsPerPageList={[ "All", 5, 10, 25, 50,]}
numberOfItemsPerPage={5}
onItemsPerPageChange={setItemPerPage}
showFastPaginationControls
dropdownItemRippleColor={colors?.colors?.activeOption}
/>
Preview
Pagination dropdown working fine inside screen , but not working inside modal popup.
Both has same code (same component)
Your Environment
| software |
version |
| react-native |
0.72.6 |
| react-native-paper |
5.12.3 |
| node |
20.11.1 |
| npm |
10.2.4 |
Current behaviour
Pagination drop-down (onItemsPerPageChange) not working inside modal (working fine in screen)
Expected behaviour
Pagination drop-down (onItemsPerPageChange) need to open drop down options when click on (onItemsPerPageChange)
How to
const itemPerPage = 5,totalRecords = 25 (but it depends on data coming from backend)
const [page,setPage] = useState(1);
<DataTable.Pagination
style={styles.rowJusCen}
page={page === 1 ? 0 : page - 1}
numberOfPages={
itemPerPage === "All"
? 0
: Math.ceil(totalRecords / itemPerPage) === 1
? 0
: Math.ceil(totalRecords / itemPerPage)
}
onPageChange={(p: number) => {
setPage(p >= page ? p + 1 : p === 0 ? 1 : p);
}}
numberOfItemsPerPageList={[ "All", 5, 10, 25, 50,]}
numberOfItemsPerPage={5}
onItemsPerPageChange={setItemPerPage}
showFastPaginationControls
dropdownItemRippleColor={colors?.colors?.activeOption}
/>
Preview
Pagination dropdown working fine inside screen , but not working inside modal popup.
Both has same code (same component)
Your Environment