Pagination
Component adds ability to paginate on Whisper
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 |
Pagination example
Typescript
React
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 />);
TablePagination Example
TypeScript
React
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 />);
Last modified 1yr ago