Pagination

Example

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@databricks/appkit-ui/react"

export default function PaginationExample() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Pagination

Source: packages/appkit-ui/src/react/ui/pagination.tsx

Props

This component extends standard HTML element attributes.

Usage

import { Pagination } from '@databricks/appkit-ui';

<Pagination /* props */ />

PaginationContent

Source: packages/appkit-ui/src/react/ui/pagination.tsx

Props

This component extends standard HTML element attributes.

Usage

import { PaginationContent } from '@databricks/appkit-ui';

<PaginationContent /* props */ />

PaginationEllipsis

Source: packages/appkit-ui/src/react/ui/pagination.tsx

Props

This component extends standard HTML element attributes.

Usage

import { PaginationEllipsis } from '@databricks/appkit-ui';

<PaginationEllipsis /* props */ />

PaginationItem

Source: packages/appkit-ui/src/react/ui/pagination.tsx

Props

This component extends standard HTML element attributes.

Usage

import { PaginationItem } from '@databricks/appkit-ui';

<PaginationItem /* props */ />

PaginationLink

Source: packages/appkit-ui/src/react/ui/pagination.tsx

Props

Prop	Type	Required	Default	Description
isActive	boolean		-	-
size	"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null		icon	-

Usage

import { PaginationLink } from '@databricks/appkit-ui';

<PaginationLink /* props */ />

PaginationNext

Source: packages/appkit-ui/src/react/ui/pagination.tsx

Props

Prop	Type	Required	Default	Description
isActive	boolean		-	-
size	"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null		-	-

Usage

import { PaginationNext } from '@databricks/appkit-ui';

<PaginationNext /* props */ />

PaginationPrevious

Source: packages/appkit-ui/src/react/ui/pagination.tsx

Props

Prop	Type	Required	Default	Description
isActive	boolean		-	-
size	"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null		-	-

Usage

import { PaginationPrevious } from '@databricks/appkit-ui';

<PaginationPrevious /* props */ />