Interactive Features

/**
 * Pre-built actions dropdown column component
 * @param props - ActionsColumn configuration props
 * @returns Forwarded ref component
 */
function ActionsColumn(props: ActionsColumnProps): React.ForwardRefExoticComponent<ActionsColumnProps & React.RefAttributes<HTMLElement>>;

interface ActionsColumnProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
  /** Actions to be rendered within or without the action dropdown */
  items: IAction[];
  /** Indicates whether the actions dropdown is disabled */
  isDisabled?: boolean;
  /** Data of the row the action dropdown is located */
  rowData?: IRowData;
  /** Extra data of a row */
  extraData?: IExtraData;
  /** Custom actions toggle for the actions dropdown */
  actionsToggle?: (props: CustomActionsToggleProps) => React.ReactNode;
  /** Additional properties for the actions dropdown popper */
  popperProps?: any;
  /** Ref to forward to the first item in the popup menu */
  firstActionItemRef?: React.Ref<HTMLButtonElement>;
  /** Flag indicating that the dropdown's onOpenChange callback should not be called */
  isOnOpenChangeDisabled?: boolean;
}

interface CustomActionsToggleProps {
  onToggle: (event: React.MouseEvent | React.KeyboardEvent) => void;
  isOpen: boolean;
  isDisabled: boolean;
  toggleRef: React.Ref<any>;
}

import { ActionsColumn } from "@patternfly/react-table";

// Basic actions column
const actions = [
  {
    title: 'Edit',
    onClick: (event, rowIndex, rowData) => console.log('Edit:', rowData)
  },
  {
    title: 'Delete',
    onClick: (event, rowIndex, rowData) => console.log('Delete:', rowData)
  },
  {
    isSeparator: true
  },
  {
    title: 'Archive',
    onClick: (event, rowIndex, rowData) => console.log('Archive:', rowData)
  }
];

<Td>
  <ActionsColumn items={actions} />
</Td>

// With outside dropdown actions
const actionsWithOutside = [
  {
    title: 'Quick Edit',
    isOutsideDropdown: true,
    onClick: (event, rowIndex, rowData) => console.log('Quick edit')
  },
  {
    title: 'Settings',
    onClick: (event, rowIndex, rowData) => console.log('Settings')
  }
];

<Td>
  <ActionsColumn 
    items={actionsWithOutside}
    popperProps={{ position: 'right' }}
  />
</Td>

/**
 * Sortable column header component
 * @param props - SortColumn configuration props
 * @returns SortColumn component
 */
function SortColumn(props: SortColumnProps): React.FunctionComponent<SortColumnProps>;

interface SortColumnProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children?: React.ReactNode;
  className?: string;
  /** Indicates if this column is currently sorted */
  isSortedBy?: boolean;
  /** Callback function when sort is triggered */
  onSort?: Function;
  /** Current sort direction */
  sortDirection?: string;
  /** Tooltip content for the sort button */
  tooltip?: React.ReactNode;
  /** Additional tooltip properties */
  tooltipProps?: Omit<TooltipProps, 'content'>;
  /** Whether tooltip has default behavior */
  tooltipHasDefaultBehavior?: boolean;
  /** Props for the favorite button (for favoritable sorting) */
  favoriteButtonProps?: FavoriteButtonProps;
}

enum SortByDirection {
  asc = 'asc',
  desc = 'desc'
}

import { SortColumn, SortByDirection } from "@patternfly/react-table";

// Basic sortable column
<Th>
  <SortColumn
    isSortedBy={sortBy.index === 0}
    sortDirection={sortBy.direction}
    onSort={() => handleSort(0)}
  >
    Name
  </SortColumn>
</Th>

// Sortable with favorites
<Th>
  <SortColumn
    isSortedBy={sortBy.index === 1}
    sortDirection={sortBy.direction}
    onSort={() => handleSort(1)}
    favoriteButtonProps={{
      favorited: favorites.includes(1),
      onClick: () => toggleFavorite(1)
    }}
  >
    Priority
  </SortColumn>
</Th>

/**
 * Selection column component
 * @param props - SelectColumn configuration props
 * @returns SelectColumn component
 */
function SelectColumn(props: SelectColumnProps): React.FunctionComponent<SelectColumnProps>;

