Pagination - hide pagination if only one page

[benoj]

Is it possible to know how many pages are present from the layout? The reason this will be useful to me is so that I can not display the pagination component if there is only one page?

[dahlbyk]

PageDropdownContainer and LocalPlugin.PageDropdownContainer get maxPages from their corresponding maxPageSelectors.

You could add the same to either LayoutContainer, allowing a custom Layout to avoid rendering Pagination altogether, or PaginationContainer, allowing a custom Pagination component to return null if maxPages < 2.

[benoj]

Thanks! Got that working with the following code - pasting for anyone in the future looking for this:

LayoutContainer:

import Griddle, { selectors, utils as griddleUtils } from 'griddle-react';

const EnhancedLayoutContainer = OriginalComponent => compose(
    getContext({
        components: PropTypes.object,
    }),
    griddleUtils.connect(state => ({
        maxPages: selectors.maxPageSelector(state)
    })),
    mapProps(props => ({
        maxPages: props.maxPages,
        Table: props.components.Table,
        Pagination: props.components.Pagination,
        Filter: props.components.Filter
    }))
)(props => (
    <OriginalComponent
        {...props}
    />
))

Layout:

const Layout = (props) => {
    const { Table, Pagination, Filter, maxPages } = props
    if (maxPages > 1) {
        return (
            <div>
                <Filter />
                <Pagination />
                <Table />
            </div>
        );
    }

    return (
        <div>
            <Filter />
            <Table />
        </div>
    );

}

Cheers,

Ben

[dahlbyk]

For reference, you can simplify a bit:

const Layout = ({ Table, Pagination, Filter, maxPages }) => {
    <div>
        <Filter />
        {maxPages > 1 && <Pagination />}
        <Table />
    </div>
);

[sakalauskas]

If someone tries to hide pagination when there are no more pages and faces #767 issue, then you should just override PageDropdown component instead:

1. Get the latest component version from https://github.com/GriddleGriddle/Griddle/blob/master/src/components/PageDropdown.js and copy it.

2. In render() method you should add this snippet, which will not render pagination when we have less than 2 pages:

   if (maxPages < 2)
       return null;

3. Set your custom PageDropdown component

   <Griddle components={{PageDropdown: PageDropdown}} />