@patternfly/react-data-view 5.1.0 → 5.1.2

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

@@ -12,7 +12,7 @@ import { renderHook, act } from '@testing-library/react';
 import { useDataViewSelection } from './selection';
 describe('useDataViewSelection', () => {
     it('should get initial state correctly - no initialSelected', () => {
-        const { result } = renderHook(() => useDataViewSelection({}));
+        const { result } = renderHook(() => useDataViewSelection({ matchOption: (a, b) => a.id === b.id }));
         expect(result.current).toEqual({
             selected: [],
             onSelect: expect.any(Function),
@@ -21,7 +21,7 @@ describe('useDataViewSelection', () => {
     });
     it('should get initial state correctly - with initialSelected', () => {
         const initialSelected = [{ id: 1, name: 'test1' }];
-        const { result } = renderHook(() => useDataViewSelection({ initialSelected }));
+        const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }));
         expect(result.current).toEqual({
             selected: initialSelected,
             onSelect: expect.any(Function),
@@ -30,7 +30,7 @@ describe('useDataViewSelection', () => {
     });
     it('should select items correctly - objects', () => __awaiter(void 0, void 0, void 0, function* () {
         const initialSelected = [{ id: 1, name: 'test1' }];
-        const { result } = renderHook(() => useDataViewSelection({ initialSelected }));
+        const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }));
         yield act(() => __awaiter(void 0, void 0, void 0, function* () {
             result.current.onSelect(true, { id: 2, name: 'test2' });
         }));
@@ -38,7 +38,7 @@ describe('useDataViewSelection', () => {
     }));
     it('should deselect items correctly - strings', () => __awaiter(void 0, void 0, void 0, function* () {
         const initialSelected = ['test1', 'test2'];
-        const { result } = renderHook(() => useDataViewSelection({ initialSelected }));
+        const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a === b }));
         yield act(() => __awaiter(void 0, void 0, void 0, function* () {
             result.current.onSelect(false, 'test2');
         }));

package/dist/esm/InternalContext/InternalContext.d.ts

@@ -0,0 +1,17 @@
+import React, { PropsWithChildren } from 'react';
+export interface DataViewSelection {
+    /** Called when the selection of items changes */
+    onSelect: (isSelecting: boolean, items?: any[] | any) => void;
+    /** Checks if a specific item is currently selected */
+    isSelected: (item: any) => boolean;
+    /** Determines if selection is disabled for a given item */
+    isSelectDisabled?: (item: any) => boolean;
+}
+export interface InternalContextValue {
+    selection?: DataViewSelection;
+}
+export declare const InternalContext: React.Context<InternalContextValue>;
+export type InternalProviderProps = PropsWithChildren<InternalContextValue>;
+export declare const InternalContextProvider: React.FC<InternalProviderProps>;
+export declare const useInternalContext: () => InternalContextValue;
+export default InternalContext;

package/dist/esm/InternalContext/InternalContext.js

@@ -0,0 +1,7 @@
+import React, { createContext, useContext } from 'react';
+export const InternalContext = createContext({
+    selection: undefined
+});
+export const InternalContextProvider = ({ children, selection }) => (React.createElement(InternalContext.Provider, { value: { selection } }, children));
+export const useInternalContext = () => useContext(InternalContext);
+export default InternalContext;

package/dist/esm/InternalContext/InternalContext.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/InternalContext/InternalContext.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { useInternalContext } from './InternalContext';
+import { DataView } from '../DataView';
+describe('InternalContext', () => {
+    const mockSelection = {
+        onSelect: jest.fn(),
+        isSelected: jest.fn(),
+        isSelectDisabled: jest.fn(),
+    };
+    test('should provide context value and allow consuming it', () => {
+        const TestComponent = () => {
+            const { selection } = useInternalContext();
+            return (React.createElement("div", null,
+                React.createElement("button", { onClick: () => selection === null || selection === void 0 ? void 0 : selection.onSelect(true, ['item1']) }, "Select item"),
+                React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item1')) ? 'Selected' : 'Not selected')));
+        };
+        const { getByText } = render(React.createElement(DataView, { selection: mockSelection },
+            React.createElement(TestComponent, null)));
+        fireEvent.click(getByText('Select item'));
+        expect(mockSelection.onSelect).toHaveBeenCalledWith(true, ['item1']);
+    });
+    test('should handle selection state correctly', () => {
+        const mockSelectionState = Object.assign(Object.assign({}, mockSelection), { isSelected: jest.fn((item) => item === 'item1') });
+        const TestComponent = () => {
+            const { selection } = useInternalContext();
+            return (React.createElement("div", null,
+                React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item1')) ? 'Item 1 is selected' : 'Item 1 is not selected'),
+                React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item2')) ? 'Item 2 is selected' : 'Item 2 is not selected')));
+        };
+        const { getByText } = render(React.createElement(DataView, { selection: mockSelectionState },
+            React.createElement(TestComponent, null)));
+        expect(getByText('Item 1 is selected')).toBeInTheDocument();
+        expect(getByText('Item 2 is not selected')).toBeInTheDocument();
+    });
+    test('should handle selection disabled correctly', () => {
+        const mockSelectionWithDisabled = Object.assign(Object.assign({}, mockSelection), { isSelectDisabled: jest.fn((item) => item === 'item3') });
+        const TestComponent = () => {
+            var _a, _b;
+            const { selection } = useInternalContext();
+            return (React.createElement("div", null,
+                React.createElement("span", null, ((_a = selection === null || selection === void 0 ? void 0 : selection.isSelectDisabled) === null || _a === void 0 ? void 0 : _a.call(selection, 'item3')) ? 'Item 3 is disabled' : 'Item 3 is enabled'),
+                React.createElement("span", null, ((_b = selection === null || selection === void 0 ? void 0 : selection.isSelectDisabled) === null || _b === void 0 ? void 0 : _b.call(selection, 'item1')) ? 'Item 1 is disabled' : 'Item 1 is enabled')));
+        };
+        const { getByText } = render(React.createElement(DataView, { selection: mockSelectionWithDisabled },
+            React.createElement(TestComponent, null)));
+        expect(getByText('Item 3 is disabled')).toBeInTheDocument();
+        expect(getByText('Item 1 is enabled')).toBeInTheDocument();
+    });
+});

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

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

package/dist/esm/InternalContext/index.js

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

package/dist/esm/index.d.ts

@@ -1,5 +1,17 @@
+export { default as InternalContext } from './InternalContext';
+export * from './InternalContext';
 export * from './Hooks';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
+export { default as DataViewTableTree } from './DataViewTableTree';
+export * from './DataViewTableTree';
+export { default as DataViewTableHeader } from './DataViewTableHeader';
+export * from './DataViewTableHeader';
+export { default as DataViewTableBasic } from './DataViewTableBasic';
+export * from './DataViewTableBasic';
+export { default as DataViewTable } from './DataViewTable';
+export * from './DataViewTable';
+export { default as DataViewEventsContext } from './DataViewEventsContext';
+export * from './DataViewEventsContext';
 export { default as DataView } from './DataView';
 export * from './DataView';

package/dist/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -11,11 +11,15 @@ 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 { FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 import { BulkSelect } from '@patternfly/react-component-groups';
-import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { 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 } from '@patternfly/react-data-view/dist/dynamic/DataView';
 
 ## Data view toolbar
 
@@ -23,9 +27,47 @@ The **data view toolbar** component renders a default opinionated data view tool
 
 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.
 
-### Basic example
+### Basic toolbar example
 
 ```js file="./DataViewToolbarExample.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 header and body. 
+
+```js file="./DataViewTableExample.tsx"
+
+```
+
+The `DataViewTable` component accepts the following props:
+
+- `columns` defining the column headers of the table. Each item in the array can be a `ReactNode` (for simple headers) or an object with the following properties:
+  - `cell` (`ReactNode`) content to display in the column header.
+  - optional `props` (`ThProps`) to pass to the `<Th>` component, such as `width`, `sort`, and other table header 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"
+
+```

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

@@ -0,0 +1,47 @@
+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';
+
+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' }
+];
+
+// 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 
+]);
+
+const columns: DataViewTh[] = [
+  null,
+  'Repositories', 
+  { cell: <>Branches<ExclamationCircleIcon className='pf-v5-u-ml-sm' color='var(--pf-v5-global--danger-color--100)'/></> }, 
+  'Pull requests', 
+  { cell: 'Workspaces', props: { info: { tooltip: 'More information' } } }, 
+  { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } }
+];
+
+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/DataViewTableTreeExample.tsx

@@ -0,0 +1,69 @@
+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 aria-label='Repositories table' 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/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, Text } 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>
+        <Text>Branches: {selectedRepo?.branches}</Text>
+        <Text>Pull requests: {selectedRepo?.prs}</Text>
+        <Text>Workspaces: {selectedRepo?.workspaces}</Text>
+        <Text>Last commit: {selectedRepo?.lastCommit}</Text>
+        <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

@@ -18,6 +18,7 @@ import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-d
 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';
 import { BrowserRouter, useSearchParams } from 'react-router-dom';
 
 This is a list of functionality you can use to manage data displayed in the **data view**.
@@ -34,9 +35,9 @@ 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.
 
@@ -68,8 +69,8 @@ Data view toolbar can display a bulk selection component using the `bulkSelect`
 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.*
 

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

@@ -1,10 +1,10 @@
 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 },
@@ -20,21 +20,17 @@ 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';
 
@@ -43,24 +39,11 @@ 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>
   )