Content and Display

/**
 * Text rendering component with tooltip support
 * @param props - TableText configuration props
 * @returns TableText component
 */
function TableText(props: TableTextProps): React.FunctionComponent<TableTextProps>;

interface TableTextProps extends React.HTMLProps<HTMLDivElement> {
  /** Content rendered within the table text */
  children?: React.ReactNode;
  /** Additional classes added to the table text */
  className?: string;
  /** Determines which element to render as a table text */
  variant?: TableTextVariant | 'span' | 'div';
  /** Determines which wrapping modifier to apply to the table text */
  wrapModifier?: WrapModifier | 'wrap' | 'nowrap' | 'truncate' | 'breakWord' | 'fitContent';
  /** Text to display on the tooltip */
  tooltip?: React.ReactNode;
  /** Other props to pass to the tooltip */
  tooltipProps?: Omit<TooltipProps, 'content'>;
  /** Callback used to create the tooltip if text is truncated */
  onMouseEnter?: (event: any) => void;
  /** Determines if the TableText is focused by parent component */
  focused?: boolean;
  /** Determines if tooltip should have normal visibility behavior */
  tooltipHasDefaultBehavior?: boolean;
}

enum TableTextVariant {
  div = 'div',
  nav = 'nav'
}

enum WrapModifier {
  wrap = 'wrap',
  nowrap = 'nowrap',
  truncate = 'truncate',
  breakWord = 'breakWord',
  fitContent = 'fitContent'
}

import { TableText, WrapModifier } from "@patternfly/react-table";

// Basic text with truncation
<Td>
  <TableText wrapModifier="truncate">
    This is a very long text that will be truncated with ellipsis
  </TableText>
</Td>

// Text with custom tooltip
<Td>
  <TableText 
    wrapModifier="truncate"
    tooltip="Full description: This is the complete text content"
  >
    Short text
  </TableText>
</Td>

// Responsive text with break word
<Td>
  <TableText wrapModifier="breakWord">
    ThisIsAVeryLongWordThatNeedsToBreak
  </TableText>
</Td>

// Navigation variant
<Td>
  <TableText variant="nav">
    <a href="/item/123">Item Link</a>
  </TableText>
</Td>

/**
 * Container for expanded row content
 * @param props - ExpandableRowContent configuration props
 * @returns ExpandableRowContent component
 */
function ExpandableRowContent(props: ExpandableRowContentProps): React.FunctionComponent<ExpandableRowContentProps>;

interface ExpandableRowContentProps {
  /** Content rendered inside the expandable row */
  children?: React.ReactNode;
  /** Flag indicating whether the expandable row content has no background */
  hasNoBackground?: boolean;
}

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

// Basic expandable content
<Tr isExpanded={expandedRows.includes(rowIndex)}>
  <Td colSpan={columnCount}>
    <ExpandableRowContent>
      <div>
        <h4>Additional Details</h4>
        <p>This is the expanded content for the row.</p>
      </div>
    </ExpandableRowContent>
  </Td>
</Tr>

// Expandable content without background (when parent Td has noPadding)
<Tr isExpanded={expandedRows.includes(rowIndex)}>
  <Td colSpan={columnCount} noPadding>
    <ExpandableRowContent hasNoBackground>
      <div style={{ padding: '1rem' }}>
        Custom styled expanded content
      </div>
    </ExpandableRowContent>
  </Td>
</Tr>

/**
 * Star/favorite button cell component
 * @param props - FavoritesCell configuration props
 * @returns FavoritesCell component
 */
function FavoritesCell(props: FavoritesCellProps): React.FunctionComponent<FavoritesCellProps>;

interface FavoritesCellProps {
  id?: string;
  className?: string;
  /** Callback when favorite state changes */
  onFavorite?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  /** Whether the item is currently favorited */
  isFavorited?: boolean;
  /** Row index for accessibility labeling */
  rowIndex?: number;
}

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

// Basic favorites cell
<Td>
  <FavoritesCell
    isFavorited={favorites.includes(rowIndex)}
    onFavorite={(event) => toggleFavorite(rowIndex)}
    rowIndex={rowIndex}
  />
</Td>

// Favorites cell with custom styling
<Td>
  <FavoritesCell
    className="custom-favorite-button"
    isFavorited={item.favorited}
    onFavorite={(event) => handleFavoriteChange(item.id, !item.favorited)}
  />
</Td>

/**
 * Wrapper component for header cells with info tooltips or popovers
 * @param props - HeaderCellInfoWrapper configuration props  
 * @returns HeaderCellInfoWrapper component
 */