interface SelectColumnProps {
  name?: string;
  children?: React.ReactNode;
  className?: string;
  /** Callback when selection changes */
  onSelect?: (event: React.FormEvent<HTMLInputElement>) => void;
  /** Selection variant - checkbox or radio */
  selectVariant?: RowSelectVariant;
  /** Tooltip text to display */
  tooltip?: React.ReactNode;
  /** Additional tooltip properties */
  tooltipProps?: Omit<TooltipProps, 'content'>;
}

enum RowSelectVariant {
  radio = 'radio',
  checkbox = 'checkbox'
}

/**
 * Column component for expand/collapse functionality
 * @param props - CollapseColumn configuration props
 * @returns CollapseColumn component
 */
function CollapseColumn(props: CollapseColumnProps): React.FunctionComponent<CollapseColumnProps>;

interface CollapseColumnProps {
  id?: string;
  className?: string;
  children?: React.ReactNode;
  /** Callback when toggle button is clicked */
  onToggle?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  /** Whether the content is currently open/expanded */
  isOpen?: boolean;
  /** Accessible label for the toggle button */
  'aria-label'?: string;
  /** Visual variant for compact tables */
  variant?: 'compact';
}

/**
 * Cell component with drag handle for row reordering
 * @param props - DraggableCell configuration props
 * @returns DraggableCell component
 */
function DraggableCell(props: DraggableCellProps): React.FunctionComponent<DraggableCellProps>;

interface DraggableCellProps {
  /** Unique identifier for the draggable element */
  id: string;
  className?: string;
  /** Click handler for the drag button */
  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  /** Accessible label for the drag button */
  'aria-label'?: string;
}

/**
 * Column component for inline editing controls
 * @param props - EditColumn configuration props
 * @returns EditColumn component
 */
function EditColumn(props: EditColumnProps): React.FunctionComponent<EditColumnProps>;

interface EditColumnProps {
  name?: string;
  className?: string;
  /** Row edit event handler */
  onClick?: OnRowEdit;
  /** Whether the row is currently being edited */
  editing?: boolean;
  /** Whether the current edit state is valid */
  valid?: boolean;
  /** Accessible label for the save button */
  saveAriaLabel: string;
  /** Accessible label for the cancel button */
  cancelAriaLabel: string;
  /** Accessible label for the edit button */
  editAriaLabel: string;
}

// Sort event handler type
type OnSort = (
  event: React.MouseEvent,
  columnIndex: number,
  sortByDirection: SortByDirection,
  extraData: IExtraColumnData
) => void;

// Sort configuration
interface ISortBy {
  /** Index of the current sorted column */
  index?: number;
  /** Current sort direction */
  direction?: 'asc' | 'desc';
  /** Default sorting direction */
  defaultDirection?: 'asc' | 'desc';
}

// Th sort configuration
interface ThSortType {
  /** Click callback on the sortable cell */
  onSort?: OnSort;
  /** Currently active column's index and direction */
  sortBy: ISortBy;
  /** The column index */
  columnIndex: number;
  /** Accessible text for the sort button */
  'aria-label'?: string;
  /** True to make this a favoritable sorting cell */
  isFavorites?: boolean;
  /** Props for the favorite button */
  favoriteButtonProps?: FavoriteButtonProps;
}

// Selection event handler type
type OnSelect = (
  event: React.FormEvent<HTMLInputElement>,
  isSelected: boolean,
  rowIndex: number,
  rowData: IRowData,
  extraData: IExtraData
) => void;

// Th selection configuration
interface ThSelectType {
  /** Callback on select */
  onSelect?: OnSelect;
  /** Whether the cell is selected */
  isSelected: boolean;
  /** Flag indicating the select checkbox in the th is disabled */
  isHeaderSelectDisabled?: boolean;
  /** Whether to disable the selection */
  isDisabled?: boolean;
  /** Additional props forwarded to select rowData */
  props?: any;
}

// Td selection configuration
interface TdSelectType {
  /** The selectable variant */
  variant?: 'checkbox' | 'radio';
  /** Callback on select */
  onSelect?: OnSelect;
  /** Whether the cell is selected */
  isSelected: boolean;
  /** Whether the selection is disabled */
  isDisabled?: boolean;
  /** The row index */
  rowIndex: number;
  /** Additional props forwarded to select rowData */
  props?: any;
}

// Collapse/expand event handler types
type OnCollapse = (
  event: React.MouseEvent,
  rowIndex: number,
  isOpen: boolean,
  rowData: IRowData,
  extraData: IExtraData
) => void;

