@patternfly/react-data-view 7.0.0-prerelease.1 → 7.0.0-prerelease.3

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

@@ -0,0 +1,108 @@
+import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, Title, Content } from '@patternfly/react-core';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { DataViewEventsProvider, EventTypes, useDataViewEventsContext } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'ContextExample';
+
+interface RepositoryDetailProps {
+  selectedRepo?: Repository;
+  setSelectedRepo: React.Dispatch<React.SetStateAction<Repository | undefined>>;
+}
+
+const RepositoryDetail: React.FunctionComponent<RepositoryDetailProps> = ({ selectedRepo, setSelectedRepo }) => {
+  const context = useDataViewEventsContext();
+
+  useEffect(() => {
+    const unsubscribe = context.subscribe(EventTypes.rowClick, (repo: Repository) => {
+      setSelectedRepo(repo);
+    });
+
+    return () => unsubscribe();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <Title className="pf-v5-u-mb-md" headingLevel="h2" ouiaId="detail-drawer-title">
+          Detail of {selectedRepo?.name}
+        </Title>
+        <Content component="p">Branches: {selectedRepo?.branches}</Content>
+        <Content component="p">Pull requests: {selectedRepo?.prs}</Content>
+        <Content component="p">Workspaces: {selectedRepo?.workspaces}</Content>
+        <Content component="p">Last commit: {selectedRepo?.lastCommit}</Content>
+        <DrawerActions>
+          <DrawerCloseButton onClick={() => setSelectedRepo(undefined)} data-ouia-component-id="detail-drawer-close-btn"/>
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+};
+
+interface RepositoriesTableProps {
+  selectedRepo?: Repository;
+}
+
+const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
+  const { trigger } = useDataViewEventsContext();
+  const rows = useMemo(() => {
+    const handleRowClick = (repo: Repository | undefined) => {
+      trigger(EventTypes.rowClick, repo);
+    };
+
+    return repositories.map(repo => ({
+      row: Object.values(repo),
+      props: {
+        isClickable: true,
+        onRowClick: () => handleRowClick(selectedRepo?.name === repo.name ? undefined : repo),
+        isRowSelected: selectedRepo?.name === repo.name
+      }
+    }));
+  }, [ selectedRepo?.name, trigger ]);
+
+  return (
+    <DataView>
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
+    </DataView>
+  );
+};
+
+export const BasicExample: React.FunctionComponent = () => {
+  const [ selectedRepo, setSelectedRepo ] = useState<Repository>();
+  const drawerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <DataViewEventsProvider>
+      <Drawer isExpanded={Boolean(selectedRepo)} onExpand={() => drawerRef.current?.focus()} data-ouia-component-id="detail-drawer" >
+        <DrawerContent
+          panelContent={<RepositoryDetail selectedRepo={selectedRepo} setSelectedRepo={setSelectedRepo} />}
+        >
+          <DrawerContentBody>
+            <RepositoriesTable selectedRepo={selectedRepo} />
+          </DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </DataViewEventsProvider>
+  );
+};

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

@@ -14,11 +14,13 @@ sortValue: 3
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md
 ---
 import { useMemo } from 'react';
+import { BrowserRouter, useSearchParams } from 'react-router-dom';
 import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
-import { BrowserRouter, useSearchParams } from 'react-router-dom';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+
 
 This is a list of functionality you can use to manage data displayed in the **data view**.
 
@@ -26,7 +28,7 @@ This is a list of functionality you can use to manage data displayed in the **da
 Allows to display data records on multiple pages and display the pagination state.
 
 ### Toolbar usage
-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. Additionally, it offers an option to persist pagination values in the URL, which makes it easier to share or bookmark specific pages of your data.
+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.
 
 ### Pagination state
 
@@ -34,12 +36,14 @@ The `useDataViewPagination` hook manages the pagination state of the data view.
 
 **Initial values:**
 - `perPage` initial value
-- (optional) `page` initial value
-- (optional) `searchParams` object
-- (optional) `seSearchParams` function
+- optional `page` initial value
+- optional `searchParams` object
+- optional `setSearchParams` function
 
 While the hook works seamlessly with React Router library, you do not need to use it to take advantage of URL persistence. The `searchParams` and `setSearchParams` props can be managed using native browser APIs (`URLSearchParams` and `window.history.pushState`) or any other routing library of your choice. If you don't pass these two props, the pagination state will be stored internally without the URL usage.
 
