diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsContext.md b/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsContext.md
index 2c0cfe4..293a1a0 100644
--- a/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsContext.md
+++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsContext.md
@@ -18,6 +18,7 @@ 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 { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
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.
diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx
index 6ffdf43..762d202 100644
--- a/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx
@@ -3,6 +3,8 @@ import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentB
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';
+import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { ActionsColumn } from '@patternfly/react-table';
interface Repository {
name: string;
@@ -64,25 +66,45 @@ interface RepositoriesTableProps {
selectedRepo?: Repository;
}
+const rowActions = [
+ {
+ title: 'Some action',
+ onClick: () => console.log('clicked on Some action') // eslint-disable-line no-console
+ },
+ {
+ title:
Another action
,
+ 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
+ }
+];
+
const RepositoriesTable: React.FunctionComponent = ({ selectedRepo = undefined }) => {
+ const selection = useDataViewSelection({ matchOption: (a, b) => a.row[0] === b.row[0] });
const { trigger } = useDataViewEventsContext();
const rows = useMemo(() => {
- const handleRowClick = (repo: Repository | undefined) => {
- trigger(EventTypes.rowClick, repo);
+ const handleRowClick = (event, repo: Repository | undefined) => {
+ // prevents drawer toggle on actions or checkbox click
+ (event.target.matches('td') || event.target.matches('tr')) && trigger(EventTypes.rowClick, repo);
};
return repositories.map(repo => ({
- row: Object.values(repo),
+ row: [ ...Object.values(repo), { cell: , props: { isActionCell: true } } ],
props: {
isClickable: true,
- onRowClick: () => handleRowClick(selectedRepo?.name === repo.name ? undefined : repo),
+ onRowClick: (event) => handleRowClick(event, selectedRepo?.name === repo.name ? undefined : repo),
isRowSelected: selectedRepo?.name === repo.name
}
}));
}, [ selectedRepo?.name, trigger ]);
return (
-
+
);
diff --git a/packages/module/patternfly-docs/generated/index.js b/packages/module/patternfly-docs/generated/index.js
index 851e24a..278a0b3 100644
--- a/packages/module/patternfly-docs/generated/index.js
+++ b/packages/module/patternfly-docs/generated/index.js
@@ -49,8 +49,8 @@ module.exports = {
'/extensions/data-view/components/react': {
id: "Components",
title: "Components",
- toc: [{"text":"Data view toolbar"},[{"text":"Basic toolbar example"}],{"text":"Data view table"},[{"text":"Rows and columns customization"},{"text":"Tree table example"},{"text":"Empty state example"}]],
- examples: ["Basic toolbar example","Rows and columns customization","Tree table example","Empty state example"],
+ toc: [{"text":"Data view toolbar"},[{"text":"Basic toolbar example"},{"text":"Actions configuration"},{"text":"Actions example"}],{"text":"Data view table"},[{"text":"Rows and columns customization"},{"text":"Tree table example"},{"text":"Empty state example"},{"text":"Error state example"},{"text":"Loading state example"}]],
+ examples: ["Basic toolbar example","Actions example","Rows and columns customization","Tree table example","Empty state example","Error state example","Loading state example"],
section: "extensions",
subsection: "Data view",
source: "react",
diff --git a/packages/module/src/DataView/DataView.tsx b/packages/module/src/DataView/DataView.tsx
index 094d594..201a586 100644
--- a/packages/module/src/DataView/DataView.tsx
+++ b/packages/module/src/DataView/DataView.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Stack, StackItem } from '@patternfly/react-core';
+import { Stack, StackItem, StackProps } from '@patternfly/react-core';
import { DataViewSelection, InternalContextProvider } from '../InternalContext';
export const DataViewState = {
@@ -10,7 +10,8 @@ export const DataViewState = {
export type DataViewState = typeof DataViewState[keyof typeof DataViewState];
-export interface DataViewProps {
+/** extends StackProps */
+export interface DataViewProps extends StackProps {
/** Content rendered inside the data view */
children: React.ReactNode;
/** Custom OUIA ID */