@patternfly/react-data-view 1.0.0-prerelease.2 → 1.0.0-prerelease.4

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

@@ -1,7 +1,9 @@
 import React from 'react';
 export interface DataViewProps {
-    /** Example prop */
-    text?: string;
+    /** Content rendered inside the data view */
+    children: React.ReactNode;
+    /** Custom OUIA ID */
+    ouiaId?: string;
 }
-export declare const DataView: React.FunctionComponent<DataViewProps>;
+export declare const DataView: React.FC<DataViewProps>;
 export default DataView;

package/dist/cjs/DataView/DataView.js

@@ -1,4 +1,15 @@
 "use strict";
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,6 +17,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataView = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
-const DataView = ({ text = 'This is Data view' }) => (react_1.default.createElement(react_core_1.Text, null, text));
+const DataView = (_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)))));
+};
 exports.DataView = DataView;
 exports.default = exports.DataView;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface DataViewToolbarProps {
+    /** Toolbar className */
+    className?: string;
+    /** Custom OUIA ID */
+    ouiaId?: string;
+    /** React component to display pagination */
+    pagination?: React.ReactNode;
+}
+export declare const DataViewToolbar: React.FC<React.PropsWithChildren<DataViewToolbarProps>>;
+export default DataViewToolbar;

package/dist/cjs/DataViewToolbar/DataViewToolbar.js

@@ -0,0 +1,28 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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', pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "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,
+            pagination && (react_1.default.createElement(react_core_1.ToolbarItem, { variant: react_core_1.ToolbarItemVariant.pagination }, pagination)),
+            children)));
+};
+exports.DataViewToolbar = DataViewToolbar;
+exports.default = exports.DataViewToolbar;

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

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

package/dist/cjs/DataViewToolbar/index.js

@@ -0,0 +1,23 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var DataViewToolbar_1 = require("./DataViewToolbar");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DataViewToolbar_1).default; } });
+__exportStar(require("./DataViewToolbar"), exports);

package/dist/cjs/Hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './pagination';

package/dist/cjs/Hooks/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./pagination"), exports);

package/dist/cjs/Hooks/pagination.d.ts

@@ -0,0 +1,13 @@
+export interface UseDataViewPaginationProps {
+    page?: number;
+    perPage: number;
+}
+export interface DataViewPaginationProps extends UseDataViewPaginationProps {
+    page: number;
+}
+export declare const useDataViewPagination: ({ page, perPage }: UseDataViewPaginationProps) => {
+    onPerPageSelect: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPerPage: number) => void;
+    onSetPage: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPage: number) => void;
+    page: number;
+    perPage: number;
+};

package/dist/cjs/Hooks/pagination.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataViewPagination = void 0;
+const react_1 = require("react");
+const useDataViewPagination = ({ page = 1, perPage }) => {
+    const [state, setState] = (0, react_1.useState)({ page, perPage });
+    const onPerPageSelect = (_event, newPerPage) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { perPage: newPerPage })));
+    };
+    const onSetPage = (_event, newPage) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { page: newPage })));
+    };
+    return Object.assign(Object.assign({}, state), { onPerPageSelect,
+        onSetPage });
+};
+exports.useDataViewPagination = useDataViewPagination;

package/dist/cjs/Hooks/pagination.test.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const pagination_1 = require("./pagination");
+describe('useDataViewPagination', () => {
+    it('should get initial state correctly - no page', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, pagination_1.useDataViewPagination)({ perPage: 7 }));
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 1,
+            perPage: 7
+        });
+    });
+    it('should get initial state correctly - page set', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, pagination_1.useDataViewPagination)({ page: 3, perPage: 5 }));
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 3,
+            perPage: 5
+        });
+    });
+    it('should set page correctly', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, pagination_1.useDataViewPagination)({ page: 3, perPage: 5 }));
+        (0, react_1.act)(() => {
+            result.current.onSetPage(undefined, 8);
+        });
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 8,
+            perPage: 5
+        });
+    });
+    it('should set perPage correctly', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, pagination_1.useDataViewPagination)({ page: 3, perPage: 5 }));
+        (0, react_1.act)(() => {
+            result.current.onPerPageSelect(undefined, 50);
+        });
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 3,
+            perPage: 50
+        });
+    });
+});

