IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Docs: Pagination component (#28143)

Browse Source 
* Add basic docs for pagination component

* Update packages/grafana-ui/src/components/Pagination/Pagination.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update packages/grafana-ui/src/components/Pagination/Pagination.mdx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
This commit is contained in:
Peter Holmberg 2020-10-09 16:45:16 +02:00 committed by GitHub
parent 670b8512bf
commit 873c32bc97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/grafana-ui/src/components/Pagination/Pagination.mdx
View File

@ -1,8 +1,21 @@
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Pagination } from './Pagination';
# Pagination
<Meta title="MDX|Pagination" component={Pagination} />
<Props of={Pagination}/>
# Pagination
Component used for rendering a page selector below paginated content.
### Usage
```tsx
<div>
<div>
Page 1 content
</div>
<Pagination currentPage={1} numberOfPages={5} onNavigate={() => fetchPage(2)} />
</div>
```
<Props of={Pagination} />

3
packages/grafana-ui/src/components/Pagination/Pagination.tsx
View File

@ -4,8 +4,11 @@ import { stylesFactory } from '../../themes';
import { Button, ButtonVariant } from '../Button';
interface Props {
/** The current page index being shown. */
currentPage: number;
/** Number of total pages. */
numberOfPages: number;
/** Callback function for fetching the selected page */
onNavigate: (toPage: number) => void;
}