Cannot use pageListRenderer with PaginationListStandalone

I would like to use a custom page list as a standalone component so that I can change the order of the pagination list and total.

However, when I use a custom page list, while it does appear to pass my pageListRenderer in the props, the custom page list is not rendered when used as a standalone component. Instead, the table renders the default page list.

Here are some code snippets.

As a side note, I have my pageListRender in a separate file for re-use in other places. I have tried using it within the same file as the table, but this doesn’t have any impact.

PageListRenderer.js: (nothing fancy here, just copying and pasting the example from Storybook to illustrate the issue)

const PageListRenderer = ({ pages, onPageChange }) => {
  const pageWithoutIndication = pages.filter(p => typeof p.page !== "string");
  return (
    <div>
      {pageWithoutIndication.map(p => (
        <button
          className="btn btn-success"
          onClick={() => onPageChange(p.page)}
        >
          {p.page}
        </button>
      ))}
    </div>
  );
};

export default PageListRenderer;

SampleTable.js:

import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory, {
  PaginationProvider,
  PaginationTotalStandalone,
  PaginationListStandalone
} from "react-bootstrap-table2-paginator";
import PageListRenderer from "./PageListRenderer";
import { rows, columns } from "../data/data.js";

class SampleTable extends PureComponent {
  render() {
    const options = {
      sizePerPage: 1,
      pageListRenderer: props => PageListRenderer({ ...props }),
      custom: true,
      totalSize: rows && rows.length
    };

    const pagination = paginationFactory(options);

    return (
      <PaginationProvider pagination={pagination}>
        {({ paginationProps, paginationTableProps }) => (
          <div>
            <PaginationTotalStandalone {...paginationProps} />
            <BootstrapTable
              keyField="id"
              data={rows}
              columns={columns}
              {...paginationTableProps}
            />
            <PaginationListStandalone {...paginationProps} />
          </div>
        )}
      </PaginationProvider>
    );
  }
}

export default SampleTable;

App.js:

import "./App.css";
import SampleTable from "./components/SampleTable.js";

function App() {
  return (
    <div className="container">
      <SampleTable />
    </div>
  );
}

export default App;

Expected:

Actual:

Thanks for your time!

[lham]

@vhbert I ended up creating my own component replacing the <PageListRenderer> following the code in the library. I’ll just make a code dump and hopefully you can replicate it in a way you want 😃

Here is the component

import React from 'react';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import standaloneAdapter from 'react-bootstrap-table2-paginator/lib/src/standalone-adapter';
import PaginationHandler from 'react-bootstrap-table2-paginator/lib/src/pagination-handler';
import paginationListAdapter from 'react-bootstrap-table2-paginator/lib/src/pagination-list-adapter';

const ButtonGroupPaginationListComponent = ({ pages, onPageChange, pageButtonRenderer }) => {
    if (_.isEmpty(pages)) {
        return null;
    }

    const onClick = (page) => {
        if (!page.active && !page.disabled) {
            onPageChange(page.page)
        }
    };

    return (
        <ButtonGroup>
            {pages.map(page => pageButtonRenderer(page, () => onClick(page)))}
        </ButtonGroup>
    )
};

const ButtonGroupPaginationList = standaloneAdapter(PaginationHandler(paginationListAdapter(ButtonGroupPaginationListComponent)));

export default ButtonGroupPaginationList;

which I then use like this:

<PaginationProvider pagination={paginationFactory(paginationOptions)}>
    {paginationProviderProps => (
        <ButtonGroupPaginationList {...paginationProviderProps.paginationProps} />
    )}
</PaginationProvider>

[vhbert]

Thanks for the very quick answer, your solution works like a charm. I’ll just have to write some more typings for it since I am using TypeScript.

Thanks again for your help