Pagination

EPagination uses a numbering system to make it simple for users to browse a webpage. It divides a webpage into many pages, making it easier for viewers to locate what they're searching for. Demo Here

Import

import EPagination from "@components/Elements/EPagination";

Usage

const PaginationExample = () => {
  const [page, setPage] = useState(1);

  const handleChange = (event, value) => {
    setPage(value);
  };

  return <EPagination totalCount={5} value={page} onChange={handleChange} />;
};

export default PaginationExample;

Props

For EPagination component, the following props are available:

Prop	Type	Default	Note
value	Number	-	Current page state
totalCount	Number	5	Specifies pagination length.
disabled	Boolean	false	Disables the pagination buttons.
rounded	Boolean	false	It creates a circular pagination buttons.
square	Boolean	false	Removes rounded corners of the element.
className	String	-	Overrides or extends the component's wrapper styles.
siblingCount	Number	1	Specifies the number of sibling buttons when the limit is exceeded
size	String	"md"	The EPagination element has three predefined sizes: sm, md, lg.
customColor	String	-	A custom color in rgb format is applied to the btn (e.g, customColor="101, 89, 204").
align	String	"start"	Specifies how the pagination buttons are distributed along the cross axis in a container.
nextIcon	Object	-	Customizes the next icon of the pagination. More Info about icons here.
prevIcon	Object	-	Customizes the previous icon of the pagination. More Info about icons here.
color	String	"primary"	The given color is applied to the pagination buttons - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
variant	String	"fill"	Pagination buttons can be represented in two ways: fill, alternate, outline ,text. alternate displays the btn with a light background, outline draws a border around an element and text displays the btn with only text and no background color.

Callback Functions

The EPagination component contains following callback functions.

Function	Description
onChange	Prop that you pass to control the active page. function(event: React.SyntheticEvent, currentPage: Number) => void 👇 • event: The event source of the callback. • currentPage: current page value.