Skip to content

Commit 618f158

Browse files
nicolethoennicolethoen
authored
Merge pull request #575 from Jakub007d/component
[RHCLOUD-43454] Updating data-view docs and adding compound options for Sticky and Expandable
2 parents 53602b8 + 87d94f7 commit 618f158

File tree

10 files changed

+585
-43
lines changed

10 files changed

+585
-43
lines changed

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableExpandableExample.tsx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { FunctionComponent } from 'react';
2+
import { DataViewTable, DataViewTr, DataViewTh, ExpandableContent } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
3+
import { ExclamationCircleIcon } from '@patternfly/react-icons';
4+
import { Button } from '@patternfly/react-core';
5+
import { ActionsColumn } from '@patternfly/react-table';
6+
7+
interface Repository {
8+
id: number;
9+
name: string;
10+
branches: string | null;
11+
prs: string | null;
12+
workspaces: string;
13+
lastCommit: string;
14+
}
15+
16+
const expandableContents: ExpandableContent[] = [
17+
// Row 1 - Repository one
18+
{ rowId: 1, columnId: 3, content: <div><strong>PR Details:</strong> 3 open PRs, 45 merged this month, avg review time: 2 days</div> },
19+
{ rowId: 1, columnId: 5, content: <div><strong>Commit Info:</strong> Author: John Doe, Message: "Fix critical authentication bug", SHA: a1b2c3d</div> },
20+
21+
// Row 2 - Repository two
22+
{ rowId: 2, columnId: 2, content: <div><strong>Branch Details:</strong> 8 active branches, main, staging, feature/api-v2, feature/dashboard</div> },
23+
{ rowId: 2, columnId: 3, content: <div><strong>PR Details:</strong> 5 open PRs, 120 merged this month, avg review time: 1.5 days</div> },
24+
{ rowId: 2, columnId: 4, content: <div><strong>Workspace Info:</strong> Development env, 3 active deployments, last updated 30 mins ago</div> },
25+
{ rowId: 2, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Jane Smith, Message: "Add new API endpoints", SHA: x9y8z7w</div> },
26+
27+
// Row 3 - Repository three
28+
{ rowId: 3, columnId: 2, content: <div><strong>Branch Details:</strong> 12 active branches including main, develop, multiple feature branches</div> },
29+
{ rowId: 3, columnId: 3, content: <div><strong>PR Details:</strong> 8 open PRs, 200 merged this month, avg review time: 3 days</div> },
30+
{ rowId: 3, columnId: 4, content: <div><strong>Workspace Info:</strong> Staging env, 10 active deployments, last updated 1 day ago</div> },
31+
{ rowId: 3, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Bob Johnson, Message: "Refactor core modules", SHA: p0o9i8u</div> },
32+
33+
// Row 4 - Repository four
34+
{ rowId: 4, columnId: 2, content: <div><strong>Branch Details:</strong> 6 active branches, focusing on microservices architecture</div> },
35+
{ rowId: 4, columnId: 3, content: <div><strong>PR Details:</strong> 2 open PRs, 90 merged this month, avg review time: 2.5 days</div> },
36+
{ rowId: 4, columnId: 4, content: <div><strong>Workspace Info:</strong> QA env, 7 active deployments, automated testing enabled</div> },
37+
{ rowId: 4, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Alice Williams, Message: "Update dependencies", SHA: m5n4b3v</div> },
38+
39+
// Row 5 - Repository five
40+
{ rowId: 5, columnId: 2, content: <div><strong>Branch Details:</strong> 4 active branches, clean branch strategy</div> },
41+
{ rowId: 5, columnId: 3, content: <div><strong>PR Details:</strong> 6 open PRs, 75 merged this month, avg review time: 1 day</div> },
42+
{ rowId: 5, columnId: 4, content: <div><strong>Workspace Info:</strong> Pre-production env, CI/CD pipeline configured</div> },
43+
{ rowId: 5, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Charlie Brown, Message: "Implement dark mode", SHA: q2w3e4r</div> },
44+
45+
// Row 6 - Repository six
46+
{ rowId: 6, columnId: 2, content: <div><strong>Branch Details:</strong> 15 active branches, complex branching model</div> },
47+
{ rowId: 6, columnId: 3, content: <div><strong>PR Details:</strong> 10 open PRs, 250 merged this month, avg review time: 4 days</div> },
48+
{ rowId: 6, columnId: 4, content: <div><strong>Workspace Info:</strong> Multi-region deployment, high availability setup</div> },
49+
{ rowId: 6, columnId: 5, content: <div><strong>Commit Info:</strong> Author: David Lee, Message: "Security patches applied", SHA: t6y7u8i</div> },
50+
];
51+
52+
const repositories: Repository[] = [
53+
{ id: 1, name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
54+
{ id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
55+
{ id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
56+
{ id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
57+
{ id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
58+
{ id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
59+
];
60+
61+
const rowActions = [
62+
{
63+
title: 'Some action',
64+
onClick: () => console.log('clicked on Some action') // eslint-disable-line no-console
65+
},
66+
{
67+
title: <div>Another action</div>,
68+
onClick: () => console.log('clicked on Another action') // eslint-disable-line no-console
69+
},
70+
{
71+
isSeparator: true
72+
},
73+
{
74+
title: 'Third action',
75+
onClick: () => console.log('clicked on Third action') // eslint-disable-line no-console
76+
}
77+
];
78+
79+
const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit }) => [
80+
{
81+
id,
82+
cell: workspaces,
83+
props: {
84+
favorites: { isFavorited: true }
85+
}
86+
},
87+
{ cell: <Button href='#' variant='link' isInline>{name}</Button> },
88+
branches,
89+
prs,
90+
workspaces,
91+
lastCommit,
92+
{ cell: <ActionsColumn items={rowActions}/>, props: { isActionCell: true } },
93+
]);
94+
95+
const columns: DataViewTh[] = [
96+
null,
97+
'Repositories',
98+
{ cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></> },
99+
'Pull requests',
100+
{ cell: 'Workspaces', props: { info: { tooltip: 'More information' }, isStickyColumn: true } },
101+
{ cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } },
102+
];
103+
104+
const ouiaId = 'TableExample';
105+
106+
export const ExpandableExample: FunctionComponent = () => (
107+
<DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} expandedRows={expandableContents} isExpandable={true}/>
108+
);

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableInteractiveExample.tsx‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import { FunctionComponent, useState } from 'react';
2+
import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
3+
import { ExpandableContent } from '@patternfly/react-data-view/dist/dynamic/DataViewTableBasic';
4+
import { ExclamationCircleIcon } from '@patternfly/react-icons';
5+
import { Button, Toolbar, ToolbarContent, ToolbarItem, Switch } from '@patternfly/react-core';
6+
7+
interface Repository {
8+
id: number;
9+
name: string;
10+
branches: string | null;
11+
prs: string | null;
12+
workspaces: string;
13+
lastCommit: string;
14+
contributors: string;
15+
stars: string;
16+
forks: string;
17+
}
18+
19+
const expandableContents: ExpandableContent[] = [
20+
// Row 1 - Repository one
21+
{ rowId: 1, columnId: 2, content: <div><strong>Branch Details:</strong> 5 active branches, main, develop, feature/new-ui, hotfix/bug-123, release/v2.0</div> },
22+
{ rowId: 1, columnId: 3, content: <div><strong>PR Details:</strong> 3 open PRs, 45 merged this month, avg review time: 2 days</div> },
23+
{ rowId: 1, columnId: 5, content: <div><strong>Commit Info:</strong> Author: John Doe, Message: "Fix critical authentication bug", SHA: a1b2c3d</div> },
24+
25+
// Row 2 - Repository two
26+
{ rowId: 2, columnId: 2, content: <div><strong>Branch Details:</strong> 8 active branches, main, staging, feature/api-v2, feature/dashboard</div> },
27+
{ rowId: 2, columnId: 3, content: <div><strong>PR Details:</strong> 5 open PRs, 120 merged this month, avg review time: 1.5 days</div> },
28+
{ rowId: 2, columnId: 4, content: <div><strong>Workspace Info:</strong> Development env, 3 active deployments, last updated 30 mins ago</div> },
29+
{ rowId: 2, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Jane Smith, Message: "Add new API endpoints", SHA: x9y8z7w</div> },
30+
31+
// Row 3 - Repository three
32+
{ rowId: 3, columnId: 2, content: <div><strong>Branch Details:</strong> 12 active branches including main, develop, multiple feature branches</div> },
33+
{ rowId: 3, columnId: 3, content: <div><strong>PR Details:</strong> 8 open PRs, 200 merged this month, avg review time: 3 days</div> },
34+
{ rowId: 3, columnId: 4, content: <div><strong>Workspace Info:</strong> Staging env, 10 active deployments, last updated 1 day ago</div> },
35+
{ rowId: 3, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Bob Johnson, Message: "Refactor core modules", SHA: p0o9i8u</div> },
36+
37+
// Row 4 - Repository four
38+
{ rowId: 4, columnId: 2, content: <div><strong>Branch Details:</strong> 6 active branches, focusing on microservices architecture</div> },
39+
{ rowId: 4, columnId: 3, content: <div><strong>PR Details:</strong> 2 open PRs, 90 merged this month, avg review time: 2.5 days</div> },
40+
{ rowId: 4, columnId: 4, content: <div><strong>Workspace Info:</strong> QA env, 7 active deployments, automated testing enabled</div> },
41+
{ rowId: 4, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Alice Williams, Message: "Update dependencies", SHA: m5n4b3v</div> },
42+
43+
// Row 5 - Repository five
44+
{ rowId: 5, columnId: 2, content: <div><strong>Branch Details:</strong> 4 active branches, clean branch strategy</div> },
45+
{ rowId: 5, columnId: 3, content: <div><strong>PR Details:</strong> 6 open PRs, 75 merged this month, avg review time: 1 day</div> },
46+
{ rowId: 5, columnId: 4, content: <div><strong>Workspace Info:</strong> Pre-production env, CI/CD pipeline configured</div> },
47+
{ rowId: 5, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Charlie Brown, Message: "Implement dark mode", SHA: q2w3e4r</div> },
48+
49+
// Row 6 - Repository six
50+
{ rowId: 6, columnId: 2, content: <div><strong>Branch Details:</strong> 15 active branches, complex branching model</div> },
51+
{ rowId: 6, columnId: 3, content: <div><strong>PR Details:</strong> 10 open PRs, 250 merged this month, avg review time: 4 days</div> },
52+
{ rowId: 6, columnId: 4, content: <div><strong>Workspace Info:</strong> Multi-region deployment, high availability setup</div> },
53+
{ rowId: 6, columnId: 5, content: <div><strong>Commit Info:</strong> Author: David Lee, Message: "Security patches applied", SHA: t6y7u8i</div> },
54+
];
55+
56+
const repositories: Repository[] = [
57+
{ id: 1, name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one', contributors: '25 contributors', stars: '1.2k stars', forks: '340 forks' },
58+
{ id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two', contributors: '45 contributors', stars: '3.5k stars', forks: '890 forks' },
59+
{ id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three', contributors: '200 contributors', stars: '15k stars', forks: '2.1k forks' },
60+
{ id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four', contributors: '80 contributors', stars: '5.7k stars', forks: '1.2k forks' },
61+
{ id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five', contributors: '60 contributors', stars: '4.3k stars', forks: '780 forks' },
62+
{ id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six', contributors: '300 contributors', stars: '22k stars', forks: '4.5k forks' },
63+
{ id: 7, name: 'Repository seven', branches: 'Branch seven', prs: 'Pull request seven', workspaces: 'Workspace seven', lastCommit: 'Timestamp seven', contributors: '12 contributors', stars: '567 stars', forks: '120 forks' },
64+
{ id: 8, name: 'Repository eight', branches: 'Branch eight', prs: 'Pull request eight', workspaces: 'Workspace eight', lastCommit: 'Timestamp eight', contributors: '98 contributors', stars: '7.8k stars', forks: '1.5k forks' },
65+
{ id: 9, name: 'Repository nine', branches: 'Branch nine', prs: 'Pull request nine', workspaces: 'Workspace nine', lastCommit: 'Timestamp nine', contributors: '33 contributors', stars: '2.1k stars', forks: '456 forks' },
66+
{ id: 10, name: 'Repository ten', branches: 'Branch ten', prs: 'Pull request ten', workspaces: 'Workspace ten', lastCommit: 'Timestamp ten', contributors: '150 contributors', stars: '11k stars', forks: '2.8k forks' },
67+
{ id: 11, name: 'Repository eleven', branches: 'Branch eleven', prs: 'Pull request eleven', workspaces: 'Workspace eleven', lastCommit: 'Timestamp eleven', contributors: '67 contributors', stars: '5.2k stars', forks: '980 forks' },
68+
{ id: 12, name: 'Repository twelve', branches: 'Branch twelve', prs: 'Pull request twelve', workspaces: 'Workspace twelve', lastCommit: 'Timestamp twelve', contributors: '41 contributors', stars: '3.1k stars', forks: '670 forks' },
69+
{ id: 13, name: 'Repository thirteen', branches: 'Branch thirteen', prs: 'Pull request thirteen', workspaces: 'Workspace thirteen', lastCommit: 'Timestamp thirteen', contributors: '89 contributors', stars: '6.4k stars', forks: '1.3k forks' },
70+
{ id: 14, name: 'Repository fourteen', branches: 'Branch fourteen', prs: 'Pull request fourteen', workspaces: 'Workspace fourteen', lastCommit: 'Timestamp fourteen', contributors: '120 contributors', stars: '9.2k stars', forks: '1.9k forks' },
71+
{ id: 15, name: 'Repository fifteen', branches: 'Branch fifteen', prs: 'Pull request fifteen', workspaces: 'Workspace fifteen', lastCommit: 'Timestamp fifteen', contributors: '78 contributors', stars: '5.9k stars', forks: '1.1k forks' }
72+
];
73+
74+
const ouiaId = 'TableInteractiveExample';
75+
76+
export const InteractiveExample: FunctionComponent = () => {
77+
const [isExpandable, setIsExpandable] = useState(true);
78+
const [isSticky, setIsSticky] = useState(true);
79+
80+
// Generate rows based on current settings
81+
const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit, contributors, stars, forks }) => [
82+
{
83+
id,
84+
cell: workspaces,
85+
props: {
86+
favorites: { isFavorited: true }
87+
}
88+
},
89+
{ cell: <Button href='#' variant='link' isInline>{name}</Button>, props: { isStickyColumn: isSticky, hasRightBorder: true, hasLeftBorder: true, modifier: "nowrap" } },
90+
{ cell: branches, props: { modifier: "nowrap" } },
91+
{ cell: prs, props: { modifier: "nowrap" } },
92+
{ cell: workspaces, props: { modifier: "nowrap" } },
93+
{ cell: lastCommit, props: { modifier: "nowrap" } },
94+
{ cell: contributors, props: { modifier: "nowrap" } },
95+
{ cell: stars, props: { modifier: "nowrap" } },
96+
{ cell: forks, props: { modifier: "nowrap" } }
97+
]);
98+
99+
const columns: DataViewTh[] = [
100+
null,
101+
{ cell: 'Repositories', props: { isStickyColumn: isSticky, modifier: 'fitContent', hasRightBorder: true, hasLeftBorder: true } },
102+
{ cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></>, props: { width: 20 } },
103+
{ cell: 'Pull requests', props: { width: 20 } },
104+
{ cell: 'Workspaces', props: { info: { tooltip: 'More information' }, width: 20 } },
105+
{ cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 }, width: 20 } },
106+
{ cell: 'Contributors', props: { width: 20 } },
107+
{ cell: 'Stars', props: { width: 20 } },
108+
{ cell: 'Forks', props: { width: 20 } },
109+
];
110+
111+
return (
112+
<>
113+
<Toolbar>
114+
<ToolbarContent>
115+
<ToolbarItem>
116+
<Switch
117+
id="expandable-switch"
118+
label="Expandable"
119+
isChecked={isExpandable}
120+
onChange={(_event, checked) => setIsExpandable(checked)}
121+
aria-label="Toggle expandable rows"
122+
/>
123+
</ToolbarItem>
124+
<ToolbarItem>
125+
<Switch
126+
id="sticky-switch"
127+
label="Sticky header & column"
128+
isChecked={isSticky}
129+
onChange={(_event, checked) => setIsSticky(checked)}
130+
aria-label="Toggle sticky header and columns"
131+
/>
132+
</ToolbarItem>
133+
</ToolbarContent>
134+
</Toolbar>
135+
<div style={{ height: '400px', overflow: 'auto' }}>
136+
<DataViewTable
137+
aria-label='Interactive repositories table'
138+
ouiaId={ouiaId}
139+
columns={columns}
140+
rows={rows}
141+
expandedRows={isExpandable ? expandableContents : undefined}
142+
isExpandable={isExpandable}
143+
isSticky={isSticky}
144+
/>
145+
</div>
146+
</>
147+
);
148+
};

0 commit comments

Comments
 (0)