@patternfly/react-data-view 6.4.0 → 6.5.0-prerelease.1

package/dist/esm/DataViewTreeFilter/DataViewTreeFilter.test.js

@@ -0,0 +1,166 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import DataViewTreeFilter from './DataViewTreeFilter';
+import DataViewToolbar from '../DataViewToolbar';
+describe('DataViewTreeFilter component', () => {
+    const treeItems = [
+        {
+            name: 'Linux',
+            id: 'os-linux',
+            checkProps: { 'aria-label': 'linux-check', checked: false },
+            children: [
+                {
+                    name: 'Ubuntu 22.04',
+                    id: 'os-ubuntu',
+                    checkProps: { checked: false }
+                },
+                {
+                    name: 'RHEL 9',
+                    id: 'os-rhel',
+                    checkProps: { checked: false }
+                },
+                {
+                    name: 'Debian 12',
+                    id: 'os-debian',
+                    checkProps: { checked: false }
+                },
+                {
+                    name: 'CentOS 8',
+                    id: 'os-centos',
+                    checkProps: { checked: false }
+                },
+                {
+                    name: 'Fedora 38',
+                    id: 'os-fedora',
+                    checkProps: { checked: false }
+                }
+            ],
+            defaultExpanded: true
+        },
+        {
+            name: 'Windows',
+            id: 'os-windows',
+            checkProps: { 'aria-label': 'windows-check', checked: false },
+            children: [
+                {
+                    name: 'Windows Server 2022',
+                    id: 'os-windows-2022',
+                    checkProps: { checked: false }
+                }
+            ]
+        },
+        {
+            name: 'macOS',
+            id: 'os-macos',
+            checkProps: { 'aria-label': 'macos-check', checked: false },
+            children: [
+                {
+                    name: 'macOS Ventura',
+                    id: 'os-macos-ventura',
+                    checkProps: { checked: false }
+                },
+                {
+                    name: 'macOS Sonoma',
+                    id: 'os-macos-sonoma',
+                    checkProps: { checked: false }
+                }
+            ]
+        }
+    ];
+    const defaultProps = {
+        filterId: 'test-tree-filter',
+        title: 'Test Tree Filter',
+        value: ['Linux'],
+        items: treeItems
+    };
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render correctly', () => {
+        const { container } = render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, Object.assign({}, defaultProps)) }));
+        expect(container).toMatchSnapshot();
+    });
+    describe('defaultExpanded', () => {
+        it('should have expanded items by default', () => __awaiter(void 0, void 0, void 0, function* () {
+            render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true }) }));
+            const openMenu = screen.getByRole('button', { name: /operating system/i });
+            yield userEvent.click(openMenu);
+            yield waitFor(() => {
+                const node = screen.getByText('Ubuntu 22.04');
+                expect(node).toHaveClass('pf-v6-c-tree-view__node-text');
+                expect(node).toBeInTheDocument();
+            });
+        }));
+    });
+    describe('onChange callback', () => {
+        it('onChange should be called on toggle of node', () => __awaiter(void 0, void 0, void 0, function* () {
+            const mockOnChange = jest.fn();
+            render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true, onChange: mockOnChange }) }));
+            const openMenu = screen.getByRole('button', { name: /operating system/i });
+            yield userEvent.click(openMenu);
+            yield waitFor(() => {
+                const node = screen.getByText('Ubuntu 22.04');
+                expect(node).toBeInTheDocument();
+            });
+            const node = screen.getByText('Ubuntu 22.04');
+            yield userEvent.click(node);
+            yield waitFor(() => {
+                expect(mockOnChange).toHaveBeenCalled();
+            });
+        }));
+    });
+    describe('onSelect callback', () => {
+        it('onSelect should return list of selected items when item is selected', () => __awaiter(void 0, void 0, void 0, function* () {
+            const mockOnSelect = jest.fn();
+            render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true, onSelect: mockOnSelect }) }));
+            const openMenu = screen.getByRole('button', { name: /operating system/i });
+            yield userEvent.click(openMenu);
+            yield waitFor(() => {
+                const node = screen.getByText('Ubuntu 22.04');
+                expect(node).toBeInTheDocument();
+            });
+            const node = screen.getByText('Ubuntu 22.04');
+            yield userEvent.click(node);
+            yield waitFor(() => {
+                expect(mockOnSelect).toHaveBeenCalled();
+                expect(mockOnSelect).toHaveBeenCalledWith(expect.arrayContaining([
+                    expect.objectContaining({
+                        name: 'Ubuntu 22.04',
+                        id: 'os-ubuntu'
+                    })
+                ]));
+            });
+        }));
+    });
+    describe('rendering all items', () => {
+        it('all tree items should be rendered', () => __awaiter(void 0, void 0, void 0, function* () {
+            render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTreeFilter, { filterId: "os", title: "Operating System", items: treeItems, defaultExpanded: true }) }));
+            const openMenu = screen.getByRole('button', { name: /operating system/i });
+            yield userEvent.click(openMenu);
+            yield waitFor(() => {
+                expect(screen.getByText('Linux')).toBeInTheDocument();
+                expect(screen.getByText('Windows')).toBeInTheDocument();
+                expect(screen.getByText('macOS')).toBeInTheDocument();
+                expect(screen.getByText('Ubuntu 22.04')).toBeInTheDocument();
+                expect(screen.getByText('RHEL 9')).toBeInTheDocument();
+                expect(screen.getByText('Debian 12')).toBeInTheDocument();
+                expect(screen.getByText('CentOS 8')).toBeInTheDocument();
+                expect(screen.getByText('Fedora 38')).toBeInTheDocument();
+                expect(screen.getByText('Windows Server 2022')).toBeInTheDocument();
+                expect(screen.getByText('macOS Ventura')).toBeInTheDocument();
+                expect(screen.getByText('macOS Sonoma')).toBeInTheDocument();
+            });
+        }));
+    });
+});

