fix(context): Move context docs

Author: fhlavac

…ns/data-view/examples/Context/Context.md …/examples/EventsContext/EventsContext.mdpackages/module/patternfly-docs/content/extensions/data-view/examples/Context/Context.md renamed to packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsContext.md packages/module/patternfly-docs/content/extensions/data-view/examples/Context/Context.md renamed to packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsContext.md

@@ -5,24 +5,24 @@ section: extensions
 subsection: Data view
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: Context
+id: Events context
 # 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
 sortValue: 3
-sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Events/Events.md
+sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsContext.md
 ---
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
-import { useDataViewEventsContext, DataViewProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { useDataViewEventsContext, DataViewEventsContext, DataViewEventsProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext';
 import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 
-The **data view** context provides a way to share data across the entire data view tree without having to pass props manually at every level. It also provides a way of listening to the data view events from the outside of the component.
+The **data view  events context** provides a way of listening to the data view events from the outside of the component.
 
-
-### Events sharing example
+### Row click subscription example
 The following example demonstrates how to use the `DataViewEventsContext` to manage shared state and handle events. The `DataViewEventsProvider` is used to wrap components that need access to the shared context. This example illustrates how to set up a layout that listens for data view row click events and displays detailed information about the selected row in a [drawer component](/components/drawer).
 
 

…-view/examples/Context/EventsExample.tsx …examples/EventsContext/EventsExample.tsxpackages/module/patternfly-docs/content/extensions/data-view/examples/Context/EventsExample.tsx renamed to packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx packages/module/patternfly-docs/content/extensions/data-view/examples/Context/EventsExample.tsx renamed to packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, Title, Text } from '@patternfly/react-core';
-import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
 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 {
@@ -21,13 +21,7 @@ const repositories: Repository[] = [
   { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
 ];
 
-const cols: Record<keyof Repository, string> = {
-  name: 'Repositories',
-  branches: 'Branches',
-  prs: 'Pull requests',
-  workspaces: 'Workspaces',
-  lastCommit: 'Last commit'
-};
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
 
 const ouiaId = 'ContextExample';
 
@@ -73,40 +67,16 @@ interface RepositoriesTableProps {
 const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
   const { trigger } = useDataViewEventsContext();
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const rows = useMemo(() => 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 ]);
+
   const handleRowClick = (repo: Repository | undefined) => {
     trigger(EventTypes.rowClick, repo);
   };
 
   return (
     <DataView>
-      <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>
-          {repositories.map((repo, rowIndex) => (
-            <Tr
-              isClickable
-              key={repo.name}
-              ouiaId={`${ouiaId}-tr-${rowIndex}`}
-              onRowClick={() => handleRowClick(selectedRepo?.name === repo.name ? undefined : repo)}
-              isRowSelected={selectedRepo?.name === repo.name}
-            >
-              {Object.keys(cols).map((column, colIndex) => (
-                <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>
-                  {repo[column as keyof Repository]}
-                </Td>
-              ))}
-            </Tr>
-          ))}
-        </Tbody>
-      </Table>
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
     </DataView>
   );
 };