@patternfly/react-data-view 5.1.3 → 5.2.0

package/dist/cjs/DataView/DataView.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 import { DataViewSelection } from '../InternalContext';
+export declare const DataViewState: {
+    readonly empty: "empty";
+    readonly loading: "loading";
+    readonly error: "error";
+};
+export type DataViewState = typeof DataViewState[keyof typeof DataViewState];
 export interface DataViewProps {
     /** Content rendered inside the data view */
     children: React.ReactNode;
@@ -7,6 +13,8 @@ export interface DataViewProps {
     ouiaId?: string;
     /** Selection context configuration */
     selection?: DataViewSelection;
+    /** Currently active state */
+    activeState?: DataViewState;
 }
 export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
 export declare const DataView: React.FC<DataViewProps>;

package/dist/cjs/DataView/DataView.js

@@ -14,17 +14,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataView = void 0;
+exports.DataView = exports.DataViewState = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const InternalContext_1 = require("../InternalContext");
+exports.DataViewState = {
+    empty: 'empty',
+    loading: 'loading',
+    error: 'error'
+};
 const DataViewImplementation = (_a) => {
     var { children, ouiaId = 'DataView' } = _a, props = __rest(_a, ["children", "ouiaId"]);
-    return (react_1.default.createElement(react_core_1.Stack, Object.assign({ "data-ouia-component-id": `${ouiaId}-stack}` }, props), react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(react_core_1.StackItem, { "data-ouia-component-id": `${ouiaId}-stack-item-${index}` }, child)))));
+    return (react_1.default.createElement(react_core_1.Stack, Object.assign({ "data-ouia-component-id": `${ouiaId}-stack` }, props), react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(react_core_1.StackItem, { "data-ouia-component-id": `${ouiaId}-stack-item-${index}` }, child)))));
 };
 const DataView = (_a) => {
-    var { children, selection } = _a, props = __rest(_a, ["children", "selection"]);
-    return (react_1.default.createElement(InternalContext_1.InternalContextProvider, { selection: selection },
+    var { children, selection, activeState } = _a, props = __rest(_a, ["children", "selection", "activeState"]);
+    return (react_1.default.createElement(InternalContext_1.InternalContextProvider, { selection: selection, activeState: activeState },
         react_1.default.createElement(DataViewImplementation, Object.assign({}, props), children)));
 };
 exports.DataView = DataView;

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
 import { TableProps } from '@patternfly/react-table';
 import { DataViewTh, DataViewTr } from '../DataViewTable';
+import { DataViewState } from '../DataView/DataView';
 export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | 'rows'> {
     /** Columns definition */
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTr[];
+    /** States to be displayed when active */
+    states?: Partial<Record<DataViewState, React.ReactNode>>;
     /** Custom OUIA ID */
     ouiaId?: string;
 }

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)
@@ -10,27 +33,25 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataViewTableBasic = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_table_1 = require("@patternfly/react-table");
 const InternalContext_1 = require("../InternalContext");
 const DataViewTableHeader_1 = require("../DataViewTableHeader");
 const DataViewTable_1 = require("../DataViewTable");
 const DataViewTableBasic = (_a) => {
-    var { columns, rows, ouiaId = 'DataViewTableBasic' } = _a, props = __rest(_a, ["columns", "rows", "ouiaId"]);
-    const { selection } = (0, InternalContext_1.useInternalContext)();
+    var { columns, rows, ouiaId = 'DataViewTableBasic', states = {} } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "states"]);
+    const { selection, activeState } = (0, InternalContext_1.useInternalContext)();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
+    const isSelectable = (0, react_1.useMemo)(() => Boolean(onSelect && isSelected), [onSelect, isSelected]);
     return (react_1.default.createElement(react_table_1.Table, Object.assign({ "aria-label": "Data table", ouiaId: ouiaId }, props),
         react_1.default.createElement(DataViewTableHeader_1.DataViewTableHeader, { columns: columns, ouiaId: ouiaId }),
-        react_1.default.createElement(react_table_1.Tbody, null, rows.map((row, rowIndex) => {
-            var _a;
+        react_1.default.createElement(react_table_1.Tbody, null, activeState && Object.keys(states).includes(activeState) ? (react_1.default.createElement(react_table_1.Tr, { key: activeState, ouiaId: `${ouiaId}-tr-${activeState}` },
+            react_1.default.createElement(react_table_1.Td, { colSpan: columns.length + Number(isSelectable) }, states[activeState]))) : (rows.map((row, rowIndex) => {
             const rowIsObject = (0, DataViewTable_1.isDataViewTrObject)(row);
-            return (react_1.default.createElement(react_table_1.Tr, Object.assign({ key: rowIndex, ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && ((_a = row === null || row === void 0 ? void 0 : row.props) !== null && _a !== void 0 ? _a : {}))),
-                onSelect && isSelected && (react_1.default.createElement(react_table_1.Td, { key: `select-${rowIndex}`, select: {
+            return (react_1.default.createElement(react_table_1.Tr, Object.assign({ key: rowIndex, ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && (row === null || row === void 0 ? void 0 : row.props))),
+                isSelectable && (react_1.default.createElement(react_table_1.Td, { key: `select-${rowIndex}`, select: {
                         rowIndex,
                         onSelect: (_event, isSelecting) => {
                             onSelect === null || onSelect === void 0 ? void 0 : onSelect(isSelecting, rowIsObject ? row : [row]);
@@ -43,7 +64,7 @@ const DataViewTableBasic = (_a) => {
                     const cellIsObject = (0, DataViewTable_1.isDataViewTdObject)(cell);
                     return (react_1.default.createElement(react_table_1.Td, Object.assign({ key: colIndex }, (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));
                 })));
-        }))));
+        })))));
 };
 exports.DataViewTableBasic = DataViewTableBasic;
 exports.default = exports.DataViewTableBasic;

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.test.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
 const DataViewTableBasic_1 = require("./DataViewTableBasic");
+const DataView_1 = __importDefault(require("../DataView/DataView"));
 const repositories = [
     { 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' },
@@ -24,4 +25,14 @@ describe('DataViewTable component', () => {
         const { container } = (0, react_2.render)(react_1.default.createElement(DataViewTableBasic_1.DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows }));
         expect(container).toMatchSnapshot();
     });
+    test('should render with an empty state', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.default, { activeState: "empty" },
+            react_1.default.createElement(DataViewTableBasic_1.DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { empty: "No data found" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render with an error state', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.default, { activeState: "error" },
+            react_1.default.createElement(DataViewTableBasic_1.DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { error: "Some error" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
 });

package/dist/cjs/DataViewTableTree/DataViewTableTree.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
 import { TableProps } from '@patternfly/react-table';
 import { DataViewTh, DataViewTrTree } from '../DataViewTable';
+import { DataViewState } from '../DataView/DataView';
 export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'rows'> {
     /** Columns definition */
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTrTree[];
+    /** States to be displayed when active */
+    states?: Partial<Record<DataViewState, React.ReactNode>>;
     /** Optional icon for the leaf rows */
     leafIcon?: React.ReactNode;
     /** Optional icon for the expanded parent rows */

package/dist/cjs/DataViewTableTree/DataViewTableTree.js

@@ -55,8 +55,8 @@ const isNodeChecked = (node, isSelected) => {
     return allSelected;
 };
 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 } = (0, InternalContext_1.useInternalContext)();
+    var { columns, rows, states = {}, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "states", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
+    const { selection, activeState } = (0, InternalContext_1.useInternalContext)();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
     const [expandedNodeIds, setExpandedNodeIds] = react_1.default.useState([]);
     const [expandedDetailsNodeNames, setExpandedDetailsNodeIds] = react_1.default.useState([]);
@@ -92,7 +92,6 @@ const DataViewTableTree = (_a) => {
                     '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,
                 },
@@ -101,7 +100,7 @@ const DataViewTableTree = (_a) => {
                 ? renderRows(node.children, level + 1, 1, rowIndex + 1, !isExpanded || isHidden)
                 : [];
             return [
-                react_1.default.createElement(react_table_1.TreeRowWrapper, { key: node.id, row: { props: treeRow.props } }, node.row.map((cell, colIndex) => {
+                react_1.default.createElement(react_table_1.TreeRowWrapper, { key: node.id, row: { props: treeRow.props }, ouiaId: `${ouiaId}-tr-${rowIndex}` }, node.row.map((cell, colIndex) => {
                     var _a;
                     const cellIsObject = (0, DataViewTable_1.isDataViewTdObject)(cell);
                     return (react_1.default.createElement(react_table_1.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));
@@ -111,10 +110,22 @@ const DataViewTableTree = (_a) => {
             ];
         };
         return renderRows(rows);
-    }, [rows, expandedNodeIds, expandedDetailsNodeNames, leafIcon, expandedIcon, collapsedIcon, isSelected, onSelect, isSelectDisabled, ouiaId]);
+    }, [
+        rows,
+        expandedNodeIds,
+        expandedDetailsNodeNames,
+        leafIcon,
+        expandedIcon,
+        collapsedIcon,
+        isSelected,
+        onSelect,
+        isSelectDisabled,
+        ouiaId
+    ]);
     return (react_1.default.createElement(react_table_1.Table, Object.assign({ isTreeTable: true, "aria-label": "Data table", ouiaId: ouiaId }, props),
         react_1.default.createElement(DataViewTableHeader_1.DataViewTableHeader, { isTreeTable: true, columns: columns, ouiaId: ouiaId }),
-        react_1.default.createElement(react_table_1.Tbody, null, nodes)));
+        react_1.default.createElement(react_table_1.Tbody, null, activeState && Object.keys(states).includes(activeState) ? (react_1.default.createElement(react_table_1.Tr, { key: activeState, ouiaId: `${ouiaId}-tr-${activeState}` },
+            react_1.default.createElement(react_table_1.Td, { colSpan: columns.length }, states[activeState]))) : nodes)));
 };
 exports.DataViewTableTree = DataViewTableTree;
 exports.default = exports.DataViewTableTree;

package/dist/cjs/DataViewTableTree/DataViewTableTree.test.js

@@ -72,4 +72,14 @@ describe('DataViewTableTree component', () => {
             react_1.default.createElement(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows, leafIcon: react_1.default.createElement(react_icons_1.LeafIcon, null), expandedIcon: react_1.default.createElement(react_icons_1.FolderOpenIcon, { "aria-hidden": true }), collapsedIcon: react_1.default.createElement(react_icons_1.FolderIcon, { "aria-hidden": true }) })));
         expect(container).toMatchSnapshot();
     });
+    test('should render tree table with an empty state', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { activeState: "empty" },
+            react_1.default.createElement(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { empty: "No data found" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render tree table with an error state', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { activeState: "error" },
+            react_1.default.createElement(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { error: "Some error" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
 });

package/dist/cjs/InternalContext/InternalContext.d.ts

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from 'react';
+import { DataViewState } from '../DataView';
 export interface DataViewSelection {
     /** Called when the selection of items changes */
     onSelect: (isSelecting: boolean, items?: any[] | any) => void;
@@ -9,6 +10,7 @@ export interface DataViewSelection {
 }
 export interface InternalContextValue {
     selection?: DataViewSelection;
+    activeState?: DataViewState;
 }
 export declare const InternalContext: React.Context<InternalContextValue>;
 export type InternalProviderProps = PropsWithChildren<InternalContextValue>;

package/dist/cjs/InternalContext/InternalContext.js

@@ -26,9 +26,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInternalContext = exports.InternalContextProvider = exports.InternalContext = void 0;
 const react_1 = __importStar(require("react"));
 exports.InternalContext = (0, react_1.createContext)({
-    selection: undefined
+    selection: undefined,
+    activeState: undefined
 });
-const InternalContextProvider = ({ children, selection }) => (react_1.default.createElement(exports.InternalContext.Provider, { value: { selection } }, children));
+const InternalContextProvider = ({ children, selection, activeState }) => (react_1.default.createElement(exports.InternalContext.Provider, { value: { selection, activeState } }, children));
 exports.InternalContextProvider = InternalContextProvider;
 const useInternalContext = () => (0, react_1.useContext)(exports.InternalContext);
 exports.useInternalContext = useInternalContext;

package/dist/esm/DataView/DataView.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 import { DataViewSelection } from '../InternalContext';
+export declare const DataViewState: {
+    readonly empty: "empty";
+    readonly loading: "loading";
+    readonly error: "error";
+};
+export type DataViewState = typeof DataViewState[keyof typeof DataViewState];
 export interface DataViewProps {
     /** Content rendered inside the data view */
     children: React.ReactNode;
@@ -7,6 +13,8 @@ export interface DataViewProps {
     ouiaId?: string;
     /** Selection context configuration */
     selection?: DataViewSelection;
+    /** Currently active state */
+    activeState?: DataViewState;
 }
 export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
 export declare const DataView: React.FC<DataViewProps>;

package/dist/esm/DataView/DataView.js

@@ -12,13 +12,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { Stack, StackItem } from '@patternfly/react-core';
 import { InternalContextProvider } from '../InternalContext';
+export const DataViewState = {
+    empty: 'empty',
+    loading: 'loading',
+    error: 'error'
+};
 const DataViewImplementation = (_a) => {
     var { children, ouiaId = 'DataView' } = _a, props = __rest(_a, ["children", "ouiaId"]);
-    return (React.createElement(Stack, Object.assign({ "data-ouia-component-id": `${ouiaId}-stack}` }, props), React.Children.map(children, (child, index) => (React.createElement(StackItem, { "data-ouia-component-id": `${ouiaId}-stack-item-${index}` }, child)))));
+    return (React.createElement(Stack, Object.assign({ "data-ouia-component-id": `${ouiaId}-stack` }, props), React.Children.map(children, (child, index) => (React.createElement(StackItem, { "data-ouia-component-id": `${ouiaId}-stack-item-${index}` }, child)))));
 };
 export const DataView = (_a) => {
-    var { children, selection } = _a, props = __rest(_a, ["children", "selection"]);
-    return (React.createElement(InternalContextProvider, { selection: selection },
+    var { children, selection, activeState } = _a, props = __rest(_a, ["children", "selection", "activeState"]);
+    return (React.createElement(InternalContextProvider, { selection: selection, activeState: activeState },
         React.createElement(DataViewImplementation, Object.assign({}, props), children)));
 };
 export default DataView;

package/dist/esm/DataViewTableBasic/DataViewTableBasic.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
 import { TableProps } from '@patternfly/react-table';
 import { DataViewTh, DataViewTr } from '../DataViewTable';
+import { DataViewState } from '../DataView/DataView';
 export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | 'rows'> {
     /** Columns definition */
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTr[];
+    /** States to be displayed when active */
+    states?: Partial<Record<DataViewState, React.ReactNode>>;
     /** Custom OUIA ID */
     ouiaId?: string;
 }

package/dist/esm/DataViewTableBasic/DataViewTableBasic.js

@@ -9,22 +9,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Table, Tbody, Td, Tr, } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
 import { DataViewTableHeader } from '../DataViewTableHeader';
 import { isDataViewTdObject, isDataViewTrObject } from '../DataViewTable';
 export const DataViewTableBasic = (_a) => {
-    var { columns, rows, ouiaId = 'DataViewTableBasic' } = _a, props = __rest(_a, ["columns", "rows", "ouiaId"]);
-    const { selection } = useInternalContext();
+    var { columns, rows, ouiaId = 'DataViewTableBasic', states = {} } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "states"]);
+    const { selection, activeState } = useInternalContext();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
+    const isSelectable = useMemo(() => Boolean(onSelect && isSelected), [onSelect, isSelected]);
     return (React.createElement(Table, Object.assign({ "aria-label": "Data table", ouiaId: ouiaId }, props),
         React.createElement(DataViewTableHeader, { columns: columns, ouiaId: ouiaId }),
-        React.createElement(Tbody, null, rows.map((row, rowIndex) => {
-            var _a;
+        React.createElement(Tbody, null, activeState && Object.keys(states).includes(activeState) ? (React.createElement(Tr, { key: activeState, ouiaId: `${ouiaId}-tr-${activeState}` },
+            React.createElement(Td, { colSpan: columns.length + Number(isSelectable) }, states[activeState]))) : (rows.map((row, rowIndex) => {
             const rowIsObject = isDataViewTrObject(row);
-            return (React.createElement(Tr, Object.assign({ key: rowIndex, ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && ((_a = row === null || row === void 0 ? void 0 : row.props) !== null && _a !== void 0 ? _a : {}))),
-                onSelect && isSelected && (React.createElement(Td, { key: `select-${rowIndex}`, select: {
+            return (React.createElement(Tr, Object.assign({ key: rowIndex, ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && (row === null || row === void 0 ? void 0 : row.props))),
+                isSelectable && (React.createElement(Td, { key: `select-${rowIndex}`, select: {
                         rowIndex,
                         onSelect: (_event, isSelecting) => {
                             onSelect === null || onSelect === void 0 ? void 0 : onSelect(isSelecting, rowIsObject ? row : [row]);
@@ -37,6 +38,6 @@ export const DataViewTableBasic = (_a) => {
                     const cellIsObject = isDataViewTdObject(cell);
                     return (React.createElement(Td, Object.assign({ key: colIndex }, (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));
                 })));
-        }))));
+        })))));
 };
 export default DataViewTableBasic;

package/dist/esm/DataViewTableBasic/DataViewTableBasic.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { DataViewTableBasic } from './DataViewTableBasic';
+import DataView from '../DataView/DataView';
 const repositories = [
     { 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' },
@@ -19,4 +20,14 @@ describe('DataViewTable component', () => {
         const { container } = render(React.createElement(DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows }));
         expect(container).toMatchSnapshot();
     });
+    test('should render with an empty state', () => {
+        const { container } = render(React.createElement(DataView, { activeState: "empty" },
+            React.createElement(DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { empty: "No data found" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render with an error state', () => {
+        const { container } = render(React.createElement(DataView, { activeState: "error" },
+            React.createElement(DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { error: "Some error" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
 });

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

@@ -1,11 +1,14 @@
 import React from 'react';
 import { TableProps } from '@patternfly/react-table';
 import { DataViewTh, DataViewTrTree } from '../DataViewTable';
+import { DataViewState } from '../DataView/DataView';
 export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'rows'> {
     /** Columns definition */
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTrTree[];
+    /** States to be displayed when active */
+    states?: Partial<Record<DataViewState, React.ReactNode>>;
     /** Optional icon for the leaf rows */
     leafIcon?: React.ReactNode;
     /** Optional icon for the expanded parent rows */

package/dist/esm/DataViewTableTree/DataViewTableTree.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useMemo } from 'react';
-import { Table, Tbody, Td, TreeRowWrapper, } from '@patternfly/react-table';
+import { Table, Tbody, Td, Tr, TreeRowWrapper, } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
 import { DataViewTableHeader } from '../DataViewTableHeader';
 import { isDataViewTdObject } from '../DataViewTable';
@@ -29,8 +29,8 @@ const isNodeChecked = (node, isSelected) => {
     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();
+    var { columns, rows, states = {}, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "states", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
+    const { selection, activeState } = useInternalContext();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
     const [expandedNodeIds, setExpandedNodeIds] = React.useState([]);
     const [expandedDetailsNodeNames, setExpandedDetailsNodeIds] = React.useState([]);
@@ -66,7 +66,6 @@ export const DataViewTableTree = (_a) => {
                     '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,
                 },
@@ -75,7 +74,7 @@ export const DataViewTableTree = (_a) => {
                 ? 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) => {
+                React.createElement(TreeRowWrapper, { key: node.id, row: { props: treeRow.props }, ouiaId: `${ouiaId}-tr-${rowIndex}` }, 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));
@@ -85,9 +84,21 @@ export const DataViewTableTree = (_a) => {
             ];
         };
         return renderRows(rows);
-    }, [rows, expandedNodeIds, expandedDetailsNodeNames, leafIcon, expandedIcon, collapsedIcon, isSelected, onSelect, isSelectDisabled, ouiaId]);
+    }, [
+        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)));
+        React.createElement(Tbody, null, activeState && Object.keys(states).includes(activeState) ? (React.createElement(Tr, { key: activeState, ouiaId: `${ouiaId}-tr-${activeState}` },
+            React.createElement(Td, { colSpan: columns.length }, states[activeState]))) : nodes)));
 };
 export default DataViewTableTree;

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

@@ -67,4 +67,14 @@ describe('DataViewTableTree component', () => {
             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();
     });
+    test('should render tree table with an empty state', () => {
+        const { container } = render(React.createElement(DataView, { activeState: "empty" },
+            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { empty: "No data found" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render tree table with an error state', () => {
+        const { container } = render(React.createElement(DataView, { activeState: "error" },
+            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { error: "Some error" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
 });

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

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from 'react';
+import { DataViewState } from '../DataView';
 export interface DataViewSelection {
     /** Called when the selection of items changes */
     onSelect: (isSelecting: boolean, items?: any[] | any) => void;
@@ -9,6 +10,7 @@ export interface DataViewSelection {
 }
 export interface InternalContextValue {
     selection?: DataViewSelection;
+    activeState?: DataViewState;
 }
 export declare const InternalContext: React.Context<InternalContextValue>;
 export type InternalProviderProps = PropsWithChildren<InternalContextValue>;

package/dist/esm/InternalContext/InternalContext.js

@@ -1,7 +1,8 @@
 import React, { createContext, useContext } from 'react';
 export const InternalContext = createContext({
-    selection: undefined
+    selection: undefined,
+    activeState: undefined
 });
-export const InternalContextProvider = ({ children, selection }) => (React.createElement(InternalContext.Provider, { value: { selection } }, children));
+export const InternalContextProvider = ({ children, selection, activeState }) => (React.createElement(InternalContext.Provider, { value: { selection, activeState } }, children));
 export const useInternalContext = () => useContext(InternalContext);
 export default InternalContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "5.1.3",
+  "version": "5.2.0",
   "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

@@ -14,12 +14,13 @@ sortValue: 4
 propComponents: ['DataViewToolbar', 'DataViewTableBasic', 'DataViewTableTree']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md
 ---
-import { FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
-import { BulkSelect } from '@patternfly/react-component-groups';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
+import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
+import { BulkSelect, ErrorState } from '@patternfly/react-component-groups';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
-import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
 
 ## Data view toolbar
 
@@ -71,3 +72,17 @@ It is also possible to disable row selection using the `isSelectDisabled` functi
 ```js file="./DataViewTableTreeExample.tsx"
 
 ```
+
+### Empty state example
+The data view table supports displaying a custom empty state. You can pass it using the `states` property and `empty` key. It will be automatically displayed in case there are no rows to be rendered.
+
+```js file="./DataViewTableEmptyExample.tsx"
+
+```
+
+### Error state example
+The data view table also supports displaying an error state. You can pass it using the `states` property and `error` key. It will be displayed in case the data view recieves its `state` property set to `error`.
+
+```js file="./DataViewTableErrorExample.tsx"
+
+```

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

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