Pagination
Component adds ability to paginate on Whisper

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

Pagination example
Typescript
React
1
import { whisper } from "@oliveai/ldk"
2
import {
3
Direction,
4
JustifyContent,
5
NewWhisper,
6
PaginationComponentType,
7
UpdateWhisper,
8
Whisper,
9
WhisperComponentType
10
} from "@oliveai/ldk/dist/whisper"
11
12
const paginationExampleConfig = ( (pageNumber: number): NewWhisper | UpdateWhisper => {
13
return {
14
label: 'Pagination Example',
15
components: [
16
{
17
type: WhisperComponentType.Box,
18
alignment: JustifyContent.Center,
19
direction: Direction.Vertical,
20
children: [
21
{
22
type: WhisperComponentType.Markdown,
23
body: `### This is page number ${pageNumber}`
24
}
25
]
26
},
27
{
28
type: WhisperComponentType.Pagination,
29
count: 5,
30
component: PaginationComponentType.Pagination,
31
disabled: false,
32
page: pageNumber,
33
onChange: (error: Error, params: string, whisper: Whisper) => {
34
if (error) {
35
console.debug(error);
36
}
37
whisper.update(paginationExampleConfig(parseInt(params)));
38
},
39
}
40
]
41
}
42
})
43
44
const newPaginationExampleConfig = (async () => {
45
await whisper.create(paginationExampleConfig(1) as NewWhisper);
46
})
47
48
newPaginationExampleConfig();
49
Copied!
1
import { React, ReactWhisper } from "@oliveai/ldk"
2
import {
3
Direction,
4
JustifyContent,
5
PaginationComponentType
6
} from "@oliveai/ldk/dist/whisper"
7
8
const PaginationExample: React.FunctionComponent<Object> = () => {
9
10
const [ pageNumber, setPageNumber ] = React.useState(1);
11
12
return (
13
<oh-whisper label='Pagination Example' onClose={ () => {}}>
14
<oh-box
15
justifyContent={JustifyContent.Center}
16
direction={Direction.Vertical}
17
children={[
18
<oh-markdown
19
body={`### This is page number ${pageNumber}`}
20
/>
21
]}
22
/>
23
<oh-pagination
24
count={5}
25
component={PaginationComponentType.Pagination}
26
disabled={false}
27
page={pageNumber}
28
onChange={(error, params) => {
29
if (error) {
30
console.debug(error)
31
}
32
setPageNumber(parseInt(params));
33
}}
34
/>
35
</oh-whisper>
36
)
37
}
38
39
ReactWhisper.renderNewWhisper(<PaginationExample />);
40
Copied!
TablePagination Example
TypeScript
React
1
import { whisper } from "@oliveai/ldk"
2
import {
3
Direction,
4
JustifyContent,
5
NewWhisper,
6
PaginationComponentType,
7
UpdateWhisper,
8
Whisper,
9
WhisperComponentType,
10
} from "@oliveai/ldk/dist/whisper"
11
12
13
const getRow = ((pageNumber: number, rowsPerPage: number) => {
14
let rows = []
15
for (let index = 0; index < rowsPerPage; index++) {
16
rows.push(pageNumber * rowsPerPage + index + 1)
17
}
18
19
return rows.toString().split(',').join(', ')
20
})
21
22
const paginationExampleConfig = ( (pageNumber: number, rowsPerPage: number): NewWhisper | UpdateWhisper => {
23
return {
24
label: 'Pagination Example',
25
components: [
26
{
27
type: WhisperComponentType.Box,
28
alignment: JustifyContent.Center,
29
direction: Direction.Vertical,
30
children: [
31
{
32
type: WhisperComponentType.Markdown,
33
body: `### This is page number ${pageNumber + 1}`
34
},
35
{
36
type: WhisperComponentType.Markdown,
37
body: `rows: ${getRow(pageNumber, rowsPerPage)}`
38
},
39
]
40
},
41
{
42
type: WhisperComponentType.Pagination,
43
count: 20,
44
component: PaginationComponentType.TablePagination,
45
disabled: false,
46
page: pageNumber,
47
rowsPerPage: rowsPerPage,
48
rowsPerPageOptions: [1,2,4,5],
49
labelRowsPerPage: "Row Per Page",
50
onChange: (error: Error, params: string, whisper: Whisper) => {
51
if (error) {
52
console.debug(error)
53
}
54
whisper.update(paginationExampleConfig(parseInt(params), rowsPerPage))
55
},
56
onRowsPerPageChange: (error: Error, params: string, whisper: Whisper) => {
57
if (error) {
58
console.debug(error)
59
}
60
whisper.update(paginationExampleConfig( Math.floor((pageNumber) * rowsPerPage / parseInt(params)) , parseInt(params)))
61
},
62
}
63
]
64
}
65
})
66
67
const newPaginationExample = (async () => {
68
await whisper.create(paginationExampleConfig(0, 1) as NewWhisper);
69
})
70
71
newPaginationExample();
Copied!
1
import { React, ReactWhisper } from "@oliveai/ldk"
2
import {
3
Direction,
4
JustifyContent,
5
PaginationComponentType,
6
} from "@oliveai/ldk/dist/whisper"
7
8
const getRow = ((pageNumber: number, rowsPerPage: number) => {
9
let rows = []
10
for (let index = 0; index < rowsPerPage; index++) {
11
rows.push(pageNumber * rowsPerPage + index + 1)
12
}
13
14
return rows.toString().split(',').join(', ')
15
})
16
17
const PaginationExample: React.FunctionComponent<Object> = () => {
18
19
const [ pageNumber, setPageNumber ] = React.useState(0);
20
const [ rowsPerPage, setRowsPerPage ] = React.useState(1);
21
22
return (
23
<oh-whisper label='Pagination Example' onClose={ () => {}}>
24
<oh-box
25
justifyContent={JustifyContent.Center}
26
direction={Direction.Vertical}
27
children={[
28
<>
29
<oh-markdown
30
body={`### This is page number ${pageNumber + 1}`}
31
/>
32
<oh-markdown
33
body={`rows: ${getRow(pageNumber, rowsPerPage)}`}
34
/>
35
</>
36
]}
37
/>
38
<oh-pagination
39
count={20}
40
component={PaginationComponentType.TablePagination}
41
disabled={false}
42
page={pageNumber}
43
rowsPerPage={rowsPerPage}
44
rowsPerPageOptions={[1,2,4,5]}
45
labelRowsPerPage="Row Per Page"
46
onChange={(error, params) => {
47
if (error) {
48
console.debug(error)
49
}
50
setPageNumber(parseInt(params));
51
}}
52
onRowsPerPageChange={(error, params) => {
53
if (error) {
54
console.debug(error)
55
}
56
setPageNumber(Math.floor((pageNumber) * rowsPerPage / parseInt(params)))
57
setRowsPerPage(parseInt(params))
58
}}
59
/>
60
</oh-whisper>
61
)
62
}
63
64
ReactWhisper.renderNewWhisper(<PaginationExample />);
65
Copied!
Copy link