Gravity
  • Welcome to Gravity
  • Getting Started
  • Stack
  • Updates
  • Rules For AI
  • Troubleshooting
  • Gravity Server
    • Introduction
    • Installation
      • Install Node.js
      • Database Setup
      • Stripe Setup
      • Mailgun Setup
      • Install Gravity
    • Application Structure
    • REST API
      • API Scopes
      • Webhooks
    • Authentication
      • Email Verification
      • Social Sign On
      • Two-Factor Authentication
    • Authorization
      • Feature Access and Plan Restrictions
      • Permissions (Roles)
    • Config
    • Environment Variables
    • Database Queries
    • Handling Errors
    • Logging
    • Localization
    • Push Notifications
    • Email Notifications
    • User Feedback
    • User Onboarding
    • File Uploads
    • Billing
      • Seat Billing
      • Usage Billing
    • Free Accounts
    • CLI Toolbelt
    • Testing
    • AI Tools
    • Background Jobs
    • Deployment
  • Gravity Web
    • Introduction
    • Tailwind & SCSS
    • Routing
    • Events
    • Authentication
    • Localization
    • Hooks
      • useAPI
      • usePlans
      • usePermissions
    • Components
      • Alert
      • Animate
      • Avatar
      • Badge
      • Breadcrumb
      • Button
      • Calendar
      • Card
      • Chart
      • Checklist
      • Credit Card
      • Detail
      • Dialog
      • Dropdown
      • Feedback
      • Form
      • Grid
      • Header
      • Helper
      • Icon
      • Image
      • Layout
      • Link
      • List
      • Loader
      • Logo
      • Nav
      • Onboarding
      • Pagination
      • Popover
      • Progress
      • Row
      • Search
      • Separator
      • Sheet
      • Social
      • Stat
      • Table
      • Tabs
      • Toast (Notification)
      • Tooltip
      • User
      • View
    • Views
    • Handling Errors
    • Deployment
  • Gravity Native
    • Introduction
    • Prerequisites
    • Installation
    • App Context
    • Authentication
    • Localisation
    • External Linking
    • Handling Errors
    • Navigation
    • Config
    • Events
    • Views
    • Components
      • Badge
      • Blankslate
      • Button
      • Card
      • Chart
      • Form
      • Global
      • Grid
      • Icon
      • List
      • Logo
      • Message
      • Modal
      • Nav
      • Notification
      • Progress Bar
      • Search
      • Separator
      • Social
      • Stat
      • View
    • Push Notifications
    • Payments
    • Building Your App
  • Mission Control
    • Introduction
    • Installation
    • User Management
    • Feedback
    • Events
    • Logs
  • Website Template
    • Introduction
    • Environment Variables
    • Styling
    • Components
      • Article
      • Feature List
      • Footer
      • Hero
      • Layout
      • Pricing
      • Meta Data
      • Nav
      • Testimonial
    • Build and Deploy
Powered by GitBook
On this page
  • Preview
  • Usage
  • Props
  • Notes

Was this helpful?

  1. Gravity Web
  2. Components

Pagination

PreviousOnboardingNextPopover

Last updated 10 months ago

Was this helpful?

The Pagination component provides pagination with page navigation, next and previous links. The pagination is generated dynamically using query params: ?page=1

Preview

Usage

import { Pagination } from 'components/lib';

function MyComponent({ ...props }){

  return (
    <div>
      <Pagination total={ 5 } limit={ 25 } className={ Style.pagination }/>
    </div>
  );
}

Props

Prop
Description
Required
Value

children

optional

component(s)

className

custom styles

optional

SCSS or Tailwind

total

the total number of items in the list

required

integer

limit

the number of items per page

required

integer

Notes

  • The Pagination component uses various sub-components like PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, and PaginationEllipsis.

  • The total prop specifies the total number of items in the list

  • The limit prop determines how many items to show per page

  • The className prop allows for custom styling to be applied.

  • If items is not provided, the children prop can be used to pass custom child components.

child components as per if not using total and limit props

For more details, refer to the .

Shadcn Pagination documentation
Shadcn docs
Gravity pagination component