@patternfly/react-data-view 5.1.1 → 5.1.2

package/dist/esm/DataViewTableTree/DataViewTableTree.js

@@ -0,0 +1,93 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useMemo } from 'react';
+import { Table, Tbody, Td, TreeRowWrapper, } from '@patternfly/react-table';
+import { useInternalContext } from '../InternalContext';
+import { DataViewTableHeader } from '../DataViewTableHeader';
+import { isDataViewTdObject } from '../DataViewTable';
+const getDescendants = (node) => (!node.children || !node.children.length) ? [node] : node.children.flatMap(getDescendants);
+const isNodeChecked = (node, isSelected) => {
+    let allSelected = true;
+    let someSelected = false;
+    for (const descendant of getDescendants(node)) {
+        const selected = !!(isSelected === null || isSelected === void 0 ? void 0 : isSelected(descendant));
+        someSelected || (someSelected = selected);
+        allSelected && (allSelected = selected);
+        if (!allSelected && someSelected) {
+            return null;
+        }
+    }
+    return allSelected;
+};
+export const DataViewTableTree = (_a) => {
+    var { columns, rows, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
+    const { selection } = useInternalContext();
+    const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
+    const [expandedNodeIds, setExpandedNodeIds] = React.useState([]);
+    const [expandedDetailsNodeNames, setExpandedDetailsNodeIds] = React.useState([]);
+    const nodes = useMemo(() => {
+        const renderRows = ([node, ...remainingNodes], level = 1, posinset = 1, rowIndex = 0, isHidden = false) => {
+            var _a, _b, _c, _d;
+            if (!node) {
+                return [];
+            }
+            const isExpanded = expandedNodeIds.includes(node.id);
+            const isDetailsExpanded = expandedDetailsNodeNames.includes(node.id);
+            const isChecked = isSelected && isNodeChecked(node, isSelected);
+            let icon = leafIcon;
+            if (node.children) {
+                icon = isExpanded ? expandedIcon : collapsedIcon;
+            }
+            const treeRow = {
+                onCollapse: () => setExpandedNodeIds(prevExpanded => {
+                    const otherExpandedNodeIds = prevExpanded.filter(id => id !== node.id);
+                    return isExpanded ? otherExpandedNodeIds : [...otherExpandedNodeIds, node.id];
+                }),
+                onToggleRowDetails: () => setExpandedDetailsNodeIds(prevDetailsExpanded => {
+                    const otherDetailsExpandedNodeIds = prevDetailsExpanded.filter(id => id !== node.id);
+                    return isDetailsExpanded ? otherDetailsExpandedNodeIds : [...otherDetailsExpandedNodeIds, node.id];
+                }),
+                onCheckChange: ((isSelectDisabled === null || isSelectDisabled === void 0 ? void 0 : isSelectDisabled(node)) || !onSelect) ? undefined : (_event, isChecking) => onSelect === null || onSelect === void 0 ? void 0 : onSelect(isChecking, getDescendants(node)),
+                rowIndex,
+                props: {
+                    isExpanded,
+                    isDetailsExpanded,
+                    isHidden,
+                    'aria-level': level,
+                    'aria-posinset': posinset,
+                    'aria-setsize': (_b = (_a = node.children) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0,
+                    isChecked,
+                    ouiaId: `${ouiaId}-tree-toggle-${node.id}`,
+                    checkboxId: `checkbox_id_${(_c = node.id) === null || _c === void 0 ? void 0 : _c.toLowerCase().replace(/\s+/g, '_')}`,
+                    icon,
+                },
+            };
+            const childRows = ((_d = node.children) === null || _d === void 0 ? void 0 : _d.length)
+                ? renderRows(node.children, level + 1, 1, rowIndex + 1, !isExpanded || isHidden)
+                : [];
+            return [
+                React.createElement(TreeRowWrapper, { key: node.id, row: { props: treeRow.props } }, node.row.map((cell, colIndex) => {
+                    var _a;
+                    const cellIsObject = isDataViewTdObject(cell);
+                    return (React.createElement(Td, Object.assign({ key: colIndex, treeRow: colIndex === 0 ? treeRow : undefined }, (cellIsObject && ((_a = cell === null || cell === void 0 ? void 0 : cell.props) !== null && _a !== void 0 ? _a : {})), { "data-ouia-component-id": `${ouiaId}-td-${rowIndex}-${colIndex}` }), cellIsObject ? cell.cell : cell));
+                })),
+                ...childRows,
+                ...renderRows(remainingNodes, level, posinset + 1, rowIndex + 1 + childRows.length, isHidden),
+            ];
+        };
+        return renderRows(rows);
+    }, [rows, expandedNodeIds, expandedDetailsNodeNames, leafIcon, expandedIcon, collapsedIcon, isSelected, onSelect, isSelectDisabled, ouiaId]);
+    return (React.createElement(Table, Object.assign({ isTreeTable: true, "aria-label": "Data table", ouiaId: ouiaId }, props),
+        React.createElement(DataViewTableHeader, { isTreeTable: true, columns: columns, ouiaId: ouiaId }),
+        React.createElement(Tbody, null, nodes)));
+};
+export default DataViewTableTree;

package/dist/esm/DataViewTableTree/DataViewTableTree.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/DataViewTableTree/DataViewTableTree.test.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { FolderIcon, FolderOpenIcon, LeafIcon } from '@patternfly/react-icons';
+import { DataView } from '../DataView';
+import { DataViewTable } from '../DataViewTable';
+const repositories = [
+    {
+        name: 'Repository one',
+        branches: 'Branch one',
+        prs: 'Pull request one',
+        workspaces: 'Workspace one',
+        lastCommit: 'Timestamp one',
+        children: [
+            {
+                name: 'Repository two',
+                branches: 'Branch two',
+                prs: 'Pull request two',
+                workspaces: 'Workspace two',
+                lastCommit: 'Timestamp two',
+            },
+            {
+                name: 'Repository three',
+                branches: 'Branch three',
+                prs: 'Pull request three',
+                workspaces: 'Workspace three',
+                lastCommit: 'Timestamp three',
+            },
+        ],
+    },
+    {
+        name: 'Repository four',
+        branches: 'Branch four',
+        prs: 'Pull request four',
+        workspaces: 'Workspace four',
+        lastCommit: 'Timestamp four',
+        children: [
+            {
+                name: 'Repository five',
+                branches: 'Branch five',
+                prs: 'Pull request five',
+                workspaces: 'Workspace five',
+                lastCommit: 'Timestamp five',
+            },
+        ],
+    },
+    {
+        name: 'Repository six',
+        branches: 'Branch six',
+        prs: 'Pull request six',
+        workspaces: 'Workspace six',
+        lastCommit: 'Timestamp six',
+    },
+];
+// Build rows for DataViewTable
+const buildRows = (repositories) => repositories.map((repo) => (Object.assign({ row: [repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit], id: repo.name }, (repo.children ? { children: buildRows(repo.children) } : {}))));
+const rows = buildRows(repositories);
+const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
+const ouiaId = 'TreeTableExample';
+describe('DataViewTableTree component', () => {
+    const mockSelection = {
+        onSelect: jest.fn(),
+        isSelected: jest.fn(),
+        isSelectDisabled: jest.fn(),
+    };
+    test('should render the tree table correctly', () => {
+        const { container } = render(React.createElement(DataView, { selection: mockSelection },
+            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows, leafIcon: React.createElement(LeafIcon, null), expandedIcon: React.createElement(FolderOpenIcon, { "aria-hidden": true }), collapsedIcon: React.createElement(FolderIcon, { "aria-hidden": true }) })));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/esm/DataViewTableTree/index.js

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

package/dist/esm/InternalContext/InternalContext.test.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { InternalContextProvider, useInternalContext } from './InternalContext';
+import { useInternalContext } from './InternalContext';
+import { DataView } from '../DataView';
 describe('InternalContext', () => {
     const mockSelection = {
         onSelect: jest.fn(),
@@ -15,7 +16,7 @@ describe('InternalContext', () => {
                 React.createElement("button", { onClick: () => selection === null || selection === void 0 ? void 0 : selection.onSelect(true, ['item1']) }, "Select item"),
                 React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item1')) ? 'Selected' : 'Not selected')));
         };
-        const { getByText } = render(React.createElement(InternalContextProvider, { selection: mockSelection },
+        const { getByText } = render(React.createElement(DataView, { selection: mockSelection },
             React.createElement(TestComponent, null)));
         fireEvent.click(getByText('Select item'));
         expect(mockSelection.onSelect).toHaveBeenCalledWith(true, ['item1']);
@@ -28,7 +29,7 @@ describe('InternalContext', () => {
                 React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item1')) ? 'Item 1 is selected' : 'Item 1 is not selected'),
                 React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item2')) ? 'Item 2 is selected' : 'Item 2 is not selected')));
         };
-        const { getByText } = render(React.createElement(InternalContextProvider, { selection: mockSelectionState },
+        const { getByText } = render(React.createElement(DataView, { selection: mockSelectionState },
             React.createElement(TestComponent, null)));
         expect(getByText('Item 1 is selected')).toBeInTheDocument();
         expect(getByText('Item 2 is not selected')).toBeInTheDocument();
@@ -42,7 +43,7 @@ describe('InternalContext', () => {
                 React.createElement("span", null, ((_a = selection === null || selection === void 0 ? void 0 : selection.isSelectDisabled) === null || _a === void 0 ? void 0 : _a.call(selection, 'item3')) ? 'Item 3 is disabled' : 'Item 3 is enabled'),
                 React.createElement("span", null, ((_b = selection === null || selection === void 0 ? void 0 : selection.isSelectDisabled) === null || _b === void 0 ? void 0 : _b.call(selection, 'item1')) ? 'Item 1 is disabled' : 'Item 1 is enabled')));
         };
-        const { getByText } = render(React.createElement(InternalContextProvider, { selection: mockSelectionWithDisabled },
+        const { getByText } = render(React.createElement(DataView, { selection: mockSelectionWithDisabled },
             React.createElement(TestComponent, null)));
         expect(getByText('Item 3 is disabled')).toBeInTheDocument();
         expect(getByText('Item 1 is enabled')).toBeInTheDocument();

package/dist/esm/index.d.ts

@@ -3,6 +3,12 @@ export * from './InternalContext';
 export * from './Hooks';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
+export { default as DataViewTableTree } from './DataViewTableTree';
+export * from './DataViewTableTree';
+export { default as DataViewTableHeader } from './DataViewTableHeader';
+export * from './DataViewTableHeader';
+export { default as DataViewTableBasic } from './DataViewTableBasic';
+export * from './DataViewTableBasic';
 export { default as DataViewTable } from './DataViewTable';
 export * from './DataViewTable';
 export { default as DataViewEventsContext } from './DataViewEventsContext';

package/dist/esm/index.js

@@ -4,6 +4,12 @@ export * from './InternalContext';
 export * from './Hooks';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
+export { default as DataViewTableTree } from './DataViewTableTree';
+export * from './DataViewTableTree';
+export { default as DataViewTableHeader } from './DataViewTableHeader';
+export * from './DataViewTableHeader';
+export { default as DataViewTableBasic } from './DataViewTableBasic';
+export * from './DataViewTableBasic';
 export { default as DataViewTable } from './DataViewTable';
 export * from './DataViewTable';
 export { default as DataViewEventsContext } from './DataViewEventsContext';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -11,13 +11,15 @@ source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
 sortValue: 4
-propComponents: ['DataViewToolbar', 'DataViewTable']
+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 { BulkSelect } from '@patternfly/react-component-groups';
-import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 
 ## Data view toolbar
 
@@ -58,4 +60,14 @@ The `DataViewTable` component accepts the following props:
 
 - optional `props` (`TableProps`) that are passed down to the `<Table>` component, except for `onSelect`, which is managed internally.
 
+### Tree table example
+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:
+  - `row` (`DataViewTd[]`) defining the content for each cell in the row.
+  - `id` (`string`) for the row (used to match items in selection end expand the rows).
+  - optional `children` (`DataViewTrTree[]`) defining the children rows.
+
+It is also possible to disable row selection using the `isSelectDisabled` function passed to the wrapping data view component.
 
+```js file="./DataViewTableTreeExample.tsx"
+
+```

package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableExample.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataViewTable, DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { Button } from '@patternfly/react-core';
 
@@ -13,12 +13,12 @@ interface Repository {
 }
 
 const repositories: Repository[] = [
-  { id: 1, name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
-  { id: 2, name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
-  { id: 3, name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
-  { id: 4, name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
-  { id: 5, name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
-  { id: 6, name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+  { 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' }
 ];
 
 // you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable, DataViewTh, DataViewTrTree } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { FolderIcon, FolderOpenIcon, LeafIcon } from '@patternfly/react-icons';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+  children?: Repository[];
+}
+
+const repositories: Repository[] = [
+  { 
+    name: 'Repository one',
+    branches: 'Branch one',
+    prs: 'Pull request one',
+    workspaces: 'Workspace one',
+    lastCommit: 'Timestamp one',
+    children: [
+      { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+      { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+    ]
+  },
+  { 
+    name: 'Repository four',
+    branches: 'Branch four',
+    prs: 'Pull request four',
+    workspaces: 'Workspace four',
+    lastCommit: 'Timestamp four',
+    children: [ { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' } ]
+  },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+const buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories.map((repo) => ({
+  row: [ repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit ],
+  id: repo.name, // unique ID for each row
+  ...(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';
+
+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 />} />
+    </DataView>
+  );
+}

package/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx

@@ -13,12 +13,12 @@ interface Repository {
 }
 
 const repositories: Repository[] = [
-  { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
-  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
-  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
-  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
-  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
-  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
 ];
 
 const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
@@ -46,7 +46,7 @@ const RepositoryDetail: React.FunctionComponent<RepositoryDetailProps> = ({ sele
     <DrawerPanelContent>
       <DrawerHead>
         <Title className="pf-v5-u-mb-md" headingLevel="h2" ouiaId="detail-drawer-title">
-          Detail of repository {selectedRepo?.name}
+          Detail of {selectedRepo?.name}
         </Title>
         <Text>Branches: {selectedRepo?.branches}</Text>
         <Text>Pull requests: {selectedRepo?.prs}</Text>

package/patternfly-docs/content/extensions/data-view/examples/Functionality/PaginationExample.tsx

@@ -20,12 +20,12 @@ interface Repository {
 }
 
 const repositories: Repository[] = [
-  { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
-  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
-  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
-  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
-  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
-  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
 ];
 
 const rows = repositories.map(item => Object.values(item));

package/patternfly-docs/content/extensions/data-view/examples/Functionality/SelectionExample.tsx

@@ -14,12 +14,12 @@ interface Repository {
 }
 
 const repositories: Repository[] = [
-  { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
-  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
-  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
-  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
-  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
-  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
 ];
 
 const rows = repositories.map(item => Object.values(item));

package/patternfly-docs/content/extensions/data-view/examples/Layout/PredefinedLayoutExample.tsx

@@ -20,12 +20,12 @@ interface Repository {
 }
 
 const repositories: Repository[] = [
-  { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
-  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
-  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
-  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
-  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
-  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
 ];
 
 const rows = repositories.map(item => Object.values(item));

package/src/DataViewTable/DataViewTable.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { DataViewTable } from './DataViewTable';
+import { DataViewTable, DataViewTrTree } from './DataViewTable';
 
 interface Repository {
   name: string;
@@ -8,30 +8,73 @@ interface Repository {
   prs: string | null;
   workspaces: string;
   lastCommit: string;
+  children?: Repository[];
 }
 
 const repositories: Repository[] = [
-  { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
-  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
-  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
-  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
-  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
-  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
 ];
 
-const rows = repositories.map(repo => ({
-  row: Object.values(repo),
+const rows = repositories.map(repo => ({ row: Object.values(repo) }));
+
+const repositoriesTree: Repository[] = [
+  { 
+    name: 'Repository one',
+    branches: 'Branch one',
+    prs: 'Pull request one',
+    workspaces: 'Workspace one',
+    lastCommit: 'Timestamp one',
+    children: [
+      { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+      { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+    ]
+  },
+  { 
+    name: 'Repository four',
+    branches: 'Branch four',
+    prs: 'Pull request four',
+    workspaces: 'Workspace four',
+    lastCommit: 'Timestamp four',
+    children: [ { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' } ]
+  },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+
+
+const buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories.map((repo) => ({
+  row: [ repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit ],
+  id: repo.name, // unique ID for each row
+  ...(repo.children
+    ? { 
+      children: buildRows(repo.children) // build rows for children
+    }
+    : {})
 }));
 
+const treeRows = buildRows(repositoriesTree);
+
 const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
 
 const ouiaId = 'TableExample';
 
 describe('DataViewTable component', () => {
-  test('should render correctly', () => {
+  test('should render a basic table correctly', () => {
     const { container } = render(
       <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
     );
     expect(container).toMatchSnapshot();
   });
+
+  test('should render a tree table correctly', () => {
+    const { container } = render(
+      <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={treeRows} />
+    );
+    expect(container).toMatchSnapshot();
+  });
 });