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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "6.1.0-prerelease.1",
+  "version": "7.0.0-prerelease.2",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -31,21 +31,21 @@
     "tag": "prerelease"
   },
   "dependencies": {
-    "@patternfly/react-core": "6.0.0-alpha.94",
-    "@patternfly/react-icons": "6.0.0-alpha.34",
-    "@patternfly/react-table": "6.0.0-alpha.95",
-    "@patternfly/react-component-groups": "6.0.0-alpha.6",
-    "react-jss": "^10.10.0",
-    "clsx": "^2.1.1"
+    "@patternfly/react-component-groups": "6.0.0-prerelease.7",
+    "@patternfly/react-core": "6.0.0-prerelease.21",
+    "@patternfly/react-icons": "6.0.0-prerelease.7",
+    "@patternfly/react-table": "6.0.0-prerelease.22",
+    "clsx": "^2.1.1",
+    "react-jss": "^10.10.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
+    "@patternfly/documentation-framework": "6.0.0-alpha.117",
+    "@patternfly/patternfly": "6.0.0-prerelease.15",
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/patternfly": "6.0.0-alpha.205",
-    "@patternfly/documentation-framework": "6.0.0-alpha.69",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",

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

@@ -11,21 +11,96 @@ 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: 4
-propComponents: ['DataViewToolbar']
+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 { BulkSelect } from '@patternfly/react-component-groups';
-import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core';
+import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
+import { BulkSelect, ErrorState, ResponsiveAction, ResponsiveActions, SkeletonTableHead, SkeletonTableBody } from '@patternfly/react-component-groups';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
 
 ## Data view toolbar
 
 The **data view toolbar** component renders a default opinionated data view toolbar above or below the data section. 
 
-Data view toolbar can contain a `pagination`, `bulkSelect` or any other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
+Data view toolbar can contain a `pagination`, `bulkSelect`, `actions` or other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
 
-### Basic example
+### Basic toolbar example
 
 ```js file="./DataViewToolbarExample.tsx"
 
 ```
 
+# Toolbar actions
+Data view toolbar can display actions using the `actions` property accepting a React node. You can make use of a predefined [responsive actions](/extensions/component-groups/responsive-actions) component from the [component groups](/extensions/component-groups/about-component-groups) extension.
+
+### Actions configuration
+
+### Actions example
+
+```js file="./DataViewToolbarActionsExample.tsx"
+
+```
+
+## Data view table
+
+The **data view table** component renders your columns and rows definition into a [table](/components/table) component. 
+
+### Rows and columns customization
+
+This example shows possible formats of `rows` and `columns` passed to the `DataViewTable` which allow you various customizations of the table head and body. 
+
+```js file="./DataViewTableExample.tsx"
+
+```
+
+The `DataViewTable` component accepts the following props:
+
+- `columns` defining the column heads of the table. Each item in the array can be a `ReactNode` (for simple heads) or an object with the following properties:
+  - `cell` (`ReactNode`) content to display in the column head.
+  - optional `props` (`ThProps`) to pass to the `<Th>` component, such as `width`, `sort`, and other table head cell properties.
+
+- `rows` defining the rows to be displayed in the table. Each item in the array can be either an array of `DataViewTd` (for simple rows) or an object with the following properties:
+  - `row` (`DataViewTd[]`) defining the content for each cell in the row.
+  - optional `id` (`string`) for the row (can be used to match items in selection).
+  - optional `props` (`TrProps`) to pass to the `<Tr>` component, such as `isHoverable`, `isRowSelected`, and other table row properties.
+
+- optional `ouiaId`
+
+- optional `props` (`TableProps`) that are passed down to the `<Table>` component, except for `onSelect`, which is managed internally.
+
+### Tree table example
+This example shows the tree table variant with expandable rows, custom icons for leaf and parent nodes. Tree table is turned on by passing `isTreeTable` flag to the `DataViewTable` component. You can pass `collapsedIcon`, `expandedIcon` or `leafIcon` to be displayen rows with given status. The tree table rows have to be defined in a format of object with following keys:
+  - `row` (`DataViewTd[]`) defining the content for each cell in the row.
+  - `id` (`string`) for the row (used to match items in selection end expand the rows).
+  - optional `children` (`DataViewTrTree[]`) defining the children rows.
+
+It is also possible to disable row selection using the `isSelectDisabled` function passed to the wrapping data view component.
+
+```js file="./DataViewTableTreeExample.tsx"
+
+```
+
+### Empty state example
+The data view table supports displaying a custom empty state. You can pass it using the the `headStates` and `bodyStates` properties and their `empty` key. It will be automatically displayed in case there are no rows to be rendered.
+
+```js file="./DataViewTableEmptyExample.tsx"
+
+```
+
+### Error state example
+The data view table also supports displaying an error state. You can pass it using the the `headStates` and `bodyStates` properties and their `error` key. It will be displayed in case the data view recieves its `state` property set to `error`.
+
+```js file="./DataViewTableErrorExample.tsx"
+
+```
+
+### Loading state example
+The data view table also supports displaying a custom loading state. You can pass it using the `headStates` and `bodyStates` properties and their `loading` key. Your state will be displayed in case the data view recieves its `state` property set to `loading`.
+
+```js file="./DataViewTableLoadingExample.tsx"
+
+```

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { CubesIcon } from '@patternfly/react-icons';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter,  } from '@patternfly/react-core';
+import { Tbody, Td, Tr } from '@patternfly/react-table';
+
+interface Repository {
+  id: number;
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [];
+
+// you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }
+const rows: DataViewTr[] = repositories.map((repository) => Object.values(repository));
+
+const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'TableExample';
+
+const empty = (
+  <Tbody>
+    <Tr key="loading" ouiaId={`${ouiaId}-tr-loading`}>
+      <Td colSpan={columns.length}>
+        <EmptyState  headingLevel="h4" icon={CubesIcon} titleText="No data found">
+          <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>
+      </Td>
+    </Tr>
+  </Tbody>
+);
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataView activeState={DataViewState.empty}>
+    <DataViewTable 
+      aria-label='Repositories table' 
+      ouiaId={ouiaId}
+      columns={columns}
+      rows={rows}
+      bodyStates={{ empty }}
+    />
+  </DataView>
+);

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { ErrorState } from '@patternfly/react-component-groups';
+import { Tbody, Td, Tr } from '@patternfly/react-table';
+
+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 = 'TableErrorExample';
+
+const error = (
+  <Tbody>
+    <Tr key="loading" ouiaId={`${ouiaId}-tr-loading`}>
+      <Td colSpan={columns.length}>
+        <ErrorState titleText='Unable to load data' bodyText='There was an error retrieving data. Check your connection and reload the page.' />
+      </Td>
+    </Tr>
+  </Tbody>
+);
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataView activeState={DataViewState.error}>
+    <DataViewTable 
+      aria-label='Repositories table' 
+      ouiaId={ouiaId}
+      columns={columns}
+      rows={rows}
+      bodyStates={{ error }}
+    />
+  </DataView>
+);

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

