Skip to content

Commit 22f15f0

Browse files
Jakub007dJakub007d
committed
feat: adding Expandable, Draggable and Sticky options
1 parent c6a0951 commit 22f15f0

File tree

11 files changed

+672
-27
lines changed

11 files changed

+672
-27
lines changed

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { FunctionComponent } from 'react';
2+
import { DataViewTable, DataViewTr, DataViewTh } 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 repositories: Repository[] = [
17+
{ id: 1, name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
18+
{ id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
19+
{ id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
20+
{ id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
21+
{ id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
22+
{ id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
23+
];
24+
25+
const rowActions = [
26+
{
27+
title: 'Some action',
28+
onClick: () => console.log('clicked on Some action') // eslint-disable-line no-console
29+
},
30+
{
31+
title: <div>Another action</div>,
32+
onClick: () => console.log('clicked on Another action') // eslint-disable-line no-console
33+
},
34+
{
35+
isSeparator: true
36+
},
37+
{
38+
title: 'Third action',
39+
onClick: () => console.log('clicked on Third action') // eslint-disable-line no-console
40+
}
41+
];
42+
43+
const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit }) => [
44+
{ id, cell: workspaces, props: { favorites: { isFavorited: true } } },
45+
{ cell: <Button href='#' variant='link' isInline>{name}</Button> },
46+
branches,
47+
prs,
48+
workspaces,
49+
lastCommit,
50+
{ cell: <ActionsColumn items={rowActions}/>, props: { isActionCell: true } },
51+
]);
52+
53+
const columns: DataViewTh[] = [
54+
null,
55+
'Repositories',
56+
{ cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></> },
57+
'Pull requests',
58+
{ cell: 'Workspaces', props: { info: { tooltip: 'More information' } } },
59+
{ cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } },
60+
];
61+
62+
const ouiaId = 'TableDraggableExample';
63+
64+
export const DraggableExample: FunctionComponent = () => (
65+
<DataViewTable
66+
aria-label='Draggable repositories table'
67+
ouiaId={ouiaId}
68+
columns={columns}
69+
rows={rows}
70+
isDraggable
71+
/>
72+
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,5 +63,5 @@ const columns: DataViewTh[] = [
6363
const ouiaId = 'TableExample';
6464

6565
export const BasicExample: FunctionComponent = () => (
66-
<DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
66+
<DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} isExpandable={true}/>
6767
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,5 +116,5 @@ const columns: DataViewTh[] = [
116116
const ouiaId = 'TableExample';
117117

118118
export const BasicExample: FunctionComponent = () => (
119-
<DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} expandedRows={expandableContents}/>
119+
<DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} expandedRows={expandableContents} isExpandable={true}/>
120120
);

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

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
import { FunctionComponent, useState } 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, Toolbar, ToolbarContent, ToolbarItem, Switch } from '@patternfly/react-core';
5+
6+
interface Repository {
7+
id: number;
8+
name: string;
9+
branches: string | null;
10+
prs: string | null;
11+
workspaces: string;
12+
lastCommit: string;
13+
contributors: string;
14+
stars: string;
15+
forks: string;
16+
}
17+
18+
const expandableContents: ExpandableContent[] = [
19+
// Row 1 - Repository one
20+
{ row_id: 1, column_id: 2, content: <div><strong>Branch Details:</strong> 5 active branches, main, develop, feature/new-ui, hotfix/bug-123, release/v2.0</div> },
21+
{ row_id: 1, column_id: 3, content: <div><strong>PR Details:</strong> 3 open PRs, 45 merged this month, avg review time: 2 days</div> },
22+
{ row_id: 1, column_id: 5, content: <div><strong>Commit Info:</strong> Author: John Doe, Message: "Fix critical authentication bug", SHA: a1b2c3d</div> },
23+
24+
// Row 2 - Repository two
25+
{ row_id: 2, column_id: 0, content: <div><strong>Favorites Details:</strong> Recently added</div> },
26+
{ row_id: 2, column_id: 1, content: <div><strong>Repository Details:</strong> Created 3 months ago, 45 contributors, Apache 2.0 License</div> },
27+
{ row_id: 2, column_id: 2, content: <div><strong>Branch Details:</strong> 8 active branches, main, staging, feature/api-v2, feature/dashboard</div> },
28+
{ row_id: 2, column_id: 3, content: <div><strong>PR Details:</strong> 5 open PRs, 120 merged this month, avg review time: 1.5 days</div> },
29+
{ row_id: 2, column_id: 4, content: <div><strong>Workspace Info:</strong> Development env, 3 active deployments, last updated 30 mins ago</div> },
30+
{ row_id: 2, column_id: 5, content: <div><strong>Commit Info:</strong> Author: Jane Smith, Message: "Add new API endpoints", SHA: x9y8z7w</div> },
31+
32+
// Row 3 - Repository three
33+
{ row_id: 3, column_id: 0, content: <div><strong>Favorites Details:</strong> Top starred repository</div> },
34+
{ row_id: 3, column_id: 1, content: <div><strong>Repository Details:</strong> Created 1 year ago, 200 contributors, GPL v3 License</div> },
35+
{ row_id: 3, column_id: 2, content: <div><strong>Branch Details:</strong> 12 active branches including main, develop, multiple feature branches</div> },
36+
{ row_id: 3, column_id: 3, content: <div><strong>PR Details:</strong> 8 open PRs, 200 merged this month, avg review time: 3 days</div> },
37+
{ row_id: 3, column_id: 4, content: <div><strong>Workspace Info:</strong> Staging env, 10 active deployments, last updated 1 day ago</div> },
38+
{ row_id: 3, column_id: 5, content: <div><strong>Commit Info:</strong> Author: Bob Johnson, Message: "Refactor core modules", SHA: p0o9i8u</div> },
39+
40+
// Row 4 - Repository four
41+
{ row_id: 4, column_id: 0, content: <div><strong>Favorites Details:</strong> Added 2 weeks ago</div> },
42+
{ row_id: 4, column_id: 1, content: <div><strong>Repository Details:</strong> Created 2 years ago, 80 contributors, BSD License</div> },
43+
{ row_id: 4, column_id: 2, content: <div><strong>Branch Details:</strong> 6 active branches, focusing on microservices architecture</div> },
44+
{ row_id: 4, column_id: 3, content: <div><strong>PR Details:</strong> 2 open PRs, 90 merged this month, avg review time: 2.5 days</div> },
45+
{ row_id: 4, column_id: 4, content: <div><strong>Workspace Info:</strong> QA env, 7 active deployments, automated testing enabled</div> },
46+
{ row_id: 4, column_id: 5, content: <div><strong>Commit Info:</strong> Author: Alice Williams, Message: "Update dependencies", SHA: m5n4b3v</div> },
47+
48+
// Row 5 - Repository five
49+
{ row_id: 5, column_id: 0, content: <div><strong>Favorites Details:</strong> Most viewed this week</div> },
50+
{ row_id: 5, column_id: 1, content: <div><strong>Repository Details:</strong> Created 8 months ago, 60 contributors, ISC License</div> },
51+
{ row_id: 5, column_id: 2, content: <div><strong>Branch Details:</strong> 4 active branches, clean branch strategy</div> },
52+
{ row_id: 5, column_id: 3, content: <div><strong>PR Details:</strong> 6 open PRs, 75 merged this month, avg review time: 1 day</div> },
53+
{ row_id: 5, column_id: 4, content: <div><strong>Workspace Info:</strong> Pre-production env, CI/CD pipeline configured</div> },
54+
{ row_id: 5, column_id: 5, content: <div><strong>Commit Info:</strong> Author: Charlie Brown, Message: "Implement dark mode", SHA: q2w3e4r</div> },
55+
56+
// Row 6 - Repository six
57+
{ row_id: 6, column_id: 0, content: <div><strong>Favorites Details:</strong> Legacy favorite</div> },
58+
{ row_id: 6, column_id: 1, content: <div><strong>Repository Details:</strong> Created 5 years ago, 300 contributors, MIT License</div> },
59+
{ row_id: 6, column_id: 2, content: <div><strong>Branch Details:</strong> 15 active branches, complex branching model</div> },
60+
{ row_id: 6, column_id: 3, content: <div><strong>PR Details:</strong> 10 open PRs, 250 merged this month, avg review time: 4 days</div> },
61+
{ row_id: 6, column_id: 4, content: <div><strong>Workspace Info:</strong> Multi-region deployment, high availability setup</div> },
62+
{ row_id: 6, column_id: 5, content: <div><strong>Commit Info:</strong> Author: David Lee, Message: "Security patches applied", SHA: t6y7u8i</div> },
63+
];
64+
65+
const repositories: Repository[] = [
66+
{ 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'},
67+
{ 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'},
68+
{ 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'},
69+
{ 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'},
70+
{ 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'},
71+
{ 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'},
72+
{ 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'},
73+
{ 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'},
74+
{ 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'},
75+
{ 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'},
76+
{ 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'},
77+
{ 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'},
78+
{ 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'},
79+
{ 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'},
80+
{ 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'}
81+
];
82+
83+
const rowActions = [
84+
{
85+
title: 'Some action',
86+
onClick: () => console.log('clicked on Some action') // eslint-disable-line no-console
87+
},
88+
{
89+
title: <div>Another action</div>,
90+
onClick: () => console.log('clicked on Another action') // eslint-disable-line no-console
91+
},
92+
{
93+
isSeparator: true
94+
},
95+
{
96+
title: 'Third action',
97+
onClick: () => console.log('clicked on Third action') // eslint-disable-line no-console
98+
}
99+
];
100+
101+
const ouiaId = 'TableInteractiveExample';
102+
103+
export const InteractiveExample: FunctionComponent = () => {
104+
const [isExpandable, setIsExpandable] = useState(true);
105+
const [isSticky, setIsSticky] = useState(true);
106+
const [isDraggable, setIsDraggable] = useState(true);
107+
108+
// Generate rows based on current settings
109+
const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit, contributors, stars, forks }) => [
110+
{
111+
id,
112+
cell: workspaces,
113+
props: {
114+
favorites: { isFavorited: true }
115+
}
116+
},
117+
{ cell: <Button href='#' variant='link' isInline>{name}</Button>, props: { isStickyColumn: isSticky, hasRightBorder: true, hasLeftBorder: true, modifier: "nowrap" } },
118+
{ cell: branches, props: { modifier: "nowrap" } },
119+
{ cell: prs, props: { modifier: "nowrap" } },
120+
{ cell: workspaces, props: { modifier: "nowrap" } },
121+
{ cell: lastCommit, props: { modifier: "nowrap" } },
122+
{ cell: contributors, props: { modifier: "nowrap" } },
123+
{ cell: stars, props: { modifier: "nowrap" } },
124+
{ cell: forks, props: { modifier: "nowrap" } }
125+
]);
126+
127+
const columns: DataViewTh[] = [
128+
null,
129+
{ cell: 'Repositories', props: { isStickyColumn: isSticky, modifier: 'fitContent', hasRightBorder:true, hasLeftBorder: true } },
130+
{ cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></>, props: { width: 20 } },
131+
{ cell: 'Pull requests', props: { width: 20 } },
132+
{ cell: 'Workspaces', props: { info: { tooltip: 'More information' }, width: 20 } },
133+
{ cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 }, width: 20 } },
134+
{ cell: 'Contributors', props: { width: 20 } },
135+
{ cell: 'Stars', props: { width: 20 } },
136+
{ cell: 'Forks', props: { width: 20 } },
137+
];
138+
139+
return (
140+
<>
141+
<Toolbar>
142+
<ToolbarContent>
143+
<ToolbarItem>
144+
<Switch
145+
id="expandable-switch"
146+
label="Expandable"
147+
isChecked={isExpandable}
148+
onChange={(_event, checked) => setIsExpandable(checked)}
149+
aria-label="Toggle expandable rows"
150+
/>
151+
</ToolbarItem>
152+
<ToolbarItem>
153+
<Switch
154+
id="sticky-switch"
155+
label="Sticky header & column"
156+
isChecked={isSticky}
157+
onChange={(_event, checked) => setIsSticky(checked)}
158+
aria-label="Toggle sticky header and columns"
159+
/>
160+
</ToolbarItem>
161+
<ToolbarItem>
162+
<Switch
163+
id="draggable-switch"
164+
label="Draggable rows"
165+
isChecked={isDraggable}
166+
onChange={(_event, checked) => setIsDraggable(checked)}
167+
aria-label="Toggle draggable rows"
168+
/>
169+
</ToolbarItem>
170+
</ToolbarContent>
171+
</Toolbar>
172+
<div style={{ height: '400px', overflow: 'auto' }}>
173+
<DataViewTable
174+
aria-label='Interactive repositories table'
175+
ouiaId={ouiaId}
176+
columns={columns}
177+
rows={rows}
178+
expandedRows={isExpandable ? expandableContents : undefined}
179+
isExpandable={isExpandable}
180+
isSticky={isSticky}
181+
isDraggable={isDraggable}
182+
/>
183+
</div>
184+
</>
185+
);
186+
};

0 commit comments

Comments
 (0)