Pagination

React Bootstrap Data Grid implements pagination of data in a controlled manner. In particular, the pagination feature being implemented in a controlled manner implies that state values, such as the page size and the index of current page being displayed, are stored in a parent component of the Grid rather than the Grid component itself.

Pagination is optional and can be enabled by passing a pagination prop to the Grid component.

Specifications for each member of the `pagination` prop
Property name	Type definition	Required/Optional	Description
pageSizeOptions	number[]	Required	List of options for the number of rows to display per page. The Grid component will list the options in a dropdown menu that the user can use to adjust the setting. Example: `[5, 10, 25]`
pageSizeIndex	number	Required	The currently selected page size option based on the index of the array `pageSizeOptions`. For example, if `pageSizeOptions` is `[5, 10, 25]` and `pageSizeIndex` is `0`, the page size would be 5.
setPageSizeIndex	(index: number) => void	Required	Callback function to set the page size index. When the user selects an option in the dropdown menu for selecting page sizes, the Grid component will call this function.
pageNum	number	Required	The (one-based) current page number to be displayed on the grid. For example, if the page size is 10 and there are 30 rows in the grid, a `pageNum` of 1 would have the grid display the first 10 rows of data.
setPageNum	(index: number) => void	Required	Callback function to set the current page of data to display. When the user interacts with the pagination component to select a new page, the Grid component will call this function.
maxPageButtons	number	Required	The maximum number of buttons associated with numerical page indices to display on the pagination component. For example, if the page size is 10 and there are 50 rows of data, there are 5 total pages of data. The Grid could potentially display a button for each of these 5 pages. If one were to set a `maxPageButtons` setting that is smaller than the total number of pages, such as 3, then only that many buttons will displayed. Note that this setting has no effect on whether to display the buttons that point to the first, last, next, and previous pages. These buttons are always displayed if appropriate.
componentSize	"small" \| "medium" \| "large"	Optional	Size of the pagination component based on CSS classes provided by Bootstrap. Set `small` for `pagination-sm` or `large` for `pagination-lg`. Set `medium` or do not set the property for no additional CSS class, which will result in size between that of the `pagination-sm` and `pagination-lg` sizes.

Example

Code


"use client"

import Grid, { ColDef, GridPaginationState, RowDef } from "@/grid";
import { FC, useState } from "react";

const cols: ColDef[] = [
  {
    type: "string",
    name: "name",
    label: "Name"
  },
  {
    type: "number",
    name: "class",
    label: "Armor Class"
  },
  {
    type: "string",
    name: "weight",
    label: "Weight"
  }
]

const rows: RowDef[] = [
  {
    name: "Leather Armor",
    class: 11,
    weight: "Light"
  },
  {
    name: "Padded Armor",
    class: 11,
    weight: "Light"
  },
  {
    name: "Studded Leather Armor",
    class: 12,
    weight: "Light"
  },
  {
    name: "Hide Armor",
    class: 12,
    weight: "Medium"
  },
  {
    name: "Chain Shirt",
    class: 13,
    weight: "Medium"
  },
  {
    name: "Scale Mail",
    class: 14,
    weight: "Medium"
  },
  {
    name: "Breastplate",
    class: 14,
    weight: "Medium"
  },
  {
    name: "Half Plate",
    class: 15,
    weight: "Medium"
  },
  {
    name: "Ring Mail",
    class: 14,
    weight: "Heavy"
  },
  {
    name: "Chain Mail",
    class: 16,
    weight: "Heavy"
  },
  {
    name: "Splint Armor",
    class: 17,
    weight: "Heavy"
  },
  {
    name: "Plate Armor",
    class: 18,
    weight: "Heavy"
  }
]

const SamplePaginatedGrid: FC = () => {
  const [pageSizeIndex, setPageSizeIndex] = useState(0)
  const [pageNum, setPageNum] = useState(1)

  const paginationState: GridPaginationState = {
    pageSizeOptions: [5, 10, 15],
    pageSizeIndex: pageSizeIndex,
    setPageSizeIndex: (pageSizeIndex) => setPageSizeIndex(pageSizeIndex),
    currentPage: pageNum,
    setCurrentPage: (pageNum) => setPageNum(pageNum),
    maxPageButtons: 5,
    componentSize: "large"
  }

  return (
    <section>
      <Grid rows={rows} cols={cols} pagination={paginationState} />
    </section>
  )
}

export default SamplePaginatedGrid

Live Demo

Name	Armor Class	Weight
Leather Armor	11	Light
Padded Armor	11	Light
Studded Leather Armor	12	Light
Hide Armor	12	Medium
Chain Shirt	13	Medium