Disable/Remove Pagination numbers from React Bootstrap Table

Question

I would like to remove all the numbers(1,2,...,n) from the pagination. I just want to display the Prev, First, Next and Last Buttons.

Here is the Table component created using the react-bootstrap-table.

An attached working example of code sandbox.

codesandbox

Table Component:

import React from "react";
import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
import { products } from "./products";

function Table() {
    const renderShowsTotal = (start, to, total) => {
        return (
            <p style={{ color: "blue" }}>
                From {start} to {to}, totals is {total}&nbsp;&nbsp;(its a
                customize text)
            </p>
        );
    };
    const options = {
        sizePerPageList: [
            {
                text: "5",
                value: 5
            },
            {
                text: "10",
                value: 10
            },
            {
                text: "All",
                value: products.length
            }
        ],
        sizePerPage: 10, // which size per page you want to locate as default
        // pageStartIndex: 0, // where to start counting the pages
        // paginationSize: 3,  // the pagination bar size.
        prePage: "Prev", // Previous page button text
        nextPage: "Next", // Next page button text
        firstPage: "First", // First page button text
        lastPage: "Last", // Last page button text
        paginationShowsTotal: renderShowsTotal(), // Accept bool or function
        paginationPosition: "bottom", // default is bottom, top and both is all available
        hideSizePerPage: true, // You can hide the dropdown for sizePerPage
        alwaysShowAllBtns: true // Always show next and previous button
        // withFirstAndLast: false // Hide the going to First and Last page button
    };
    return (
        <div className="react-bootstrap-table container mt-4">
            <h2>React Bootstrap Table with pagination</h2>
            <BootstrapTable data={products} pagination options={options}>
                <TableHeaderColumn dataField="id" isKey={true}>
                    Product ID
                </TableHeaderColumn>
                <TableHeaderColumn dataField="name">
                    Product Name
                </TableHeaderColumn>
                <TableHeaderColumn dataField="price">
                    Product Price
                </TableHeaderColumn>
            </BootstrapTable>
        </div>
    );
}

export default Table;

Thanks in advance.

Hi Kabeer, check my solution and let me know if that helps. – ravibagul91 Dec 27 '19 at 04:00 — ravibagul91, Dec 27 '19 at 04:00
It works. Thank you so much Ravi for your awesome trick. – kabeer rifaye Dec 27 '19 at 04:06 — kabeer rifaye, Dec 27 '19 at 04:06

ravibagul91 · Accepted Answer · 2019-12-27T04:05:25.707

2

You can apply this trick here.

Add paginationSize to your options

const options = {
  ...
  paginationSize : 1,
  ...
}

then apply CSS,

.page-item.active {
  display: none;
}

Demo

edited Dec 27 '19 at 04:05

answered Dec 27 '19 at 03:48

ravibagul91

20,072
5
36
59

How to show like this "Page 1 0f 3" using pagination in react-bootstrap-next – Shibu Nov 17 '20 at 11:45

Disable/Remove Pagination numbers from React Bootstrap Table

1 Answers1