@patternfly/react-data-view 5.1.2 → 5.1.4

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

@@ -6,6 +6,8 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTr[];
+    /** Empty state to be displayed */
+    emptyState?: 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"]);
+    var { columns, rows, ouiaId = 'DataViewTableBasic', emptyState = null } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "emptyState"]);
     const { selection } = (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) => {
+        react_1.default.createElement(react_table_1.Tbody, null, (rows === null || rows === void 0 ? void 0 : rows.length) > 0 ? rows.map((row, rowIndex) => {
             var _a;
             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: {
+                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,8 @@ 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));
                 })));
-        }))));
+        }) : (react_1.default.createElement(react_table_1.Tr, { key: "empty", ouiaId: `${ouiaId}-tr-empty` },
+            react_1.default.createElement(react_table_1.Td, { colSpan: columns.length + Number(isSelectable) }, emptyState))))));
 };
 exports.DataViewTableBasic = DataViewTableBasic;
 exports.default = exports.DataViewTableBasic;

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

@@ -24,4 +24,8 @@ 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(DataViewTableBasic_1.DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, emptyState: "No data found", rows: [] }));
+        expect(container).toMatchSnapshot();
+    });
 });

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

@@ -6,6 +6,8 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTrTree[];
+    /** Empty state to be displayed */
+    emptyState?: 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,7 +55,7 @@ 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"]);
+    var { columns, rows, emptyState = null, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "emptyState", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
     const { selection } = (0, InternalContext_1.useInternalContext)();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
     const [expandedNodeIds, setExpandedNodeIds] = 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));
@@ -114,7 +113,8 @@ const DataViewTableTree = (_a) => {
     }, [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, nodes.length > 0 ? nodes : (react_1.default.createElement(react_table_1.Tr, { key: "empty", ouiaId: `${ouiaId}-tr-empty` },
+            react_1.default.createElement(react_table_1.Td, { colSpan: columns.length }, emptyState))))));
 };
 exports.DataViewTableTree = DataViewTableTree;
 exports.default = exports.DataViewTableTree;

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

@@ -72,4 +72,8 @@ 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(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, emptyState: "No data found", rows: [] }));
+        expect(container).toMatchSnapshot();
+    });
 });

package/dist/cjs/DataViewToolbar/DataViewToolbar.d.ts

@@ -8,6 +8,8 @@ export interface DataViewToolbarProps extends PropsWithChildren {
     bulkSelect?: React.ReactNode;
     /** React component to display pagination */
     pagination?: React.ReactNode;
+    /** React component to display actions */
+    actions?: React.ReactNode;
 }
 export declare const DataViewToolbar: React.FC<DataViewToolbarProps>;
 export default DataViewToolbar;

package/dist/cjs/DataViewToolbar/DataViewToolbar.js

@@ -18,10 +18,11 @@ exports.DataViewToolbar = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const DataViewToolbar = (_a) => {
-    var { className, ouiaId = 'DataViewToolbar', bulkSelect, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "pagination", "children"]);
+    var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions = null, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "children"]);
     return (react_1.default.createElement(react_core_1.Toolbar, Object.assign({ ouiaId: ouiaId, className: className }, props),
         react_1.default.createElement(react_core_1.ToolbarContent, null,
             bulkSelect && (react_1.default.createElement(react_core_1.ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
+            actions,
             pagination && (react_1.default.createElement(react_core_1.ToolbarItem, { variant: react_core_1.ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
             children)));
 };

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

@@ -6,6 +6,8 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTr[];
+    /** Empty state to be displayed */
+    emptyState?: 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"]);
+    var { columns, rows, ouiaId = 'DataViewTableBasic', emptyState = null } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "emptyState"]);
     const { selection } = 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) => {
+        React.createElement(Tbody, null, (rows === null || rows === void 0 ? void 0 : rows.length) > 0 ? rows.map((row, rowIndex) => {
             var _a;
             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: {
+                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,7 @@ 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));
                 })));
-        }))));
+        }) : (React.createElement(Tr, { key: "empty", ouiaId: `${ouiaId}-tr-empty` },
+            React.createElement(Td, { colSpan: columns.length + Number(isSelectable) }, emptyState))))));
 };
 export default DataViewTableBasic;

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

@@ -19,4 +19,8 @@ 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(DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, emptyState: "No data found", rows: [] }));
+        expect(container).toMatchSnapshot();
+    });
 });

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

@@ -6,6 +6,8 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTrTree[];
+    /** Empty state to be displayed */
+    emptyState?: 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,7 +29,7 @@ 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"]);
+    var { columns, rows, emptyState = null, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "emptyState", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
     const { selection } = useInternalContext();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
     const [expandedNodeIds, setExpandedNodeIds] = 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));
