Pagination

The Pagination component enables the user to select a specific page from a range of pages.

<Pagination totalRecord={1000} onChange={console.log} itemsPerPage={20} />

Props

Prop	Type	Default	Description
totalRecord	number	1	The total number of records.
rowsPerPage	boolean	false	If the value is true then rows per page will be displayed.
onChange	Func		Callback fired when the page is changed.
onItemsPerPageChange	Func		Callback fired when the rowsPerPage is changed.
page	number	1	The current page.
menuProps	object		Props applied to the Menu dropdown
itemsPerPageOptions	Array<number>		The values provided in the array will be displayed as options to select pagination rows per page.
itemsPerPage	number	1	This value is used to calculate to display number of records per page.

Examples

RowsPerPage

() => {
  const [itemsPerPage, setItemsPerPage] = React.useState(20);
  const onChange = (value) => {
    console.log(value)
    setItemsPerPage(value)
  }
  return (
    <Pagination
    rowsPerPage
    menuProps={{value: 'rows per page'}} 
    totalRecord={100}
    itemsPerPageOptions={[20, 30, 40]}
    itemsPerPage={itemsPerPage}
    onChange={console.log}
    onItemsPerPageChange={onChange}
    />
  );
};