@sb1/ffe-pagination-react 100.8.3 → 100.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +68 -14
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -1,28 +1,82 @@
|
|
|
1
1
|
# @sb1/ffe-pagination-react
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Beskrivelse
|
|
4
4
|
|
|
5
|
+
Pagineringskomponent for navigering gjennom sider med innhold.
|
|
6
|
+
|
|
7
|
+
## Installasjon
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install --save @sb1/ffe-pagination-react
|
|
5
11
|
```
|
|
6
|
-
|
|
12
|
+
|
|
13
|
+
## Bruk
|
|
14
|
+
|
|
15
|
+
Full dokumentasjon: https://sparebank1.github.io/designsystem/
|
|
16
|
+
|
|
17
|
+
Avhengig av `@sb1/ffe-buttons-react`, `@sb1/ffe-dropdown-react` og `@sb1/ffe-icons-react`.
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
@import '@sb1/ffe-pagination/css/pagination.css';
|
|
7
21
|
```
|
|
8
22
|
|
|
9
|
-
|
|
23
|
+
### Eksporterte komponenter og hooks
|
|
10
24
|
|
|
11
|
-
|
|
25
|
+
```tsx
|
|
26
|
+
import { Pagination, usePagination } from '@sb1/ffe-pagination-react';
|
|
27
|
+
import type { PaginationProps } from '@sb1/ffe-pagination-react';
|
|
28
|
+
```
|
|
12
29
|
|
|
13
|
-
|
|
14
|
-
Make sure you import the less-files.
|
|
30
|
+
## Eksempler
|
|
15
31
|
|
|
16
|
-
|
|
32
|
+
### Grunnleggende bruk med usePagination hook
|
|
17
33
|
|
|
18
|
-
|
|
34
|
+
```tsx
|
|
35
|
+
import { Pagination, usePagination } from '@sb1/ffe-pagination-react';
|
|
19
36
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
37
|
+
function MyComponent() {
|
|
38
|
+
const paginationControls = usePagination(134, 10);
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<Pagination
|
|
42
|
+
ariaLabel="Paginering av innhold"
|
|
43
|
+
paginationControls={paginationControls}
|
|
44
|
+
rowsPerPageOptions={[10, 20, 50, 100]}
|
|
45
|
+
/>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
24
48
|
```
|
|
25
49
|
|
|
26
|
-
|
|
50
|
+
### Bruk med tabell og datafiltrering
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
import { Pagination, usePagination } from '@sb1/ffe-pagination-react';
|
|
27
54
|
|
|
28
|
-
|
|
55
|
+
function TableWithPagination() {
|
|
56
|
+
const data = [
|
|
57
|
+
{ id: 1, name: 'Anders' },
|
|
58
|
+
{ id: 2, name: 'Erik' },
|
|
59
|
+
];
|
|
60
|
+
const paginationControls = usePagination(data.length, 10);
|
|
61
|
+
|
|
62
|
+
const currentPageData = data.slice(
|
|
63
|
+
paginationControls.pageStart,
|
|
64
|
+
paginationControls.pageStart + paginationControls.currentPageSize,
|
|
65
|
+
);
|
|
66
|
+
|
|
67
|
+
return (
|
|
68
|
+
<>
|
|
69
|
+
<ul>
|
|
70
|
+
{currentPageData.map(item => (
|
|
71
|
+
<li key={item.id}>{item.name}</li>
|
|
72
|
+
))}
|
|
73
|
+
</ul>
|
|
74
|
+
<Pagination
|
|
75
|
+
ariaLabel="Paginering av tabell"
|
|
76
|
+
paginationControls={paginationControls}
|
|
77
|
+
rowsPerPageOptions={[10, 20, 50]}
|
|
78
|
+
/>
|
|
79
|
+
</>
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-pagination-react",
|
|
3
|
-
"version": "100.
|
|
3
|
+
"version": "100.10.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "SpareBank 1",
|
|
6
6
|
"files": [
|
|
@@ -24,16 +24,16 @@
|
|
|
24
24
|
"test:watch": "ffe-buildtool jest --watch"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@sb1/ffe-buttons-react": "^100.
|
|
28
|
-
"@sb1/ffe-core": "^100.
|
|
29
|
-
"@sb1/ffe-core-react": "^100.
|
|
30
|
-
"@sb1/ffe-dropdown-react": "^100.
|
|
31
|
-
"@sb1/ffe-icons-react": "^100.
|
|
32
|
-
"@sb1/ffe-pagination": "^100.
|
|
27
|
+
"@sb1/ffe-buttons-react": "^100.10.1",
|
|
28
|
+
"@sb1/ffe-core": "^100.10.1",
|
|
29
|
+
"@sb1/ffe-core-react": "^100.10.1",
|
|
30
|
+
"@sb1/ffe-dropdown-react": "^100.10.1",
|
|
31
|
+
"@sb1/ffe-icons-react": "^100.10.1",
|
|
32
|
+
"@sb1/ffe-pagination": "^100.10.1",
|
|
33
33
|
"classnames": "^2.5.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@sb1/ffe-buildtool": "^100.
|
|
36
|
+
"@sb1/ffe-buildtool": "^100.10.1",
|
|
37
37
|
"eslint": "^9.22.0",
|
|
38
38
|
"react": "^18.2.0",
|
|
39
39
|
"react-dom": "^18.2.0"
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"publishConfig": {
|
|
45
45
|
"access": "public"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "a07d2274928d56dc447a3dbca8f44d1f96996d8c"
|
|
48
48
|
}
|