@patternfly/react-data-view 6.3.0 → 6.4.0-prerelease.10

package/dist/esm/Hooks/selection.js

@@ -14,9 +14,13 @@ export const useDataViewSelection = (props) => {
             : setSelected(items ? prev => prev.filter(prevSelected => !(Array.isArray(items) ? items : [items]).some(item => matchOption(item, prevSelected))) : []);
     };
     const isSelected = (item) => Boolean(selected.find(selected => matchOption(selected, item)));
+    const setSelectedItems = (items) => {
+        setSelected(items);
+    };
     return {
         selected,
         onSelect,
-        isSelected
+        isSelected,
+        setSelected: setSelectedItems
     };
 };

package/dist/esm/Hooks/selection.test.js

@@ -17,6 +17,7 @@ describe('useDataViewSelection', () => {
             selected: [],
             onSelect: expect.any(Function),
             isSelected: expect.any(Function),
+            setSelected: expect.any(Function),
         });
     });
     it('should get initial state correctly - with initialSelected', () => {
@@ -26,6 +27,7 @@ describe('useDataViewSelection', () => {
             selected: initialSelected,
             onSelect: expect.any(Function),
             isSelected: expect.any(Function),
+            setSelected: expect.any(Function),
         });
     });
     it('should select items correctly - objects', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -50,4 +52,50 @@ describe('useDataViewSelection', () => {
         expect(result.current.isSelected({ id: 1, name: 'test1' })).toBe(true);
         expect(result.current.isSelected({ id: 3, name: 'test2' })).toBe(false);
     });
+    it('should have setSelected function in return object', () => {
+        const { result } = renderHook(() => useDataViewSelection({ matchOption: (a, b) => a.id === b.id }));
+        expect(result.current).toEqual({
+            selected: [],
+            onSelect: expect.any(Function),
+            isSelected: expect.any(Function),
+            setSelected: expect.any(Function),
+        });
+    });
+    it('should set selected items directly using setSelected - objects', () => __awaiter(void 0, void 0, void 0, function* () {
+        const initialSelected = [{ id: 1, name: 'test1' }];
+        const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }));
+        const newSelected = [{ id: 2, name: 'test2' }, { id: 3, name: 'test3' }];
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.setSelected(newSelected);
+        }));
+        expect(result.current.selected).toEqual(newSelected);
+    }));
+    it('should set selected items directly using setSelected - strings', () => __awaiter(void 0, void 0, void 0, function* () {
+        const initialSelected = ['test1', 'test2'];
+        const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a === b }));
+        const newSelected = ['test3', 'test4', 'test5'];
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.setSelected(newSelected);
+        }));
+        expect(result.current.selected).toEqual(newSelected);
+    }));
+    it('should clear all selections using setSelected with empty array', () => __awaiter(void 0, void 0, void 0, function* () {
+        const initialSelected = [{ id: 1, name: 'test1' }, { id: 2, name: 'test2' }];
+        const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.setSelected([]);
+        }));
+        expect(result.current.selected).toEqual([]);
+    }));
+    it('should update isSelected correctly after using setSelected', () => __awaiter(void 0, void 0, void 0, function* () {
+        const initialSelected = [{ id: 1, name: 'test1' }];
+        const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }));
+        const newSelected = [{ id: 2, name: 'test2' }, { id: 3, name: 'test3' }];
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.setSelected(newSelected);
+        }));
+        expect(result.current.isSelected({ id: 1, name: 'test1' })).toBe(false);
+        expect(result.current.isSelected({ id: 2, name: 'test2' })).toBe(true);
+        expect(result.current.isSelected({ id: 3, name: 'test3' })).toBe(true);
+    }));
 });

package/dist/esm/InternalContext/InternalContext.d.ts