type OnExpand = (
  event: React.MouseEvent,
  rowIndex: number,
  colIndex: number,
  isOpen: boolean,
  rowData: IRowData,
  extraData: IExtraData
) => void;

// Th expand configuration
interface ThExpandType {
  /** On toggling the expansion */
  onToggle?: OnCollapse;
  /** Whether all are expanded */
  areAllExpanded: boolean;
  /** Alternative aria label */
  collapseAllAriaLabel: string;
}

// Td expand configuration
interface TdExpandType {
  /** Flag indicating the child row associated with this cell is expanded */
  isExpanded: boolean;
  /** The row index */
  rowIndex: number;
  /** The column index */
  columnIndex?: number;
  /** On toggling the expansion */
  onToggle?: OnCollapse;
  /** Id prefix for expandable rows */
  expandId?: string;
}

// Td compound expand configuration
interface TdCompoundExpandType {
  /** Determines if the corresponding expansion row is open */
  isExpanded: boolean;
  /** Callback on toggling of the expansion */
  onToggle?: OnExpand;
  /** Id prefix for expandable cells */
  expandId?: string;
  /** The row index */
  rowIndex?: number;
  /** The column index */
  columnIndex?: number;
}

// Action definitions
interface IAction extends Omit<DropdownItemProps, 'title' | 'onClick'>, Pick<ButtonProps, 'variant'> {
  /** Flag indicating an item on actions menu is a separator */
  isSeparator?: boolean;
  /** Key of actions menu item */
  itemKey?: string;
  /** Content to display in the actions menu item */
  title?: React.ReactNode;
  /** Render item as aria-disabled option */
  isAriaDisabled?: boolean;
  /** Props for adding a tooltip to a menu item */
  tooltipProps?: TooltipProps;
  /** Click handler for the actions menu item */
  onClick?: (event: React.MouseEvent, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void;
  /** Flag indicating this action should be placed outside the actions menu */
  isOutsideDropdown?: boolean;
  /** Flag indicating whether the actions dropdown should close after an item is clicked */
  shouldCloseOnClick?: boolean;
}

interface ISeparator extends IAction {
  isSeparator: boolean;
}

type IActions = (IAction | ISeparator)[];
type IActionsResolver = (rowData: IRowData, extraData: IExtraData) => (IAction | ISeparator)[];
type IAreActionsDisabled = (rowData: IRowData, extraData: IExtraData) => boolean;

// Td actions configuration
interface TdActionsType {
  /** The row index */
  rowIndex?: number;
  /** Cell actions */
  items: IActions;
  /** Whether the actions are disabled */
  isDisabled?: boolean;
  /** Actions dropdown position */
  dropdownPosition?: 'right' | 'left';
  /** Actions dropdown direction */
  dropdownDirection?: 'up' | 'down';
  /** The container to append the dropdown menu to */
  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
  /** Custom toggle for the actions menu */
  actionsToggle?: (props: CustomActionsToggleProps) => React.ReactNode;
}

// Favorite event handler type
type OnFavorite = (
  event: React.MouseEvent,
  isFavorited: boolean,
  rowIndex: number,
  rowData: IRowData,
  extraData: IExtraData
) => void;

// Td favorites configuration
interface TdFavoritesType {
  /** Whether the corresponding row is favorited */
  isFavorited: boolean;
  /** Callback on clicking the favorites button */
  onFavorite?: OnFavorite;
  /** The row index */
  rowIndex?: number;
  /** Additional props forwarded to the FavoritesCell */
  props?: any;
}

// Favorite button props
interface FavoriteButtonProps extends ButtonProps {
  /** Flag if the button is favorited */
  favorited?: boolean;
}

// Data passed to interaction handlers
interface IExtraRowData {
  rowIndex?: number;
  rowKey?: RowKeyType;
  id?: string;
}

interface IExtraColumnData {
  columnIndex?: number;
  column?: IColumn;
  property?: string;
}

interface IExtraData extends IExtraColumnData, IExtraRowData {}

interface IExtra extends IExtraData {
  rowData?: IRowData;
  className?: string;
  ariaLabel?: string;
  tooltip?: React.ReactNode;
  tooltipProps?: Omit<TooltipProps, 'content'>;
  tooltipHasDefaultBehavior?: boolean;
}