Core Table Structure

/**
 * Main table container component with accessibility and responsive features
 * @param props - Table configuration props
 * @returns Forwarded ref table element
 */
function Table(props: TableProps): React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;

interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps {
  /** Adds an accessible name for the Table */
  'aria-label'?: string;
  /** Content rendered inside the Table */
  children?: React.ReactNode;
  /** Additional classes added to the Table */
  className?: string;
  /** Style variant for the Table. 'compact' reduces spacing */
  variant?: TableVariant | 'compact';
  /** Render borders (default: true) */
  borders?: boolean;
  /** Specifies the grid breakpoints (default: 'grid-md') */
  gridBreakPoint?: '' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl';
  /** A valid WAI-ARIA role to be applied to the table element (default: 'grid') */
  role?: string;
  /** If set to true, the table header sticks to the top of its container */
  isStickyHeader?: boolean;
  /** Flag indicating table is a tree table */
  isTreeTable?: boolean;
  /** Flag indicating this table is nested within another table */
  isNested?: boolean;
  /** Flag indicating this table should be striped */
  isStriped?: boolean;
  /** Flag indicating this table contains expandable rows */
  isExpandable?: boolean;
  /** Flag indicating whether expandable rows have animations */
  hasAnimations?: boolean;
  /** Flag indicating rows will not have inset for expanding/collapsing in tree tables */
  hasNoInset?: boolean;
  /** Collection of column spans for nested headers (deprecated) */
  nestedHeaderColumnSpans?: number[];
  /** Visible text to add alongside the hidden a11y caption for tables with selectable rows */
  selectableRowCaptionText?: string;
  /** Value to overwrite the randomly generated data-ouia-component-id */
  ouiaId?: number | string;
  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state */
  ouiaSafe?: boolean;
}

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

// Basic table
<Table aria-label="Simple table">
  {/* table content */}
</Table>

// Compact striped table with sticky header
<Table 
  aria-label="Data table"
  variant="compact"
  isStriped
  isStickyHeader
  borders={false}
>
  {/* table content */}
</Table>

// Tree table with animations
<Table 
  aria-label="Tree table"
  isTreeTable
  isExpandable
  hasAnimations
  gridBreakPoint="grid-lg"
>
  {/* tree table content */}
</Table>

/**
 * Table header group component
 * @param props - Thead configuration props
 * @returns Forwarded ref thead element
 */
function Thead(props: TheadProps): React.ForwardRefExoticComponent<TheadProps & React.RefAttributes<HTMLTableSectionElement>>;

interface TheadProps extends React.HTMLProps<HTMLTableSectionElement> {
  /** Content rendered inside the <thead> row group */
  children?: React.ReactNode;
  /** Additional classes added to the <thead> element */
  className?: string;
  /** Won't wrap the table head if true */
  noWrap?: boolean;
  /** Indicates the <thead> contains a nested header */
  hasNestedHeader?: boolean;
}

/**
 * Table body group component
 * @param props - Tbody configuration props
 * @returns Forwarded ref tbody element
 */
function Tbody(props: TbodyProps): React.ForwardRefExoticComponent<TbodyProps & React.RefAttributes<HTMLTableSectionElement>>;

interface TbodyProps extends React.HTMLProps<HTMLTableSectionElement> {
  /** Content rendered inside the <tbody> row group */
  children?: React.ReactNode;
  /** Additional classes added to the <tbody> element */
  className?: string;
  /** Modifies the body to allow for expandable rows */
  isExpanded?: boolean;
  /** Flag indicating the <tbody> contains oddly striped rows */
  isOddStriped?: boolean;
  /** Flag indicating the <tbody> contains evenly striped rows */
  isEvenStriped?: boolean;
}

/**
 * Table row component with interaction support
 * @param props - Tr configuration props
 * @returns Forwarded ref tr element
 */
function Tr(props: TrProps): React.ForwardRefExoticComponent<TrProps & React.RefAttributes<HTMLTableRowElement>>;

interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onResize'>, OUIAProps {
  /** Content rendered inside the <tr> row */
  children?: React.ReactNode;
  /** Additional classes added to the <tr> row */
  className?: string;
  /** Flag indicating the Tr is hidden */
  isHidden?: boolean;
  /** Flag indicating whether an "expandable" Tr is expanded or not */
  isExpanded?: boolean;
  /** Flag indicating that the "control row" Tr has an expandable sibling Tr that is expanded */
  isContentExpanded?: boolean;
  /** Whether the row is editable */
  isEditable?: boolean;
  /** Flag which adds hover styles for the clickable table row */
  isClickable?: boolean;
  /** Flag indicating the row is selected - adds selected styling */
  isRowSelected?: boolean;
  /** Flag indicating the row is striped */
  isStriped?: boolean;
  /** Flag indicating the row will act as a border */
  isBorderRow?: boolean;
  /** Flag indicating the row is controlling the expansion of another row */
  isControlRow?: boolean;
  /** An event handler for the row */
  onRowClick?: (event?: React.KeyboardEvent | React.MouseEvent) => void;
  /** Flag indicating that the row is selectable */
  isSelectable?: boolean;
  /** Flag indicating the spacing offset of the first cell should be reset */
  resetOffset?: boolean;
  /** Value to overwrite the randomly generated data-ouia-component-id */
  ouiaId?: number | string;
  /** Set the value of data-ouia-safe */
  ouiaSafe?: boolean;
}