package/dist/cjs/index.d.ts

@@ -1,2 +1,5 @@
+export * from './Hooks';
+export { default as DataViewToolbar } from './DataViewToolbar';
+export * from './DataViewToolbar';
 export { default as DataView } from './DataView';
 export * from './DataView';

package/dist/cjs/index.js

@@ -1,5 +1,4 @@
 "use strict";
-// this file is autogenerated by generate-index.js, modifying it manually will have no effect
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -18,7 +17,12 @@ 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.DataViewToolbar = void 0;
+// this file is autogenerated by generate-index.js, modifying it manually will have no effect
+__exportStar(require("./Hooks"), exports);
+var DataViewToolbar_1 = require("./DataViewToolbar");
+Object.defineProperty(exports, "DataViewToolbar", { enumerable: true, get: function () { return __importDefault(DataViewToolbar_1).default; } });
+__exportStar(require("./DataViewToolbar"), exports);
 var DataView_1 = require("./DataView");
 Object.defineProperty(exports, "DataView", { enumerable: true, get: function () { return __importDefault(DataView_1).default; } });
 __exportStar(require("./DataView"), exports);

package/dist/dynamic/DataViewToolbar/package.json

@@ -0,0 +1 @@
+{"main":"../../cjs/DataViewToolbar/index.js","module":"../../esm/DataViewToolbar/index.js","typings":"../../esm/DataViewToolbar/index.d.ts"}

package/dist/dynamic/Hooks/package.json

@@ -0,0 +1 @@
+{"main":"../../cjs/Hooks/index.js","module":"../../esm/Hooks/index.js","typings":"../../esm/Hooks/index.d.ts"}

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

@@ -1,7 +1,9 @@
 import React from 'react';
 export interface DataViewProps {
-    /** Example prop */
-    text?: string;
+    /** Content rendered inside the data view */
+    children: React.ReactNode;
+    /** Custom OUIA ID */
+    ouiaId?: string;
 }
-export declare const DataView: React.FunctionComponent<DataViewProps>;
+export declare const DataView: React.FC<DataViewProps>;
 export default DataView;

package/dist/esm/DataView/DataView.js

@@ -1,4 +1,18 @@
+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 from 'react';
-import { Text } from '@patternfly/react-core';
-export const DataView = ({ text = 'This is Data view' }) => (React.createElement(Text, null, text));
+import { Stack, StackItem } from '@patternfly/react-core';
+export const DataView = (_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)))));
+};
 export default DataView;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface DataViewToolbarProps {
+    /** Toolbar className */
+    className?: string;
+    /** Custom OUIA ID */
+    ouiaId?: string;
+    /** React component to display pagination */
+    pagination?: React.ReactNode;
+}
+export declare const DataViewToolbar: React.FC<React.PropsWithChildren<DataViewToolbarProps>>;
+export default DataViewToolbar;

package/dist/esm/DataViewToolbar/DataViewToolbar.js

@@ -0,0 +1,21 @@
+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 from 'react';
+import { Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
+export const DataViewToolbar = (_a) => {
+    var { className, ouiaId = 'DataViewToolbar', pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "pagination", "children"]);
+    return (React.createElement(Toolbar, Object.assign({ ouiaId: ouiaId, className: className }, props),
+        React.createElement(ToolbarContent, null,
+            pagination && (React.createElement(ToolbarItem, { variant: ToolbarItemVariant.pagination }, pagination)),
+            children)));
+};
+export default DataViewToolbar;

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

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

package/dist/esm/DataViewToolbar/index.js

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

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

@@ -0,0 +1 @@
+export * from './pagination';

package/dist/esm/Hooks/index.js

@@ -0,0 +1 @@
+export * from './pagination';

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

