import React from 'react'; import { DataList, DataListItem, DataListCell, DataListItemRow, DataListItemCells, DataListAction, Dropdown, DropdownList, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const DataListClickableRows: React.FunctionComponent = () => { const [isOpen1, setIsOpen1] = React.useState(false); const [isOpen2, setIsOpen2] = React.useState(false); const [selectedDataListItemId, setSelectedDataListItemId] = React.useState(''); const onToggle1 = () => { setIsOpen1(!isOpen1); }; const onSelect1 = () => { setIsOpen1(!isOpen1); }; const onToggle2 = () => { setIsOpen2(!isOpen2); }; const onSelect2 = () => { setIsOpen2(!isOpen2); }; const onSelectDataListItem = (_event: React.MouseEvent | React.KeyboardEvent, id: string) => { setSelectedDataListItemId(id); }; const handleInputChange = (_event: React.FormEvent, id: string) => { setSelectedDataListItemId(id); }; return ( Single actionable Primary content , Single actionable Secondary content ]} /> ) => ( } /> )} isOpen={isOpen1} onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)} > Action {/* Prevent default onClick functionality for example purposes */} event.preventDefault()}> Link Disabled Action event.preventDefault()}> Disabled Link clickable actions Primary content , clickable actions Secondary content ]} /> ) => ( } /> )} isOpen={isOpen2} onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)} > Action {/* Prevent default onClick functionality for example purposes */} event.preventDefault()}> Link Disabled Action event.preventDefault()}> Disabled Link ); };