@@ -0,0 +1,67 @@
+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;
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [
+  { id: 1, name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { 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 } } },
+  { cell: <Button href='#' variant='link' isInline>{name}</Button> },
+  branches,
+  prs,
+  workspaces,
+  lastCommit,
+  { cell: <ActionsColumn items={rowActions}/>, props: { isActionCell: true } },
+]);
+
+const columns: DataViewTh[] = [
+  null,
+  'Repositories', 
+  { cell: <>Branches<ExclamationCircleIcon className='pf-v5-u-ml-sm' color="var(--pf-t--temp--dev--tbd)"/* CODEMODS: original v5 color was --pf-v5-global--danger-color--100 *//></> }, 
+  'Pull requests', 
+  { cell: 'Workspaces', props: { info: { tooltip: 'More information' } } }, 
+  { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } },
+];
+
+const ouiaId = 'TableExample';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
+);

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { SkeletonTableBody, SkeletonTableHead } from '@patternfly/react-component-groups';
+
+// you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }
+const rows: DataViewTr[] = [];
+
+const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'TableExample';
+
+const headLoading = <SkeletonTableHead columns={columns} />
+const bodyLoading = <SkeletonTableBody rowsCount={5} columnsCount={columns.length} />;
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataView activeState={DataViewState.loading}>
+    <DataViewTable
+      aria-label='Repositories table' 
+      ouiaId={ouiaId}
+      columns={columns}
+      rows={rows}
+      headStates={{ loading: headLoading }}
+      bodyStates={{ loading: bodyLoading }}
+    />
+  </DataView>
+);

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable, DataViewTh, DataViewTrTree } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { FolderIcon, FolderOpenIcon, LeafIcon } from '@patternfly/react-icons';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+  children?: Repository[];
+}
+
+const repositories: Repository[] = [
+  { 
+    name: 'Repository one',
+    branches: 'Branch one',
+    prs: 'Pull request one',
+    workspaces: 'Workspace one',
+    lastCommit: 'Timestamp one',
+    children: [
+      { 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',
+    children: [ { 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 buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories.map((repo) => ({
+  row: [ repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit ],
+  id: repo.name, // unique ID for each row
+  ...(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 ouiaId = 'TreeTableExample';
+
+export const BasicExample: React.FunctionComponent = () => {
+  const selection = useDataViewSelection({ matchOption: (a, b) => a.id === b.id });
+
+  return (
+    <DataView selection={selection}>
+      <DataViewTable 
+        isTreeTable 
+        ouiaId={ouiaId}
+        columns={columns} 
+        rows={rows}
+        leafIcon={<LeafIcon/>}
+        expandedIcon={<FolderOpenIcon aria-hidden />}
+        collapsedIcon={<FolderIcon aria-hidden />} 
+      />
+    </DataView>
+  );
+}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { BulkSelect, ResponsiveAction, ResponsiveActions } from '@patternfly/react-component-groups';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataViewToolbar 
+    bulkSelect={
+      <BulkSelect
+        selectedCount={0}
+        pageCount={5}
+        onSelect={() => null}
+      />  
+    }
+    actions={
+      <ResponsiveActions breakpoint="lg" ouiaId="example-actions">
+        <ResponsiveAction isPersistent variant="primary">Persistent</ResponsiveAction>
+        <ResponsiveAction isPinned variant="secondary">Pinned</ResponsiveAction>
+        <ResponsiveAction>Action three</ResponsiveAction>
+        <ResponsiveAction>Action four</ResponsiveAction>
+      </ResponsiveActions>
+    }
+    pagination={
+      <Pagination page={1} perPage={10} />
+    }
+  />
+)

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

@@ -6,15 +6,15 @@ import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewTo
 
 export const BasicExample: React.FunctionComponent = () => (
   <DataViewToolbar 
-    pagination={
-      <Pagination page={1} perPage={10} />
-    }
     bulkSelect={
       <BulkSelect
         selectedCount={0}
         pageCount={5}
         onSelect={() => null}
       />  
-    } 
+    }
+    pagination={
+      <Pagination page={1} perPage={10} />
+    }
   />
 )

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

@@ -0,0 +1,32 @@
+---
+# 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: 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/EventsContext/EventsContext.md
+---
+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 { 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  events context** provides a way of listening to the data view events from the outside of the component.
+
+### 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).
+
+
+```js file="./EventsExample.tsx"
+
+```
+

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,10 +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 { 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**.
 
@@ -33,9 +36,15 @@ The `useDataViewPagination` hook manages the pagination state of the data view.
 
 **Initial values:**
 - `perPage` initial value
-- (optional) `page` initial value
+- 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.
 
-The retrieved values are named to match the PatternFly [pagination](/components/pagination) component props, so you can easily spread them.
+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:**
 - current `page` number
@@ -52,15 +61,15 @@ The retrieved values are named to match the PatternFly [pagination](/components/
 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.*
 
@@ -74,4 +83,3 @@ The `useDataViewSelection` hook manages the selection state of the data view.
 ```js file="./SelectionExample.tsx"
 
 ```
-