Skip to content

Commit 5a84013

Browse files
Lukas742Lukas742
authored
docs(AnalyticalTable): add JSDoc comment, enhance story (#934)
1 parent 7ce57cc commit 5a84013

File tree

6 files changed

+310
-74
lines changed

6 files changed

+310
-74
lines changed

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx

Lines changed: 117 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
1+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
22
import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';
33
import { createSelectArgTypes } from '../../../../../shared/stories/createSelectArgTypes';
44
import { TableScaleWidthMode } from '@ui5/webcomponents-react/lib/TableScaleWidthMode';
@@ -15,6 +15,7 @@ import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
1515
import { DefaultLoadingComponent } from './defaults/LoadingComponent';
1616
import { DefaultNoDataComponent } from './defaults/NoDataComponent';
1717
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
18+
import { useEffect, useRef, useState } from 'react';
1819

1920
<Meta
2021
title="Components / AnalyticalTable"
@@ -125,42 +126,7 @@ import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
125126
<DocsHeader />
126127

127128
<Canvas>
128-
<Story name="Default">
129-
{(args) => (
130-
<div style={{ display: 'flex', flexDirection: 'column' }}>
131-
<AnalyticalTable
132-
{...args}
133-
title={args.title}
134-
data={args.data}
135-
columns={args.columns}
136-
loading={args.loading}
137-
alternateRowColor={args.alternateRowColor}
138-
sortable={args.sortable}
139-
filterable={args.filterable}
140-
visibleRows={args.visibleRows}
141-
minRows={args.minRows}
142-
groupable={args.groupable}
143-
selectionMode={args.selectionMode}
144-
scaleWidthMode={args.scaleWidthMode}
145-
onRowSelected={args.onRowSelected}
146-
onSort={args.onSort}
147-
onGroup={args.onGroup}
148-
onRowExpandChange={args.onRowExpandChange}
149-
groupBy={args.groupBy}
150-
rowHeight={args.rowHeight}
151-
selectedRowIds={args.selectedRowIds}
152-
onColumnsReordered={args.onColumnsReordered}
153-
withRowHighlight={args.withRowHighlight}
154-
highlightField={args.highlightField}
155-
infiniteScroll={args.infiniteScroll}
156-
infiniteScrollThreshold={args.infiniteScrollThreshold}
157-
onLoadMore={args.onLoadMore}
158-
selectionBehavior={args.selectionBehavior}
159-
overscanCountHorizontal={args.overscanCountHorizontal}
160-
/>
161-
</div>
162-
)}
163-
</Story>
129+
<Story name="Default">{(args) => <AnalyticalTable {...args} />}</Story>
164130
</Canvas>
165131

166132
<ArgsTable story="." />
@@ -194,13 +160,22 @@ import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
194160
| `disableGroupBy` | `boolean` | Disable groupBy for this column |
195161
| `defaultCanSort` | `boolean` | If set to true, this column will be sortable, regardless if it has a valid `accessor` |
196162
| `disableSortBy` | `boolean` | Disable sorting for this column |
163+
| `sortDescFirst` | `boolean` | If set to `true`, the first sort direction for this column will be descending instead of ascending. |
164+
| `sortInverted` | `boolean` | If set to `true`, the underlying sorting direction will be inverted, but the UI will not. |
197165
| `sortType` | `string OR ((rowA, rowB, columnId: string, descending: boolean) => any)` | String or custom sort function.<br />Supported String Values: <ul><li>`basic`</li><li>`datetime`</li><li>`alphanumeric`</li></ul> |
198166
| `disableResizing` | `boolean` | Disable resizing for this column |
199167
| `hAlign` | `TextAlign` | Horizontal align of the cell |
200168
| `vAlign` | `VerticalAlign` | Vertical align of the cell |
201169

202170
## Recipes
203171

172+
### How to select rows containing active elements?
173+
174+
By default, the `AnalyticalTable` will not select any rows after clicking on active elements inside a table cell like a `Button`, `Link`,
175+
etc. <br />
176+
In case you want to select the row anyways, you can "mark" the event to allow such a behaviour. <br />
177+
Example: `<Link onClick={(e) => {e.markerAllowTableRowSelection = true;}>My Link Text</Link>`
178+
204179
### How do I stop my table state from automatically resetting when my data changes?
205180

206181
By default, the `AnalyticalTable` will reset the sorters, filters, grouping, selected rows, etc. when the table data changes.
@@ -270,32 +245,115 @@ export const ResponsiveTable = () => {
270245
With the help of that effect, the table will now show either 2 columns on a mobile phone, 3 columns on a tablet device and all columns on Desktop devices.
271246
This even works if you resize the browser window!
272247

248+
<br />
249+
273250
# Stories
274251

252+
<br />
253+
275254
## Tree Table
276255

277256
<Canvas>
278-
<Story name="Tree Table" args={{ data: generateData(20, true) }}>
279-
{(args) => (
280-
<AnalyticalTable
281-
{...args}
282-
title={args.title}
283-
data={args.data}
284-
columns={args.columns}
285-
loading={args.loading}
286-
sortable={args.sortable}
287-
filterable={args.filterable}
288-
visibleRows={args.visibleRows}
289-
minRows={args.minRows}
290-
selectionMode={args.selectionMode}
291-
onRowSelected={args.onRowSelected}
292-
onSort={args.onSort}
293-
onRowExpandChange={args.onRowExpandChange}
294-
subRowsKey={args.subRowsKey}
295-
selectedRowIds={args.selectedRowIds}
296-
selectionBehavior={args.selectionBehavior}
297-
isTreeTable
298-
/>
299-
)}
257+
<Story name="Tree Table" args={{ data: generateData(20, true), isTreeTable: true }}>
258+
{(args) => <AnalyticalTable {...args} />}
259+
</Story>
260+
</Canvas>
261+
262+
The `data` structure of the tree table is as follows:
263+
264+
```js
265+
const data = {
266+
name: "Greg Miller",
267+
age: 35,
268+
friend: {
269+
name: "Rose Franco",
270+
age: 32,
271+
},
272+
status: "None",
273+
subRows: [
274+
{
275+
name: "Rick DeAngelo",
276+
age: 25,
277+
friend: {
278+
name: "Susanne Franco",
279+
age: 37,
280+
},
281+
status: "None",
282+
subRows: [...],
283+
},
284+
],
285+
...
286+
};
287+
```
288+
289+
In this example the default key for sub row detection is used (`subRows`), you can use any key you like by setting the `subRowsKey` prop.
290+
291+
<br />
292+
293+
## Infinite Scrolling
294+
295+
The table initially contains 50 rows, when the last 10 rows are reached the table will load more data.
296+
297+
<Canvas>
298+
<Story name="Infinite Scrolling">
299+
{(args) => {
300+
const [data, setData] = useState(args.data.slice(0, 50));
301+
const [loading, setLoading] = useState(false);
302+
const offset = useRef(50);
303+
const onLoadMore = () => {
304+
setLoading(true);
305+
};
306+
useEffect(() => {
307+
if (loading) {
308+
setTimeout(() => {
309+
setData((prev) => [...prev, ...args.data.slice(offset.current, offset.current + 50)]);
310+
setLoading(false);
311+
offset.current += 50;
312+
}, 2000);
313+
}
314+
}, [loading, args.data, offset.current]);
315+
return (
316+
<AnalyticalTable
317+
data={data}
318+
columns={args.columns}
319+
infiniteScroll={true}
320+
infiniteScrollThreshold={10}
321+
title="Scroll to load more data"
322+
onLoadMore={onLoadMore}
323+
loading={loading}
324+
/>
325+
);
326+
}}
300327
</Story>
301328
</Canvas>
329+
330+
```jsx
331+
const InfiniteScrollTable = (props) => {
332+
const [data, setData] = useState(props.data.slice(0, 50));
333+
const [loading, setLoading] = useState(false);
334+
const offset = useRef(50);
335+
const onLoadMore = () => {
336+
setLoading(true);
337+
};
338+
useEffect(() => {
339+
if (loading) {
340+
setTimeout(() => {
341+
setData((prev) => [...prev, ...props.data.slice(offset.current, offset.current + 50)]);
342+
setLoading(false);
343+
offset.current += 50;
344+
}, 2000);
345+
}
346+
}, [loading, props.data, offset.current]);
347+
return (
348+
<AnalyticalTable
349+
data={data}
350+
columns={props.columns}
351+
infiniteScroll={true}
352+
infiniteScrollThreshold={10}
353+
title="Scroll to load more data"
354+
onLoadMore={onLoadMore}
355+
loading={loading}
356+
/>
357+
);
358+
};
359+
```

‎packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ export const VirtualTableBodyContainer = (props) => {
1313
onLoadMore,
1414
rows,
1515
internalRowHeight,
16-
handleExternalScroll
16+
handleExternalScroll,
17+
visibleRows
1718
} = props;
1819
const [isMounted, setIsMounted] = useState(false);
1920

@@ -35,8 +36,8 @@ export const VirtualTableBodyContainer = (props) => {
3536
const isScrollingDown = lastScrollTop.current < scrollOffset;
3637
if (isScrollingDown && infiniteScroll) {
3738
lastScrollTop.current = scrollOffset;
38-
const currentTopRow = Math.floor(scrollOffset / internalRowHeight);
39-
if (rows.length - currentTopRow < infiniteScrollThreshold) {
39+
const currentLastRow = Math.floor(scrollOffset / internalRowHeight) + visibleRows;
40+
if (rows.length - currentLastRow < infiniteScrollThreshold) {
4041
if (!firedInfiniteLoadEvents.current.has(rows.length)) {
4142
onLoadMore({
4243
detail: {

0 commit comments

Comments
 (0)