npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@musicstory/react-bootstrap-table2-paginator

v1.0.1

Published

it's the pagination addon for react-bootstrap-table2 by musicstory

Downloads

88

Readme

react-bootstrap-table2-paginator

react-bootstrap-table2 separate the pagination code base to react-bootstrap-table2-paginator, so there's a little bit different when you use pagination. In the following, we are going to show you how to enable and configure the a pagination table

Live Demo For Pagination

API&Props Definitation


Install

$ npm install react-bootstrap-table2-paginator --save

Add CSS

// es5 
require('react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css');

// es6
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';

How

Let's enable a pagination on your table:

import paginationFactory from 'react-bootstrap-table2-paginator';
// omit...

<BootstrapTable keyField='id' data={ products } columns={ columns } pagination={ paginationFactory() } />

Customization

Basic Customization

react-bootstrap-table2 give some simple ways to customize something like text, styling etc, following is all the props we support for basic customization:

You can check this online demo for above props usage.

Advance Customization

Sometime, you may feel above props is not satisfied with your requirement, don't worry, we provide following renderer for each part of pagination:

Fully Customization

If you want to customize the pagination component completely, you may get interesting on following solutions:

  • Standalone
  • Non-standalone

react-bootstrap-table2-paginator have a PaginationProvider which is a react context and that will be easier to customize the pagination components under the scope of PaginationProvider. Let's introduce it step by step:

1. Import PaginationProvider

import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';

2. Declare custom and totalSize in pagination option:

const paginationOption = {
  custom: true,
  totalSize: products.length
};

3. Render PaginationProvider

<PaginationProvider
  pagination={ paginationFactory(options) }
>
  {
    ({
      paginationProps,
      paginationTableProps
    }) => (
      .....
    ) 
  }
</PaginationProvider>

PaginationProvider actually is a wrapper for the concumser of react context, so that now you have to get the props from context provide then render to your compoennt and BootstrapTable:

  • paginationProps: this include everything about pagination, you will use it when you render standalone component or your custom component.
  • paginationTableProps: you don't need to know about this, but you have to render this as props to BootstrapTable.

So far, your customization pagination is supposed to look like it:

<PaginationProvider
  pagination={ paginationFactory(options) }
>
  {
    ({
      paginationProps,
      paginationTableProps
    }) => (
      <div>
        <BootstrapTable
          keyField="id"
          data={ products }
          columns={ columns }
          { ...paginationTableProps }
        />
      </div>
    )
  }
</PaginationProvider>

Now, you have to choose which solution you like: standalone or non-standalone ?

4.1 Use Standalone Component

react-bootstrap-table2-paginator provider three standalone components:

  • Size Per Page Dropdwn Standalone
  • Pagination List Standalone
  • Pagination Total Standalone

When render each standalone, you just need to pass the paginationProps props to standalone component:

import paginationFactory, {
  PaginationProvider,
  PaginationListStandalone,
  SizePerPageDropdownStandalone,
  PaginationTotalStandalone
} from 'react-bootstrap-table2-paginator';

<PaginationProvider
  pagination={ paginationFactory(options) }
>
  {
    ({
      paginationProps,
      paginationTableProps
    }) => (
      <div>
        <SizePerPageDropdownStandalone
          { ...paginationProps }
        />
        <PaginationTotalStandalone
          { ...paginationProps }
        />
        <BootstrapTable
          keyField="id"
          data={ products }
          columns={ columns }
          { ...paginationTableProps }
        />
        <PaginationListStandalone
          { ...paginationProps }
        />
      </div>
    )
  }
</PaginationProvider>

That's it!! The benifit for using standalone is you can much easier to render the standalone component in any posistion. In the future, we will implement more featue like applying style, className etc on standalone components.

Customizable props for PaginationListStandalone
  • N/A
Customizable props for SizePerPageDropdownStandalone
  • open: true to make dropdown show.
  • hidden: true to hide the size per page dropdown.
  • btnContextual: Set the button contextual
  • variation: Variation for dropdown, available value is dropdown and dropup.
  • className: Custom the class on size per page dropdown
Customizable props for SizePerPageDropdownStandalone
  • N/A

4.2 Customization Everything

If you choose to custom the pagination component by yourself, the paginationProps will be important for you. Becasue you have to know for example how to change page or what's the current page etc. Hence, following is all the props in paginationProps object:

page,
sizePerPage,
pageStartIndex,
hidePageListOnlyOnePage,
hideSizePerPage,
alwaysShowAllBtns,
withFirstAndLast,
dataSize,
sizePerPageList,
paginationSize,
showTotal,
pageListRenderer,
pageButtonRenderer,
sizePerPageRenderer,
paginationTotalRenderer,
sizePerPageOptionRenderer,
firstPageText,
prePageText,
nextPageText,
lastPageText,
prePageTitle,
nextPageTitle,
firstPageTitle,
lastPageTitle,
onPageChange,
onSizePerPageChange,
disablePageTitle

In most of case, page, sizePerPage, onPageChange and onSizePerPageChange are most important things for developer.

  • page: Current page.
  • sizePerPage: Current size per page.
  • onPageChange: Call it when you nede to change page. This function accept one number argument which indicate the new page
  • onSizePerPageChange: Call it when you nede to change size per page. This function accept two number argument which indicate the new sizePerPage and new page

Here is a online example.