@@ -5,6 +5,8 @@ export interface DataViewSelection {
     onSelect: (isSelecting: boolean, items?: any[] | any) => void;
     /** Checks if a specific item is currently selected */
     isSelected: (item: any) => boolean;
+    /** Directly sets the selected items */
+    setSelected?: (items: any[]) => void;
     /** Determines if selection is disabled for a given item */
     isSelectDisabled?: (item: any) => boolean;
 }

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/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.8.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.3.0",
+  "version": "6.4.0-prerelease.10",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -32,9 +32,9 @@
   },
   "dependencies": {
     "@patternfly/react-component-groups": "^6.1.0",
-    "@patternfly/react-core": "^6.0.0",
-    "@patternfly/react-icons": "^6.0.0",
-    "@patternfly/react-table": "^6.0.0",
+    "@patternfly/react-core": "^6.4.0",
+    "@patternfly/react-icons": "^6.4.0",
+    "@patternfly/react-table": "^6.4.0",
     "clsx": "^2.1.1",
     "react-jss": "^10.10.0"
   },
@@ -43,18 +43,18 @@
     "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^6.5.20",
-    "@patternfly/patternfly": "^6.0.0",
-    "@patternfly/react-code-editor": "^6.0.0",
+    "@patternfly/documentation-framework": "^6.24.2",
+    "@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.8.3"
+    "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/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}/>
+);

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

