fix(empty): Add empty state examples

Author: fhlavac

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

@@ -14,7 +14,8 @@ sortValue: 4
 propComponents: ['DataViewToolbar', 'DataViewTableBasic', 'DataViewTableTree']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md
 ---
-import { FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
+import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 import { BulkSelect } from '@patternfly/react-component-groups';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 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
 ```js file="./DataViewTableTreeExample.tsx"
 
 ```
+
+### Empty state example
+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.
+
+```js file="./DataViewTableEmptyExample.tsx"
+
+```

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { CubesIcon } from '@patternfly/react-icons';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
+
+interface Repository {
+  id: number;
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [];
+
+// you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }
+const rows: DataViewTr[] = repositories.map((repository) => Object.values(repository));
+
+const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'TableExample';
+
+const emptyState = (
+  <EmptyState>
+    <EmptyStateHeader titleText="No data found" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
+    <EmptyStateBody>There are no matching data to be displayed.</EmptyStateBody>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="primary">Primary action</Button>
+      </EmptyStateActions>
+      <EmptyStateActions>
+        <Button variant="link">Multiple</Button>
+        <Button variant="link">Action Buttons</Button>
+      </EmptyStateActions>
+    </EmptyStateFooter>
+  </EmptyState>
+);
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataViewTable 
+    aria-label='Repositories table' 
+    ouiaId={ouiaId}
+    columns={columns}
+    rows={rows}
+    emptyState={emptyState}
+  />
+);

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

@@ -42,28 +42,27 @@ const buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories
   ...(repo.children
     ? { 
       children: buildRows(repo.children) // build rows for children
-    }
+    } 
     : {})
 }));
 
 const rows: DataViewTrTree[] = buildRows(repositories);
 
-const columns: DataViewTh[] = [
-  'Repositories', 
-  'Branches', 
-  'Pull requests', 
-  'Workspaces', 
-  'Last commit'
-];
-
-const ouiaId = 'TreeTableExample';
+const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
 
 export const BasicExample: React.FunctionComponent = () => {
   const selection = useDataViewSelection({ matchOption: (a, b) => a.id === b.id });
 
   return (
     <DataView selection={selection}>
-      <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} leafIcon={<LeafIcon/>} expandedIcon={<FolderOpenIcon aria-hidden />} collapsedIcon={<FolderIcon aria-hidden />} />
+      <DataViewTable 
+        isTreeTable 
+        columns={columns} 
+        rows={rows}
+        leafIcon={<LeafIcon/>}
+        expandedIcon={<FolderOpenIcon aria-hidden />}
+        collapsedIcon={<FolderIcon aria-hidden />} 
+      />
     </DataView>
   );
 }