Skip to content

Commit 98c458c

Browse files
Lukas742Lukas742
authored
docs(AnalyticalTable): create default example, initially hide other examples (#6693)
1 parent d5b612d commit 98c458c

File tree

6 files changed

+425
-260
lines changed

6 files changed

+425
-260
lines changed

‎.storybook/preview-head.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
padding: 1rem;
1616
}
1717

18+
details {
19+
cursor: pointer;
20+
}
21+
1822
@media (min-width: 1330px) and (max-width: 1520px) {
1923
.sbdocs-wrapper {
2024
justify-content: flex-start !important;

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

Lines changed: 186 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -16,130 +16,67 @@ import * as ComponentStories from './AnalyticalTable.stories';
1616

1717
<details>
1818

19-
<summary>Show Code</summary>
19+
<summary>Show shortened Code</summary>
2020

2121
```jsx
22-
<AnalyticalTable
23-
columns={[
24-
{
25-
Header: 'Name',
26-
accessor: 'name',
27-
headerTooltip: 'Full Name'
28-
},
29-
{
30-
Header: 'Age',
31-
accessor: 'age',
32-
className: 'superCustomClass',
33-
disableFilters: false,
34-
disableGroupBy: true,
35-
disableSortBy: false,
36-
hAlign: 'End'
37-
},
38-
{
39-
Header: 'Friend Name',
40-
accessor: 'friend.name'
41-
},
42-
{
43-
accessor: 'friend.age',
44-
hAlign: 'End',
45-
Header: () => <span>Friend Age</span>,
46-
filter: (rows, accessor, filterValue) => {
47-
if (filterValue === 'all') {
48-
return rows;
49-
}
50-
if (filterValue === 'true') {
51-
return rows.filter((row) => row.values[accessor] >= 21);
52-
}
53-
return rows.filter((row) => row.values[accessor] < 21);
54-
},
55-
Filter: ({ column, popoverRef }) => {
56-
const handleChange = (event) => {
57-
// set filter
58-
column.setFilter(event.detail.selectedOption.getAttribute('value'));
59-
// close popover
60-
popoverRef.current.open = false;
61-
};
62-
return (
63-
<Select
64-
onChange={handleChange}
65-
style={{ width: '100%' }}
66-
value={column.filterValue ? column.filterValue : 'all'}
67-
>
68-
<Option value="all">Show All</Option>
69-
<Option value="true">Can Drink</Option>
70-
<Option value="false">Can't Drink</Option>
71-
</Select>
72-
);
73-
}
22+
const columns = [
23+
{
24+
Header: 'Name',
25+
accessor: 'name'
26+
},
27+
{
28+
Header: 'Age',
29+
accessor: 'age'
30+
},
31+
{
32+
Header: 'Friend Name',
33+
accessor: 'friend.name'
34+
},
35+
{
36+
Header: 'Friend Age',
37+
accessor: 'friend.age'
38+
}
39+
];
40+
41+
const data = [
42+
{
43+
age: 80,
44+
friend: {
45+
age: 68,
46+
name: 'Carver Vance'
7447
},
75-
{
76-
Cell: (instance) => {
77-
const { cell, row, webComponentsReactProperties } = instance;
78-
// disable buttons if overlay is active to prevent focus
79-
const isOverlay = webComponentsReactProperties.showOverlay;
80-
// console.log('This is your row data', row.original);
81-
return (
82-
<FlexBox>
83-
<Button icon="edit" disabled={isOverlay} />
84-
<Button icon="delete" disabled={isOverlay} />
85-
</FlexBox>
86-
);
87-
},
88-
cellLabel: ({ cell }) => {
89-
// `cell.cellLabel` contains the internal `aria-label` of the respective cell
90-
return `${cell.cellLabel} press TAB to focus active elements inside this cell`;
91-
},
92-
Header: 'Actions',
93-
accessor: '.',
94-
disableFilters: true,
95-
disableGroupBy: true,
96-
disableResizing: true,
97-
disableSortBy: true,
98-
id: 'actions',
99-
width: 100
100-
}
101-
]}
102-
data={[
103-
{
104-
age: 80,
105-
friend: {
106-
age: 68,
107-
name: 'Carver Vance'
108-
},
109-
name: 'Allen Best',
110-
status: 'Success'
48+
name: 'Allen Best',
49+
status: 'Positive'
50+
},
51+
{
52+
age: 31,
53+
friend: {
54+
age: 70,
55+
name: 'Strickland Gallegos'
11156
},
112-
{
113-
age: 31,
114-
friend: {
115-
age: 70,
116-
name: 'Strickland Gallegos'
117-
},
118-
name: 'Combs Fleming',
119-
status: 'None'
120-
}
121-
// shortened for readability
122-
]}
123-
filterable
124-
groupBy={[]}
125-
groupable
126-
header="Table Title"
127-
infiniteScroll
128-
onColumnsReorder={() => {}}
129-
onGroup={() => {}}
130-
onLoadMore={() => {}}
131-
onRowClick={() => {}}
132-
onRowExpandChange={() => {}}
133-
onRowSelect={() => {}}
134-
onSort={() => {}}
135-
onTableScroll={() => {}}
136-
rowHeight={44}
137-
selectedRowIds={{
138-
3: true
139-
}}
140-
selectionMode="Single"
141-
withRowHighlight
142-
/>
57+
name: 'Combs Fleming',
58+
status: 'None'
59+
}
60+
// shortened for readability
61+
];
62+
63+
const TableComp = () => {
64+
return (
65+
<AnalyticalTable
66+
columns={columns}
67+
data={data}
68+
onAutoResize={() => {}}
69+
onColumnsReorder={() => {}}
70+
onGroup={() => {}}
71+
onLoadMore={() => {}}
72+
onRowClick={() => {}}
73+
onRowExpandChange={() => {}}
74+
onRowSelect={() => {}}
75+
onSort={() => {}}
76+
onTableScroll={() => {}}
77+
/>
78+
);
79+
};
14380
```
14481

14582
</details>
@@ -622,4 +559,133 @@ const TableComponent = () => {
622559
623560
</details>
624561
562+
## Kitchen Sink
563+
564+
<Canvas of={ComponentStories.KitchenSink} />
565+
566+
### Code
567+
568+
<details>
569+
570+
<summary>Show shortened Code</summary>
571+
572+
```jsx
573+
const data = [
574+
{
575+
age: 80,
576+
friend: {
577+
age: 68,
578+
name: 'Carver Vance'
579+
},
580+
name: 'Allen Best',
581+
status: 'Positive'
582+
},
583+
{
584+
age: 31,
585+
friend: {
586+
age: 70,
587+
name: 'Strickland Gallegos'
588+
},
589+
name: 'Combs Fleming',
590+
status: 'None'
591+
}
592+
// shortened for readability
593+
];
594+
595+
const columns = [
596+
{
597+
Header: 'Name',
598+
accessor: 'name',
599+
autoResizable: true,
600+
headerTooltip: 'Full Name'
601+
},
602+
{
603+
Header: 'Age',
604+
accessor: 'age',
605+
autoResizable: true,
606+
className: 'superCustomClass',
607+
disableFilters: false,
608+
disableGroupBy: true,
609+
disableSortBy: false,
610+
hAlign: 'End'
611+
},
612+
{
613+
Header: 'Friend Name',
614+
accessor: 'friend.name',
615+
autoResizable: true
616+
},
617+
{
618+
Filter: () => {},
619+
Header: () => {},
620+
accessor: 'friend.age',
621+
autoResizable: true,
622+
filter: () => {},
623+
hAlign: 'End',
624+
headerLabel: 'Friend Age'
625+
},
626+
{
627+
Cell: () => {},
628+
Header: 'Actions',
629+
accessor: '.',
630+
cellLabel: () => {},
631+
disableFilters: true,
632+
disableGroupBy: true,
633+
disableResizing: true,
634+
disableSortBy: true,
635+
id: 'actions',
636+
minWidth: 100,
637+
width: 100
638+
}
639+
];
640+
641+
const TestComp2 = () => {
642+
return (
643+
<AnalyticalTable
644+
data={data}
645+
columns={columns}
646+
alternateRowColor
647+
columnOrder={['friend.name', 'friend.age', 'name']}
648+
extension={
649+
<FlexBox justifyContent="End">
650+
<Button accessibleName="edit" design="Transparent" icon="edit" />
651+
</FlexBox>
652+
}
653+
filterable
654+
groupable
655+
header="Table Title"
656+
headerRowHeight={60}
657+
highlightField="status"
658+
infiniteScroll
659+
infiniteScrollThreshold={20}
660+
loadingDelay={1000}
661+
minRows={5}
662+
noDataText="Custom 'noDataText' message"
663+
overscanCountHorizontal={5}
664+
scaleWidthMode="Smart"
665+
selectedRowIds={{
666+
3: true
667+
}}
668+
selectionBehavior="Row"
669+
selectionMode="Single"
670+
sortable
671+
subRowsKey="subRows"
672+
visibleRowCountMode="Interactive"
673+
visibleRows={5}
674+
withRowHighlight
675+
onAutoResize={() => {}}
676+
onColumnsReorder={() => {}}
677+
onGroup={() => {}}
678+
onLoadMore={() => {}}
679+
onRowClick={() => {}}
680+
onRowExpandChange={() => {}}
681+
onRowSelect={() => {}}
682+
onSort={() => {}}
683+
onTableScroll={() => {}}
684+
/>
685+
);
686+
};
687+
```
688+
689+
</details>
690+
625691
<Footer />

0 commit comments

Comments
 (0)