# Pagination Pagination divides large datasets into manageable pages, allowing users to navigate through information efficiently. It enhances performance, readability, and user experience in lists, tables, and search results. here. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-pagination--introduction ## Variants documented in Storybook - Pagination Variants: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-pagination--pagination-variants - Pagination Dots Variants: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-pagination--pagination-dots-variants ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Pagination. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Components

Pagination

Pagination divides large datasets into manageable pages, allowing users to navigate through information efficiently. It enhances performance, readability, and user experience in lists, tables, and search results. here.

Pagination Left

...
Showing
token more_horiz keyboard_arrow_down
of 15000 items

Pagination Center

...
Showing
token more_horiz keyboard_arrow_down
of 15000 items

Pagination Right

...
Showing
token more_horiz keyboard_arrow_down
of 15000 items

Pagination Dots

CSS Class Reference

Utility classes for pagination layout and container styling.

Structure

Main Container ux4g-pagination-wrapper
Page Numbers List ux4g-pagination
Page Size Selector Group ux4g-page-size
Select Control Wrapper ux4g-page-size-select-wrapper
Standard Demo Wrapper ux4g-border ux4g-border-neutral-emphasis ux4g-bg-primary-subtle ux4g-radius-l ux4g-mb-l ux4g-relative

Visual Utilities

Border ux4g-border
Neutral Emphasis Border ux4g-border-neutral-emphasis
Primary Subtle Background ux4g-bg-primary-subtle
Large Radius ux4g-radius-l
Large Margin Bottom ux4g-mb-l
Relative Positioning ux4g-relative
``` React: ```jsx import React from 'react'; const PaginationExample1Demo = () => ( <>
Components

Pagination

Pagination divides large datasets into manageable pages, allowing users to navigate through information efficiently. It enhances performance, readability, and user experience in lists, tables, and search results. here.

Pagination Left

...
Showing
token more_horiz keyboard_arrow_down
of 15000 items

Pagination Center

...
Showing
token more_horiz keyboard_arrow_down
of 15000 items

Pagination Right

...
Showing
token more_horiz keyboard_arrow_down
of 15000 items

Pagination Dots

CSS Class Reference

Utility classes for pagination layout and container styling.

{/* Structural Classes */}

Structure

Main Container ux4g-pagination-wrapper
Page Numbers List ux4g-pagination
Page Size Selector Group ux4g-page-size
Select Control Wrapper ux4g-page-size-select-wrapper
Standard Demo Wrapper ux4g-border ux4g-border-neutral-emphasis ux4g-bg-primary-subtle ux4g-radius-l ux4g-mb-l ux4g-relative
{/* Visual Utility Classes */}

Visual Utilities

Border ux4g-border
Neutral Emphasis Border ux4g-border-neutral-emphasis
Primary Subtle Background ux4g-bg-primary-subtle
Large Radius ux4g-radius-l
Large Margin Bottom ux4g-mb-l
Relative Positioning ux4g-relative
); export default PaginationExample1Demo; ``` Angular: ```html
Components

Pagination

Pagination divides large datasets into manageable pages, allowing users to navigate through information efficiently. It enhances performance, readability, and user experience in lists, tables, and search results. here.

Pagination Left

...
Showing
token more_horiz keyboard_arrow_down
of 15000 items

Pagination Center

...
Showing
token more_horiz keyboard_arrow_down
of 15000 items

Pagination Right

...
Showing
token more_horiz keyboard_arrow_down
of 15000 items

Pagination Dots

CSS Class Reference

Utility classes for pagination layout and container styling.

Structure

Main Container ux4g-pagination-wrapper
Page Numbers List ux4g-pagination
Page Size Selector Group ux4g-page-size
Select Control Wrapper ux4g-page-size-select-wrapper
Standard Demo Wrapper ux4g-border ux4g-border-neutral-emphasis ux4g-bg-primary-subtle ux4g-radius-l ux4g-mb-l ux4g-relative

Visual Utilities

