LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props
  • Examples

Was this helpful?

  1. Whisper Components

Pagination

Component adds ability to paginate on Whisper

PreviousLinkNextNumber

Last updated 2 years ago

Was this helpful?

Props

Properties
Types
Desciption
Required?
Default

count

number

Number of pages

4

component

PaginationComponentType

PaginationComponentType.Pagination: paginates through pages, example page 1, page 2, page 3, page... PaginationComponentType.TablePagination: paginates through rows, example page 1 rows 1-5, page 2 rows 6-10, page 3 rows 11-15

Pagination

disabled

boolean

Disable pagination buttons

false

labelRowsPerPage

string

Requires TablePagination labels for editing the rows per page

undefined

onChange

WhisperHandlerWithParam<string>

Callback that with string of page number that was requested

undefined

onRowsPerPageChange

WhisperHandlerWithParam<string>

Callback that with string of page per row number that was requested

undefined

page

number

Starting page note for Pagination page 1 is 1 and for TablePagination page 1 is 0

1

rowsPerPage

number

Starting number of rows per page

undefined

rowsPerPageOptions

number[]

select options for changing the number of rows per page

undefined

Examples

import { whisper } from "@oliveai/ldk"
import { 
  Direction, 
  JustifyContent, 
  NewWhisper, 
  PaginationComponentType, 
  UpdateWhisper, 
  Whisper, 
  WhisperComponentType 
} from "@oliveai/ldk/dist/whisper"

const paginationExampleConfig = ( (pageNumber: number): NewWhisper | UpdateWhisper => {
  return {
    label: 'Pagination Example',
    components: [
      {
        type: WhisperComponentType.Box,
        alignment: JustifyContent.Center,
        direction: Direction.Vertical,
        children: [
          {
            type: WhisperComponentType.Markdown,
            body: `### This is page number ${pageNumber}`
          }
        ]
      },
      {      
        type: WhisperComponentType.Pagination,
        count: 5,
        component: PaginationComponentType.Pagination,
        disabled: false,
        page: pageNumber,
        onChange: (error: Error, params: string, whisper: Whisper) => {
          if (error) {
            console.debug(error);
          } 
          whisper.update(paginationExampleConfig(parseInt(params)));
        },
      }
    ]
  }
})

const newPaginationExampleConfig = (async () => {
  await whisper.create(paginationExampleConfig(1) as NewWhisper);
})

newPaginationExampleConfig();
import { React, ReactWhisper } from "@oliveai/ldk"
import { 
  Direction, 
  JustifyContent, 
  PaginationComponentType 
} from "@oliveai/ldk/dist/whisper"

const PaginationExample: React.FunctionComponent<Object> = () => { 
  
  const [ pageNumber, setPageNumber ] = React.useState(1);

  return (
    <oh-whisper label='Pagination Example' onClose={ () => {}}>
      <oh-box
        justifyContent={JustifyContent.Center}
        direction={Direction.Vertical}
        children={[
          <oh-markdown
           body={`### This is page number ${pageNumber}`}
          />
        ]}
      />
      <oh-pagination
        count={5}
        component={PaginationComponentType.Pagination}
        disabled={false}
        page={pageNumber}
        onChange={(error, params) => {
          if (error) {
            console.debug(error)
          } 
          setPageNumber(parseInt(params));
        }}
      />
    </oh-whisper>
  )
}

ReactWhisper.renderNewWhisper(<PaginationExample />);
import { whisper } from "@oliveai/ldk"
import { 
  Direction, 
  JustifyContent,
  NewWhisper,
  PaginationComponentType,
  UpdateWhisper,
  Whisper,
  WhisperComponentType, 
} from "@oliveai/ldk/dist/whisper"


const getRow = ((pageNumber: number, rowsPerPage: number) => {
  let rows = []
  for (let index = 0; index < rowsPerPage; index++) {
    rows.push(pageNumber * rowsPerPage + index + 1)
  }

  return rows.toString().split(',').join(', ')
})

const paginationExampleConfig = ( (pageNumber: number, rowsPerPage: number): NewWhisper | UpdateWhisper => {
  return {
    label: 'Pagination Example',
    components: [
      {
        type: WhisperComponentType.Box,
        alignment: JustifyContent.Center,
        direction: Direction.Vertical,
        children: [
          {
            type: WhisperComponentType.Markdown,
            body: `### This is page number ${pageNumber + 1}`
          },
          {
            type: WhisperComponentType.Markdown,
            body: `rows: ${getRow(pageNumber, rowsPerPage)}`
          },
        ]
      },
      {      
        type: WhisperComponentType.Pagination,
        count: 20,
        component: PaginationComponentType.TablePagination,
        disabled: false,
        page: pageNumber,
        rowsPerPage: rowsPerPage,
        rowsPerPageOptions: [1,2,4,5],
        labelRowsPerPage: "Row Per Page",
        onChange: (error: Error, params: string, whisper: Whisper) => {
          if (error) {
            console.debug(error)
          } 
          whisper.update(paginationExampleConfig(parseInt(params), rowsPerPage))
        },
        onRowsPerPageChange: (error: Error, params: string, whisper: Whisper) => {
          if (error) {
            console.debug(error)
          } 
          whisper.update(paginationExampleConfig( Math.floor((pageNumber) * rowsPerPage  / parseInt(params)) , parseInt(params)))
        },
      }
    ]
  }
})

const newPaginationExample = (async () => {
  await whisper.create(paginationExampleConfig(0, 1) as NewWhisper);
})

newPaginationExample();
import { React, ReactWhisper } from "@oliveai/ldk"
import { 
  Direction, 
  JustifyContent,
  PaginationComponentType,
} from "@oliveai/ldk/dist/whisper"

const getRow = ((pageNumber: number, rowsPerPage: number) => {
  let rows = []
  for (let index = 0; index < rowsPerPage; index++) {
    rows.push(pageNumber * rowsPerPage + index + 1)
  }

  return rows.toString().split(',').join(', ')
})

const PaginationExample: React.FunctionComponent<Object> = () => { 
  
  const [ pageNumber, setPageNumber ] = React.useState(0);
  const [ rowsPerPage, setRowsPerPage ] = React.useState(1);

  return (
    <oh-whisper label='Pagination Example' onClose={ () => {}}>
      <oh-box
        justifyContent={JustifyContent.Center}
        direction={Direction.Vertical}
        children={[
          <>
          <oh-markdown
            body={`### This is page number ${pageNumber + 1}`}
          />
          <oh-markdown
            body={`rows: ${getRow(pageNumber, rowsPerPage)}`}
          />
        </>
        ]}
      />
      <oh-pagination
        count={20}
        component={PaginationComponentType.TablePagination}
        disabled={false}
        page={pageNumber}
        rowsPerPage={rowsPerPage}
        rowsPerPageOptions={[1,2,4,5]}
        labelRowsPerPage="Row Per Page"
        onChange={(error, params) => {
          if (error) {
            console.debug(error)
          } 
          setPageNumber(parseInt(params));
        }}
        onRowsPerPageChange={(error, params) => {
          if (error) {
            console.debug(error)
          } 
          setPageNumber(Math.floor((pageNumber) * rowsPerPage  / parseInt(params)))
          setRowsPerPage(parseInt(params))
        }}
      />
    </oh-whisper>
  )
}

ReactWhisper.renderNewWhisper(<PaginationExample />);
Pagination example
TablePagination Example