@@ -0,0 +1,148 @@
+import { FunctionComponent, useState } from 'react';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { ExpandableContent } from '@patternfly/react-data-view/dist/dynamic/DataViewTableBasic';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { Button, Toolbar, ToolbarContent, ToolbarItem, Switch } from '@patternfly/react-core';
+
+interface Repository {
+  id: number;
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+  contributors: string;
+  stars: string;
+  forks: string;
+}
+
+const expandableContents: ExpandableContent[] = [
+  // Row 1 - Repository one
+  { rowId: 1, columnId: 2, content: <div><strong>Branch Details:</strong> 5 active branches, main, develop, feature/new-ui, hotfix/bug-123, release/v2.0</div> },
+  { 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', contributors: '25 contributors', stars: '1.2k stars', forks: '340 forks' },
+  { id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two', contributors: '45 contributors', stars: '3.5k stars', forks: '890 forks' },
+  { id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three', contributors: '200 contributors', stars: '15k stars', forks: '2.1k forks' },
+  { id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four', contributors: '80 contributors', stars: '5.7k stars', forks: '1.2k forks' },
+  { id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five', contributors: '60 contributors', stars: '4.3k stars', forks: '780 forks' },
+  { id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six', contributors: '300 contributors', stars: '22k stars', forks: '4.5k forks' },
+  { id: 7, name: 'Repository seven', branches: 'Branch seven', prs: 'Pull request seven', workspaces: 'Workspace seven', lastCommit: 'Timestamp seven', contributors: '12 contributors', stars: '567 stars', forks: '120 forks' },
+  { id: 8, name: 'Repository eight', branches: 'Branch eight', prs: 'Pull request eight', workspaces: 'Workspace eight', lastCommit: 'Timestamp eight', contributors: '98 contributors', stars: '7.8k stars', forks: '1.5k forks' },
+  { id: 9, name: 'Repository nine', branches: 'Branch nine', prs: 'Pull request nine', workspaces: 'Workspace nine', lastCommit: 'Timestamp nine', contributors: '33 contributors', stars: '2.1k stars', forks: '456 forks' },
+  { id: 10, name: 'Repository ten', branches: 'Branch ten', prs: 'Pull request ten', workspaces: 'Workspace ten', lastCommit: 'Timestamp ten', contributors: '150 contributors', stars: '11k stars', forks: '2.8k forks' },
+  { id: 11, name: 'Repository eleven', branches: 'Branch eleven', prs: 'Pull request eleven', workspaces: 'Workspace eleven', lastCommit: 'Timestamp eleven', contributors: '67 contributors', stars: '5.2k stars', forks: '980 forks' },
+  { id: 12, name: 'Repository twelve', branches: 'Branch twelve', prs: 'Pull request twelve', workspaces: 'Workspace twelve', lastCommit: 'Timestamp twelve', contributors: '41 contributors', stars: '3.1k stars', forks: '670 forks' },
+  { id: 13, name: 'Repository thirteen', branches: 'Branch thirteen', prs: 'Pull request thirteen', workspaces: 'Workspace thirteen', lastCommit: 'Timestamp thirteen', contributors: '89 contributors', stars: '6.4k stars', forks: '1.3k forks' },
+  { id: 14, name: 'Repository fourteen', branches: 'Branch fourteen', prs: 'Pull request fourteen', workspaces: 'Workspace fourteen', lastCommit: 'Timestamp fourteen', contributors: '120 contributors', stars: '9.2k stars', forks: '1.9k forks' },
+  { id: 15, name: 'Repository fifteen', branches: 'Branch fifteen', prs: 'Pull request fifteen', workspaces: 'Workspace fifteen', lastCommit: 'Timestamp fifteen', contributors: '78 contributors', stars: '5.9k stars', forks: '1.1k forks' }
+];
+
+const ouiaId = 'TableInteractiveExample';
+
+export const InteractiveExample: FunctionComponent = () => {
+  const [isExpandable, setIsExpandable] = useState(true);
+  const [isSticky, setIsSticky] = useState(true);
+
+  // Generate rows based on current settings
+  const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit, contributors, stars, forks }) => [
+    {
+      id,
+      cell: workspaces,
+      props: {
+        favorites: { isFavorited: true }
+      }
+    },
+    { cell: <Button href='#' variant='link' isInline>{name}</Button>, props: { isStickyColumn: isSticky, hasRightBorder: true, hasLeftBorder: true, modifier: "nowrap" } },
+    { cell: branches, props: { modifier: "nowrap" } },
+    { cell: prs, props: { modifier: "nowrap" } },
+    { cell: workspaces, props: { modifier: "nowrap" } },
+    { cell: lastCommit, props: { modifier: "nowrap" } },
+    { cell: contributors, props: { modifier: "nowrap" } },
+    { cell: stars, props: { modifier: "nowrap" } },
+    { cell: forks, props: { modifier: "nowrap" } }
+  ]);
+
+  const columns: DataViewTh[] = [
+    null,
+    { cell: 'Repositories', props: { isStickyColumn: isSticky, modifier: 'fitContent', hasRightBorder: true, hasLeftBorder: true } },
+    { cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></>, props: { width: 20 } },
+    { cell: 'Pull requests', props: { width: 20 } },
+    { cell: 'Workspaces', props: { info: { tooltip: 'More information' }, width: 20 } },
+    { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 }, width: 20 } },
+    { cell: 'Contributors', props: { width: 20 } },
+    { cell: 'Stars', props: { width: 20 } },
+    { cell: 'Forks', props: { width: 20 } },
+  ];
+
+  return (
+    <>
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarItem>
+            <Switch
+              id="expandable-switch"
+              label="Expandable"
+              isChecked={isExpandable}
+              onChange={(_event, checked) => setIsExpandable(checked)}
+              aria-label="Toggle expandable rows"
+            />
+          </ToolbarItem>
+          <ToolbarItem>
+            <Switch
+              id="sticky-switch"
+              label="Sticky header & column"
+              isChecked={isSticky}
+              onChange={(_event, checked) => setIsSticky(checked)}
+              aria-label="Toggle sticky header and columns"
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <div style={{ height: '400px', overflow: 'auto' }}>
+        <DataViewTable
+          aria-label='Interactive repositories table'
+          ouiaId={ouiaId}
+          columns={columns}
+          rows={rows}
+          expandedRows={isExpandable ? expandableContents : undefined}
+          isExpandable={isExpandable}
+          isSticky={isSticky}
+        />
+      </div>
+    </>
+  );
+};