/**
 * Table header cell component with interactive features
 * @param props - Th configuration props
 * @returns Forwarded ref th element
 */
function Th(props: ThProps): React.ForwardRefExoticComponent<ThProps & React.RefAttributes<HTMLTableHeaderCellElement>>;

interface ThProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableHeaderCellElement>, 'onSelect' | 'width'> {
  /** The column header the cell corresponds to for mobile viewport */
  dataLabel?: string;
  /** Renders a checkbox select so that all row checkboxes can be selected/deselected */
  select?: ThSelectType;
  /** Renders a chevron so that all row chevrons can be expanded/collapsed */
  expand?: ThExpandType;
  /** Formats the header so that its column will be sortable */
  sort?: ThSortType;
  /** Tooltip to show on the header cell */
  tooltip?: React.ReactNode;
  /** Other props to pass to the tooltip */
  tooltipProps?: Omit<TooltipProps, 'content'>;
  /** Callback on mouse enter */
  onMouseEnter?: (event: any) => void;
  /** Adds tooltip/popover info button */
  info?: ThInfoType;
  /** Adds scope to the column to associate header cells with data cells */
  scope?: string;
  /** Indicates the header column should be sticky */
  isStickyColumn?: boolean;
  /** Adds a border to the right side of the cell */
  hasRightBorder?: boolean;
  /** Adds a border to the left side of the cell */
  hasLeftBorder?: boolean;
  /** Minimum width for a sticky column */
  stickyMinWidth?: string;
  /** Left offset of a sticky column */
  stickyLeftOffset?: string;
  /** Right offset of a sticky column */
  stickyRightOffset?: string;
  /** Indicates the <th> is part of a subheader of a nested header */
  isSubheader?: boolean;
  /** Visually hidden text accessible only via assistive technologies */
  screenReaderText?: string;
  /** Provides an accessible name to the th when it contains only non-text content */
  'aria-label'?: string;
}

/**
 * Table data cell component with interactive features
 * @param props - Td configuration props
 * @returns Forwarded ref td element
 */
function Td(props: TdProps): React.ForwardRefExoticComponent<TdProps & React.RefAttributes<HTMLTableDataCellElement>>;

interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDataCellElement>, 'onSelect' | 'width'> {
  /** The column header the cell corresponds to for mobile viewport */
  dataLabel?: string;
  /** Renders a checkbox or radio select */
  select?: TdSelectType;
  /** Turns the cell into an actions cell */
  actions?: TdActionsType;
  /** Indicates the cell contains an interactive element */
  hasAction?: boolean;
  /** Turns the cell into an expansion toggle */
  expand?: TdExpandType;
  /** Turns the cell into a compound expansion toggle */
  compoundExpand?: TdCompoundExpandType;
  /** Turns the cell into a favorites cell with a star button */
  favorites?: TdFavoritesType;
  /** Turns the cell into the first cell in a tree table row */
  treeRow?: TdTreeRowType;
  /** Turns the cell into the first cell in a draggable row */
  draggableRow?: TdDraggableType;
  /** True to remove padding */
  noPadding?: boolean;
  /** Applies pf-v6-c-table__action to td */
  isActionCell?: boolean;
  /** Tooltip to show on the body cell */
  tooltip?: React.ReactNode;
  /** Callback on mouse enter */
  onMouseEnter?: (event: any) => void;
  /** Indicates the column should be sticky */
  isStickyColumn?: boolean;
  /** Adds a border to the right side of the cell */
  hasRightBorder?: boolean;
  /** Adds a border to the left side of the cell */
  hasLeftBorder?: boolean;
  /** Minimum width for a sticky column */
  stickyMinWidth?: string;
  /** Left offset of a sticky column */
  stickyLeftOffset?: string;
  /** Right offset of a sticky column */
  stickyRightOffset?: string;
}

/**
 * Table caption component
 * @param props - Caption configuration props
 * @returns Caption element
 */
function Caption(props: CaptionProps): React.FunctionComponent<CaptionProps>;

interface CaptionProps {
  /** Content rendered inside the caption */
  children?: React.ReactNode;
  /** Additional classes added to the caption */
  className?: string;
}

// Base props shared by Th and Td components
interface BaseCellProps {
  /** Content rendered inside the cell */
  children?: React.ReactNode;
  /** Additional classes added to the cell */
  className?: string;
  /** Element to render */
  component?: React.ReactNode;
  /** 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)[];
  /** Forwarded ref */
  innerRef?: React.Ref<any>;
}

// Table context for sharing state
interface TableContextProps {
  registerSelectableRow?: () => void;
  hasAnimations?: boolean;
  variant?: TableVariant | 'compact';
}

enum TableVariant {
  compact = 'compact'
}

enum TableGridBreakpoint {
  none = '',
  grid = 'grid',
  gridMd = 'grid-md',
  gridLg = 'grid-lg',
  gridXl = 'grid-xl',
  grid2xl = 'grid-2xl'
}