Skip to content

Commit 66fb84d

Browse files
fhlavacfhlavac
committed
fix(tree): Enhance docs
1 parent 8cfee33 commit 66fb84d

File tree

7 files changed

+115
-34
lines changed

7 files changed

+115
-34
lines changed

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,15 @@ source: react
1111
# If you use typescript, the name of the interface to display props for
1212
# These are found through the sourceProps function provided in patternfly-docs.source.js
1313
sortValue: 4
14-
propComponents: ['DataViewToolbar', 'DataViewTable']
14+
propComponents: ['DataViewToolbar', 'DataViewTableBasic', 'DataViewTableTree']
1515
sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md
1616
---
17+
import { FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
1718
import { BulkSelect } from '@patternfly/react-component-groups';
18-
import { ExclamationCircleIcon } from '@patternfly/react-icons';
1919
import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
2020
import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
21+
import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
22+
import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
2123

2224
## Data view toolbar
2325

@@ -58,4 +60,14 @@ The `DataViewTable` component accepts the following props:
5860

5961
- optional `props` (`TableProps`) that are passed down to the `<Table>` component, except for `onSelect`, which is managed internally.
6062

63+
### Tree table example
64+
This example shows the tree table variant with expandable rows, custom icons for leaf and parent nodes. Tree table is turned on by passing `isTreeTable` flag to the `DataViewTable` component. You can pass `collapsedIcon`, `expandedIcon` or `leafIcon` to be displayen rows with given status. The tree table rows have to be defined in a format of object with following keys:
65+
- `row` (`DataViewTd[]`) defining the content for each cell in the row.
66+
- `id` (`string`) for the row (used to match items in selection end expand the rows).
67+
- optional `children` (`DataViewTrTree[]`) defining the children rows.
68+
69+
It is also possible to disable row selection using the `isSelectDisabled` function passed to the wrapping data view component.
6170

71+
```js file="./DataViewTableTreeExample.tsx"
72+
73+
```

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { DataViewTable, DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
2+
import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
33
import { ExclamationCircleIcon } from '@patternfly/react-icons';
44
import { Button } from '@patternfly/react-core';
55

@@ -13,12 +13,12 @@ interface Repository {
1313
}
1414

1515
const repositories: Repository[] = [
16-
{ id: 1, name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
17-
{ id: 2, name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
18-
{ id: 3, name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
19-
{ id: 4, name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
20-
{ id: 5, name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
21-
{ id: 6, name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
16+
{ id: 1, name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
17+
{ id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
18+
{ id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
19+
{ id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
20+
{ id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
21+
{ id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
2222
];
2323

2424
// you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableTreeExample.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react';
2+
import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
3+
import { DataViewTable, DataViewTh, DataViewTrTree } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
4+
import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
5+
import { FolderIcon, FolderOpenIcon, LeafIcon } from '@patternfly/react-icons';
6+
7+
interface Repository {
8+
name: string;
9+
branches: string | null;
10+
prs: string | null;
11+
workspaces: string;
12+
lastCommit: string;
13+
children?: Repository[];
14+
}
15+
16+
const repositories: Repository[] = [
17+
{
18+
name: 'Repository one',
19+
branches: 'Branch one',
20+
prs: 'Pull request one',
21+
workspaces: 'Workspace one',
22+
lastCommit: 'Timestamp one',
23+
children: [
24+
{ name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
25+
{ name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
26+
]
27+
},
28+
{
29+
name: 'Repository four',
30+
branches: 'Branch four',
31+
prs: 'Pull request four',
32+
workspaces: 'Workspace four',
33+
lastCommit: 'Timestamp four',
34+
children: [ { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' } ]
35+
},
36+
{ name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
37+
];
38+
39+
const buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories.map((repo) => ({
40+
row: [ repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit ],
41+
id: repo.name, // unique ID for each row
42+
...(repo.children
43+
? {
44+
children: buildRows(repo.children) // build rows for children
45+
}
46+
: {})
47+
}));
48+
49+
const rows: DataViewTrTree[] = buildRows(repositories);
50+
51+
const columns: DataViewTh[] = [
52+
'Repositories',
53+
'Branches',
54+
'Pull requests',
55+
'Workspaces',
56+
'Last commit'
57+
];
58+
59+
const ouiaId = 'TreeTableExample';
60+
61+
export const BasicExample: React.FunctionComponent = () => {
62+
const selection = useDataViewSelection({ matchOption: (a, b) => a.id === b.id });
63+
64+
return (
65+
<DataView selection={selection}>
66+
<DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} leafIcon={<LeafIcon/>} expandedIcon={<FolderOpenIcon aria-hidden />} collapsedIcon={<FolderIcon aria-hidden />} />
67+
</DataView>
68+
);
69+
}

‎packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ interface Repository {
1313
}
1414

1515
const repositories: Repository[] = [
16-
{ name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
17-
{ name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
18-
{ name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
19-
{ name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
20-
{ name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
21-
{ name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
16+
{ name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
17+
{ name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
18+
{ name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
19+
{ name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
20+
{ name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
21+
{ name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
2222
];
2323

2424
const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
@@ -46,7 +46,7 @@ const RepositoryDetail: React.FunctionComponent<RepositoryDetailProps> = ({ sele
4646
<DrawerPanelContent>
4747
<DrawerHead>
4848
<Title className="pf-v5-u-mb-md" headingLevel="h2" ouiaId="detail-drawer-title">
49-
Detail of repository {selectedRepo?.name}
49+
Detail of {selectedRepo?.name}
5050
</Title>
5151
<Text>Branches: {selectedRepo?.branches}</Text>
5252
<Text>Pull requests: {selectedRepo?.prs}</Text>

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/PaginationExample.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ interface Repository {
2020
}
2121

2222
const repositories: Repository[] = [
23-
{ name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
24-
{ name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
25-
{ name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
26-
{ name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
27-
{ name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
28-
{ name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
23+
{ name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
24+
{ name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
25+
{ name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
26+
{ name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
27+
{ name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
28+
{ name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
2929
];
3030

3131
const rows = repositories.map(item => Object.values(item));

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/SelectionExample.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ interface Repository {
1414
}
1515

1616
const repositories: Repository[] = [
17-
{ name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
18-
{ name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
19-
{ name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
20-
{ name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
21-
{ name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
22-
{ name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
17+
{ name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
18+
{ name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
19+
{ name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
20+
{ name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
21+
{ name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
22+
{ name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
2323
];
2424

2525
const rows = repositories.map(item => Object.values(item));

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/PredefinedLayoutExample.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ interface Repository {
2020
}
2121

2222
const repositories: Repository[] = [
23-
{ name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
24-
{ name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
25-
{ name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
26-
{ name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
27-
{ name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
28-
{ name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
23+
{ name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
24+
{ name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
25+
{ name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
26+
{ name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
27+
{ name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
28+
{ name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
2929
];
3030

3131
const rows = repositories.map(item => Object.values(item));

0 commit comments

Comments
 (0)