@sb1/ffe-tables-react 100.8.2 → 100.9.0
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 +168 -14
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -1,30 +1,184 @@
|
|
|
1
1
|
# @sb1/ffe-tables-react
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Beskrivelse
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Tabellkomponenter med responsiv visning, sortering og utvidbare rader. Inkluderer `Table`, `TableHead`, `TableBody`, `TableRow`, `TableHeaderCell`, `TableDataCell`, `TableFoot`, `TableCaption` og `TableRowExpandable`.
|
|
6
|
+
|
|
7
|
+
## Installasjon
|
|
6
8
|
|
|
7
9
|
```bash
|
|
8
10
|
npm install --save @sb1/ffe-tables-react
|
|
9
11
|
```
|
|
10
12
|
|
|
11
|
-
##
|
|
13
|
+
## Bruk
|
|
12
14
|
|
|
13
|
-
Full
|
|
15
|
+
Full dokumentasjon: https://sparebank1.github.io/designsystem/
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
Make sure you import the less-files.
|
|
17
|
+
Avhengig av `@sb1/ffe-collapse-react` og `@sb1/ffe-icons-react`.
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
```css
|
|
20
|
+
@import '@sb1/ffe-tables/less/ffe-tables.less';
|
|
21
|
+
```
|
|
19
22
|
|
|
20
|
-
|
|
23
|
+
## Eksempler
|
|
21
24
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
### Grunnleggende tabell
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import {
|
|
29
|
+
Table,
|
|
30
|
+
TableHead,
|
|
31
|
+
TableBody,
|
|
32
|
+
TableRow,
|
|
33
|
+
TableHeaderCell,
|
|
34
|
+
TableDataCell,
|
|
35
|
+
TableFoot,
|
|
36
|
+
TableCaption,
|
|
37
|
+
} from '@sb1/ffe-tables-react';
|
|
38
|
+
|
|
39
|
+
const data = [
|
|
40
|
+
{ name: 'Anders', age: 32 },
|
|
41
|
+
{ name: 'Erik', age: 25 },
|
|
42
|
+
];
|
|
43
|
+
|
|
44
|
+
<Table>
|
|
45
|
+
<TableCaption>Utviklere</TableCaption>
|
|
46
|
+
<TableHead>
|
|
47
|
+
<TableRow>
|
|
48
|
+
<TableHeaderCell scope="col">Navn</TableHeaderCell>
|
|
49
|
+
<TableHeaderCell scope="col">Alder</TableHeaderCell>
|
|
50
|
+
</TableRow>
|
|
51
|
+
</TableHead>
|
|
52
|
+
<TableBody>
|
|
53
|
+
{data.map(person => (
|
|
54
|
+
<TableRow key={person.name}>
|
|
55
|
+
<TableDataCell columnHeader="Navn">{person.name}</TableDataCell>
|
|
56
|
+
<TableDataCell columnHeader="Alder">{person.age}</TableDataCell>
|
|
57
|
+
</TableRow>
|
|
58
|
+
))}
|
|
59
|
+
</TableBody>
|
|
60
|
+
<TableFoot>
|
|
61
|
+
<TableRow>
|
|
62
|
+
<TableHeaderCell scope="row">Gjennomsnitt</TableHeaderCell>
|
|
63
|
+
<TableDataCell columnHeader="Gjennomsnitt">28.5</TableDataCell>
|
|
64
|
+
</TableRow>
|
|
65
|
+
</TableFoot>
|
|
66
|
+
</Table>;
|
|
26
67
|
```
|
|
27
68
|
|
|
28
|
-
|
|
69
|
+
### Tabell med utvidbare rader
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
import {
|
|
73
|
+
Table,
|
|
74
|
+
TableHead,
|
|
75
|
+
TableBody,
|
|
76
|
+
TableRow,
|
|
77
|
+
TableHeaderCell,
|
|
78
|
+
TableDataCell,
|
|
79
|
+
TableCaption,
|
|
80
|
+
TableRowExpandable,
|
|
81
|
+
} from '@sb1/ffe-tables-react';
|
|
82
|
+
|
|
83
|
+
<Table>
|
|
84
|
+
<TableCaption>Kontakter</TableCaption>
|
|
85
|
+
<TableHead>
|
|
86
|
+
<TableRow>
|
|
87
|
+
<TableHeaderCell scope="col">Navn</TableHeaderCell>
|
|
88
|
+
<TableHeaderCell scope="col">E-post</TableHeaderCell>
|
|
89
|
+
</TableRow>
|
|
90
|
+
</TableHead>
|
|
91
|
+
<TableBody>
|
|
92
|
+
<TableRowExpandable
|
|
93
|
+
expandContent="Detaljer om personen"
|
|
94
|
+
isDefaultOpen={false}
|
|
95
|
+
locale="nb"
|
|
96
|
+
>
|
|
97
|
+
<TableDataCell columnHeader="Navn">Ola Normann</TableDataCell>
|
|
98
|
+
<TableDataCell columnHeader="E-post">ola@normann.no</TableDataCell>
|
|
99
|
+
</TableRowExpandable>
|
|
100
|
+
{/* expandContent kan ogsa vaere en funksjon: expandContent={setIsOpen => <Button onClick={() => setIsOpen(false)}>Lukk</Button>} */}
|
|
101
|
+
</TableBody>
|
|
102
|
+
</Table>;
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### Sorterbar tabell
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
import {
|
|
109
|
+
Table,
|
|
110
|
+
TableHead,
|
|
111
|
+
TableBody,
|
|
112
|
+
TableRow,
|
|
113
|
+
TableHeaderCell,
|
|
114
|
+
TableDataCell,
|
|
115
|
+
TableCaption,
|
|
116
|
+
} from '@sb1/ffe-tables-react';
|
|
117
|
+
|
|
118
|
+
const data = [
|
|
119
|
+
{ name: 'Ola', age: 23 },
|
|
120
|
+
{ name: 'Kari', age: 45 },
|
|
121
|
+
];
|
|
122
|
+
|
|
123
|
+
<Table initialSort={{ sortKey: 'name', sortOrder: 'ascending' }}>
|
|
124
|
+
{({ activeSortKey, activeSortOrder }) => {
|
|
125
|
+
const sortedData = [...data].sort((a, b) => {
|
|
126
|
+
if (!activeSortKey || activeSortOrder === 'none') return 0;
|
|
127
|
+
const aVal = a[activeSortKey as keyof typeof a];
|
|
128
|
+
const bVal = b[activeSortKey as keyof typeof b];
|
|
129
|
+
return activeSortOrder === 'ascending'
|
|
130
|
+
? String(aVal).localeCompare(String(bVal))
|
|
131
|
+
: String(bVal).localeCompare(String(aVal));
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
return (
|
|
135
|
+
<>
|
|
136
|
+
<TableCaption>Sorterbar tabell</TableCaption>
|
|
137
|
+
<TableHead>
|
|
138
|
+
<TableRow>
|
|
139
|
+
<TableHeaderCell sortKey="name" scope="col">
|
|
140
|
+
Navn
|
|
141
|
+
</TableHeaderCell>
|
|
142
|
+
<TableHeaderCell sortKey="age" scope="col">
|
|
143
|
+
Alder
|
|
144
|
+
</TableHeaderCell>
|
|
145
|
+
</TableRow>
|
|
146
|
+
</TableHead>
|
|
147
|
+
<TableBody>
|
|
148
|
+
{sortedData.map(person => (
|
|
149
|
+
<TableRow key={person.name}>
|
|
150
|
+
<TableDataCell columnHeader="Navn">
|
|
151
|
+
{person.name}
|
|
152
|
+
</TableDataCell>
|
|
153
|
+
<TableDataCell columnHeader="Alder">
|
|
154
|
+
{person.age}
|
|
155
|
+
</TableDataCell>
|
|
156
|
+
</TableRow>
|
|
157
|
+
))}
|
|
158
|
+
</TableBody>
|
|
159
|
+
</>
|
|
160
|
+
);
|
|
161
|
+
}}
|
|
162
|
+
</Table>;
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
## Responsiv oppforsel
|
|
166
|
+
|
|
167
|
+
- `breakPoint="sm"` (standard): Card-visning under 480px
|
|
168
|
+
- `breakPoint="md"`: Card-visning under 768px
|
|
169
|
+
- `breakPoint="none"`: Deaktiverer responsiv visning
|
|
170
|
+
|
|
171
|
+
## Tilgjengelighet
|
|
172
|
+
|
|
173
|
+
- Bruk `TableCaption` for tabellbeskrivelse
|
|
174
|
+
- Bruk `scope="col"` pa kolonneoverskrifter, `scope="row"` pa radoverskrifter
|
|
175
|
+
- Sorterbare kolonner har automatisk `aria-sort`
|
|
176
|
+
- Utvidbare rader har automatisk `aria-expanded` og `aria-controls`
|
|
177
|
+
|
|
178
|
+
## Utvikling
|
|
179
|
+
|
|
180
|
+
```bash
|
|
181
|
+
npm install && npm run build && npm start
|
|
182
|
+
```
|
|
29
183
|
|
|
30
|
-
|
|
184
|
+
Storybook kjorer pa http://localhost:6006/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-tables-react",
|
|
3
|
-
"version": "100.
|
|
3
|
+
"version": "100.9.0",
|
|
4
4
|
"description": "React implementation of ffe-tables",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "SpareBank 1",
|
|
@@ -25,14 +25,14 @@
|
|
|
25
25
|
"test:watch": "ffe-buildtool jest --watch"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@sb1/ffe-collapse-react": "^100.
|
|
29
|
-
"@sb1/ffe-core-react": "^100.
|
|
30
|
-
"@sb1/ffe-icons-react": "^100.
|
|
31
|
-
"@sb1/ffe-tables": "^100.
|
|
28
|
+
"@sb1/ffe-collapse-react": "^100.9.0",
|
|
29
|
+
"@sb1/ffe-core-react": "^100.9.0",
|
|
30
|
+
"@sb1/ffe-icons-react": "^100.9.0",
|
|
31
|
+
"@sb1/ffe-tables": "^100.9.0",
|
|
32
32
|
"classnames": "^2.3.1"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@sb1/ffe-buildtool": "^100.
|
|
35
|
+
"@sb1/ffe-buildtool": "^100.9.0",
|
|
36
36
|
"react": "^18.2.0",
|
|
37
37
|
"react-dom": "^18.2.0"
|
|
38
38
|
},
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"publishConfig": {
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "41f20cf10bec5ebe53036c282690983d2114fb45"
|
|
46
46
|
}
|