Skip to content

Commit cb0a2f4

Browse files
Jakub007dJakub007d
committed
feat: adding Expandable, Draggable and Sticky compound options
1 parent 1645dfa commit cb0a2f4

File tree

12 files changed

+892
-35
lines changed

12 files changed

+892
-35
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: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import { FunctionComponent, ReactNode } 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, ExpandableRowContent } 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+
{ 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> },
19+
{ 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> },
20+
{ row_id: 1, column_id: 5, content: <div><strong>Commit Info:</strong> Author: John Doe, Message: "Fix critical authentication bug", SHA: a1b2c3d</div> },
21+
22+
// Row 2 - Repository two
23+
{ row_id: 2, column_id: 0, content: <div><strong>Favorites Details:</strong> Recently added</div> },
24+
{ row_id: 2, column_id: 1, content: <div><strong>Repository Details:</strong> Created 3 months ago, 45 contributors, Apache 2.0 License</div> },
25+
{ row_id: 2, column_id: 2, content: <div><strong>Branch Details:</strong> 8 active branches, main, staging, feature/api-v2, feature/dashboard</div> },
26+
{ 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> },
27+
{ row_id: 2, column_id: 4, content: <div><strong>Workspace Info:</strong> Development env, 3 active deployments, last updated 30 mins ago</div> },
28+
{ row_id: 2, column_id: 5, content: <div><strong>Commit Info:</strong> Author: Jane Smith, Message: "Add new API endpoints", SHA: x9y8z7w</div> },
29+
30+
// Row 3 - Repository three
31+
{ row_id: 3, column_id: 0, content: <div><strong>Favorites Details:</strong> Top starred repository</div> },
32+
{ row_id: 3, column_id: 1, content: <div><strong>Repository Details:</strong> Created 1 year ago, 200 contributors, GPL v3 License</div> },
33+
{ row_id: 3, column_id: 2, content: <div><strong>Branch Details:</strong> 12 active branches including main, develop, multiple feature branches</div> },
34+
{ 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> },
35+
{ row_id: 3, column_id: 4, content: <div><strong>Workspace Info:</strong> Staging env, 10 active deployments, last updated 1 day ago</div> },
36+
{ row_id: 3, column_id: 5, content: <div><strong>Commit Info:</strong> Author: Bob Johnson, Message: "Refactor core modules", SHA: p0o9i8u</div> },
37+
38+
// Row 4 - Repository four
39+
{ row_id: 4, column_id: 0, content: <div><strong>Favorites Details:</strong> Added 2 weeks ago</div> },
40+
{ row_id: 4, column_id: 1, content: <div><strong>Repository Details:</strong> Created 2 years ago, 80 contributors, BSD License</div> },
41+
{ row_id: 4, column_id: 2, content: <div><strong>Branch Details:</strong> 6 active branches, focusing on microservices architecture</div> },
42+
{ 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> },
43+
{ row_id: 4, column_id: 4, content: <div><strong>Workspace Info:</strong> QA env, 7 active deployments, automated testing enabled</div> },
44+
{ row_id: 4, column_id: 5, content: <div><strong>Commit Info:</strong> Author: Alice Williams, Message: "Update dependencies", SHA: m5n4b3v</div> },
45+
46+
// Row 5 - Repository five
47+
{ row_id: 5, column_id: 0, content: <div><strong>Favorites Details:</strong> Most viewed this week</div> },
48+
{ row_id: 5, column_id: 1, content: <div><strong>Repository Details:</strong> Created 8 months ago, 60 contributors, ISC License</div> },
49+
{ row_id: 5, column_id: 2, content: <div><strong>Branch Details:</strong> 4 active branches, clean branch strategy</div> },
50+
{ 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> },
51+
{ row_id: 5, column_id: 4, content: <div><strong>Workspace Info:</strong> Pre-production env, CI/CD pipeline configured</div> },
52+
{ row_id: 5, column_id: 5, content: <div><strong>Commit Info:</strong> Author: Charlie Brown, Message: "Implement dark mode", SHA: q2w3e4r</div> },
53+
54+
// Row 6 - Repository six
55+
{ row_id: 6, column_id: 0, content: <div><strong>Favorites Details:</strong> Legacy favorite</div> },
56+
{ row_id: 6, column_id: 1, content: <div><strong>Repository Details:</strong> Created 5 years ago, 300 contributors, MIT License</div> },
57+
{ row_id: 6, column_id: 2, content: <div><strong>Branch Details:</strong> 15 active branches, complex branching model</div> },
58+
{ 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> },
59+
{ row_id: 6, column_id: 4, content: <div><strong>Workspace Info:</strong> Multi-region deployment, high availability setup</div> },
60+
{ row_id: 6, column_id: 5, content: <div><strong>Commit Info:</strong> Author: David Lee, Message: "Security patches applied", SHA: t6y7u8i</div> },
61+
];
62+
63+
const repositories: Repository[] = [
64+
{ id: 1, name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one'},
65+
{ id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two'},
66+
{ id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three'},
67+
{ id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four'},
68+
{ id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five'},
69+
{ id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six'}
70+
];
71+
72+
const rowActions = [
73+
{
74+
title: 'Some action',
75+
onClick: () => console.log('clicked on Some action') // eslint-disable-line no-console
76+
},
77+
{
78+
title: <div>Another action</div>,
79+
onClick: () => console.log('clicked on Another action') // eslint-disable-line no-console
80+
},
81+
{
82+
isSeparator: true
83+
},
84+
{
85+
title: 'Third action',
86+
onClick: () => console.log('clicked on Third action') // eslint-disable-line no-console
87+
}
88+
];
89+
90+
// you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }
91+
const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit }) => [
92+
{
93+
id,
94+
cell: workspaces,
95+
props: {
96+
favorites: { isFavorited: true }
97+
}
98+
},
99+
{ cell: <Button href='#' variant='link' isInline>{name}</Button> },
100+
branches,
101+
prs,
102+
workspaces,
103+
lastCommit,
104+
{ cell: <ActionsColumn items={rowActions}/>, props: { isActionCell: true } },
105+
]);
106+
107+
const columns: DataViewTh[] = [
108+
null,
109+
'Repositories',
110+
{ cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></> },
111+
'Pull requests',
112+
{ cell: 'Workspaces', props: { info: { tooltip: 'More information' }, isStickyColumn: true} },
113+
{ cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } },
114+
];
115+
116+
const ouiaId = 'TableExample';
117+
118+
export const BasicExample: FunctionComponent = () => (
119+
<DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} expandedRows={expandableContents} isExpandable={true}/>
120+
);

0 commit comments

Comments
 (0)