Skip to content

Commit b9fa555

Browse files
Lukas742Lukas742
authored
docs(Table): improve story (SAP#6498)
1 parent 2e09839 commit b9fa555

File tree

2 files changed

+198
-20
lines changed

2 files changed

+198
-20
lines changed

‎packages/main/src/webComponents/Table/Table.mdx

Lines changed: 126 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,21 +31,32 @@ import * as ComponentStories from './Table.stories';
3131

3232
## Growing Table
3333

34-
`Table` with `growing={TableGrowingMode.Scroll}`.
34+
`Table` with growing feature (`<TableGrowing onLoadMore={onLoadMore} type={TableGrowingMode.Scroll} />`):
3535

3636
<Canvas of={ComponentStories.GrowingTable} />
3737

38-
### Code
38+
<details>
39+
40+
<summary>Show code</summary>
3941

4042
```jsx
4143
const createRows = (indexOffset) => {
4244
return new Array(25).fill('').map((_, index) => (
43-
<TableRow key={`${index + indexOffset} - row`}>
45+
<TableRow key={`${index + indexOffset}-row`}>
46+
<TableCell>
47+
<span>{index + indexOffset}</span>
48+
</TableCell>
49+
<TableCell>
50+
<span>Placeholder</span>
51+
</TableCell>
4452
<TableCell>
45-
<Label>{index + indexOffset}</Label>
53+
<span>Placeholder 2</span>
4654
</TableCell>
4755
<TableCell>
48-
<Label>Placeholder</Label>
56+
<span>Placeholder 3</span>
57+
</TableCell>
58+
<TableCell>
59+
<span>Placeholder 4</span>
4960
</TableCell>
5061
</TableRow>
5162
));
@@ -59,18 +70,27 @@ const GrowingTable = () => {
5970
return (
6071
<div style={{ height: '250px', overflow: 'auto' }}>
6172
<Table
62-
onLoadMore={onLoadMore}
63-
growing={TableGrowingMode.Scroll}
73+
{...otherProps}
6474
headerRow={
65-
<TableHeaderRow>
66-
<TableHeaderCell>
67-
<Label>Column 1</Label>
75+
<TableHeaderRow sticky>
76+
<TableHeaderCell width={'200px'} minWidth={'200px'}>
77+
<span>Product</span>
78+
</TableHeaderCell>
79+
<TableHeaderCell minWidth={'200px'}>
80+
<span>Supplier</span>
81+
</TableHeaderCell>
82+
<TableHeaderCell minWidth={'200px'}>
83+
<span>Dimensions</span>
6884
</TableHeaderCell>
69-
<TableHeaderCell>
70-
<Label>Column 2</Label>
85+
<TableHeaderCell minWidth={'100px'} maxWidth="200px">
86+
<span>Weight</span>
7187
</TableHeaderCell>
72-
</>
88+
<TableHeaderCell minWidth="200px">
89+
<span>Price</span>
90+
</TableHeaderCell>
91+
</TableHeaderRow>
7392
}
93+
features={<TableGrowing onLoadMore={onLoadMore} type={TableGrowingMode.Scroll} />}
7494
>
7595
{rows}
7696
</Table>
@@ -79,6 +99,99 @@ const GrowingTable = () => {
7999
};
80100
```
81101

102+
</details>
103+
104+
## Table with row selection
105+
106+
`Table` with selection feature (`<TableSelection mode="Multiple" />`):
107+
108+
<Canvas of={ComponentStories.WithSelection} />
109+
110+
<details>
111+
112+
<summary>Show code</summary>
113+
114+
```jsx
115+
function TableWithRowSelection() {
116+
const [mode, setMode] = useState(TableSelectionMode.Multiple);
117+
return (
118+
<>
119+
<SegmentedButton
120+
onSelectionChange={(e) => {
121+
setMode(e.detail.selectedItems[0].textContent);
122+
}}
123+
>
124+
{Object.values(TableSelectionMode).map((selectionMode) => (
125+
<SegmentedButtonItem key={selectionMode} selected={selectionMode === mode}>
126+
{selectionMode}
127+
</SegmentedButtonItem>
128+
))}
129+
</SegmentedButton>
130+
<Table
131+
{...otherProps}
132+
headerRow={
133+
<TableHeaderRow sticky>
134+
<TableHeaderCell width={'200px'} minWidth={'200px'}>
135+
<span>Product</span>
136+
</TableHeaderCell>
137+
<TableHeaderCell minWidth={'200px'}>
138+
<span>Supplier</span>
139+
</TableHeaderCell>
140+
<TableHeaderCell minWidth={'200px'}>
141+
<span>Dimensions</span>
142+
</TableHeaderCell>
143+
<TableHeaderCell minWidth={'100px'} maxWidth="200px">
144+
<span>Weight</span>
145+
</TableHeaderCell>
146+
<TableHeaderCell minWidth="200px">
147+
<span>Price</span>
148+
</TableHeaderCell>
149+
</TableHeaderRow>
150+
}
151+
features={<TableSelection mode={mode} />}
152+
>
153+
<TableRow>
154+
<TableCell>
155+
<span>Notebook Basic</span>
156+
</TableCell>
157+
<TableCell>
158+
<span>Very Best Screens</span>
159+
</TableCell>
160+
<TableCell>
161+
<span>30 x 18 x 3cm</span>
162+
</TableCell>
163+
<TableCell>
164+
<span>4.2KG</span>
165+
</TableCell>
166+
<TableCell>
167+
<span>956EUR</span>
168+
</TableCell>
169+
</TableRow>
170+
<TableRow>
171+
<TableCell>
172+
<span>Notebook Basic 17HT-1001</span>
173+
</TableCell>
174+
<TableCell>
175+
<span>Very Best Screens</span>
176+
</TableCell>
177+
<TableCell>
178+
<span>29 x 17 x 3.1cm</span>
179+
</TableCell>
180+
<TableCell>
181+
<span>4.5KG</span>
182+
</TableCell>
183+
<TableCell>
184+
<span>1249EUR</span>
185+
</TableCell>
186+
</TableRow>
187+
</Table>
188+
</>
189+
);
190+
}
191+
```
192+
193+
</details>
194+
82195
<Markdown>{SubcomponentsSection}</Markdown>
83196

84197
## TableHeaderRow

‎packages/main/src/webComponents/Table/Table.stories.tsx

Lines changed: 72 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import type { Meta, StoryObj } from '@storybook/react';
22
import TableGrowingMode from '@ui5/webcomponents/dist/types/TableGrowingMode.js';
3+
import TableSelectionMode from '@ui5/webcomponents/dist/types/TableSelectionMode.js';
4+
import { SegmentedButton, SegmentedButtonItem } from '@ui5/webcomponents-react';
35
import { useState } from 'react';
46
import { TableCell } from '../TableCell/index.js';
57
import { TableGrowing } from '../TableGrowing/index.js';
68
import { TableHeaderCell } from '../TableHeaderCell/index.js';
79
import { TableHeaderRow } from '../TableHeaderRow/index.js';
810
import { TableRow } from '../TableRow/index.js';
11+
import { TableSelection } from '../TableSelection/index.js';
912
import { Table } from './index.js';
1013

1114
const meta = {
@@ -19,19 +22,19 @@ const meta = {
1922
args: {
2023
headerRow: (
2124
<TableHeaderRow sticky>
22-
<TableHeaderCell width={'12rem'}>
25+
<TableHeaderCell width={'200px'} minWidth={'200px'}>
2326
<span>Product</span>
2427
</TableHeaderCell>
25-
<TableHeaderCell minWidth={'800px'}>
28+
<TableHeaderCell minWidth={'200px'}>
2629
<span>Supplier</span>
2730
</TableHeaderCell>
28-
<TableHeaderCell minWidth={'600px'}>
31+
<TableHeaderCell minWidth={'200px'}>
2932
<span>Dimensions</span>
3033
</TableHeaderCell>
31-
<TableHeaderCell minWidth={'600px'}>
34+
<TableHeaderCell minWidth={'100px'} maxWidth="200px">
3235
<span>Weight</span>
3336
</TableHeaderCell>
34-
<TableHeaderCell>
37+
<TableHeaderCell minWidth="200px">
3538
<span>Price</span>
3639
</TableHeaderCell>
3740
</TableHeaderRow>
@@ -100,6 +103,12 @@ export const GrowingTable: Story = {
100103
<TableCell>
101104
<span>Placeholder 2</span>
102105
</TableCell>
106+
<TableCell>
107+
<span>Placeholder 3</span>
108+
</TableCell>
109+
<TableCell>
110+
<span>Placeholder 4</span>
111+
</TableCell>
103112
</TableRow>
104113
));
105114
};
@@ -109,11 +118,67 @@ export const GrowingTable: Story = {
109118
};
110119
return (
111120
<div style={{ height: '250px', overflow: 'auto' }}>
112-
<Table {...args}>
121+
<Table {...args} features={<TableGrowing onLoadMore={onLoadMore} type={TableGrowingMode.Scroll} />}>
113122
{rows}
114-
<TableGrowing slot="features" onLoadMore={onLoadMore} type={TableGrowingMode.Button} />
115123
</Table>
116124
</div>
117125
);
118126
}
119127
};
128+
129+
export const WithSelection: Story = {
130+
render(args) {
131+
const [mode, setMode] = useState<TableSelectionMode>(TableSelectionMode.Multiple);
132+
return (
133+
<>
134+
<SegmentedButton
135+
onSelectionChange={(e) => {
136+
setMode(e.detail.selectedItems[0].textContent);
137+
}}
138+
>
139+
{Object.values(TableSelectionMode).map((selectionMode) => (
140+
<SegmentedButtonItem key={selectionMode} selected={selectionMode === mode}>
141+
{selectionMode}
142+
</SegmentedButtonItem>
143+
))}
144+
</SegmentedButton>
145+
<Table {...args} features={<TableSelection mode={mode} />}>
146+
<TableRow>
147+
<TableCell>
148+
<span>Notebook Basic</span>
149+
</TableCell>
150+
<TableCell>
151+
<span>Very Best Screens</span>
152+
</TableCell>
153+
<TableCell>
154+
<span>30 x 18 x 3cm</span>
155+
</TableCell>
156+
<TableCell>
157+
<span>4.2KG</span>
158+
</TableCell>
159+
<TableCell>
160+
<span>956EUR</span>
161+
</TableCell>
162+
</TableRow>
163+
<TableRow>
164+
<TableCell>
165+
<span>Notebook Basic 17HT-1001</span>
166+
</TableCell>
167+
<TableCell>
168+
<span>Very Best Screens</span>
169+
</TableCell>
170+
<TableCell>
171+
<span>29 x 17 x 3.1cm</span>
172+
</TableCell>
173+
<TableCell>
174+
<span>4.5KG</span>
175+
</TableCell>
176+
<TableCell>
177+
<span>1249EUR</span>
178+
</TableCell>
179+
</TableRow>
180+
</Table>
181+
</>
182+
);
183+
}
184+
};

0 commit comments

Comments
 (0)