@@ -0,0 +1,13 @@
+export interface UseDataViewPaginationProps {
+    page?: number;
+    perPage: number;
+}
+export interface DataViewPaginationProps extends UseDataViewPaginationProps {
+    page: number;
+}
+export declare const useDataViewPagination: ({ page, perPage }: UseDataViewPaginationProps) => {
+    onPerPageSelect: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPerPage: number) => void;
+    onSetPage: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPage: number) => void;
+    page: number;
+    perPage: number;
+};

package/dist/esm/Hooks/pagination.js

@@ -0,0 +1,12 @@
+import { useState } from "react";
+export const useDataViewPagination = ({ page = 1, perPage }) => {
+    const [state, setState] = useState({ page, perPage });
+    const onPerPageSelect = (_event, newPerPage) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { perPage: newPerPage })));
+    };
+    const onSetPage = (_event, newPage) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { page: newPage })));
+    };
+    return Object.assign(Object.assign({}, state), { onPerPageSelect,
+        onSetPage });
+};

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

@@ -0,0 +1,47 @@
+import '@testing-library/jest-dom';
+import { renderHook, act } from '@testing-library/react';
+import { useDataViewPagination } from './pagination';
+describe('useDataViewPagination', () => {
+    it('should get initial state correctly - no page', () => {
+        const { result } = renderHook(() => useDataViewPagination({ perPage: 7 }));
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 1,
+            perPage: 7
+        });
+    });
+    it('should get initial state correctly - page set', () => {
+        const { result } = renderHook(() => useDataViewPagination({ page: 3, perPage: 5 }));
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 3,
+            perPage: 5
+        });
+    });
+    it('should set page correctly', () => {
+        const { result } = renderHook(() => useDataViewPagination({ page: 3, perPage: 5 }));
+        act(() => {
+            result.current.onSetPage(undefined, 8);
+        });
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 8,
+            perPage: 5
+        });
+    });
+    it('should set perPage correctly', () => {
+        const { result } = renderHook(() => useDataViewPagination({ page: 3, perPage: 5 }));
+        act(() => {
+            result.current.onPerPageSelect(undefined, 50);
+        });
+        expect(result.current).toEqual({
+            onPerPageSelect: expect.any(Function),
+            onSetPage: expect.any(Function),
+            page: 3,
+            perPage: 50
+        });
+    });
+});

package/dist/esm/index.d.ts

@@ -1,2 +1,5 @@
+export * from './Hooks';
+export { default as DataViewToolbar } from './DataViewToolbar';
+export * from './DataViewToolbar';
 export { default as DataView } from './DataView';
 export * from './DataView';

package/dist/esm/index.js

@@ -1,3 +1,6 @@
 // this file is autogenerated by generate-index.js, modifying it manually will have no effect
+export * from './Hooks';
+export { default as DataViewToolbar } from './DataViewToolbar';
+export * from './DataViewToolbar';
 export { default as DataView } from './DataView';
 export * from './DataView';

package/generate-index.js

@@ -20,7 +20,8 @@ async function generateIndex(files) {
 
     files.forEach(file => {
       const name = file.replace('/index.ts', '').split('/').pop();
-      stream.write(`\nexport { default as ${name} } from './${name}';\n`);
+      // do not generate default exports for Hooks/
+      name !== 'Hooks' && stream.write(`\nexport { default as ${name} } from './${name}';\n`);
       stream.write(`export * from './${name}';\n`);
     });
     stream.end();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "1.0.0-prerelease.2",
+  "version": "1.0.0-prerelease.4",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -31,10 +31,11 @@
     "tag": "prerelease"
   },
   "dependencies": {
-    "@patternfly/react-core": "^5.1.2",
-    "@patternfly/react-icons": "^5.1.2",
+    "@patternfly/react-core": "^6.0.0-alpha.55",
+    "@patternfly/react-icons": "^6.0.0-alpha.20",
+    "@patternfly/react-table": "^6.0.0-alpha.55",
     "react-jss": "^10.10.0",
-    "clsx": "^2.1.0"
+    "clsx": "^2.1.1"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
@@ -42,16 +43,16 @@
   },
   "devDependencies": {
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/documentation-framework": "^2.0.0-alpha.57",
-    "@patternfly/patternfly": "^5.1.0",
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
+    "@patternfly/documentation-framework": "^6.0.0-alpha.22",
+    "@patternfly/patternfly": "^6.0.0-alpha.117",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.22.2",
-    "react-router-dom": "^6.22.2",
-    "rimraf": "^2.7.1",
-    "typescript": "^5.3.3"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router": "^6.23.0",
+    "react-router-dom": "^6.23.0",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.4.5"
   }
 }