@@ -88,6 +87,7 @@ export const DataViewTableTree = (_a) => {
     }, [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, nodes.length > 0 ? nodes : (React.createElement(Tr, { key: "empty", ouiaId: `${ouiaId}-tr-empty` },
+            React.createElement(Td, { colSpan: columns.length }, emptyState))))));
 };
 export default DataViewTableTree;

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

@@ -67,4 +67,8 @@ 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(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, emptyState: "No data found", rows: [] }));
+        expect(container).toMatchSnapshot();
+    });
 });

package/dist/esm/DataViewToolbar/DataViewToolbar.d.ts

@@ -8,6 +8,8 @@ export interface DataViewToolbarProps extends PropsWithChildren {
     bulkSelect?: React.ReactNode;
     /** React component to display pagination */
     pagination?: React.ReactNode;
+    /** React component to display actions */
+    actions?: React.ReactNode;
 }
 export declare const DataViewToolbar: React.FC<DataViewToolbarProps>;
 export default DataViewToolbar;

package/dist/esm/DataViewToolbar/DataViewToolbar.js

@@ -12,10 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
 export const DataViewToolbar = (_a) => {
-    var { className, ouiaId = 'DataViewToolbar', bulkSelect, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "pagination", "children"]);
+    var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions = null, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "children"]);
     return (React.createElement(Toolbar, Object.assign({ ouiaId: ouiaId, className: className }, props),
         React.createElement(ToolbarContent, null,
             bulkSelect && (React.createElement(ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
+            actions,
             pagination && (React.createElement(ToolbarItem, { variant: ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
             children)));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "5.1.2",
+  "version": "5.1.4",
   "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,7 +14,8 @@ sortValue: 4
 propComponents: ['DataViewToolbar', 'DataViewTableBasic', 'DataViewTableTree']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md
 ---
-import { FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
+import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 import { BulkSelect } from '@patternfly/react-component-groups';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
@@ -71,3 +72,10 @@ It is also possible to disable row selection using the `isSelectDisabled` functi
 ```js file="./DataViewTableTreeExample.tsx"
 
 ```
+
+### Empty state example
+The data view table also supports displaying a custom empty state. You can pass it using the `emptyState` property and it will be displayed in case there are no rows to be rendered.
+
+```js file="./DataViewTableEmptyExample.tsx"
+
+```

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

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

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { DataViewTable, DataViewTr, DataViewTh } 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;
@@ -21,6 +22,24 @@ const repositories: Repository[] = [
   { 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
+  }
+];
+
 // you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }
 const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit }) => [
   { id, cell: workspaces, props: { favorites: { isFavorited: true } } },
@@ -28,7 +47,8 @@ const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspac
   branches,
   prs,
   workspaces,
-  lastCommit 
+  lastCommit,
+  { cell: <ActionsColumn items={rowActions}/>, props: { isActionCell: true } },
 ]);
 
 const columns: DataViewTh[] = [
@@ -37,7 +57,7 @@ const columns: DataViewTh[] = [
   { cell: <>Branches<ExclamationCircleIcon className='pf-v5-u-ml-sm' color='var(--pf-v5-global--danger-color--100)'/></> }, 
   'Pull requests', 
   { cell: 'Workspaces', props: { info: { tooltip: 'More information' } } }, 
-  { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } }
+  { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } },
 ];
 
 const ouiaId = 'TableExample';

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

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

package/src/DataViewTable/__snapshots__/DataViewTable.test.tsx.snap

@@ -395,7 +395,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="1"
         aria-setsize="2"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-9"
+        data-ouia-component-id="TableExample-tr-0"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
       >
@@ -519,7 +519,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="1"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-10"
+        data-ouia-component-id="TableExample-tr-1"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -611,7 +611,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="2"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-11"
+        data-ouia-component-id="TableExample-tr-2"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -703,7 +703,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="2"
         aria-setsize="1"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-12"
+        data-ouia-component-id="TableExample-tr-3"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
       >
@@ -827,7 +827,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="1"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-13"
+        data-ouia-component-id="TableExample-tr-4"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -919,7 +919,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="3"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-14"
+        data-ouia-component-id="TableExample-tr-5"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
       >

package/src/DataViewTableBasic/DataViewTableBasic.test.tsx

@@ -34,4 +34,11 @@ describe('DataViewTable component', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  test('should render with an empty state', () => {
+    const { container } = render(
+      <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} emptyState="No data found" rows={[]} />
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   Table,
   TableProps,
@@ -15,6 +15,8 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
   columns: DataViewTh[];
   /** Current page rows */
   rows: DataViewTr[];
+  /** Empty state to be displayed */
+  emptyState?: React.ReactNode;
   /** Custom OUIA ID */
   ouiaId?: string;
 }
@@ -23,20 +25,22 @@ export const DataViewTableBasic: React.FC<DataViewTableBasicProps> = ({
   columns,
   rows,
   ouiaId = 'DataViewTableBasic',
+  emptyState = null,
   ...props
 }: DataViewTableBasicProps) => {
   const { selection } = useInternalContext();
   const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
+  const isSelectable = useMemo(() => Boolean(onSelect && isSelected), [ onSelect, isSelected ])
 
   return (
     <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
       <DataViewTableHeader columns={columns} ouiaId={ouiaId} />
       <Tbody>
-        {rows.map((row, rowIndex) => { 
+        {rows?.length > 0 ? rows.map((row, rowIndex) => { 
           const rowIsObject = isDataViewTrObject(row);
           return (
             <Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && (row?.props ?? {}))}>
-              {onSelect && isSelected && (
+              {isSelectable && (
                 <Td
                   key={`select-${rowIndex}`}
                   select={{
@@ -62,7 +66,13 @@ export const DataViewTableBasic: React.FC<DataViewTableBasicProps> = ({
                 )
               })}
             </Tr>
-          )})}
+          )}) : (
+          <Tr key="empty" ouiaId={`${ouiaId}-tr-empty`}>
+            <Td colSpan={columns.length + Number(isSelectable)}>
+              {emptyState}
+            </Td>
+          </Tr>
+        )}
       </Tbody>
     </Table>
   );

package/src/DataViewTableBasic/__snapshots__/DataViewTableBasic.test.tsx.snap

@@ -322,3 +322,88 @@ exports[`DataViewTable component should render correctly 1`] = `
   </table>
 </div>
 `;
+
+exports[`DataViewTable component should render with an empty state 1`] = `
+<div>
+  <table
+    aria-label="Repositories table"
+    class="pf-v5-c-table pf-m-grid-md"
+    data-ouia-component-id="TableExample"
+    data-ouia-component-type="PF5/Table"
+    data-ouia-safe="true"
+    role="grid"
+  >
+    <thead
+      class="pf-v5-c-table__thead"
+      data-ouia-component-id="TableExample-thead"
+    >
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-head"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-0"
+          scope="col"
+          tabindex="-1"
+        >
+          Repositories
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-1"
+          scope="col"
+          tabindex="-1"
+        >
+          Branches
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-2"
+          scope="col"
+          tabindex="-1"
+        >
+          Pull requests
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-3"
+          scope="col"
+          tabindex="-1"
+        >
+          Workspaces
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-4"
+          scope="col"
+          tabindex="-1"
+        >
+          Last commit
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class="pf-v5-c-table__tbody"
+      role="rowgroup"
+    >
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-empty"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          colspan="5"
+          tabindex="-1"
+        >
+          No data found
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;

package/src/DataViewTableTree/DataViewTableTree.test.tsx

@@ -82,4 +82,11 @@ describe('DataViewTableTree component', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  test('should render tree table with an empty state', () => {
+    const { container } = render(
+      <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} emptyState="No data found" rows={[]} />
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/src/DataViewTableTree/DataViewTableTree.tsx

@@ -5,6 +5,7 @@ import {
   Tbody,
   Td,
   TdProps,
+  Tr,
   TreeRowWrapper,
 } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
@@ -34,6 +35,8 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
   columns: DataViewTh[];
   /** Current page rows */
   rows: DataViewTrTree[];
+  /** Empty state to be displayed */
+  emptyState?: React.ReactNode;
   /** Optional icon for the leaf rows */
   leafIcon?: React.ReactNode;
   /** Optional icon for the expanded parent rows */
@@ -47,6 +50,7 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
 export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
   columns,
   rows,
+  emptyState = null,
   leafIcon = null,
   expandedIcon = null,
   collapsedIcon = null,
@@ -99,7 +103,6 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
           'aria-posinset': posinset,
           'aria-setsize': node.children?.length ?? 0,
           isChecked,
-          ouiaId: `${ouiaId}-tree-toggle-${node.id}`,
           checkboxId: `checkbox_id_${node.id?.toLowerCase().replace(/\s+/g, '_')}`,
           icon,
         },
@@ -110,7 +113,7 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
         : [];
 
       return [
-        <TreeRowWrapper key={node.id} row={{ props: treeRow.props }}>
+        <TreeRowWrapper key={node.id} row={{ props: treeRow.props }} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
           {node.row.map((cell, colIndex) => {
             const cellIsObject = isDataViewTdObject(cell);
             return (
@@ -136,7 +139,15 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
   return (
     <Table isTreeTable aria-label="Data table" ouiaId={ouiaId} {...props}>
       <DataViewTableHeader isTreeTable columns={columns} ouiaId={ouiaId} />
-      <Tbody>{nodes}</Tbody>
+      <Tbody>
+        {nodes.length > 0 ? nodes : (
+          <Tr key="empty" ouiaId={`${ouiaId}-tr-empty`}>
+            <Td colSpan={columns.length}>
+              {emptyState}
+            </Td>
+          </Tr>
+        )}
+      </Tbody>
     </Table>
   );
 };

package/src/DataViewTableTree/__snapshots__/DataViewTableTree.test.tsx.snap

@@ -80,7 +80,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
             aria-posinset="1"
             aria-setsize="2"
             class="pf-v5-c-table__tr"
-            data-ouia-component-id="OUIA-Generated-TableRow-2"
+            data-ouia-component-id="TreeTableExample-tr-0"
             data-ouia-component-type="PF5/TableRow"
             data-ouia-safe="true"
           >
@@ -244,7 +244,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
             aria-posinset="1"
             aria-setsize="0"
             class="pf-v5-c-table__tr"
-            data-ouia-component-id="OUIA-Generated-TableRow-3"
+            data-ouia-component-id="TreeTableExample-tr-1"
             data-ouia-component-type="PF5/TableRow"
             data-ouia-safe="true"
             hidden=""
@@ -376,7 +376,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
             aria-posinset="2"
             aria-setsize="0"
             class="pf-v5-c-table__tr"
-            data-ouia-component-id="OUIA-Generated-TableRow-4"
+            data-ouia-component-id="TreeTableExample-tr-2"
             data-ouia-component-type="PF5/TableRow"
             data-ouia-safe="true"
             hidden=""
@@ -508,7 +508,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
             aria-posinset="2"
             aria-setsize="1"
             class="pf-v5-c-table__tr"
-            data-ouia-component-id="OUIA-Generated-TableRow-5"
+            data-ouia-component-id="TreeTableExample-tr-3"
             data-ouia-component-type="PF5/TableRow"
             data-ouia-safe="true"
           >
@@ -672,7 +672,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
             aria-posinset="1"
             aria-setsize="0"
             class="pf-v5-c-table__tr"
-            data-ouia-component-id="OUIA-Generated-TableRow-6"
+            data-ouia-component-id="TreeTableExample-tr-4"
             data-ouia-component-type="PF5/TableRow"
             data-ouia-safe="true"
             hidden=""
@@ -804,7 +804,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
             aria-posinset="3"
             aria-setsize="0"
             class="pf-v5-c-table__tr"
-            data-ouia-component-id="OUIA-Generated-TableRow-7"
+            data-ouia-component-id="TreeTableExample-tr-5"
             data-ouia-component-type="PF5/TableRow"
             data-ouia-safe="true"
           >
@@ -935,3 +935,88 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
   </div>
 </div>
 `;
+
+exports[`DataViewTableTree component should render tree table with an empty state 1`] = `
+<div>
+  <table
+    aria-label="Repositories table"
+    class="pf-v5-c-table pf-m-tree-view-grid-md pf-m-tree-view"
+    data-ouia-component-id="TreeTableExample"
+    data-ouia-component-type="PF5/Table"
+    data-ouia-safe="true"
+    role="treegrid"
+  >
+    <thead
+      class="pf-v5-c-table__thead"
+      data-ouia-component-id="TreeTableExample-thead"
+    >
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TreeTableExample-tr-head"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TreeTableExample-th-0"
+          scope="col"
+          tabindex="-1"
+        >
+          Repositories
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TreeTableExample-th-1"
+          scope="col"
+          tabindex="-1"
+        >
+          Branches
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TreeTableExample-th-2"
+          scope="col"
+          tabindex="-1"
+        >
+          Pull requests
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TreeTableExample-th-3"
+          scope="col"
+          tabindex="-1"
+        >
+          Workspaces
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TreeTableExample-th-4"
+          scope="col"
+          tabindex="-1"
+        >
+          Last commit
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class="pf-v5-c-table__tbody"
+      role="rowgroup"
+    >
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TreeTableExample-tr-empty"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          colspan="5"
+          tabindex="-1"
+        >
+          No data found
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;

package/src/DataViewToolbar/DataViewToolbar.tsx

@@ -10,9 +10,11 @@ export interface DataViewToolbarProps extends PropsWithChildren {
   bulkSelect?: React.ReactNode;
   /** React component to display pagination */
   pagination?: React.ReactNode;
+  /** React component to display actions */
+  actions?: React.ReactNode;
 }
 
-export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, pagination, children, ...props }: DataViewToolbarProps) => (
+export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions = null, pagination, children, ...props }: DataViewToolbarProps) => (
   <Toolbar ouiaId={ouiaId} className={className} {...props}>
     <ToolbarContent>
       {bulkSelect && (
@@ -20,6 +22,7 @@ export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, oui
           {bulkSelect}
         </ToolbarItem>
       )}
+      {actions}
       {pagination && (
         <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
           {pagination}