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

Controls

Pagination control button can be managed with prop controls, and default is set to true.

Live Editor

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

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

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

Result

Loading...

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	—
hasControls hasControls for pagination	boolean	true
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.