Pagination

Use Pagination to show a long data divided into several pages.

Example

Live Editor

function paginationFunc() { const total = 26; return ( <> <Pagination total={total} defaultCurrent={1} onPageChange={(page) => console.log({ page })} dataSetSize="small" pageLabel="Page" totalItemsInfoLabel={`of ${total} items`} /> <Pagination total={total} defaultCurrent={1} defaultPageSize={10} pageSizeOptions={[ { value: '10', label: '10' }, { value: '20', label: '20' }, { value: '30', label: '30' }, { value: '40', label: '40' }, { value: '50', label: '50' } ]} onPageSizeChange={(pageSize) => console.log({ pageSize })} onPageChange={(page) => console.log({ page })} dataSetSize="large" pageLabel="Page" totalItemsInfoLabel={`of ${total} items`} itemsPerPageLabel="Items per page" /> </> ); }

function paginationFunc() {
  const total = 26;
  return (
    <>
      <Pagination
        total={total}
        defaultCurrent={1}
        onPageChange={(page) => console.log({ page })}
        dataSetSize="small"
        pageLabel="Page"
        totalItemsInfoLabel={`of ${total} items`}
      />

      <Pagination
        total={total}
        defaultCurrent={1}
        defaultPageSize={10}
        pageSizeOptions={[
          { value: '10', label: '10' },
          { value: '20', label: '20' },
          { value: '30', label: '30' },
          { value: '40', label: '40' },
          { value: '50', label: '50' }
        ]}
        onPageSizeChange={(pageSize) => console.log({ pageSize })}
        onPageChange={(page) => console.log({ page })}
        dataSetSize="large"
        pageLabel="Page"
        totalItemsInfoLabel={`of ${total} items`}
        itemsPerPageLabel="Items per page"
      />
    </>
  );
}

Result

Loading...

Usage Rules

Do:

• Use Pagination when you have a long list.

Don’t:

• Pass defaultCurrent a bigger number than last page number
• Pass defaultPageSize out of defined pages sizes (10, 20, 30, 40, 50)

Variants

DataSetSize

Pagination comes in two dataSetSize variants: small and large.

Use the large size when you have large amount of items that requires more pages.

Live Editor

<> <Pagination total={20} dataSetSize="small" /> <Pagination total={120} dataSetSize="large" /> </>

<>
  <Pagination total={20} dataSetSize="small" />

  <Pagination total={120} dataSetSize="large" />
</>

Result

Loading...

Total

The total count of items needed to be paginated.

Live Editor

<Pagination total={34} />

<Pagination total={34} />

Result

Loading...

Text Props

We have pageLabel and totalItemsInfoLabel as mandatory props.

Live Editor

<> <Pagination total={20} dataSetSize="small" pageLabel="Page" totalItemsInfoLabel={`of 20 items`} /> <Pagination total={120} dataSetSize="large" pageLabel="Page" totalItemsInfoLabel="of 120 items" itemsPerPageLabel="Items per page" /> </>

<>
  <Pagination
    total={20}
    dataSetSize="small"
    pageLabel="Page"
    totalItemsInfoLabel={`of 20 items`}
  />

  <Pagination
    total={120}
    dataSetSize="large"
    pageLabel="Page"
    totalItemsInfoLabel="of 120 items"
    itemsPerPageLabel="Items per page"
  />
</>

Result

Loading...

Props

Name	Type	Default
totalItemsInfoLabel * Total Items Info Label	string	—
pageLabel * Page Label	string	—
total * number of total items	number	—
dataSetSize Size of the pagination data set	"small" | "large"	"small"
defaultCurrent Default current page number	number	—
defaultPageSize Default page size	10 | 20 | 30 | 40 | 50	—
pageSizeOptions Available page size options	OptionType[]	"[ { value: '10', label: '10' }, { value: '20', label: '20' }, { value: '30', label: '30' }, { value: '40', label: '40' }, { value: '50', label: '50' } ]"
onPageChange Callback fired when the page is changed	((page: number) => void)	—
onPageSizeChange Callback fired when the page size is changed	((pageSize: string) => void)	—
menuPlacement Placement prop for dropdown	"auto" | "top" | "bottom"	"auto"
itemsPerPageLabel Items Per Page Label Text	string	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.