Border ux4g-border
Neutral Emphasis Border ux4g-border-neutral-emphasis
Primary Subtle Background ux4g-bg-primary-subtle
Large Radius ux4g-radius-l
Large Margin Bottom ux4g-mb-l
Relative Positioning ux4g-relative
``` ### 2. Pagination Dots Variants — Pagination Doted With Controller HTML: ```html
``` React: ```jsx import React from 'react'; const PaginationExample2Demo = () => ( <> {/* Variant: Pagination Dots - With Controller */}
); export default PaginationExample2Demo; ``` Angular: ```html
``` ### 3. Pagination Dots Variants — Pagination Doted Solid HTML: ```html
``` React: ```jsx import React from 'react'; const PaginationExample3Demo = () => ( <> {/* Variant: Pagination Dots - Solid With Controller */}
); export default PaginationExample3Demo; ``` Angular: ```html
``` ### 4. Pagination Dots Variants — Pagination Doted Translucent HTML: ```html
``` React: ```jsx import React from 'react'; const PaginationExample4Demo = () => ( <> {/* Variant: Pagination Dots - Translucent With Controller */}
); export default PaginationExample4Demo; ``` Angular: ```html
``` ### 5. Pagination Dots Variants — Pagination Doted Without Controller HTML: ```html
``` React: ```jsx import React from 'react'; const PaginationExample5Demo = () => ( <> {/* Variant: Pagination Dots - Without Controller */}
); export default PaginationExample5Demo; ``` Angular: ```html
``` ### 6. Pagination Dots Variants — Pagination Doted Solid Without Controller HTML: ```html
``` React: ```jsx import React from 'react'; const PaginationExample6Demo = () => ( <> {/* Variant: Pagination Dots - Solid Without Controller */}
); export default PaginationExample6Demo; ``` Angular: ```html
``` ### 7. Pagination Dots Variants — Pagination Doted Translucent Without Controller HTML: ```html
``` React: ```jsx import React from 'react'; const PaginationExample7Demo = () => ( <> {/* Variant: Pagination Dots - Translucent Without Controller */}
); export default PaginationExample7Demo; ``` Angular: ```html
``` ### 8. Pagination Dots Variants — Pagination Doted HTML: ```html
``` React: ```jsx import React from 'react'; const PaginationExample8Demo = () => ( <> {/* Variant: Pagination Dots - Flex Layout */}
); export default PaginationExample8Demo; ``` Angular: ```html
``` ### 9. Pagination Dots Variants — Pagination Doted Solid HTML: ```html
``` React: ```jsx import React from 'react'; const PaginationExample9Demo = () => ( <> {/* Variant: Pagination Dots - Flex Solid Layout */}
); export default PaginationExample9Demo; ``` Angular: ```html
``` ### 10. Pagination Dots Variants — Pagination Doted Translucent HTML: ```html
``` React: ```jsx import React from 'react'; const PaginationExample10Demo = () => ( <> {/* Variant: Pagination Dots - Flex Translucent Layout */}
); export default PaginationExample10Demo; ``` Angular: ```html
``` ### 11. Pagination Variants — Pagination Left HTML: ```html
...
Showing
token more_horiz keyboard_arrow_down
of 15000 items
``` React: ```jsx import React from 'react'; const PaginationExample11Demo = () => ( <> {/* Variant: Pagination - Left Aligned */}
...
Showing
token more_horiz keyboard_arrow_down
of 15000 items
); export default PaginationExample11Demo; ``` Angular: ```html
...
Showing
token more_horiz keyboard_arrow_down
of 15000 items
``` ### 12. Pagination Variants — Pagination Center HTML: ```html
...
Showing
token more_horiz keyboard_arrow_down
of 15000 items
``` React: ```jsx import React from 'react'; const PaginationExample12Demo = () => ( <> {/* Variant: Pagination - Center Aligned */}
...
Showing
token more_horiz keyboard_arrow_down
of 15000 items
); export default PaginationExample12Demo; ``` Angular: ```html
...
Showing
token more_horiz keyboard_arrow_down
of 15000 items
``` ### 13. Pagination Variants — Pagination Right HTML: ```html
...
Showing
token more_horiz keyboard_arrow_down
of 15000 items
``` React: ```jsx import React from 'react'; const PaginationExample13Demo = () => ( <> {/* Variant: Pagination - Right Aligned */}
...
Showing
token more_horiz keyboard_arrow_down
of 15000 items
); export default PaginationExample13Demo; ``` Angular: ```html
...
Showing
token more_horiz keyboard_arrow_down
of 15000 items
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.