Admin-on-rest - Place pagination at top

Question

I have defined a custom pagination component for a list view, but how do I place this pagination at the top of the list? Optimally, it should appear above the list content and below the filters.

Answer 1

It should be just as simple as placing the pagination component above the list in HTML output of ReactDOM.render(). For example, this is the implementation of pagination using react and bootstrap (different to react-bootstrap), this is placed above the table that it paginates.

{pages.length > 0 && <nav className="d-lg-flex justify-content-lg-end dataTables_paginate paging_simple_numbers">
            <ul className="pagination">
                <li className={"page-item " + (page === 0?"disabled":"")} onClick={(s)=>{
                    s.preventDefault();
                    setPage(Math.max(page-1,0));
                }}><a className="page-link" href="#" aria-label="Previous"><span
                    aria-hidden="true">«</span></a></li>
                {pages.map((el)=><li key={"page" + el.page} onClick={(e)=>{
                    setPage(el.page);
                }} className={"page-item "+(page===el.page?"active":"")}>
                <a className="page-link" href="#">
                    {el.name}
                </a></li>)}
                <li className={"page-item " + (page === pages.length-1?"disabled":"")} onClick={(e)=>{
                    setPage(Math.min(page+1,pages.length-1));
                }}><a className="page-link" href="#" aria-label="Next">
                <span
                    aria-hidden="true">»</span></a></li>
            </ul>
            </nav>}

(pages.length is defined previously in the react script)