+You can also pass custom `pageParam` or `perPageParam` names, renaming the pagination parameters in the URL.
+
 The retrieved values are named to match the PatternFly [pagination](/components/pagination) component props, so you can easily spread them to the component.
 
 **Return values:**
@@ -49,8 +53,6 @@ The retrieved values are named to match the PatternFly [pagination](/components/
 - `onPerPageSelect` to modify per page value
 
 ### Pagination example
-This example uses the URL for persisting the pagination state.
-
 ```js file="./PaginationExample.tsx"
 
 ```
@@ -59,15 +61,15 @@ This example uses the URL for persisting the pagination state.
 Allows to select data records inside the data view and show the selection state.
 
 ### Toolbar usage
-Data view toolbar can display a bulk selection component using the `bulkSelect` property accepting a React node. You can make use of a predefined [bulk select](/extensions/component-groups/bulk-select) from the [component groups](/extensions/component-groups/about-component-groups) extension.
+Data view toolbar can display a bulk selection component using the `bulkSelect` property accepting a React node. You can make use of a predefined [bulk select](/extensions/component-groups/bulk-select) component from the [component groups](/extensions/component-groups/about-component-groups) extension.
 
 ### Selection state
 
 The `useDataViewSelection` hook manages the selection state of the data view. 
 
 **Initial values:**
-- (optional) `initialSelected` array of record's identifiers selected by default 
-- (optional) `matchOption` function to check if given record is selected
+- optional `initialSelected` array of record's identifiers selected by default 
+- `matchOption` function to check if given record is selected
 
 *When no `matchOption` is passed, the `Array.prototype.includes()` operation is performed on the `selected` array.*
 
@@ -81,4 +83,3 @@ The `useDataViewSelection` hook manages the selection state of the data view.
 ```js file="./SelectionExample.tsx"
 
 ```
-

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

@@ -1,15 +1,15 @@
 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';
 import { BrowserRouter, useSearchParams } from 'react-router-dom';
+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';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 
 const perPageOptions = [
   { title: '5', value: 5 },
   { title: '10', value: 10 }
-]
+];
 
 interface Repository {
   name: string;
@@ -17,24 +17,20 @@ interface Repository {
   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' }
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
 ];
 
-const cols = {
-  name: 'Repositories',
-  branches: 'Branches',
-  prs: 'Pull requests',
-  workspaces: 'Workspaces',
-  lastCommit: 'Last commit'
-};
+const rows = repositories.map(item => Object.values(item));
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
 
 const ouiaId = 'LayoutExample';
 
@@ -43,31 +39,18 @@ const MyTable: React.FunctionComponent = () => {
   const pagination = useDataViewPagination({ perPage: 5, searchParams, setSearchParams });
   const { page, perPage } = pagination;
 
-  const data = useMemo(() => repositories.slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage ]);
+  const pageRows = useMemo(() => rows.slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage ]);
   return (
     <DataView>
       <DataViewToolbar ouiaId='DataViewHeader' pagination={<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>
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={pageRows} />
       <DataViewToolbar ouiaId='DataViewFooter' pagination={<Pagination isCompact perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
     </DataView>
-  )
-}
+  );
+};
 
 export const BasicExample: React.FunctionComponent = () => (
   <BrowserRouter>
     <MyTable/>
   </BrowserRouter>
-)
+);

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
 import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 
 interface Repository {
   name: string;
@@ -14,35 +14,31 @@ interface Repository {
 }
 
 const repositories: Repository[] = [
-  { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
-  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
-  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
-  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
-  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
-  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
 ];
 
-const cols = {
-  name: 'Repositories',
-  branches: 'Branches',
-  prs: 'Pull requests',
-  workspaces: 'Workspaces',
-  lastCommit: 'Last commit'
-};
+const rows = repositories.map(item => Object.values(item));
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
 
 const ouiaId = 'LayoutExample';
 
 export const BasicExample: React.FunctionComponent = () => { 
-  const selection = useDataViewSelection({});
-  const { selected, onSelect, isSelected } = selection;
+  const selection = useDataViewSelection({ matchOption: (a, b) => a[0] === b[0] });
+  const { selected, onSelect } = selection;
 
   const handleBulkSelect = (value: BulkSelectValue) => {
     value === BulkSelectValue.none && onSelect(false);
-    value === BulkSelectValue.all && onSelect(true, repositories);
+    value === BulkSelectValue.all && onSelect(true, rows);
   };
 
   return (
-    <DataView>
+    <DataView selection={selection}>
       <DataViewToolbar 
         ouiaId='DataViewHeader'
         bulkSelect={
@@ -55,34 +51,7 @@ export const BasicExample: React.FunctionComponent = () => {
           />
         } 
       />
-      <Table aria-label="Repositories table" ouiaId={ouiaId}>
-        <Thead data-ouia-component-id={`${ouiaId}-thead`}>
-          <Tr ouiaId={`${ouiaId}-tr-head`}>
-            <Th key="row-select"/>
-            {Object.values(cols).map((column, index) => (
-              <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>
-            ))}
-          </Tr>
-        </Thead>
-        <Tbody>
-          {repositories.map((repo, rowIndex) => (
-            <Tr key={repo.name} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
-              <Td
-                key={`select-${rowIndex}`}
-                select={{
-                  rowIndex,
-                  onSelect: (_event, isSelecting) => onSelect(isSelecting, repo),
-                  isSelected: isSelected(repo),
-                  isDisabled: false
-                }}
-              />
-              {Object.keys(cols).map((column, colIndex) => (
-                <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>{repo[column]}</Td>
-              ))}
-            </Tr>
-          ))}
-        </Tbody>
-      </Table>
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
     </DataView>
   );
 }

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

@@ -4,15 +4,14 @@ import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
 const layoutItemStyling = {
   width: '100%',
   height: '5rem',
-  padding: 'var(--pf-v5-global--spacer--md)',
-  borderStyle: 'dashed',
-  borderWidth: '2px',
+  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, borderTopWidth: 0, borderBottomWidth: 0 }}>Data representation</div>
+    <div style={layoutItemStyling}>Data representation</div>
     <div style={layoutItemStyling}>Footer</div>
   </DataView>
 )

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

@@ -11,7 +11,7 @@ source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
 sortValue: 2
-propComponents: ['DataView']
+propComponents: ['DataView', 'DataViewState']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/Layout.md
 ---
 import { useMemo } from 'react';
@@ -19,6 +19,7 @@ import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-d
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
 import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import DataViewTable from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 
 The **data view** component renders record data in a configured layout.
 

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

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import { Pagination } from '@patternfly/react-core';
-import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
 import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 
 const perPageOptions = [
@@ -20,51 +20,47 @@ interface Repository {
 }
 
 const repositories: Repository[] = [
-  { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
-  { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
-  { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
-  { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
-  { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
-  { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
 ];
 
-const cols = {
-  name: 'Repositories',
-  branches: 'Branches',
-  prs: 'Pull requests',
-  workspaces: 'Workspaces',
-  lastCommit: 'Last commit'
-};
+const rows = repositories.map(item => Object.values(item));
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
 
 const ouiaId = 'LayoutExample';
 
 export const BasicExample: React.FunctionComponent = () => { 
   const pagination = useDataViewPagination({ perPage: 5 });
   const { page, perPage } = pagination;
-  const selection = useDataViewSelection({});
+  const selection = useDataViewSelection({ matchOption: (a, b) => a[0] === b[0] });
   const { selected, onSelect, isSelected } = selection;
 
-  const pageData = useMemo(() => repositories.slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage ]);
+  const pageRows = useMemo(() => rows.slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage ]);
 
   const handleBulkSelect = (value: BulkSelectValue) => {
     value === BulkSelectValue.none && onSelect(false);
-    value === BulkSelectValue.all && onSelect(true, repositories);
-    value === BulkSelectValue.nonePage && onSelect(false, pageData);
-    value === BulkSelectValue.page && onSelect(true, pageData);
+    value === BulkSelectValue.all && onSelect(true, rows);
+    value === BulkSelectValue.nonePage && onSelect(false, pageRows);
+    value === BulkSelectValue.page && onSelect(true, pageRows);
   };
 
   return (
-    <DataView>
+    <DataView selection={selection}>
       <DataViewToolbar 
         ouiaId='LayoutExampleHeader' 
         bulkSelect={
           <BulkSelect
             canSelectAll
-            pageCount={pageData.length}
+            pageCount={pageRows.length}
             totalCount={repositories.length}
             selectedCount={selected.length}
-            pageSelected={pageData.every(item => isSelected(item))}
-            pagePartiallySelected={pageData.some(item => isSelected(item)) && !pageData.every(item => isSelected(item))}
+            pageSelected={pageRows.every(item => isSelected(item))}
+            pagePartiallySelected={pageRows.some(item => isSelected(item)) && !pageRows.every(item => isSelected(item))}
             onSelect={handleBulkSelect}
           />
         } 
@@ -76,34 +72,7 @@ export const BasicExample: React.FunctionComponent = () => {
           />
         } 
       />
-      <Table aria-label="Repositories table" ouiaId={ouiaId}>
-        <Thead data-ouia-component-id={`${ouiaId}-thead`}>
-          <Tr ouiaId={`${ouiaId}-tr-head`}>
-            <Th key="row-select"/>
-            {Object.values(cols).map((column, index) => (
-              <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>
-            ))}
-          </Tr>
-        </Thead>
-        <Tbody>
-          {pageData.map((repo, rowIndex) => (
-            <Tr key={repo.name} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
-              <Td
-                key={`select-${rowIndex}`}
-                select={{
-                  rowIndex,
-                  onSelect: (_event, isSelecting) => onSelect(isSelecting, repo),
-                  isSelected: isSelected(repo),
-                  isDisabled: false
-                }}
-              />
-              {Object.keys(cols).map((column, colIndex) => (
-                <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>{repo[column]}</Td>
-              ))}
-            </Tr>
-          ))}
-        </Tbody>
-      </Table>
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={pageRows} />
       <DataViewToolbar
         ouiaId='LayoutExampleFooter'
         pagination={

package/patternfly-docs/pages/index.js

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

package/release.config.js

@@ -1,9 +1,5 @@
 module.exports = {
-  branches: [
-    'do-not-delete',
-    { name: 'main', channel: 'prerelease', prerelease: 'prerelease' },
-    { name: 'v5', channel: 'prerelease-v5', range: '5.x' },
-  ],
+  branches: [ 'do-not-delete', { name: 'main', channel: 'prerelease', prerelease: 'prerelease' } ],
   analyzeCommits: {
     preset: 'angular'
   },

package/src/DataView/DataView.test.tsx

@@ -5,9 +5,8 @@ import DataView from './DataView';
 const layoutItemStyling = {
   width: '100%',
   height: '5rem',
-  padding: 'var(--pf-v5-global--spacer--md)',
-  borderStyle: 'dashed',
-  borderWidth: '2px',
+  padding: 'var(--pf-t--global--spacer--md)',
+  border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
 };
 
 describe('DataView component', () => {
@@ -15,7 +14,7 @@ describe('DataView component', () => {
     expect(render(
       <DataView>
         <div style={layoutItemStyling}>Header</div>
-        <div style={{ ...layoutItemStyling, borderTopWidth: 0, borderBottomWidth: 0 }}>Data representation</div>
+        <div style={layoutItemStyling}>Data representation</div>
         <div style={layoutItemStyling}>Footer</div>
       </DataView>)).toMatchSnapshot();
   });

package/src/DataView/DataView.tsx

@@ -1,16 +1,32 @@
 import React from 'react';
 import { Stack, StackItem } from '@patternfly/react-core';
+import { DataViewSelection, InternalContextProvider } from '../InternalContext';
+
+export const DataViewState = {
+  empty: 'empty',
+  loading: 'loading',
+  error: 'error'
+} as const;
+
+export type DataViewState = typeof DataViewState[keyof typeof DataViewState];
+
 export interface DataViewProps {
   /** Content rendered inside the data view */
   children: React.ReactNode;
   /** Custom OUIA ID */
   ouiaId?: string;
+  /** Selection context configuration */
+  selection?: DataViewSelection;
+  /** Currently active state */
+  activeState?: DataViewState | string;
 }
 
-export const DataView: React.FC<DataViewProps> = ({
+export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
+
+const DataViewImplementation: React.FC<DataViewImpementationProps> = ({
   children, ouiaId = 'DataView', ...props
-}: DataViewProps) => (
-  <Stack data-ouia-component-id={`${ouiaId}-stack}`} {...props}>
+}: DataViewImpementationProps) => (
+  <Stack data-ouia-component-id={`${ouiaId}-stack`} {...props}>
     {React.Children.map(children, (child, index) => (
       <StackItem data-ouia-component-id={`${ouiaId}-stack-item-${index}`}>
         {child}
@@ -19,4 +35,10 @@ export const DataView: React.FC<DataViewProps> = ({
   </Stack>
 )
 
+export const DataView: React.FC<DataViewProps> = ({ children, selection, activeState, ...props }: DataViewProps) => (
+  <InternalContextProvider selection={selection} activeState={activeState} >
+    <DataViewImplementation {...props}>{children}</DataViewImplementation>
+  </InternalContextProvider>
+);
+
 export default DataView;