Open Sureshkumar041 opened 1 month ago
Pagination drop-down (onItemsPerPageChange) not working inside modal (working fine in screen)
Pagination drop-down (onItemsPerPageChange) need to open drop down options when click on (onItemsPerPageChange)
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} />
Pagination dropdown working fine inside screen , but not working inside modal popup. Both has same code (same component)
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