feat(Table): add draggable table rows demo (#5921)

* most of it is there

* update class name

* add draggable event handlers

* remove extra click handler

* remove extra click handler

* revert table.md, reapply draggable table example

* update example name, update default of className

* add draggable button style

* move draggable style to Td

* add dragover class to ghost row

* moved class to table

Co-authored-by: nicolethoen <[email protected]>

Author: kmcfaul

packages/react-table/src/components/Table/DraggableCell.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import GripVerticalIcon from '@patternfly/react-icons/dist/js/icons/grip-vertical-icon';
+import { Button } from '@patternfly/react-core/dist/js/components/Button/Button';
+
+export interface DraggableCellProps {
+  id: string;
+  className?: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  'aria-label'?: string;
+}
+
+export const DraggableCell: React.FunctionComponent<DraggableCellProps> = ({
+  className,
+  onClick,
+  'aria-label': ariaLabel,
+  id,
+  ...props
+}: DraggableCellProps) => (
+  <Button
+    id={id}
+    variant="plain"
+    className={className}
+    type="button"
+    aria-label={ariaLabel || `Draggable row draggable button`}
+    onClick={onClick}
+    {...props}
+  >
+    <GripVerticalIcon aria-hidden />
+  </Button>
+);
+
+DraggableCell.displayName = 'DraggableCell';

packages/react-table/src/components/Table/DraggableRowWrapper.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+import stylesTreeView from '@patternfly/react-styles/css/components/Table/table-tree-view';
+import { RowWrapperProps } from './RowWrapper';
+import { Tr } from '../TableComposable';
+
+export const DraggableRowWrapper: React.FunctionComponent<RowWrapperProps> = ({
+  className,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  rowProps,
+  row,
+  ...props
+}: RowWrapperProps) => {
+  const {
+    'aria-level': level,
+    'aria-posinset': posinset,
+    'aria-setsize': setsize,
+    isExpanded,
+    isDetailsExpanded,
+    isHidden
+  } = row.props;
+  return (
+    <Tr
+      aria-level={level}
+      aria-posinset={posinset}
+      aria-setsize={setsize}
+      aria-expanded={!!isExpanded}
+      isHidden={isHidden}
+      className={css(
+        className,
+        isExpanded && styles.modifiers.expanded,
+        isDetailsExpanded && stylesTreeView.modifiers.treeViewDetailsExpanded
+      )}
+      {...props}
+    />
+  );
+};
+DraggableRowWrapper.displayName = 'DraggableRowWrapper';

packages/react-table/src/components/Table/TableTypes.ts

@@ -69,6 +69,7 @@ export type OnFavorite = (
   rowData: IRowData,
   extraData: IExtraData
 ) => void;
+
 export type OnTreeRowCollapse = (event: any, rowIndex: number, title: React.ReactNode, rowData: IRowData) => void;
 export type OnToggleRowDetails = (event: any, rowIndex: number, title: React.ReactNode, rowData: IRowData) => void;
 export type OnCheckChange = (
@@ -112,6 +113,7 @@ export interface IColumn {
 export interface IExtraRowData {
   rowIndex?: number;
   rowKey?: RowKeyType;
+  id?: string;
 }
 
 export interface IExtraColumnData {