react-data-table-component icon indicating copy to clipboard operation
react-data-table-component copied to clipboard

How to add pagination and Rows per page section to the top and bottom of the datatable?

Open ajithv11 opened this issue 1 year ago • 2 comments

I have added the following code , But the pagination section is showing only on bottom, Is there any alternate method to show pagination and Rows per page section to the top and bottom of the datatable?

         <DataTable
                        title="List Products"
                        columns={columns}
                        data={products.data}
                        customStyles={customStyles}
                        noDataComponent={
                            <div className="no-datatable alert alert-warning">
                                There is no Items to show.    
                            </div>
                        }
                        highlightOnHover
                        pagination
                        paginationPosition="top" // both bottom or both
                        paginationServer
                        paginationResetDefaultPage={resetPage}
                        paginationTotalRows={products.total}
                        paginationPerPage={perPage}
                        paginationRowsPerPageOptions={[25,50,100,250]}
                        paginationComponentOptions={{}}
                        onChangePage={page => {
                            setPage(page)
                        }}
                        onChangeRowsPerPage={page => {
                            setPage(1);
                            setPerpage(page)
                        }}
                    />

ajithv11 avatar Jan 03 '24 16:01 ajithv11

paginationPosition doesn't seem to be implemented yet or am I missing it? Hoping this feature gets implemented as many would prefer the pagination at the top or to have a "both" option would be ideal.

douglasc0leman avatar Mar 04 '24 20:03 douglasc0leman