Layout and Scrolling

/**
 * Outer wrapper for scrollable tables
 * @param props - OuterScrollContainer configuration props
 * @returns OuterScrollContainer component
 */
function OuterScrollContainer(props: OuterScrollContainerProps): React.FunctionComponent<OuterScrollContainerProps>;

interface OuterScrollContainerProps extends React.HTMLProps<HTMLDivElement> {
  /** Content rendered inside the outer scroll container */
  children?: React.ReactNode;
  /** Additional classes added to the container */
  className?: string;
}

/**
 * Inner wrapper for scrollable tables
 * @param props - InnerScrollContainer configuration props
 * @returns InnerScrollContainer component
 */
function InnerScrollContainer(props: InnerScrollContainerProps): React.FunctionComponent<InnerScrollContainerProps>;

interface InnerScrollContainerProps extends React.HTMLProps<HTMLDivElement> {
  /** Content rendered inside the inner scroll container */
  children?: React.ReactNode;
  /** Additional classes added to the container */
  className?: string;
}

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

// Scrollable table setup
<OuterScrollContainer>
  <InnerScrollContainer>
    <Table aria-label="Scrollable table">
      {/* table content */}
    </Table>
  </InnerScrollContainer>
</OuterScrollContainer>

// Scrollable table with custom styling
<OuterScrollContainer className="custom-outer-scroll">
  <InnerScrollContainer className="custom-inner-scroll">
    <Table 
      aria-label="Data table"
      isStickyHeader
      gridBreakPoint="grid-lg"
    >
      {/* table content with sticky headers */}
    </Table>
  </InnerScrollContainer>
</OuterScrollContainer>

/**
 * Row wrapper with scroll and resize event handling
 * @param props - RowWrapper configuration props
 * @returns RowWrapper component
 */
class RowWrapper extends React.Component<RowWrapperProps> {
  static displayName: string;
  static defaultProps: Partial<RowWrapperProps>;
}

interface RowWrapperProps extends OUIAProps {
  children?: React.ReactNode;
  /** Ref to forward to the table row */
  trRef?: React.Ref<any> | Function;
  className?: string;
  /** Scroll event handler */
  onScroll?: React.UIEventHandler;
  /** Resize event handler */
  onResize?: React.UIEventHandler;
  /** Row data */
  row?: IRow;
  /** Row properties */
  rowProps?: {
    rowIndex: number;
    rowKey: string;
  };
  /** Value to set the data-ouia-component-id */
  ouiaId?: number | string;
}

// Legacy interface for row data
interface RowWrapperRow {
  isOpen?: boolean;
  isExpanded?: boolean;
  isEditable?: boolean;
}

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

// Row wrapper with scroll handling
<RowWrapper
  onScroll={(event) => handleRowScroll(event)}
  onResize={(event) => handleRowResize(event)}
  row={{
    isExpanded: expandedRows.includes(rowIndex),
    isEditable: editableRows.includes(rowIndex),
    isClickable: true
  }}
  rowProps={{
    rowIndex,
    rowKey: `row-${rowIndex}`
  }}
>
  <Td>Row content</Td>
</RowWrapper>

// Row wrapper for responsive tables
<RowWrapper
  className="responsive-row"
  onResize={(event) => {
    // Handle responsive layout changes
    updateResponsiveLayout(event);
  }}
  row={rowData}
>
  {/* row cells */}
</RowWrapper>

/**
 * Specialized row wrapper for tree tables
 * @param props - TreeRowWrapper configuration props
 * @returns TreeRowWrapper component
 */
function TreeRowWrapper(props: RowWrapperProps): React.FunctionComponent<RowWrapperProps>;

// Uses the same RowWrapperProps interface as RowWrapper
// but expects specific row.props for tree functionality:
interface TreeRowProps {
  'aria-level'?: number;
  'aria-posinset'?: number;
  'aria-setsize'?: number;
  isExpanded?: boolean;
  isDetailsExpanded?: boolean;
  isHidden?: boolean;
}

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

// Tree row with hierarchy information
<TreeRowWrapper
  row={{
    props: {
      'aria-level': 2,           // Nesting level in tree
      'aria-posinset': 1,        // Position within siblings
      'aria-setsize': 3,         // Total number of siblings
      isExpanded: true,          // Whether node is expanded
      isDetailsExpanded: false,  // Whether details are expanded
      isHidden: false            // Whether row is hidden
    }
  }}
  className="tree-row"
>
  <Td>Folder Name</Td>
  <Td>Directory</Td>
</TreeRowWrapper>

// Collapsed tree node
<TreeRowWrapper
  row={{
    props: {
      'aria-level': 1,
      'aria-posinset': 2,
      'aria-setsize': 5,
      isExpanded: false,
      isHidden: false
    }
  }}
>
  <Td>Root Folder</Td>
  <Td>3 items</Td>
</TreeRowWrapper>

// Table with sticky header
<Table isStickyHeader aria-label="Table with sticky header">
  <Thead>
    <Tr>
      <Th>Column 1</Th>
      <Th>Column 2</Th>
    </Tr>
  </Thead>
  <Tbody>
    {/* table rows */}
  </Tbody>
</Table>

