Skip to content

Commit 1c1f928

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

File tree

12 files changed

+869
-35
lines changed

12 files changed

+869
-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: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
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: 3, content: <div><strong>PR Details:</strong> 3 open PRs, 45 merged this month, avg review time: 2 days</div> },
19+
{ row_id: 1, column_id: 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+
{ row_id: 2, column_id: 2, content: <div><strong>Branch Details:</strong> 8 active branches, main, staging, feature/api-v2, feature/dashboard</div> },
23+
{ 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> },
24+
{ row_id: 2, column_id: 4, content: <div><strong>Workspace Info:</strong> Development env, 3 active deployments, last updated 30 mins ago</div> },
25+
{ row_id: 2, column_id: 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+
{ row_id: 3, column_id: 2, content: <div><strong>Branch Details:</strong> 12 active branches including main, develop, multiple feature branches</div> },
29+
{ 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> },
30+
{ row_id: 3, column_id: 4, content: <div><strong>Workspace Info:</strong> Staging env, 10 active deployments, last updated 1 day ago</div> },
31+
{ row_id: 3, column_id: 5, content: <div><strong>Commit Info:</strong> Author: Bob Johnson, Message: "Refactor core modules", SHA: p0o9i8u</div> },
32+
33+
// Row 4 - Repository four
34+
{ row_id: 4, column_id: 2, content: <div><strong>Branch Details:</strong> 6 active branches, focusing on microservices architecture</div> },
35+
{ 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> },
36+
{ row_id: 4, column_id: 4, content: <div><strong>Workspace Info:</strong> QA env, 7 active deployments, automated testing enabled</div> },
37+
{ row_id: 4, column_id: 5, content: <div><strong>Commit Info:</strong> Author: Alice Williams, Message: "Update dependencies", SHA: m5n4b3v</div> },
38+
39+
// Row 5 - Repository five
40+
{ row_id: 5, column_id: 2, content: <div><strong>Branch Details:</strong> 4 active branches, clean branch strategy</div> },
41+
{ 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> },
42+
{ row_id: 5, column_id: 4, content: <div><strong>Workspace Info:</strong> Pre-production env, CI/CD pipeline configured</div> },
43+
{ row_id: 5, column_id: 5, content: <div><strong>Commit Info:</strong> Author: Charlie Brown, Message: "Implement dark mode", SHA: q2w3e4r</div> },
44+
45+
// Row 6 - Repository six
46+
{ row_id: 6, column_id: 2, content: <div><strong>Branch Details:</strong> 15 active branches, complex branching model</div> },
47+
{ 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> },
48+
{ row_id: 6, column_id: 4, content: <div><strong>Workspace Info:</strong> Multi-region deployment, high availability setup</div> },
49+
{ row_id: 6, column_id: 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+
);

0 commit comments

Comments
 (0)