package/dist/esm/DataViewTreeFilter/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DataViewTreeFilter';
+export * from './DataViewTreeFilter';

package/dist/esm/DataViewTreeFilter/index.js

@@ -0,0 +1,2 @@
+export { default } from './DataViewTreeFilter';
+export * from './DataViewTreeFilter';

package/dist/esm/Hooks/selection.d.ts

@@ -1,12 +1,12 @@
-export interface UseDataViewSelectionProps {
+export interface UseDataViewSelectionProps<T = any> {
     /** Function to compare items when checking if item is selected */
-    matchOption: (item: any, another: any) => boolean;
+    matchOption: (item: T, another: T) => boolean;
     /** Array of initially selected entries */
-    initialSelected?: (any)[];
+    initialSelected?: (T)[];
 }
-export declare const useDataViewSelection: (props?: UseDataViewSelectionProps) => {
-    selected: any[];
-    onSelect: (isSelecting: boolean, items?: any[] | any) => void;
-    isSelected: (item: any) => boolean;
-    setSelected: (items: any[]) => void;
+export declare const useDataViewSelection: <T = any>(props?: UseDataViewSelectionProps<T>) => {
+    selected: T[];
+    onSelect: (isSelecting: boolean, items?: T[] | T) => void;
+    isSelected: (item: T) => boolean;
+    setSelected: (items: T[]) => void;
 };

package/dist/esm/index.d.ts

@@ -1,8 +1,12 @@
 export { default as InternalContext } from './InternalContext';
 export * from './InternalContext';
 export * from './Hooks';
+export { default as DataViewTreeFilter } from './DataViewTreeFilter';
+export * from './DataViewTreeFilter';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
+export { default as DataViewTh } from './DataViewTh';
+export * from './DataViewTh';
 export { default as DataViewTextFilter } from './DataViewTextFilter';
 export * from './DataViewTextFilter';
 export { default as DataViewTableTree } from './DataViewTableTree';
@@ -13,6 +17,8 @@ export { default as DataViewTableBasic } from './DataViewTableBasic';
 export * from './DataViewTableBasic';
 export { default as DataViewTable } from './DataViewTable';
 export * from './DataViewTable';
+export { default as DataViewFilters } from './DataViewFilters';
+export * from './DataViewFilters';
 export { default as DataViewEventsContext } from './DataViewEventsContext';
 export * from './DataViewEventsContext';
 export { default as DataViewCheckboxFilter } from './DataViewCheckboxFilter';

package/dist/esm/index.js

@@ -2,8 +2,12 @@
 export { default as InternalContext } from './InternalContext';
 export * from './InternalContext';
 export * from './Hooks';
+export { default as DataViewTreeFilter } from './DataViewTreeFilter';
+export * from './DataViewTreeFilter';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
+export { default as DataViewTh } from './DataViewTh';
+export * from './DataViewTh';
 export { default as DataViewTextFilter } from './DataViewTextFilter';
 export * from './DataViewTextFilter';
 export { default as DataViewTableTree } from './DataViewTableTree';
@@ -14,6 +18,8 @@ export { default as DataViewTableBasic } from './DataViewTableBasic';
 export * from './DataViewTableBasic';
 export { default as DataViewTable } from './DataViewTable';
 export * from './DataViewTable';
+export { default as DataViewFilters } from './DataViewFilters';
+export * from './DataViewFilters';
 export { default as DataViewEventsContext } from './DataViewEventsContext';
 export * from './DataViewEventsContext';
 export { default as DataViewCheckboxFilter } from './DataViewCheckboxFilter';

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/DataView/DataView.test.tsx","../src/DataView/DataView.tsx","../src/DataView/index.ts","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx","../src/DataViewCheckboxFilter/index.ts","../src/DataViewEventsContext/DataViewEventsContext.test.tsx","../src/DataViewEventsContext/DataViewEventsContext.tsx","../src/DataViewEventsContext/index.ts","../src/DataViewFilters/DataViewFilters.test.tsx","../src/DataViewFilters/DataViewFilters.tsx","../src/DataViewFilters/index.tsx","../src/DataViewTable/DataViewTable.test.tsx","../src/DataViewTable/DataViewTable.tsx","../src/DataViewTable/index.ts","../src/DataViewTableBasic/DataViewTableBasic.test.tsx","../src/DataViewTableBasic/DataViewTableBasic.tsx","../src/DataViewTableBasic/index.ts","../src/DataViewTableHead/DataViewTableHead.test.tsx","../src/DataViewTableHead/DataViewTableHead.tsx","../src/DataViewTableHead/index.ts","../src/DataViewTableTree/DataViewTableTree.test.tsx","../src/DataViewTableTree/DataViewTableTree.tsx","../src/DataViewTableTree/index.ts","../src/DataViewTextFilter/DataViewTextFilter.test.tsx","../src/DataViewTextFilter/DataViewTextFilter.tsx","../src/DataViewTextFilter/index.ts","../src/DataViewTh/DataViewTh.tsx","../src/DataViewToolbar/DataViewToolbar.test.tsx","../src/DataViewToolbar/DataViewToolbar.tsx","../src/DataViewToolbar/index.ts","../src/Hooks/filters.test.tsx","../src/Hooks/filters.ts","../src/Hooks/index.ts","../src/Hooks/pagination.test.tsx","../src/Hooks/pagination.ts","../src/Hooks/selection.test.tsx","../src/Hooks/selection.ts","../src/Hooks/sort.test.tsx","../src/Hooks/sort.ts","../src/InternalContext/InternalContext.test.tsx","../src/InternalContext/InternalContext.tsx","../src/InternalContext/index.ts"],"version":"5.9.3"}
+{"root":["../src/index.ts","../src/DataView/DataView.test.tsx","../src/DataView/DataView.tsx","../src/DataView/index.ts","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx","../src/DataViewCheckboxFilter/index.ts","../src/DataViewEventsContext/DataViewEventsContext.test.tsx","../src/DataViewEventsContext/DataViewEventsContext.tsx","../src/DataViewEventsContext/index.ts","../src/DataViewFilters/DataViewFilters.test.tsx","../src/DataViewFilters/DataViewFilters.tsx","../src/DataViewFilters/index.tsx","../src/DataViewTable/DataViewTable.test.tsx","../src/DataViewTable/DataViewTable.tsx","../src/DataViewTable/index.ts","../src/DataViewTableBasic/DataViewTableBasic.test.tsx","../src/DataViewTableBasic/DataViewTableBasic.tsx","../src/DataViewTableBasic/index.ts","../src/DataViewTableHead/DataViewTableHead.test.tsx","../src/DataViewTableHead/DataViewTableHead.tsx","../src/DataViewTableHead/index.ts","../src/DataViewTableTree/DataViewTableTree.test.tsx","../src/DataViewTableTree/DataViewTableTree.tsx","../src/DataViewTableTree/index.ts","../src/DataViewTextFilter/DataViewTextFilter.test.tsx","../src/DataViewTextFilter/DataViewTextFilter.tsx","../src/DataViewTextFilter/index.ts","../src/DataViewTh/DataViewTh.tsx","../src/DataViewTh/index.ts","../src/DataViewToolbar/DataViewToolbar.test.tsx","../src/DataViewToolbar/DataViewToolbar.tsx","../src/DataViewToolbar/index.ts","../src/DataViewTreeFilter/DataViewTreeFilter.test.tsx","../src/DataViewTreeFilter/DataViewTreeFilter.tsx","../src/DataViewTreeFilter/index.ts","../src/Hooks/filters.test.tsx","../src/Hooks/filters.ts","../src/Hooks/index.ts","../src/Hooks/pagination.test.tsx","../src/Hooks/pagination.ts","../src/Hooks/selection.test.tsx","../src/Hooks/selection.ts","../src/Hooks/sort.test.tsx","../src/Hooks/sort.ts","../src/InternalContext/InternalContext.test.tsx","../src/InternalContext/InternalContext.tsx","../src/InternalContext/index.ts"],"version":"5.9.3"}

package/generate-fed-package-json.js

@@ -1,6 +1,7 @@
 const fse = require('fs-extra');
 const { globSync } = require('glob');
 const path = require('path');
+const { default: getDynamicModuleMap } = require('../../scripts/parse-dynamic-modules.mjs');
 
 const root = process.cwd();
 
@@ -60,12 +61,29 @@ async function generatePackages(files) {
   return Promise.all(cmds);
 }
 
+async function generateDynamicModuleMap() {
+  const moduleMap = getDynamicModuleMap(root);
+  // eslint-disable-next-line no-console
+  console.log('Generating dynamic module map for', Object.keys(moduleMap).length, 'modules');
+
+  if (Object.keys(moduleMap).length === 0) {
+    return Promise.resolve();
+  }
+
+  const moduleMapSorted = Object.keys(moduleMap)
+    .sort()
+    .reduce((acc, key) => ({ ...acc, [key]: moduleMap[key] }), {});
+
+  return fse.writeJSON(path.resolve(root, 'dist/dynamic-modules.json'), moduleMapSorted, { spaces: 2 });
+}
+
 async function run(files) {
   try {
     await generatePackages(files);
     if (indexTypings.length === 1) {
       copyTypings(indexTypings, root);
     }
+    await generateDynamicModuleMap();
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error(error);

package/generate-index.js

@@ -6,7 +6,7 @@ const root = process.cwd();
 
 const ENV_AGNOSTIC_ROOT = `${root}/src`
 
-const sourceFiles = globSync(path.resolve(__dirname, './src/*/index.ts'))
+const sourceFiles = globSync(path.resolve(__dirname, './src/*/index.{ts,tsx}'))
 
 async function generateIndex(files) {
   // ensure the dynamic root exists
@@ -19,7 +19,7 @@ async function generateIndex(files) {
     stream.write('// this file is autogenerated by generate-index.js, modifying it manually will have no effect\n');
 
     files.forEach(file => {
-      const name = file.replace('/index.ts', '').split('/').pop();
+      const name = file.replace(/\/index\.(ts|tsx)$/, '').split('/').pop();
       // do not generate default exports for Hooks/
       name !== 'Hooks' && stream.write(`\nexport { default as ${name} } from './${name}';\n`);
       stream.write(`export * from './${name}';\n`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "6.4.0",
+  "version": "6.5.0-prerelease.1",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -47,14 +47,14 @@
     "@patternfly/patternfly": "^6.4.0",
     "@patternfly/react-code-editor": "^6.4.0",
     "@patternfly/patternfly-a11y": "^5.1.0",
-    "@types/react": "^18.3.23",
+    "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
     "@types/react-router-dom": "^5.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^6.30.1",
-    "react-router-dom": "^6.30.1",
-    "rimraf": "^6.0.1",
-    "typescript": "^5.9.2"
+    "react-router": "^6.30.2",
+    "react-router-dom": "^6.30.2",
+    "rimraf": "^6.1.2",
+    "typescript": "^5.9.3"
   }
 }

package/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md

@@ -22,15 +22,17 @@ import { DataViewCheckboxFilter } from '@patternfly/react-data-view/dist/dynamic
 
 **Note:** Data view lives in its own package [`@patternfly/react-data-view`](https://www.npmjs.com/package/@patternfly/react-data-view)
 
-If you notice a bug, or if you have a suggestion for improving the data view extension or its documentation, please file an issue in the [react-data-view](https://github.com/patternfly/react-data-view/issues) repository. Before doing so, please make sure there is not already a pre-existing issue.
+The **data view** extension enables you to display datasets in organized layouts, with data representations and interactive toolbars for actions like selection and pagination.
 
----
+--- 
 
-The **data view** extension enables you to display datasets in organized layouts, with data representations and interactive toolbars for actions like selection and pagination.
+## How to structure and implement the data view
+
+The **data view** extension provides a modular architecture that lets you efficiently create consistent data views, either by using predefined sub-components and hooks or by defining your own custom implementations.
 
 ### Layout
 
-A data view should contain a header, the data representation, and a footer. These parts are organized in a [stack layout](/layouts/stack).
+A data view should contain a header, the data representation, and a footer. These parts are organized in a [stack layout](/foundations-and-styles/layouts/stack).
 
 The data view toolbars and sub-components that display the data (like a card view or table) are always passed as `children` to the `<DataView>` component.
 
@@ -61,3 +63,7 @@ This example uses the `<DataViewEventsProvider>` to display details about a sele
 ```js file="./EventsExample.tsx"
 
 ```
+
+---
+
+If you notice a bug, or if you have a suggestion for improving the data view extension or its documentation, please file an issue in the [react-data-view](https://github.com/patternfly/react-data-view/issues) repository. Before doing so, please make sure there is not already a pre-existing issue.

package/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx

@@ -244,7 +244,8 @@ const RepositoriesTable: FunctionComponent<RepositoriesTableProps> = ({ selected
         ouiaId='LayoutExampleFooter'
         pagination={
           <Pagination 
-            isCompact  
+            isCompact
+            variant="bottom"
             perPageOptions={perPageOptions} 
             itemCount={repositories.length} 
             {...pagination} 

package/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableExpandableExample.tsx

@@ -0,0 +1,108 @@
+import { FunctionComponent } from 'react';
+import { DataViewTable, DataViewTr, DataViewTh, ExpandableContent } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { Button } from '@patternfly/react-core';
+import { ActionsColumn } from '@patternfly/react-table';
+
+interface Repository {
+  id: number;
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const expandableContents: ExpandableContent[] = [
+  // Row 1 - Repository one
+  { rowId: 1, columnId: 3, content: <div><strong>PR Details:</strong> 3 open PRs, 45 merged this month, avg review time: 2 days</div> },
+  { rowId: 1, columnId: 5, content: <div><strong>Commit Info:</strong> Author: John Doe, Message: "Fix critical authentication bug", SHA: a1b2c3d</div> },
+
+  // Row 2 - Repository two
+  { rowId: 2, columnId: 2, content: <div><strong>Branch Details:</strong> 8 active branches, main, staging, feature/api-v2, feature/dashboard</div> },
+  { rowId: 2, columnId: 3, content: <div><strong>PR Details:</strong> 5 open PRs, 120 merged this month, avg review time: 1.5 days</div> },
+  { rowId: 2, columnId: 4, content: <div><strong>Workspace Info:</strong> Development env, 3 active deployments, last updated 30 mins ago</div> },
+  { rowId: 2, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Jane Smith, Message: "Add new API endpoints", SHA: x9y8z7w</div> },
+
+  // Row 3 - Repository three
+  { rowId: 3, columnId: 2, content: <div><strong>Branch Details:</strong> 12 active branches including main, develop, multiple feature branches</div> },
+  { rowId: 3, columnId: 3, content: <div><strong>PR Details:</strong> 8 open PRs, 200 merged this month, avg review time: 3 days</div> },
+  { rowId: 3, columnId: 4, content: <div><strong>Workspace Info:</strong> Staging env, 10 active deployments, last updated 1 day ago</div> },
+  { rowId: 3, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Bob Johnson, Message: "Refactor core modules", SHA: p0o9i8u</div> },
+
+  // Row 4 - Repository four
+  { rowId: 4, columnId: 2, content: <div><strong>Branch Details:</strong> 6 active branches, focusing on microservices architecture</div> },
+  { rowId: 4, columnId: 3, content: <div><strong>PR Details:</strong> 2 open PRs, 90 merged this month, avg review time: 2.5 days</div> },
+  { rowId: 4, columnId: 4, content: <div><strong>Workspace Info:</strong> QA env, 7 active deployments, automated testing enabled</div> },
+  { rowId: 4, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Alice Williams, Message: "Update dependencies", SHA: m5n4b3v</div> },
+
+  // Row 5 - Repository five
+  { rowId: 5, columnId: 2, content: <div><strong>Branch Details:</strong> 4 active branches, clean branch strategy</div> },
+  { rowId: 5, columnId: 3, content: <div><strong>PR Details:</strong> 6 open PRs, 75 merged this month, avg review time: 1 day</div> },
+  { rowId: 5, columnId: 4, content: <div><strong>Workspace Info:</strong> Pre-production env, CI/CD pipeline configured</div> },
+  { rowId: 5, columnId: 5, content: <div><strong>Commit Info:</strong> Author: Charlie Brown, Message: "Implement dark mode", SHA: q2w3e4r</div> },
+
+  // Row 6 - Repository six
+  { rowId: 6, columnId: 2, content: <div><strong>Branch Details:</strong> 15 active branches, complex branching model</div> },
+  { rowId: 6, columnId: 3, content: <div><strong>PR Details:</strong> 10 open PRs, 250 merged this month, avg review time: 4 days</div> },
+  { rowId: 6, columnId: 4, content: <div><strong>Workspace Info:</strong> Multi-region deployment, high availability setup</div> },
+  { rowId: 6, columnId: 5, content: <div><strong>Commit Info:</strong> Author: David Lee, Message: "Security patches applied", SHA: t6y7u8i</div> },
+];
+
+const repositories: Repository[] = [
+  { id: 1, name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+const rowActions = [
+  {
+    title: 'Some action',
+    onClick: () => console.log('clicked on Some action')  // eslint-disable-line no-console
+  },
+  {
+    title: <div>Another action</div>,
+    onClick: () => console.log('clicked on Another action')  // eslint-disable-line no-console
+  },
+  {
+    isSeparator: true
+  },
+  {
+    title: 'Third action',
+    onClick: () => console.log('clicked on Third action')  // eslint-disable-line no-console
+  }
+];
+
+const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit }) => [
+  {
+    id,
+    cell: workspaces,
+    props: {
+      favorites: { isFavorited: true }
+    }
+  },
+  { cell: <Button href='#' variant='link' isInline>{name}</Button> },
+  branches,
+  prs,
+  workspaces,
+  lastCommit,
+  { cell: <ActionsColumn items={rowActions}/>, props: { isActionCell: true } },
+]);
+
+const columns: DataViewTh[] = [
+  null,
+  'Repositories', 
+  { cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></> }, 
+  'Pull requests', 
+  { cell: 'Workspaces', props: { info: { tooltip: 'More information' }, isStickyColumn: true } }, 
+  { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } },
+];
+
+const ouiaId = 'TableExample';
+
+export const ExpandableExample: FunctionComponent = () => (
+  <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} expandedRows={expandableContents} isExpandable={true}/>
+);