// Sticky column configuration
interface StickyColumnProps {
  /** Indicates the column should be sticky */
  isStickyColumn: 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;
  /** Adds a border to the right side of the cell */
  hasRightBorder?: boolean;
  /** Adds a border to the left side of the cell */
  hasLeftBorder?: boolean;
}

// Left sticky column
<Th 
  isStickyColumn
  stickyMinWidth="150px"
  stickyLeftOffset="0px"
  hasRightBorder
>
  Name
</Th>

// Multiple sticky columns
<Thead>
  <Tr>
    <Th 
      isStickyColumn
      stickyMinWidth="120px"
      stickyLeftOffset="0px"
      hasRightBorder
    >
      ID
    </Th>
    <Th 
      isStickyColumn
      stickyMinWidth="150px"
      stickyLeftOffset="120px"
      hasRightBorder
    >
      Name
    </Th>
    <Th>Description</Th>
    <Th 
      isStickyColumn
      stickyMinWidth="100px"
      stickyRightOffset="0px"
      hasLeftBorder
    >
      Actions
    </Th>
  </Tr>
</Thead>

// Corresponding sticky data cells
<Tbody>
  <Tr>
    <Td 
      isStickyColumn
      stickyMinWidth="120px"
      stickyLeftOffset="0px"
      hasRightBorder
    >
      001
    </Td>
    <Td 
      isStickyColumn
      stickyMinWidth="150px"
      stickyLeftOffset="120px"
      hasRightBorder
    >
      John Doe
    </Td>
    <Td>Description content</Td>
    <Td 
      isStickyColumn
      stickyMinWidth="100px"
      stickyRightOffset="0px"
      hasLeftBorder
    >
      <ActionsColumn items={actions} />
    </Td>
  </Tr>
</Tbody>

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

// Table responsive configuration
<Table 
  gridBreakPoint="grid-lg"
  aria-label="Responsive table"
>
  {/* table content */}
</Table>

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

// Responsive column visibility
<Thead>
  <Tr>
    <Th>Name</Th>
    <Th 
      visibility={['hiddenOnSm', 'hiddenOnMd']}
    >
      Description
    </Th>
    <Th 
      visibility={['visibleOnLg', 'visibleOnXl']}
    >
      Additional Info
    </Th>
    <Th>Actions</Th>
  </Tr>
</Thead>

// Responsive cell content
<Tbody>
  <Tr>
    <Td dataLabel="Name">John Doe</Td>
    <Td 
      dataLabel="Description"
      visibility={['hiddenOnSm', 'hiddenOnMd']}
    >
      Software Developer
    </Td>
    <Td 
      dataLabel="Additional Info"
      visibility={['visibleOnLg', 'visibleOnXl']}
    >
      Senior level, 5 years experience
    </Td>
    <Td dataLabel="Actions">
      <ActionsColumn items={actions} />
    </Td>
  </Tr>
</Tbody>

// Tree table configuration
<Table 
  isTreeTable
  hasNoInset={!hasVisibleChildren}
  gridBreakPoint="grid-lg"
  aria-label="Tree table"
>
  <Thead>
    <Tr>
      <Th>File Name</Th>
      <Th>Size</Th>
      <Th>Modified</Th>
    </Tr>
  </Thead>
  <Tbody>
    {/* tree table rows with hierarchy */}
  </Tbody>
</Table>

// Nested table configuration
<Table 
  isNested
  borders={false}
  aria-label="Nested table"
>
  {/* nested table content */}
</Table>

// Expandable table with animations
<Table 
  isExpandable
  hasAnimations
  aria-label="Expandable table"
>
  <Tbody>
    <Tr isExpanded={expandedRows.includes(0)}>
      <Td>Row content</Td>
    </Tr>
    <Tr isExpanded={expandedRows.includes(0)}>
      <Td colSpan={columnCount}>
        <ExpandableRowContent>
          Expanded content
        </ExpandableRowContent>
      </Td>
    </Tr>
  </Tbody>
</Table>

// Width options for cells
type CellWidth = 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100;

// Text modifiers for content control
type TextModifier = 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap';

// Column width control
<Th width={25}>Name</Th>
<Th width={50} modifier="truncate">Description</Th>
<Th width={15}>Status</Th>
<Th width={10}>Actions</Th>

// Content fitting
<Td modifier="fitContent">
  <Button>Action</Button>
</Td>
<Td modifier="breakWord">
  very-long-url-that-needs-to-break@example.com
</Td>

// Border controls
<Table borders={false}>  {/* Remove all borders */}
<Th hasRightBorder>     {/* Add right border */}
<Th hasLeftBorder>      {/* Add left border */}

// Spacing controls
<Td noPadding>          {/* Remove cell padding */}
<Tr resetOffset>        {/* Reset first cell offset */}

// Table-level striping
<Table isStriped>
  {/* All rows will be striped */}
</Table>

// Body-level striping
<Tbody isOddStriped>
  {/* Odd rows in this tbody will be striped */}
</Tbody>
<Tbody isEvenStriped>
  {/* Even rows in this tbody will be striped */}
</Tbody>

// Row-level striping
<Tr isStriped>
  {/* This specific row will be striped */}
</Tr>