function HeaderCellInfoWrapper(props: ColumnHelpWrapperProps): React.FunctionComponent<ColumnHelpWrapperProps>;

interface ColumnHelpWrapperProps {
  /** The header cell that is wrapped */
  children: React.ReactNode;
  /** The information that is presented in the tooltip/popover */
  info: React.ReactNode;
  /** Optional classname to add to the tooltip/popover */
  className?: string;
  /** The info variant */
  variant?: 'tooltip' | 'popover';
  /** Additional props forwarded to the Popover component */
  popoverProps?: Omit<PopoverProps, 'bodyContent'>;
  /** Additional props forwarded to the tooltip component */
  tooltipProps?: Omit<TooltipProps, 'content'>;
  /** Aria label of the info button */
  ariaLabel?: string;
}

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

// Header with info tooltip
<Th>
  <HeaderCellInfoWrapper
    info="This column shows the user's current status"
    ariaLabel="Status column information"
  >
    Status
  </HeaderCellInfoWrapper>
</Th>

// Header with info popover
<Th>
  <HeaderCellInfoWrapper
    variant="popover"
    info={
      <div>
        <h4>Status Information</h4>
        <p>This column displays the current status of each user:</p>
        <ul>
          <li>Active - User is currently active</li>
          <li>Inactive - User account is disabled</li>
          <li>Pending - User registration is pending</li>
        </ul>
      </div>
    }
    ariaLabel="Detailed status information"
  >
    Status
  </HeaderCellInfoWrapper>
</Th>

// Tree table row configuration
interface TdTreeRowType {
  /** Callback when user expands/collapses a row to reveal/hide the row's children */
  onCollapse: OnTreeRowCollapse;
  /** Callback when user changes the checkbox on a row */
  onCheckChange?: OnCheckChange;
  /** Callback when user shows/hides the row details in responsive view */
  onToggleRowDetails?: OnToggleRowDetails;
  /** The row index */
  rowIndex?: number;
  /** Additional props forwarded to the title cell of the tree row */
  props?: any;
}

// Tree table event handlers
type OnTreeRowCollapse = (event: any, rowIndex: number, title: React.ReactNode, rowData: IRowData) => void;
type OnToggleRowDetails = (event: any, rowIndex: number, title: React.ReactNode, rowData: IRowData) => void;
type OnCheckChange = (
  event: React.FormEvent<HTMLInputElement>,
  isChecked: boolean,
  rowIndex: number,
  title: React.ReactNode,
  rowData: IRowData
) => void;

// Draggable row configuration
interface TdDraggableType {
  /** Id of the draggable row */
  id: string;
}

// Text and content modifiers available through BaseCellProps
interface BaseCellProps {
  /** Modifies cell to center its contents */
  textCenter?: boolean;
  /** Style modifier to apply */
  modifier?: 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap';
  /** Width percentage modifier */
  width?: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100;
  /** Visibility breakpoint modifiers */
  visibility?: (keyof IVisibility)[];
}

// Visibility breakpoint interface
interface IVisibility {
  hidden?: boolean;
  hiddenOnSm?: boolean;
  hiddenOnMd?: boolean;
  hiddenOnLg?: boolean;
  hiddenOnXl?: boolean;
  hiddenOn2Xl?: boolean;
  visibleOnSm?: boolean;
  visibleOnMd?: boolean;
  visibleOnLg?: boolean;
  visibleOnXl?: boolean;
  visibleOn2Xl?: boolean;
}

// Header cell info configuration
interface ThInfoType {
  /** Tooltip content */
  tooltip?: React.ReactNode;
  /** Additional tooltip properties */
  tooltipProps?: Omit<TooltipProps, 'content'>;
  /** Popover content */
  popover?: React.ReactNode;
  /** Additional popover properties */
  popoverProps?: Omit<PopoverProps, 'bodyContent'>;
  /** Accessible label for the info button */
  ariaLabel?: string;
  /** Additional CSS classes */
  className?: string;
}

// Header with info tooltip
<Th
  info={{
    tooltip: "This column shows the user's current status",
    ariaLabel: "Status column information"
  }}
>
  Status
</Th>

// Header with info popover
<Th
  info={{
    popover: (
      <div>
        <h4>Status Information</h4>
        <p>This column displays the current status of each user:</p>
        <ul>
          <li>Active - User is currently active</li>
          <li>Inactive - User account is disabled</li>
          <li>Pending - User registration is pending</li>
        </ul>
      </div>
    ),
    ariaLabel: "Detailed status information"
  }}
>
  Status
</Th>