package/patternfly-a11y.config.js

@@ -22,7 +22,8 @@ module.exports = {
     'color-contrast',
     'landmark-no-duplicate-main',
     'landmark-main-is-top-level',
-    'scrollable-region-focusable'
+    'scrollable-region-focusable',
+    'link-in-text-block',
   ].join(','),
   ignoreIncomplete: true
 };

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

@@ -5,7 +5,7 @@ section: extensions
 subsection: Data view
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: Data view
+id: Data view layout
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
 # If you use typescript, the name of the interface to display props for
@@ -13,15 +13,25 @@ source: react
 propComponents: ['DataView']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md
 ---
-
+import { useMemo } from 'react';
+import { useDataViewPagination } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
+import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 
 The **data view** component renders record data in a configured layout.
 
-### Basic example
+### Layout example
+
+Data view is expected to consist of header, data part and footer stacked below each other and passed as `children`.
+
+```js file="./DataViewLayoutExample.tsx"
+
+```
+
+### Predefined layout components
 
-A blank example of the data view layout.
+You can make use of the predefined layout components to display a default header and footer. See [data view toolbar](/data-view/data-view-toolbar) for more information 
 
-```js file="./DataViewExample.tsx"
+```js file="./DataViewPredefinedLayoutExample.tsx"
 
 ```

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
+
+const layoutItemStyling = {
+  width: '100%',
+  height: '5rem',
+  padding: 'var(--pf-t--global--spacer--md)',
+  border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
+};
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataView>
+    <div style={layoutItemStyling}>Header</div>
+    <div style={layoutItemStyling}>Data representation</div>
+    <div style={layoutItemStyling}>Footer</div>
+  </DataView>
+)

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

@@ -0,0 +1,65 @@
+import React, { useMemo } from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
+import { useDataViewPagination } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
+import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+const perPageOptions = [
+  { title: '5', value: 5 },
+  { title: '10', value: 10 }
+]
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+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' }
+];
+
+const cols = {
+  name: 'Repositories',
+  branches: 'Branches',
+  prs: 'Pull requests',
+  workspaces: 'Workspaces',
+  lastCommit: 'Last commit'
+};
+
+const ouiaId = 'LayoutExample';
+
+export const BasicExample: React.FunctionComponent = () => { 
+  const pagination = useDataViewPagination({ perPage: 5 });
+  const { page, perPage } = pagination;
+
+  const data = useMemo(() => repositories.slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage ]);
+
+  return (
+    <DataView>
+      <DataViewToolbar pagination={<Pagination ouiaId={`${ouiaId}Header-pagination`} perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
+      <Table aria-label="Repositories table" ouiaId={ouiaId}>
+        <Thead data-ouia-component-id={`${ouiaId}-thead`}>
+          <Tr ouiaId={`${ouiaId}-tr-head`}>
+            {Object.values(cols).map((column, index) => <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>)}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {data.map((repo, rowIndex) => (
+            <Tr key={repo.name} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
+              {Object.keys(cols).map((column, colIndex) => <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>{repo[column]}</Td>)}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+      <DataViewToolbar pagination={<Pagination isCompact ouiaId={`${ouiaId}Footer-pagination`} perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
+    </DataView>
+  )}

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

@@ -0,0 +1,27 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Data view
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Data view toolbar
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+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
+propComponents: ['DataViewToolbar']
+sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbar.md
+---
+import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+The **data view toolbar** component renders a default opinionated data view toolbar.
+
+### Basic example
+
+Data view toolbar can display a pagination using the `pagination` property accepting a React node. You can also pass a custom `ouiaId` for testing purposes.
+
+```js file="./DataViewToolbarExample.tsx"
+
+```
+

package/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbarExample.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataViewToolbar pagination={<Pagination page={1} perPage={10} />} />
+)

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

@@ -0,0 +1,20 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Data view
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Hooks
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+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
+propComponents: []
+sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Hooks/Hooks.md
+---
+Data view hooks provide a predefined solution to manage state of the data view. This modular approach allows them to be easily replaced with a custom implementation in case of more specific needs.
+
+### useDataViewPagination()
+
+The `useDataViewPagination` hook manages the pagination state of the data view. It retrieves the current `page` and `perPage` values together with functions to set them (`onSetPage`, `onPerPageSelect`). You can easily spread the retrieved values to the PatternFly [pagination](/components/pagination) component and make it live.

package/patternfly-docs/pages/index.js

@@ -10,7 +10,7 @@ const centerStyle = {
 
 const IndexPage = () => {
   return (
-    <PageSection variant="light" style={centerStyle}>
+    <PageSection style={centerStyle}>
       <div style={{ flex: 'none', textAlign: 'center' }}>
         <Title size="4xl" headingLevel="h1">
           My extension docs

package/src/DataView/DataView.tsx

@@ -1,15 +1,22 @@
 import React from 'react';
-import { Text } from '@patternfly/react-core';
-
+import { Stack, StackItem } from '@patternfly/react-core';
 export interface DataViewProps {
-  /** Example prop */
-  text?: string;
+  /** Content rendered inside the data view */
+  children: React.ReactNode;
+  /** Custom OUIA ID */
+  ouiaId?: string;
 }
 
-export const DataView: React.FunctionComponent<DataViewProps> = ({
-  text = 'This is Data view'
+export const DataView: React.FC<DataViewProps> = ({
+  children, ouiaId = 'DataView', ...props
 }: DataViewProps) => (
-  <Text>{text}</Text>
-);
+  <Stack data-ouia-component-id={`${ouiaId}-stack}`} {...props}>
+    {React.Children.map(children, (child, index) => (
+      <StackItem data-ouia-component-id={`${ouiaId}-stack-item-${index}`}>
+        {child}
+      </StackItem>
+    ))} 
+  </Stack>
+)
 
 export default DataView;

package/src/DataViewToolbar/DataViewToolbar.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
+
+export interface DataViewToolbarProps {
+  /** Toolbar className */
+  className?: string;
+  /** Custom OUIA ID */
+  ouiaId?: string;
+  /** React component to display pagination */
+  pagination?: React.ReactNode;
+}
+
+export const DataViewToolbar: React.FC<React.PropsWithChildren<DataViewToolbarProps>> = ({ className, ouiaId = 'DataViewToolbar', pagination, children, ...props }: React.PropsWithChildren<DataViewToolbarProps>) => (
+  <Toolbar ouiaId={ouiaId} className={className} {...props}>
+    <ToolbarContent>
+      {pagination && (
+        <ToolbarItem variant={ToolbarItemVariant.pagination}>
+          { /* TO DO: Make the pagination work later */ }
+          {pagination}
+        </ToolbarItem>
+      )}
+      {children}
+    </ToolbarContent>
+  </Toolbar>
+);
+
+export default DataViewToolbar;

package/src/DataViewToolbar/index.ts

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

package/src/Hooks/index.ts

@@ -0,0 +1 @@
+export * from './pagination';

package/src/Hooks/pagination.test.tsx

@@ -0,0 +1,57 @@
+import '@testing-library/jest-dom';
+import { renderHook, act } from '@testing-library/react';
+import { useDataViewPagination } from './pagination';
+
+describe('useDataViewPagination', () => {
+
+  it('should get initial state correctly - no page', () => {
+    const { result } = renderHook(() => useDataViewPagination({ perPage: 7 }))
+    expect(result.current).toEqual({ 
+      onPerPageSelect: expect.any(Function),
+      onSetPage: expect.any(Function),
+      page: 1,
+      perPage: 7
+    })
+  });
+
+  it('should get initial state correctly - page set', () => {
+    const { result } = renderHook(() => useDataViewPagination({ page: 3, perPage: 5 }))
+    expect(result.current).toEqual({ 
+      onPerPageSelect: expect.any(Function),
+      onSetPage: expect.any(Function),
+      page: 3,
+      perPage: 5
+    })
+  });
+
+  it('should set page correctly', () => {
+    const { result } = renderHook(() => useDataViewPagination({ page: 3, perPage: 5 }))
+    
+    act(() => {
+      result.current.onSetPage(undefined, 8);
+    });
+    
+    expect(result.current).toEqual({ 
+      onPerPageSelect: expect.any(Function),
+      onSetPage: expect.any(Function),
+      page: 8,
+      perPage: 5
+    })
+  });
+
+  it('should set perPage correctly', () => {
+    const { result } = renderHook(() => useDataViewPagination({ page: 3, perPage: 5 }))
+    
+    act(() => {
+      result.current.onPerPageSelect(undefined, 50);
+    });
+    
+    expect(result.current).toEqual({ 
+      onPerPageSelect: expect.any(Function),
+      onSetPage: expect.any(Function),
+      page: 3,
+      perPage: 50
+    })
+  });
+
+});

package/src/Hooks/pagination.ts

@@ -0,0 +1,28 @@
+import { useState } from "react";
+
+export interface UseDataViewPaginationProps {
+  page?: number;
+  perPage: number;
+}
+
+export interface DataViewPaginationProps extends UseDataViewPaginationProps {
+    page: number;
+}
+
+export const useDataViewPagination = ({ page = 1, perPage }: UseDataViewPaginationProps) => { 
+  const [ state, setState ] = useState({ page, perPage });
+  
+  const onPerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPerPage: number) => {
+    setState(prev => ({ ...prev, perPage: newPerPage }));
+  }
+  
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPage: number) => {
+    setState(prev => ({ ...prev, page: newPage }));
+  }
+  
+  return {
+    ...state,
+    onPerPageSelect,
+    onSetPage
+  }
+}

package/src/index.ts

@@ -1,4 +1,8 @@
 // this file is autogenerated by generate-index.js, modifying it manually will have no effect
+export * from './Hooks';
+
+export { default as DataViewToolbar } from './DataViewToolbar';
+export * from './DataViewToolbar';
 
 export { default as DataView } from './DataView';
 export * from './DataView';

package/dist/cjs/DataView/DataView.test.js

@@ -1,15 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
-require("@testing-library/jest-dom");
-const DataView_1 = __importDefault(require("./DataView"));
-describe('DataView', () => {
-    it('should render data view', () => {
-        (0, react_2.render)(react_1.default.createElement(DataView_1.default, null));
-        expect(react_2.screen.getByText('This is Data view')).toBeInTheDocument();
-    });
-});

package/dist/esm/DataView/DataView.test.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import DataView from './DataView';
-describe('DataView', () => {
-    it('should render data view', () => {
-        render(React.createElement(DataView, null));
-        expect(screen.getByText('This is Data view')).toBeInTheDocument();
-    });
-});

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
-
-export const BasicExample: React.FunctionComponent = () => (
-  <DataView />
-);

package/patternfly-docs/generated/extensions/data-view/about-data-view/extensions.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-
-const pageData = {
-  "id": "About data view",
-  "section": "extensions",
-  "subsection": "Data view",
-  "deprecated": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "extensions",
-  "tabName": null,
-  "slug": "/extensions/data-view/about-data-view/extensions",
-  "sourceLink": "https://github.com/patternfly/patternfly-org/blob/main/packages/module/patternfly-docs/content/extensions/data-view/about-data-view.md",
-  "relPath": "packages/module/patternfly-docs/content/extensions/data-view/about-data-view.md",
-  "sortValue": 1
-};
-pageData.relativeImports = {
-  
-};
-pageData.examples = {
-  
-};
-
-const Component = () => (
-  <React.Fragment>
-    <p {...{"className":"ws-p"}}>
-      {`Data view lives in its own package `}
-      <PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-data-view"}}>
-        <code {...{"className":"ws-code"}}>
-          {`@patternfly/react-data-view`}
-        </code>
-      </PatternflyThemeLink>
-    </p>
-    <AutoLinkHeader {...{"id":"data-view","size":"h1","className":"ws-title ws-h1"}}>
-      {`Data view`}
-    </AutoLinkHeader>
-    <p {...{"className":"ws-p"}}>
-      {`The data view extension contains implementation of the data view component allowing to display record data in a configured layout.`}
-    </p>
-    <p {...{"className":"ws-p"}}>
-      {`If you notice a bug or have a suggestion for the data view, feel free to file an issue in our `}
-      <PatternflyThemeLink {...{"to":"https://github.com/patternfly/react-data-view/issues"}}>
-        {`GitHub repository`}
-      </PatternflyThemeLink>
-      {`! Please make sure to check if there is already a pre-existing issue before creating a new issue.`}
-    </p>
-  </React.Fragment>
-);
-Component.displayName = 'ExtensionsDataViewAboutDataViewExtensionsDocs';
-Component.pageData = pageData;
-
-export default Component;

package/patternfly-docs/generated/extensions/data-view/data-view/react.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
-const pageData = {
-  "id": "Data view",
-  "section": "extensions",
-  "subsection": "Data view",
-  "deprecated": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react",
-  "tabName": null,
-  "slug": "/extensions/data-view/data-view/react",
-  "sourceLink": "https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md",
-  "relPath": "packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md",
-  "propComponents": [
-    {
-      "name": "DataView",
-      "description": "",
-      "props": [
-        {
-          "name": "text",
-          "type": "string",
-          "description": "Example prop",
-          "defaultValue": "'This is Data view'"
-        }
-      ]
-    }
-  ],
-  "examples": [
-    "Basic example"
-  ]
-};
-pageData.liveContext = {
-  DataView
-};
-pageData.relativeImports = {
-  
-};
-pageData.examples = {
-  'Basic example': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport DataView from '@patternfly/react-data-view/dist/dynamic/DataView';\n\nexport const BasicExample: React.FunctionComponent = () => (\n  <DataView />\n);\n","title":"Basic example","lang":"js"}}>
-      
-      <p {...{"className":"ws-p"}}>
-        {`A blank example of the data view layout.`}
-      </p>
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <p {...{"className":"ws-p"}}>
-      {`The `}
-      <strong>
-        {`data view`}
-      </strong>
-      {` component renders record data in a configured layout.`}
-    </p>
-    {React.createElement(pageData.examples["Basic example"])}
-  </React.Fragment>
-);
-Component.displayName = 'ExtensionsDataViewDataViewReactDocs';
-Component.pageData = pageData;
-
-export default Component;

package/patternfly-docs/generated/index.js

@@ -1,24 +0,0 @@
-module.exports = {
-  '/extensions/data-view/about-data-view/extensions': {
-    id: "About data view",
-    title: "About data view",
-    toc: [],
-    section: "extensions",
-    subsection: "Data view",
-    source: "extensions",
-    tabName: null,
-    sortValue: 1,
-    Component: () => import(/* webpackChunkName: "extensions/data-view/about-data-view/extensions/index" */ './extensions/data-view/about-data-view/extensions')
-  },
-  '/extensions/data-view/data-view/react': {
-    id: "Data view",
-    title: "Data view",
-    toc: [[{"text":"Basic example"}]],
-    examples: ["Basic example"],
-    section: "extensions",
-    subsection: "Data view",
-    source: "react",
-    tabName: null,
-    Component: () => import(/* webpackChunkName: "extensions/data-view/data-view/react/index" */ './extensions/data-view/data-view/react')
-  }
-};

package/src/DataView/DataView.test.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom'
-import DataView from './DataView';
-
-describe('DataView', () => {
-
-  it('should render data view', () => {
-    render(<DataView />);
-    expect(screen.getByText('This is Data view')).toBeInTheDocument();
-  });
-
-});