Skip to content

Commit c79ec2a

Browse files
committed
fix(empty): Add empty state examples
1 parent a4d3470 commit c79ec2a

File tree

3 files changed

+67
-12
lines changed

3 files changed

+67
-12
lines changed

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ sortValue: 4
1414
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';
17+
import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
18+
import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
1819
import { BulkSelect } from '@patternfly/react-component-groups';
1920
import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
2021
import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
@@ -71,3 +72,10 @@ It is also possible to disable row selection using the `isSelectDisabled` functi
7172
```js file="./DataViewTableTreeExample.tsx"
7273

7374
```
75+
76+
### Empty state example
77+
The data view table also supports displaying a custom empty state. You can pass it using the `emptyState` property and it will be displayed in case there are no rows to be rendered.
78+
79+
```js file="./DataViewTableEmptyExample.tsx"
80+
81+
```
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
3+
import { CubesIcon } from '@patternfly/react-icons';
4+
import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } 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+
}
14+
15+
const repositories: Repository[] = [];
16+
17+
// you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }
18+
const rows: DataViewTr[] = repositories.map((repository) => Object.values(repository));
19+
20+
const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
21+
22+
const ouiaId = 'TableExample';
23+
24+
const emptyState = (
25+
<EmptyState>
26+
<EmptyStateHeader titleText="No data found" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
27+
<EmptyStateBody>There are no matching data to be displayed.</EmptyStateBody>
28+
<EmptyStateFooter>
29+
<EmptyStateActions>
30+
<Button variant="primary">Primary action</Button>
31+
</EmptyStateActions>
32+
<EmptyStateActions>
33+
<Button variant="link">Multiple</Button>
34+
<Button variant="link">Action Buttons</Button>
35+
</EmptyStateActions>
36+
</EmptyStateFooter>
37+
</EmptyState>
38+
);
39+
40+
export const BasicExample: React.FunctionComponent = () => (
41+
<DataViewTable
42+
aria-label='Repositories table'
43+
ouiaId={ouiaId}
44+
columns={columns}
45+
rows={rows}
46+
emptyState={emptyState}
47+
/>
48+
);

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

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -42,28 +42,27 @@ const buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories
4242
...(repo.children
4343
? {
4444
children: buildRows(repo.children) // build rows for children
45-
}
45+
}
4646
: {})
4747
}));
4848

4949
const rows: DataViewTrTree[] = buildRows(repositories);
5050

51-
const columns: DataViewTh[] = [
52-
'Repositories',
53-
'Branches',
54-
'Pull requests',
55-
'Workspaces',
56-
'Last commit'
57-
];
58-
59-
const ouiaId = 'TreeTableExample';
51+
const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
6052

6153
export const BasicExample: React.FunctionComponent = () => {
6254
const selection = useDataViewSelection({ matchOption: (a, b) => a.id === b.id });
6355

6456
return (
6557
<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 />} />
58+
<DataViewTable
59+
isTreeTable
60+
columns={columns}
61+
rows={rows}
62+
leafIcon={<LeafIcon/>}
63+
expandedIcon={<FolderOpenIcon aria-hidden />}
64+
collapsedIcon={<FolderIcon aria-hidden />}
65+
/>
6766
</DataView>
6867
);
6968
}

0 commit comments

Comments
 (0)