@patternfly/react-docs 7.6.0-prerelease.8 → 7.6.0-prerelease.9

package/patternfly-docs/generated/components/table/react.js

@@ -1,3241 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { Fragment, isValidElement, useCallback, useEffect, useRef, useState, useLayoutEffect } from 'react';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
-import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import LeafIcon from '@patternfly/react-icons/dist/esm/icons/leaf-icon';
-import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
-import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
-import RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';
-import RhUiBlueprintIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-blueprint-icon';
-import RhUiEditFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-edit-fill-icon';
-import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Table/table';
-import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
-import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
-import inlineEditStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
-import t_global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/t_global_background_color_secondary_default';
-const pageData = {
-  "id": "Table",
-  "section": "components",
-  "subsection": "",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react",
-  "tabName": null,
-  "slug": "/components/table/react",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-table/src/components/Table/examples/Table.md",
-  "relPath": "packages/react-table/src/components/Table/examples/Table.md",
-  "propComponents": [
-    {
-      "name": "Table",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Adds an accessible name for the Table"
-        },
-        {
-          "name": "borders",
-          "type": "boolean",
-          "description": "Render borders"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the Table"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the Table"
-        },
-        {
-          "name": "gridBreakPoint",
-          "type": "'' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl'",
-          "description": "Specifies the grid breakpoints"
-        },
-        {
-          "name": "hasAnimations",
-          "type": "boolean",
-          "description": "Flag indicating whether expandable rows within the table have animations. Expandable rows cannot be dynamically rendered. This prop\nwill be removed in the next breaking change, with the default behavior becoming animations always being enabled.",
-          "beta": true
-        },
-        {
-          "name": "hasNoInset",
-          "type": "boolean",
-          "description": "Flag indicating this table's rows will not have the inset typically reserved for expanding/collapsing rows in a tree table. Intended for use on tree tables with no visible rows with children."
-        },
-        {
-          "name": "isExpandable",
-          "type": "boolean",
-          "description": "Flag indicating this table contains expandable rows."
-        },
-        {
-          "name": "isNested",
-          "type": "boolean",
-          "description": "Flag indicating this table is nested within another table"
-        },
-        {
-          "name": "isNoPlainOnGlass",
-          "type": "boolean",
-          "description": "Flag indicating if the table should not have plain styling when in the glass theme",
-          "beta": true
-        },
-        {
-          "name": "isPlain",
-          "type": "boolean",
-          "description": "Flag indicating if the table should have plain styling with a transparent background",
-          "beta": true
-        },
-        {
-          "name": "isStickyHeader",
-          "type": "boolean",
-          "description": "If set to true, the table header sticks to the top of its container. This property applies both the sticky position and styling."
-        },
-        {
-          "name": "isStickyHeaderBase",
-          "type": "boolean",
-          "description": "Flag indicating the table header should have sticky positioning to the top of the parent InnerScrollContainer.",
-          "beta": true
-        },
-        {
-          "name": "isStickyHeaderStuck",
-          "type": "boolean",
-          "description": "Flag indicating the table header should have stuck styling, when the header is not at the top of the scroll container.",
-          "beta": true
-        },
-        {
-          "name": "isStriped",
-          "type": "boolean",
-          "description": "Flag indicating this table should be striped. This property works best for a single <tbody> table. Striping may also be done manually by applying this property to Tbody and Tr components."
-        },
-        {
-          "name": "isTreeTable",
-          "type": "boolean",
-          "description": "Flag indicating table is a tree table"
-        },
-        {
-          "name": "nestedHeaderColumnSpans",
-          "type": "number[]",
-          "description": "Collection of column spans for nested headers. Deprecated: see https://github.com/patternfly/patternfly/issues/4584"
-        },
-        {
-          "name": "ouiaId",
-          "type": "number | string",
-          "description": "Value to overwrite the randomly generated data-ouia-component-id."
-        },
-        {
-          "name": "ouiaSafe",
-          "type": "boolean",
-          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
-        },
-        {
-          "name": "role",
-          "type": "string",
-          "description": "A valid WAI-ARIA role to be applied to the table element"
-        },
-        {
-          "name": "selectableRowCaptionText",
-          "type": "string",
-          "description": "Visible text to add alongside the hidden a11y caption for tables with selectable rows."
-        },
-        {
-          "name": "variant",
-          "type": "TableVariant | 'compact'",
-          "description": "Style variant for the Table\ncompact: Reduces spacing and makes the table more compact"
-        }
-      ]
-    },
-    {
-      "name": "Thead",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the <thead> row group"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the <thead> element"
-        },
-        {
-          "name": "hasNestedHeader",
-          "type": "boolean",
-          "description": "Indicates the <thead> contains a nested header"
-        },
-        {
-          "name": "noWrap",
-          "type": "boolean",
-          "description": "Won't wrap the table head if true"
-        }
-      ]
-    },
-    {
-      "name": "Tbody",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the <tbody> row group"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the <tbody> element"
-        },
-        {
-          "name": "isEvenStriped",
-          "type": "boolean",
-          "description": "Flag indicating the <tbody> contains evenly striped rows."
-        },
-        {
-          "name": "isExpanded",
-          "type": "boolean",
-          "description": "Modifies the body to allow for expandable rows"
-        },
-        {
-          "name": "isOddStriped",
-          "type": "boolean",
-          "description": "Flag indicating the <tbody> contains oddly striped rows."
-        }
-      ]
-    },
-    {
-      "name": "Tr",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the <tr> row"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the <tr> row"
-        },
-        {
-          "name": "isBorderRow",
-          "type": "boolean",
-          "description": "Flag indicating the row will act as a border. This is typically used for a table with a nested and sticky header."
-        },
-        {
-          "name": "isClickable",
-          "type": "boolean",
-          "description": "Flag which adds hover styles for the clickable table row"
-        },
-        {
-          "name": "isContentExpanded",
-          "type": "boolean",
-          "description": "Flag indicating that the \"control row\" Tr has an expandable sibling Tr that is expanded or not. Only applicable to\na Tr within a Tbody, and should have the same value as an expandable Tr's isExpanded prop."
-        },
-        {
-          "name": "isControlRow",
-          "type": "boolean",
-          "description": "Flag indicating the row is controlling the expansion of another row."
-        },
-        {
-          "name": "isEditable",
-          "type": "boolean",
-          "description": "Only applicable to Tr within the Tbody: Whether the row is editable"
-        },
-        {
-          "name": "isExpanded",
-          "type": "boolean",
-          "description": "Flag indicating whether an \"expandable\" Tr is expanded or not. Only applicable to a Tr within a Tbody.\nTo prevent column widths from responding automatically when expandable rows are toggled, the width prop must also be passed into either the th or td component"
-        },
-        {
-          "name": "isHidden",
-          "type": "boolean",
-          "description": "Flag indicating the Tr is hidden"
-        },
-        {
-          "name": "isRowSelected",
-          "type": "boolean",
-          "description": "Flag indicating the row is selected - adds selected styling"
-        },
-        {
-          "name": "isSelectable",
-          "type": "boolean",
-          "description": "Flag indicating that the row is selectable"
-        },
-        {
-          "name": "isStriped",
-          "type": "boolean",
-          "description": "Flag indicating the row is striped"
-        },
-        {
-          "name": "onRowClick",
-          "type": "(event?: React.KeyboardEvent | React.MouseEvent) => void",
-          "description": "An event handler for the row"
-        },
-        {
-          "name": "ouiaId",
-          "type": "number | string",
-          "description": "Value to overwrite the randomly generated data-ouia-component-id."
-        },
-        {
-          "name": "ouiaSafe",
-          "type": "boolean",
-          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
-        },
-        {
-          "name": "resetOffset",
-          "type": "boolean",
-          "description": "Flag indicating the spacing offset of the first cell should be reset"
-        }
-      ]
-    },
-    {
-      "name": "Th",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Provides an accessible name to the th. This should only be passed in when the th contains only non-text\ncontent, such as a \"select all\" checkbox or \"expand all\" toggle."
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the cell"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the cell"
-        },
-        {
-          "name": "component",
-          "type": "React.ReactNode",
-          "description": "Element to render"
-        },
-        {
-          "name": "dataLabel",
-          "type": "string",
-          "description": "The column header the cell corresponds to. Applicable when this component is used as a direct child to <Tr>.\nThis attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element."
-        },
-        {
-          "name": "expand",
-          "type": "ThExpandType",
-          "description": "Renders a chevron so that all row chevrons can be expanded/collapsed"
-        },
-        {
-          "name": "hasLeftBorder",
-          "type": "boolean",
-          "description": "Adds a border to the left side of the cell"
-        },
-        {
-          "name": "hasRightBorder",
-          "type": "boolean",
-          "description": "Adds a border to the right side of the cell"
-        },
-        {
-          "name": "info",
-          "type": "ThInfoType",
-          "description": "Adds tooltip/popover info button"
-        },
-        {
-          "name": "isStickyColumn",
-          "type": "boolean",
-          "description": "Indicates the header column should be sticky"
-        },
-        {
-          "name": "isSubheader",
-          "type": "boolean",
-          "description": "Indicates the <th> is part of a subheader of a nested header"
-        },
-        {
-          "name": "modifier",
-          "type": "'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap'",
-          "description": "Style modifier to apply"
-        },
-        {
-          "name": "onMouseEnter",
-          "type": "(event: any) => void",
-          "description": "Callback on mouse enter"
-        },
-        {
-          "name": "scope",
-          "type": "string",
-          "description": "Adds scope to the column to associate header cells with data cells"
-        },
-        {
-          "name": "screenReaderText",
-          "type": "string",
-          "description": "Visually hidden text accessible only via assistive technologies. This must be passed in if the\nth is intended to be visually empty, and must be conveyed as a column header text."
-        },
-        {
-          "name": "select",
-          "type": "ThSelectType",
-          "description": "Renders a checkbox select so that all row checkboxes can be selected/deselected"
-        },
-        {
-          "name": "sort",
-          "type": "ThSortType",
-          "description": "Formats the header so that its column will be sortable"
-        },
-        {
-          "name": "stickyLeftOffset",
-          "type": "string",
-          "description": "Left offset of a sticky column. This will typically be equal to the combined value set by stickyMinWidth of any sticky columns that precede the current sticky column."
-        },
-        {
-          "name": "stickyMinWidth",
-          "type": "string",
-          "description": "Minimum width for a sticky column"
-        },
-        {
-          "name": "stickyRightOffset",
-          "type": "string",
-          "description": "Right offset of a sticky column. This will typically be equal to the combined value set by stickyMinWidth of any sticky columns that come after the current sticky column."
-        },
-        {
-          "name": "textCenter",
-          "type": "boolean",
-          "description": "Modifies cell to center its contents."
-        },
-        {
-          "name": "tooltip",
-          "type": "React.ReactNode",
-          "description": "Tooltip to show on the header cell.\nNote: If the header cell is truncated and has simple string content, it will already attempt to display the header text.\nIf you want to show a tooltip that differs from the header text, you can set it here.\nTo disable it completely you can set it to null."
-        },
-        {
-          "name": "tooltipProps",
-          "type": "Omit<TooltipProps, 'content'>",
-          "description": "other props to pass to the tooltip"
-        },
-        {
-          "name": "visibility",
-          "type": "(keyof IVisibility)[]",
-          "description": "Visibility breakpoint modifiers"
-        },
-        {
-          "name": "width",
-          "type": "10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100",
-          "description": "Width percentage modifier"
-        }
-      ]
-    },
-    {
-      "name": "Td",
-      "description": "",
-      "props": [
-        {
-          "name": "actions",
-          "type": "TdActionsType",
-          "description": "Turns the cell into an actions cell. Recommended to use an ActionsColumn component as a child of the Td rather than this prop."
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the cell"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the cell"
-        },
-        {
-          "name": "component",
-          "type": "React.ReactNode",
-          "description": "Element to render"
-        },
-        {
-          "name": "compoundExpand",
-          "type": "TdCompoundExpandType",
-          "description": "Turns the cell into a compound expansion toggle"
-        },
-        {
-          "name": "dataLabel",
-          "type": "string",
-          "description": "The column header the cell corresponds to.\nThis attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element."
-        },
-        {
-          "name": "draggableRow",
-          "type": "TdDraggableType",
-          "description": "Turns the cell into the first cell in a draggable row"
-        },
-        {
-          "name": "expand",
-          "type": "TdExpandType",
-          "description": "Turns the cell into an expansion toggle and determines if the corresponding expansion row is open"
-        },
-        {
-          "name": "favorites",
-          "type": "TdFavoritesType",
-          "description": "Turns the cell into a favorites cell with a star button"
-        },
-        {
-          "name": "hasAction",
-          "type": "boolean",
-          "description": "Indicates the cell contains an interactive element and prevents that element's padding from increasing row height. Recommended when other cells in the same row contains text."
-        },
-        {
-          "name": "hasLeftBorder",
-          "type": "boolean",
-          "description": "Adds a border to the left side of the cell"
-        },
-        {
-          "name": "hasRightBorder",
-          "type": "boolean",
-          "description": "Adds a border to the right side of the cell"
-        },
-        {
-          "name": "isActionCell",
-          "type": "boolean",
-          "description": "Applies pf-v6-c-table__action to td"
-        },
-        {
-          "name": "isStickyColumn",
-          "type": "boolean",
-          "description": "Indicates the column should be sticky"
-        },
-        {
-          "name": "modifier",
-          "type": "'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap'",
-          "description": "Style modifier to apply"
-        },
-        {
-          "name": "noPadding",
-          "type": "boolean",
-          "description": "True to remove padding"
-        },
-        {
-          "name": "onMouseEnter",
-          "type": "(event: any) => void",
-          "description": "Callback on mouse enter"
-        },
-        {
-          "name": "select",
-          "type": "TdSelectType",
-          "description": "Renders a checkbox or radio select"
-        },
-        {
-          "name": "stickyLeftOffset",
-          "type": "string",
-          "description": "Left offset of a sticky column. This will typically be equal to the combined value set by stickyMinWidth of any sticky columns that precede the current sticky column."
-        },
-        {
-          "name": "stickyMinWidth",
-          "type": "string",
-          "description": "Minimum width for a sticky column"
-        },
-        {
-          "name": "stickyRightOffset",
-          "type": "string",
-          "description": "Right offset of a sticky column. This will typically be equal to the combined value set by stickyMinWidth of any sticky columns that come after the current sticky column."
-        },
-        {
-          "name": "textCenter",
-          "type": "boolean",
-          "description": "Modifies cell to center its contents."
-        },
-        {
-          "name": "tooltip",
-          "type": "React.ReactNode",
-          "description": "Tooltip to show on the body cell.\nNote: If the body cell is truncated and has simple string content, it will already attempt to display the cell text.\nIf you want to show a tooltip that differs from the cell text, you can set it here.\nTo disable it completely you can set it to null."
-        },
-        {
-          "name": "treeRow",
-          "type": "TdTreeRowType",
-          "description": "Turns the cell into the first cell in a tree table row"
-        },
-        {
-          "name": "visibility",
-          "type": "(keyof IVisibility)[]",
-          "description": "Visibility breakpoint modifiers"
-        },
-        {
-          "name": "width",
-          "type": "10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100",
-          "description": "Width percentage modifier"
-        }
-      ]
-    },
-    {
-      "name": "Caption",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the caption"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the caption"
-        }
-      ]
-    },
-    {
-      "name": "TableText",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered within the table text",
-          "defaultValue": "null"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the table text",
-          "defaultValue": "''"
-        },
-        {
-          "name": "focused",
-          "type": "boolean",
-          "description": "Determines if the TableText is focused by parent component",
-          "defaultValue": "false"
-        },
-        {
-          "name": "onMouseEnter",
-          "type": "(event: any) => void",
-          "description": "callback used to create the tooltip if text is truncated",
-          "defaultValue": "() => {}"
-        },
-        {
-          "name": "tooltip",
-          "type": "React.ReactNode",
-          "description": "text to display on the tooltip",
-          "defaultValue": "''"
-        },
-        {
-          "name": "tooltipHasDefaultBehavior",
-          "type": "boolean",
-          "description": "Determines if tooltip should have normal visibility behavior. If false, the tooltip will only be shown when children is not entirely visible",
-          "defaultValue": "false"
-        },
-        {
-          "name": "tooltipProps",
-          "type": "Omit<TooltipProps, 'content'>",
-          "description": "other props to pass to the tooltip",
-          "defaultValue": "{}"
-        },
-        {
-          "name": "variant",
-          "type": "TableTextVariant | 'span' | 'div'",
-          "description": "Determines which element to render as a table text",
-          "defaultValue": "'span'"
-        },
-        {
-          "name": "wrapModifier",
-          "type": "WrapModifier | 'wrap' | 'nowrap' | 'truncate' | 'breakWord' | 'fitContent'",
-          "description": "Determines which wrapping modifier to apply to the table text",
-          "defaultValue": "null"
-        }
-      ]
-    },
-    {
-      "name": "TdActionsType",
-      "description": "",
-      "props": [
-        {
-          "name": "actionsToggle",
-          "type": "(props: CustomActionsToggleProps) => React.ReactNode",
-          "description": "Custom toggle for the actions menu"
-        },
-        {
-          "name": "dropdownDirection",
-          "type": "'up' | 'down'",
-          "description": "Actions dropdown direction"
-        },
-        {
-          "name": "dropdownPosition",
-          "type": "'right' | 'left'",
-          "description": "Actions dropdown position"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "Whether the actions are disabled"
-        },
-        {
-          "name": "items",
-          "type": "IActions",
-          "description": "Cell actions",
-          "required": true
-        },
-        {
-          "name": "menuAppendTo",
-          "type": "HTMLElement | (() => HTMLElement) | 'inline' | 'parent'",
-          "description": "The container to append the dropdown menu to. Defaults to 'inline'.\nIf your menu is being cut off you can append it to an element higher up the DOM tree.\nSome examples:\nmenuAppendTo=\"parent\"\nmenuAppendTo={() => document.body}\nmenuAppendTo={document.getElementById('target')}"
-        },
-        {
-          "name": "rowIndex",
-          "type": "number",
-          "description": "The row index"
-        }
-      ]
-    },
-    {
-      "name": "TdSelectType",
-      "description": "",
-      "props": [
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "Whether the selection is disabled"
-        },
-        {
-          "name": "isSelected",
-          "type": "boolean",
-          "description": "Whether the cell is selected",
-          "required": true
-        },
-        {
-          "name": "onSelect",
-          "type": "OnSelect",
-          "description": "Callback on select"
-        },
-        {
-          "name": "props",
-          "type": "any",
-          "description": "Additional props forwarded to select rowData"
-        },
-        {
-          "name": "rowIndex",
-          "type": "number",
-          "description": "The row index",
-          "required": true
-        },
-        {
-          "name": "variant",
-          "type": "'checkbox' | 'radio'",
-          "description": "The selectable variant"
-        }
-      ]
-    },
-    {
-      "name": "ThSelectType",
-      "description": "",
-      "props": [
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "Whether to disable the selection"
-        },
-        {
-          "name": "isHeaderSelectDisabled",
-          "type": "boolean",
-          "description": "Flag indicating the select checkbox in the th is disabled"
-        },
-        {
-          "name": "isIndeterminate",
-          "type": "boolean",
-          "description": "Whether the select checkbox should be in an indeterminate state (some items selected)"
-        },
-        {
-          "name": "isSelected",
-          "type": "boolean",
-          "description": "Whether the cell is selected",
-          "required": true
-        },
-        {
-          "name": "onSelect",
-          "type": "OnSelect",
-          "description": "Callback on select"
-        },
-        {
-          "name": "props",
-          "type": "any",
-          "description": "Additional props forwarded to select rowData"
-        }
-      ]
-    },
-    {
-      "name": "TdTreeRowType",
-      "description": "",
-      "props": [
-        {
-          "name": "onCheckChange",
-          "type": "OnCheckChange",
-          "description": "(optional) Callback when user changes the checkbox on a row"
-        },
-        {
-          "name": "onCollapse",
-          "type": "OnTreeRowCollapse",
-          "description": "Callback when user expands/collapses a row to reveal/hide the row's children",
-          "required": true
-        },
-        {
-          "name": "onToggleRowDetails",
-          "type": "OnToggleRowDetails",
-          "description": "(optional) Callback when user shows/hides the row details in responsive view."
-        },
-        {
-          "name": "props",
-          "type": "any",
-          "description": "Additional props forwarded to the title cell of the tree row"
-        },
-        {
-          "name": "rowIndex",
-          "type": "number",
-          "description": "The row index"
-        }
-      ]
-    },
-    {
-      "name": "ActionsColumn",
-      "description": "",
-      "props": [
-        {
-          "name": "actionsToggle",
-          "type": "(props: CustomActionsToggleProps) => React.ReactNode",
-          "description": "Custom actions toggle for the actions dropdown"
-        },
-        {
-          "name": "extraData",
-          "type": "IExtraData",
-          "description": "Extra data of a row"
-        },
-        {
-          "name": "firstActionItemRef",
-          "type": "React.Ref<HTMLButtonElement>",
-          "description": "Ref to forward to the first item in the popup menu"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "Indicates whether the actions dropdown is disabled"
-        },
-        {
-          "name": "isOnOpenChangeDisabled",
-          "type": "boolean",
-          "description": "Flag indicating that the dropdown's onOpenChange callback should not be called."
-        },
-        {
-          "name": "items",
-          "type": "IAction[]",
-          "description": "Actions to be rendered within or without the action dropdown",
-          "required": true
-        },
-        {
-          "name": "popperProps",
-          "type": "any",
-          "description": "Additional properties for the actions dropdown popper"
-        },
-        {
-          "name": "rowData",
-          "type": "IRowData",
-          "description": "Data of the row the action dropdown is located"
-        }
-      ]
-    },
-    {
-      "name": "TdCompoundExpandType",
-      "description": "",
-      "props": [
-        {
-          "name": "columnIndex",
-          "type": "number",
-          "description": "The column index"
-        },
-        {
-          "name": "expandId",
-          "type": "string",
-          "description": "Id prefix for expandable cells *"
-        },
-        {
-          "name": "isExpanded",
-          "type": "boolean",
-          "description": "determines if the corresponding expansion row is open",
-          "required": true
-        },
-        {
-          "name": "onToggle",
-          "type": "OnExpand",
-          "description": "Callback on toggling of the expansion"
-        },
-        {
-          "name": "rowIndex",
-          "type": "number",
-          "description": "The row index"
-        }
-      ]
-    },
-    {
-      "name": "TdFavoritesType",
-      "description": "",
-      "props": [
-        {
-          "name": "isFavorited",
-          "type": "boolean",
-          "description": "Whether the corresponding row is favorited",
-          "required": true
-        },
-        {
-          "name": "onFavorite",
-          "type": "OnFavorite",
-          "description": "Callback on clicking the favorites button"
-        },
-        {
-          "name": "props",
-          "type": "any",
-          "description": "Additional props forwarded to the FavoritesCell"
-        },
-        {
-          "name": "rowIndex",
-          "type": "number",
-          "description": "The row index"
-        }
-      ]
-    },
-    {
-      "name": "TdDraggableType",
-      "description": "",
-      "props": [
-        {
-          "name": "id",
-          "type": "string",
-          "description": "Id of the draggable row",
-          "required": true
-        }
-      ]
-    },
-    {
-      "name": "ThInfoType",
-      "description": "",
-      "props": [
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "description": null
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": null
-        },
-        {
-          "name": "popover",
-          "type": "React.ReactNode",
-          "description": null
-        },
-        {
-          "name": "popoverProps",
-          "type": "Omit<PopoverProps, 'bodyContent'>",
-          "description": null
-        },
-        {
-          "name": "tooltip",
-          "type": "React.ReactNode",
-          "description": null
-        },
-        {
-          "name": "tooltipProps",
-          "type": "Omit<TooltipProps, 'content'>",
-          "description": null
-        }
-      ]
-    },
-    {
-      "name": "TdExpandType",
-      "description": "",
-      "props": [
-        {
-          "name": "columnIndex",
-          "type": "number",
-          "description": "The column index"
-        },
-        {
-          "name": "expandId",
-          "type": "string",
-          "description": "Id prefix for expandable rows *"
-        },
-        {
-          "name": "isExpanded",
-          "type": "boolean",
-          "description": "Flag indicating the child row associated with this cell is expanded",
-          "required": true
-        },
-        {
-          "name": "onToggle",
-          "type": "OnCollapse",
-          "description": "On toggling the expansion"
-        },
-        {
-          "name": "rowIndex",
-          "type": "number",
-          "description": "The row index",
-          "required": true
-        }
-      ]
-    },
-    {
-      "name": "ThExpandType",
-      "description": "",
-      "props": [
-        {
-          "name": "areAllExpanded",
-          "type": "boolean",
-          "description": "Whether all are expanded",
-          "required": true
-        },
-        {
-          "name": "collapseAllAriaLabel",
-          "type": "string",
-          "description": "Alternative aria label",
-          "required": true
-        },
-        {
-          "name": "onToggle",
-          "type": "OnCollapse",
-          "description": "On toggling the expansion"
-        }
-      ]
-    },
-    {
-      "name": "EditableSelectInputCell",
-      "description": "",
-      "props": [
-        {
-          "name": "cellIndex",
-          "type": "number",
-          "description": "Cell index of this select input cell",
-          "required": true
-        },
-        {
-          "name": "clearSelection",
-          "type": "(event: React.MouseEvent, rowIndex: number, cellIndex: number) => void",
-          "description": "Event handler which fires when the user clears the selections"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "Flag indicating the select input is disabled"
-        },
-        {
-          "name": "isOpen",
-          "type": "boolean",
-          "description": "Flag indicating the select menu is open",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isPlaceholder",
-          "type": "boolean",
-          "description": "Flag indicating the toggle gets placeholder styles *",
-          "defaultValue": "false"
-        },
-        {
-          "name": "onSelect",
-          "type": "(\n  event: React.MouseEvent | React.ChangeEvent,\n  newValue: any | any[],\n  rowIndex: number,\n  cellIndex: number,\n  isPlaceholder?: boolean\n) => void",
-          "description": "Event handler which fires when user selects an option in this cell",
-          "defaultValue": "() => {}"
-        },
-        {
-          "name": "onToggle",
-          "type": "(event: React.MouseEvent | undefined) => void",
-          "description": "Event handler which fires when the select toggle is toggled",
-          "defaultValue": "() => {}"
-        },
-        {
-          "name": "options",
-          "type": "React.ReactElement<any>[]",
-          "description": "Options to display in the expandable select menu",
-          "defaultValue": "[]"
-        },
-        {
-          "name": "props",
-          "type": "EditableSelectInputProps",
-          "description": "Props to build the select component",
-          "required": true
-        },
-        {
-          "name": "rowIndex",
-          "type": "number",
-          "description": "Row index of this select input cell",
-          "required": true
-        },
-        {
-          "name": "selections",
-          "type": "any | any[]",
-          "description": "Current selected options to display as the read only value of the table cell",
-          "defaultValue": "['']"
-        }
-      ]
-    },
-    {
-      "name": "EditableTextCell",
-      "description": "",
-      "props": [
-        {
-          "name": "cellIndex",
-          "type": "number",
-          "description": "Cell index of this text cell",
-          "required": true
-        },
-        {
-          "name": "handleTextInputChange",
-          "type": "(\n  newValue: string,\n  event: React.FormEvent<HTMLInputElement>,\n  rowIndex: number,\n  cellIndex: number\n) => void",
-          "description": "Event handler which fires when user changes the text in this cell",
-          "required": true
-        },
-        {
-          "name": "inputAriaLabel",
-          "type": "string",
-          "description": "accessible label of the text input",
-          "required": true
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "flag indicating if the text input is disabled",
-          "defaultValue": "false"
-        },
-        {
-          "name": "props",
-          "type": "EditableTextCellProps",
-          "description": "Props to build the input",
-          "required": true
-        },
-        {
-          "name": "rowIndex",
-          "type": "number",
-          "description": "Row index of this text cell",
-          "required": true
-        },
-        {
-          "name": "value",
-          "type": "string",
-          "description": "The current value of the text input",
-          "required": true
-        }
-      ]
-    },
-    {
-      "name": "EditableSelectInputProps",
-      "description": "",
-      "props": [
-        {
-          "name": "[key: string]",
-          "type": "any",
-          "description": "arbitrary data to pass to the internal select component in the editable select input cell",
-          "required": true
-        },
-        {
-          "name": "editableSelectProps",
-          "type": "SelectProps",
-          "description": "Props to be passed down to the select component"
-        },
-        {
-          "name": "isSelectOpen",
-          "type": "boolean",
-          "description": "Flag controlling isOpen state of select",
-          "required": true
-        },
-        {
-          "name": "name",
-          "type": "string",
-          "description": "Name of the select input",
-          "required": true
-        },
-        {
-          "name": "options",
-          "type": "React.ReactElement<any>[]",
-          "description": "Array of react elements to display in the select menu",
-          "required": true
-        },
-        {
-          "name": "selected",
-          "type": "any | any[]",
-          "description": "Single select option value for single select menus, or array of select option values for multi select. You can also specify isSelected on the SelectOption",
-          "required": true
-        },
-        {
-          "name": "value",
-          "type": "string | string[]",
-          "description": "Value to display in the cell",
-          "required": true
-        }
-      ]
-    },
-    {
-      "name": "EditableTextCellProps",
-      "description": "",
-      "props": [
-        {
-          "name": "[key: string]",
-          "type": "any",
-          "description": "arbitrary data to pass to the internal text input in the editable text cell",
-          "required": true
-        },
-        {
-          "name": "name",
-          "type": "string",
-          "description": "Name of the input",
-          "required": true
-        },
-        {
-          "name": "value",
-          "type": "string",
-          "description": "Value to display in the cell",
-          "required": true
-        }
-      ]
-    },
-    {
-      "name": "ThSortType",
-      "description": "",
-      "props": [
-        {
-          "name": "columnIndex",
-          "type": "number",
-          "description": "The column index",
-          "required": true
-        },
-        {
-          "name": "favoriteButtonProps",
-          "type": "FavoriteButtonProps",
-          "description": "Props for the favorite button (only for favoritable cell)."
-        },
-        {
-          "name": "isFavorites",
-          "type": "boolean",
-          "description": "True to make this a favoritable sorting cell"
-        },
-        {
-          "name": "onSort",
-          "type": "OnSort",
-          "description": "Wraps the content in a button and adds a sort icon - Click callback on the sortable cell"
-        },
-        {
-          "name": "sortBy",
-          "type": "ISortBy",
-          "description": "Provide the currently active column's index and direction",
-          "required": true
-        },
-        {
-          "name": "Unknown",
-          "type": "string",
-          "description": "Adds accessible text to the sort button."
-        }
-      ]
-    },
-    {
-      "name": "ISortBy",
-      "description": "",
-      "props": [
-        {
-          "name": "defaultDirection",
-          "type": "'asc' | 'desc'",
-          "description": "Defaulting sorting direction. Defaults to \"asc\"."
-        },
-        {
-          "name": "direction",
-          "type": "'asc' | 'desc'",
-          "description": "Current sort direction"
-        },
-        {
-          "name": "index",
-          "type": "number",
-          "description": "Index of the current sorted column"
-        }
-      ]
-    },
-    {
-      "name": "InnerScrollContainer",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the inner scroll container"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the container"
-        }
-      ]
-    },
-    {
-      "name": "OuterScrollContainer",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the outer scroll container"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the container"
-        }
-      ]
-    }
-  ],
-  "cssPrefix": [
-    "pf-v6-c-table"
-  ],
-  "examples": [
-    "Basic",
-    "Plain",
-    "Custom row wrapper, header tooltips & popovers",
-    "Sortable & wrapping headers",
-    "Sortable - custom control",
-    "Selectable with checkbox",
-    "Selectable with indeterminate state",
-    "Selectable radio input",
-    "Row click handler, clickable rows",
-    "Editable rows",
-    "Actions",
-    "Actions Overflow",
-    "Expandable",
-    "Compound expandable",
-    "Cell width, breakpoint modifiers",
-    "Controlling text",
-    "Modifiers with table text",
-    "Empty state",
-    "Favoritable (implemented with sortable)",
-    "Tree table",
-    "Flat tree table with no inset",
-    "Draggable row table",
-    "Sticky column",
-    "Multiple left-aligned sticky columns",
-    "Multiple right-aligned sticky columns",
-    "Dynamic sticky header",
-    "Sticky columns and header",
-    "Nested column headers",
-    "Nested column headers and expandable rows",
-    "Expandable with nested table",
-    "Nested sticky header",
-    "Striped",
-    "Striped expandable",
-    "Striped multiple tobdy",
-    "Striped tr"
-  ]
-};
-pageData.liveContext = {
-  Fragment,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  useLayoutEffect,
-  SearchIcon,
-  RhUiCodeIcon,
-  RhUiBranchFillIcon,
-  CubeIcon,
-  LeafIcon,
-  FolderIcon,
-  FolderOpenIcon,
-  RhMicronsSortDownLargeToSmallIcon,
-  RhUiBlueprintIcon,
-  RhUiEditFillIcon,
-  RhUiEllipsisVerticalFillIcon,
-  CheckIcon,
-  RhMicronsCloseIcon,
-  css,
-  styles,
-  spacing,
-  textStyles,
-  inlineEditStyles,
-  t_global_background_color_secondary_default
-};
-pageData.examples = {
-  'Basic': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps } from '@patternfly/react-core';\nimport { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\n\ninterface Repository {\n  name: string;\n  branches: string | null;\n  prs: string | null;\n  workspaces: string;\n  lastCommit: string;\n}\n\ntype ExampleType = 'compact' | 'compactBorderless';\n\nexport const TableBasic: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },\n    { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },\n    { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.\n  const [exampleChoice, setExampleChoice] = useState<ExampleType | ''>('');\n  const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {\n    const id = event.currentTarget.id;\n    // Allow toggling off if clicking the already selected item\n    setExampleChoice(exampleChoice === id ? '' : (id as ExampleType));\n  };\n\n  return (\n    <Fragment>\n      <ToggleGroup aria-label=\"Default with single selectable\">\n        <ToggleGroupItem\n          text=\"Compact\"\n          buttonId=\"compact\"\n          isSelected={exampleChoice === 'compact'}\n          onChange={onExampleTypeChange}\n        />\n        <ToggleGroupItem\n          text=\"Compact borderless\"\n          buttonId=\"compactBorderless\"\n          isSelected={exampleChoice === 'compactBorderless'}\n          onChange={onExampleTypeChange}\n        />\n      </ToggleGroup>\n      <Table\n        aria-label=\"Simple table\"\n        variant={exampleChoice === 'compact' || exampleChoice === 'compactBorderless' ? 'compact' : undefined}\n        borders={exampleChoice !== 'compactBorderless'}\n      >\n        <Caption>Simple table using composable components</Caption>\n        <Thead>\n          <Tr>\n            <Th>{columnNames.name}</Th>\n            <Th>{columnNames.branches}</Th>\n            <Th>{columnNames.prs}</Th>\n            <Th>{columnNames.workspaces}</Th>\n            <Th>{columnNames.lastCommit}</Th>\n          </Tr>\n        </Thead>\n        <Tbody>\n          {repositories.map((repo) => (\n            <Tr key={repo.name}>\n              <Td dataLabel={columnNames.name}>{repo.name}</Td>\n              <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n              <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n              <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n              <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n            </Tr>\n          ))}\n        </Tbody>\n      </Table>\n    </Fragment>\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Plain': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\n\ninterface Repository {\n  name: string;\n  branches: string | null;\n  prs: string | null;\n  workspaces: string;\n  lastCommit: string;\n}\n\nexport const TablePlain: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },\n    { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },\n    { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  return (\n    <Table aria-label=\"Plain table\" isPlain={true}>\n      <Caption>Simple table with plain styling using composable components</Caption>\n      <Thead>\n        <Tr>\n          <Th>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.workspaces}</Th>\n          <Th>{columnNames.lastCommit}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {repositories.map((repo) => (\n          <Tr key={repo.name}>\n            <Td dataLabel={columnNames.name}>{repo.name}</Td>\n            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n          </Tr>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Plain","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Custom row wrapper, header tooltips & popovers': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\nimport t_global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/t_global_background_color_secondary_default';\n\ninterface Repository {\n  name: string;\n  branches: string | null;\n  prs: string | null;\n  workspaces: string;\n  lastCommit: string;\n}\n\nexport const TableMisc: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },\n    { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },\n    { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  return (\n    <Table aria-label=\"Misc table\">\n      <Thead noWrap>\n        <Tr>\n          <Th\n            info={{\n              tooltip: 'More information about repositories',\n              className: 'repositories-info-tip',\n              tooltipProps: {\n                isContentLeftAligned: true\n              }\n            }}\n          >\n            {columnNames.name}\n          </Th>\n          <Th>{columnNames.branches}</Th>\n          <Th\n            info={{\n              popover: (\n                <div>\n                  More <strong>information</strong> on pull requests\n                </div>\n              ),\n              ariaLabel: 'More information on pull requests',\n              popoverProps: {\n                headerContent: columnNames.prs,\n                footerContent: <a href=\"#\">Click here for even more info</a>\n              }\n            }}\n          >\n            {columnNames.prs}\n          </Th>\n          <Th>{columnNames.workspaces}</Th>\n          <Th textCenter>{columnNames.lastCommit}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {repositories.map((repo, rowIndex) => {\n          const isOddRow = (rowIndex + 1) % 2;\n          const customStyle = {\n            backgroundColor: t_global_background_color_secondary_default.var\n          };\n          // Some arbitrary logic to demonstrate that cell styles can be based on anything\n          const nameColSpan = repo.branches === null && repo.prs === null ? 3 : 1;\n          const lastCommitTextCenter = rowIndex !== 2;\n          return (\n            <Tr\n              key={repo.name}\n              className={isOddRow ? 'odd-row-class' : 'even-row-class'}\n              style={isOddRow ? customStyle : {}}\n            >\n              <Td dataLabel={columnNames.name} colSpan={nameColSpan}>\n                {repo.name}\n              </Td>\n              <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n              <Td dataLabel={columnNames.prs}></Td>\n              <Td dataLabel={columnNames.workspaces}></Td>\n              <Td dataLabel={columnNames.lastCommit} textCenter={lastCommitTextCenter}></Td>\n            </Tr>\n          );\n        })}\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Custom row wrapper, header tooltips & popovers","lang":"ts","className":""}}>
-      
-      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`If you add the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`noWrap`}
-          </code>
-          {` prop to `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Thead`}
-          </code>
-          {`, it won't wrap it if there is no space`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`You can add the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`textCenter`}
-          </code>
-          {` prop to `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Th`}
-          </code>
-          {` or `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Td`}
-          </code>
-          {` to center the contents`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`You can pass `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`className`}
-          </code>
-          {`, `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`style`}
-          </code>
-          {` and more to `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Tr`}
-          </code>
-        </li>
-        
-
-      </ul>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To add a header tooltip or popover to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Th`}
-        </code>
-        {`, pass a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`ThInfoType`}
-        </code>
-        {` object via the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`info`}
-        </code>
-        {` prop.`}
-      </p>
-    </Example>,
-  'Sortable & wrapping headers': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, ThProps } from '@patternfly/react-table';\n\ninterface Repository {\n  name: string;\n  branches: string;\n  prs: string;\n  workspaces: string;\n  lastCommit: string;\n}\n\nexport const TableSortable: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' },\n    { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },\n    { name: 'p', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories table header that goes on for a long time.',\n    branches: 'Branches table header that goes on for a long time.',\n    prs: 'Pull requests table header that goes on for a long time.',\n    workspaces: 'Workspaces table header that goes on for a long time.',\n    lastCommit: 'Last commit table header that goes on for a long time.'\n  };\n\n  // Index of the currently sorted column\n  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key\n  // as the identifier of the sorted column. See the \"Compound expandable\" example.\n  const [activeSortIndex, setActiveSortIndex] = useState<number | null>(null);\n\n  // Sort direction of the currently sorted column\n  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);\n\n  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.\n  // This example is trivial since our data objects just contain strings, but if the data was more complex\n  // this would be a place to return simplified string or number versions of each column to sort by.\n  const getSortableRowValues = (repo: Repository): (string | number)[] => {\n    const { name, branches, prs, workspaces, lastCommit } = repo;\n    return [name, branches, prs, workspaces, lastCommit];\n  };\n\n  // Note that we perform the sort as part of the component's render logic and not in onSort.\n  // We shouldn't store the list of data in state because we don't want to have to sync that with props.\n  let sortedRepositories = repositories;\n  if (activeSortIndex !== null) {\n    sortedRepositories = repositories.sort((a, b) => {\n      const aValue = getSortableRowValues(a)[activeSortIndex];\n      const bValue = getSortableRowValues(b)[activeSortIndex];\n      if (typeof aValue === 'number') {\n        // Numeric sort\n        if (activeSortDirection === 'asc') {\n          return (aValue as number) - (bValue as number);\n        }\n        return (bValue as number) - (aValue as number);\n      } else {\n        // String sort\n        if (activeSortDirection === 'asc') {\n          return (aValue as string).localeCompare(bValue as string);\n        }\n        return (bValue as string).localeCompare(aValue as string);\n      }\n    });\n  }\n\n  const getSortParams = (columnIndex: number): ThProps['sort'] => ({\n    sortBy: {\n      index: activeSortIndex,\n      direction: activeSortDirection,\n      defaultDirection: 'asc' // starting sort direction when first sorting a column. Defaults to 'asc'\n    },\n    onSort: (_event, index, direction) => {\n      setActiveSortIndex(index);\n      setActiveSortDirection(direction);\n    },\n    columnIndex\n  });\n\n  // In this example, we wrap all but the 1st column and make the 1st and 3rd columns sortable just to demonstrate.\n  return (\n    <Table aria-label=\"Sortable table\" ouiaId=\"SortableTable\">\n      <Thead>\n        <Tr>\n          <Th sort={getSortParams(0)}>{columnNames.name}</Th>\n          <Th modifier=\"wrap\">{columnNames.branches}</Th>\n          <Th modifier=\"wrap\" sort={getSortParams(2)} info={{ tooltip: 'More information ' }}>\n            {columnNames.prs}\n          </Th>\n          <Th modifier=\"wrap\">{columnNames.workspaces}</Th>\n          <Th modifier=\"wrap\">{columnNames.lastCommit}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {sortedRepositories.map((repo, rowIndex) => (\n          <Tr key={rowIndex}>\n            <Td dataLabel={columnNames.name}>{repo.name}</Td>\n            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n          </Tr>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Sortable & wrapping headers","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To make a column sortable, pass a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`ThSortType`}
-        </code>
-        {` object via the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`sort`}
-        </code>
-        {` prop on a column's `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Th`}
-        </code>
-        {`.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        
-        <code {...{"className":"ws-code "}}>
-          {`ThSortType`}
-        </code>
-        {` includes an `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`OnSort`}
-        </code>
-        {` event handler which has the following signature:`}
-      </p>
-      
-      <Example {...{"code":"type OnSort = (\n  event: React.MouseEvent,\n  columnIndex: number,\n  sortByDirection: SortByDirection,\n  extraData: IExtraColumnData\n) => void;","className":""}}>
-        
-      </Example>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`The built in display for sorting is not fully responsive, as the column headers will be displayed per row when the screen size is small. To see a full page demo of a responsive sortable table, utilizing a toolbar item to control sorting for small screens, view the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Sortable - responsive`}
-        </code>
-        {` demo in the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`React demos`}
-        </code>
-        {` tab.`}
-      </p>
-    </Example>,
-  'Sortable - custom control': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, ThProps } from '@patternfly/react-table';\nimport {\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem,\n  Select,\n  SelectGroup,\n  SelectList,\n  SelectOption,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';\n\ninterface Repository {\n  name: string;\n  branches: string;\n  prs: string;\n  workspaces: string;\n  lastCommit: string;\n}\n\nexport const TableSortableCustom: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' },\n    { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },\n    { name: 'p', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  const [isSortDropdownOpen, setIsSortDropdownOpen] = useState(false);\n\n  // Index of the currently sorted column\n  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key\n  // as the identifier of the sorted column. See the \"Compound expandable\" example.\n  const [activeSortIndex, setActiveSortIndex] = useState<number | null>(null);\n\n  // Sort direction of the currently sorted column\n  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);\n\n  // Sort dropdown expansion\n  // const [isSortDropdownOpen, setIsSortDropdownOpen] = useState(false);\n\n  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.\n  // This example is trivial since our data objects just contain strings, but if the data was more complex\n  // this would be a place to return simplified string or number versions of each column to sort by.\n  const getSortableRowValues = (repo: Repository): (string | number)[] => {\n    const { name, branches, prs, workspaces, lastCommit } = repo;\n    return [name, branches, prs, workspaces, lastCommit];\n  };\n\n  // Note that we perform the sort as part of the component's render logic and not in onSort.\n  // We shouldn't store the list of data in state because we don't want to have to sync that with props.\n  let sortedRepositories = repositories;\n  if (activeSortIndex !== null) {\n    sortedRepositories = repositories.sort((a, b) => {\n      const aValue = getSortableRowValues(a)[activeSortIndex];\n      const bValue = getSortableRowValues(b)[activeSortIndex];\n      if (typeof aValue === 'number') {\n        // Numeric sort\n        if (activeSortDirection === 'asc') {\n          return (aValue as number) - (bValue as number);\n        }\n        return (bValue as number) - (aValue as number);\n      } else {\n        // String sort\n        if (activeSortDirection === 'asc') {\n          return (aValue as string).localeCompare(bValue as string);\n        }\n        return (bValue as string).localeCompare(aValue as string);\n      }\n    });\n  }\n\n  const getSortParams = (columnIndex: number): ThProps['sort'] => ({\n    sortBy: {\n      index: activeSortIndex,\n      direction: activeSortDirection\n    },\n    onSort: (_event, index, direction) => {\n      setActiveSortIndex(index);\n      setActiveSortDirection(direction as 'desc' | 'asc');\n    },\n    columnIndex\n  });\n\n  return (\n    <Fragment>\n      <Toolbar id=\"toolbar\">\n        <ToolbarContent>\n          <ToolbarItem>\n            <Select\n              isOpen={isSortDropdownOpen}\n              selected={[activeSortDirection, activeSortIndex]}\n              onOpenChange={(isOpen) => setIsSortDropdownOpen(isOpen)}\n              onSelect={(event, value) => {\n                if (value === 'asc' || value === 'desc') {\n                  setActiveSortDirection(value as 'desc' | 'asc');\n                } else {\n                  setActiveSortIndex(value as number);\n                  setActiveSortDirection(activeSortDirection !== null ? activeSortDirection : 'asc');\n                }\n              }}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  onClick={() => setIsSortDropdownOpen(!isSortDropdownOpen)}\n                  isExpanded={isSortDropdownOpen}\n                  variant=\"plain\"\n                  aria-label=\"Sort columns\"\n                  icon={<RhMicronsSortDownLargeToSmallIcon />}\n                />\n              )}\n            >\n              <SelectGroup label=\"Sort column\">\n                <SelectList>\n                  {Object.values(columnNames).map((column, columnIndex) => (\n                    <SelectOption key={column} value={columnIndex} isSelected={activeSortIndex === columnIndex}>\n                      {column}\n                    </SelectOption>\n                  ))}\n                </SelectList>\n              </SelectGroup>\n              <SelectGroup label=\"Sort direction\">\n                <SelectList>\n                  <SelectOption isSelected={activeSortDirection === 'asc'} value=\"asc\" key=\"ascending\">\n                    Ascending\n                  </SelectOption>\n                  <SelectOption isSelected={activeSortDirection === 'desc'} value=\"desc\" key=\"descending\">\n                    Descending\n                  </SelectOption>\n                </SelectList>\n              </SelectGroup>\n            </Select>\n          </ToolbarItem>\n        </ToolbarContent>\n      </Toolbar>\n      <Table aria-label=\"Sortable table custom toolbar\">\n        <Thead>\n          <Tr>\n            <Th sort={getSortParams(0)}>{columnNames.name}</Th>\n            <Th sort={getSortParams(1)}>{columnNames.branches}</Th>\n            <Th sort={getSortParams(2)} info={{ tooltip: 'More information ' }}>\n              {columnNames.prs}\n            </Th>\n            <Th sort={getSortParams(3)}>{columnNames.workspaces}</Th>\n            <Th sort={getSortParams(4)}>{columnNames.lastCommit}</Th>\n          </Tr>\n        </Thead>\n        <Tbody>\n          {sortedRepositories.map((repo, rowIndex) => (\n            <Tr key={rowIndex}>\n              <Td dataLabel={columnNames.name}>{repo.name}</Td>\n              <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n              <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n              <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n              <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n            </Tr>\n          ))}\n        </Tbody>\n      </Table>\n    </Fragment>\n  );\n};\n","title":"Sortable - custom control","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Sorting a table may also be controlled manually with a toolbar control. To see a full page demo of a responsive table, view the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Sortable - responsive`}
-        </code>
-        {` demo in the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`React demos`}
-        </code>
-        {` tab.`}
-      </p>
-    </Example>,
-  'Selectable with checkbox': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useEffect, useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\n\ninterface Repository {\n  name: string;\n  branches: string;\n  prs: string;\n  workspaces: string;\n  lastCommit: string;\n}\n\nexport const TableSelectable: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' },\n    { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },\n    { name: 'b', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },\n    { name: 'c', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },\n    { name: 'd', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },\n    { name: 'e', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example\n  const selectableRepos = repositories.filter(isRepoSelectable);\n\n  // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.\n  // This is to prevent state from being based on row order index in case we later add sorting.\n  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);\n  const setRepoSelected = (repo: Repository, isSelecting = true) =>\n    setSelectedRepoNames((prevSelected) => {\n      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);\n      return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;\n    });\n  const selectAllRepos = (isSelecting = true) =>\n    setSelectedRepoNames(isSelecting ? selectableRepos.map((r) => r.name) : []);\n  const areAllReposSelected = selectedRepoNames.length === selectableRepos.length;\n  const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);\n\n  // To allow shift+click to select/deselect multiple rows\n  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState<number | null>(null);\n  const [shifting, setShifting] = useState(false);\n\n  const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => {\n    // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected\n    if (shifting && recentSelectedRowIndex !== null) {\n      const numberSelected = rowIndex - recentSelectedRowIndex;\n      const intermediateIndexes =\n        numberSelected > 0\n          ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)\n          : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);\n      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));\n    } else {\n      setRepoSelected(repo, isSelecting);\n    }\n    setRecentSelectedRowIndex(rowIndex);\n  };\n\n  useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Shift') {\n        setShifting(true);\n      }\n    };\n    const onKeyUp = (e: KeyboardEvent) => {\n      if (e.key === 'Shift') {\n        setShifting(false);\n      }\n    };\n\n    document.addEventListener('keydown', onKeyDown);\n    document.addEventListener('keyup', onKeyUp);\n\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n      document.removeEventListener('keyup', onKeyUp);\n    };\n  }, []);\n\n  return (\n    <Table aria-label=\"Selectable table\">\n      <Thead>\n        <Tr>\n          <Th\n            select={{\n              onSelect: (_event, isSelecting) => selectAllRepos(isSelecting),\n              isSelected: areAllReposSelected\n            }}\n            aria-label=\"Row select\"\n          />\n          <Th>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.workspaces}</Th>\n          <Th>{columnNames.lastCommit}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {repositories.map((repo, rowIndex) => (\n          <Tr key={repo.name}>\n            <Td\n              select={{\n                rowIndex,\n                onSelect: (_event, isSelecting) => onSelectRepo(repo, rowIndex, isSelecting),\n                isSelected: isRepoSelected(repo),\n                isDisabled: !isRepoSelectable(repo)\n              }}\n            />\n            <Td dataLabel={columnNames.name}>{repo.name}</Td>\n            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n          </Tr>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Selectable with checkbox","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To make a row selectable, the table needs a selection column.
-The selection column is just another column, but with selection specific props added.
-We add it as the first header cell and also as the first body cell for each row.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To make a column sortable, pass a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`ThSelectType`}
-        </code>
-        {` object via the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`select`}
-        </code>
-        {` prop on a column's `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Th`}
-        </code>
-        {`.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To make a row sortable, pass a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`TdSelectType`}
-        </code>
-        {` object via the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`select`}
-        </code>
-        {` prop on each rows's first `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Td`}
-        </code>
-        {`.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Both the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`TdSelectType`}
-        </code>
-        {` and the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`ThSelectType`}
-        </code>
-        {` expect an `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`OnSelect`}
-        </code>
-        {` event handler with the following signature:`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        
-        <code {...{"className":"ws-code "}}>
-          {`OnSelect:`}
-        </code>
-      </p>
-      
-      <Example {...{"code":"type OnSelect = (\n  event: React.FormEvent<HTMLInputElement>,\n  isSelected: boolean,\n  rowIndex: number,\n  rowData: IRowData,\n  extraData: IExtraData\n) => void;","className":""}}>
-        
-      </Example>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        
-        <strong {...{"className":""}}>
-          {`Note:`}
-        </strong>
-        {` This example has a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`shift + select`}
-        </code>
-        {` feature where holding shift while
-checking checkboxes will check intermediate rows' checkboxes.`}
-      </p>
-    </Example>,
-  'Selectable with indeterminate state': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useEffect, useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\n\ninterface Repository {\n  name: string;\n  branches: string;\n  prs: string;\n  workspaces: string;\n  lastCommit: string;\n}\n\nexport const TableSelectableIndeterminate: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' },\n    { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },\n    { name: 'b', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },\n    { name: 'c', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },\n    { name: 'd', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },\n    { name: 'e', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example\n  const selectableRepos = repositories.filter(isRepoSelectable);\n\n  // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.\n  // This is to prevent state from being based on row order index in case we later add sorting.\n  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);\n  const setRepoSelected = (repo: Repository, isSelecting = true) =>\n    setSelectedRepoNames((prevSelected) => {\n      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);\n      return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;\n    });\n  const selectAllRepos = (isSelecting = true) =>\n    setSelectedRepoNames(isSelecting ? selectableRepos.map((r) => r.name) : []);\n  const areAllReposSelected = selectedRepoNames.length === selectableRepos.length;\n  const areSomeReposSelected = selectedRepoNames.length > 0 && selectedRepoNames.length < selectableRepos.length;\n  const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);\n\n  // To allow shift+click to select/deselect multiple rows\n  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState<number | null>(null);\n  const [shifting, setShifting] = useState(false);\n\n  const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => {\n    // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected\n    if (shifting && recentSelectedRowIndex !== null) {\n      const numberSelected = rowIndex - recentSelectedRowIndex;\n      const intermediateIndexes =\n        numberSelected > 0\n          ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)\n          : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);\n      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));\n    } else {\n      setRepoSelected(repo, isSelecting);\n    }\n    setRecentSelectedRowIndex(rowIndex);\n  };\n\n  useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Shift') {\n        setShifting(true);\n      }\n    };\n    const onKeyUp = (e: KeyboardEvent) => {\n      if (e.key === 'Shift') {\n        setShifting(false);\n      }\n    };\n\n    document.addEventListener('keydown', onKeyDown);\n    document.addEventListener('keyup', onKeyUp);\n\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n      document.removeEventListener('keyup', onKeyUp);\n    };\n  }, []);\n\n  return (\n    <Table aria-label=\"Selectable table with indeterminate state\">\n      <Thead>\n        <Tr>\n          <Th\n            select={{\n              onSelect: (_event, isSelecting) => selectAllRepos(isSelecting),\n              isSelected: areAllReposSelected,\n              isIndeterminate: areSomeReposSelected\n            }}\n            aria-label=\"Row select\"\n          />\n          <Th>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.workspaces}</Th>\n          <Th>{columnNames.lastCommit}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {repositories.map((repo, rowIndex) => (\n          <Tr key={repo.name}>\n            <Td\n              select={{\n                rowIndex,\n                onSelect: (_event, isSelecting) => onSelectRepo(repo, rowIndex, isSelecting),\n                isSelected: isRepoSelected(repo),\n                isDisabled: !isRepoSelectable(repo)\n              }}\n            />\n            <Td dataLabel={columnNames.name}>{repo.name}</Td>\n            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n          </Tr>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Selectable with indeterminate state","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To indicate partial selection, use `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isIndeterminate`}
-        </code>
-        {` on the header's `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`select`}
-        </code>
-        {` prop. When some (but not all) selectable rows are selected, the header checkbox will convey this information to assistive technologies and also display a dash instead of a checkmark.`}
-      </p>
-    </Example>,
-  'Selectable radio input': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\n\ninterface Repository {\n  name: string;\n  branches: string;\n  prs: string;\n  workspaces: string;\n  lastCommit: string;\n}\n\nexport const TableSelectableRadio: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' },\n    { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },\n    { name: 'p', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example\n\n  // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.\n  // This is to prevent state from being based on row order index in case we later add sorting.\n  const [selectedRepoName, setSelectedRepoName] = useState<string | null>(null);\n\n  return (\n    <Table aria-label=\"Selectable table\">\n      <Thead>\n        <Tr>\n          <Th screenReaderText=\"Row select\" />\n          <Th>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.workspaces}</Th>\n          <Th>{columnNames.lastCommit}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {repositories.map((repo, rowIndex) => (\n          <Tr key={repo.name}>\n            <Td\n              select={{\n                rowIndex,\n                onSelect: () => setSelectedRepoName(repo.name),\n                isSelected: selectedRepoName === repo.name,\n                isDisabled: !isRepoSelectable(repo),\n                variant: 'radio'\n              }}\n            />\n            <Td dataLabel={columnNames.name}>{repo.name}</Td>\n            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n          </Tr>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Selectable radio input","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Similarly to the selectable example above, the radio buttons use the first column. The first header cell is empty, and each body row's first cell has radio button props.`}
-      </p>
-    </Example>,
-  'Row click handler, clickable rows': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\n\ninterface Repository {\n  name: string;\n  branches: string | null;\n  prs: string | null;\n  workspaces: string;\n  lastCommit: string;\n}\n\nexport const TableClickable: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },\n    { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },\n    { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.\n  // This is to prevent state from being based on row order index in case we later add sorting.\n  const [selectedRepoName, setSelectedRepoName] = useState('');\n\n  return (\n    <Table aria-label=\"Clickable table\">\n      <Thead>\n        <Tr>\n          <Th>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.workspaces}</Th>\n          <Th>{columnNames.lastCommit}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {repositories.map((repo) => (\n          <Tr\n            key={repo.name}\n            onRowClick={() => setSelectedRepoName(repo.name)}\n            isSelectable\n            isClickable\n            isRowSelected={selectedRepoName === repo.name}\n          >\n            <Td dataLabel={columnNames.name}>{repo.name}</Td>\n            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n          </Tr>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Row click handler, clickable rows","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view.`}
-      </p>
-    </Example>,
-  'Editable rows': props => 
-    <Example {...pageData} {...props} {...{"code":"import { isValidElement, useRef, useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\nimport { Button, Checkbox, Radio, TextInput, KeyTypes, getUniqueId } from '@patternfly/react-core';\nimport RhUiEditFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-edit-fill-icon';\nimport CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\nimport inlineEditStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';\nimport { css } from '@patternfly/react-styles';\n\ninterface EditButtonsCellProps {\n  onClick: (type: 'save' | 'cancel' | 'edit') => void;\n  elementToFocusOnEditRef?: React.MutableRefObject<HTMLElement>;\n  rowAriaLabel: string;\n}\n\nconst EditButtonsCell: React.FunctionComponent<EditButtonsCellProps> = ({\n  onClick,\n  elementToFocusOnEditRef,\n  rowAriaLabel = 'row'\n}) => {\n  const editButtonRef = useRef<HTMLButtonElement>(undefined);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, button: 'edit' | 'stopEditing') => {\n    const focusRef = button === 'edit' ? elementToFocusOnEditRef : editButtonRef;\n\n    if (event.key === KeyTypes.Enter || event.key === KeyTypes.Space) {\n      // because space key triggers click event before keyDown, we have to prevent default behaviour and trigger click manually\n      event.preventDefault();\n      (event.target as HTMLButtonElement).click();\n      setTimeout(() => {\n        focusRef?.current?.focus();\n      }, 0);\n    }\n  };\n\n  return (\n    <>\n      <Td\n        dataLabel=\"Save and cancel buttons\"\n        className={css(\n          inlineEditStyles.inlineEditGroup,\n          inlineEditStyles.modifiers.iconGroup,\n          inlineEditStyles.modifiers.actionGroup\n        )}\n      >\n        <div className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.valid)}>\n          <Button\n            aria-label={`Save edits of ${rowAriaLabel}`}\n            onClick={() => onClick('save')}\n            onKeyDown={(event) => onKeyDown(event, 'stopEditing')}\n            variant=\"plain\"\n          >\n            <CheckIcon />\n          </Button>\n        </div>\n        <div className={css(inlineEditStyles.inlineEditAction)}>\n          <Button\n            aria-label={`Discard edits of ${rowAriaLabel}`}\n            onClick={() => onClick('cancel')}\n            onKeyDown={(event) => onKeyDown(event, 'stopEditing')}\n            variant=\"plain\"\n          >\n            <RhMicronsCloseIcon />\n          </Button>\n        </div>\n      </Td>\n      <Td\n        dataLabel=\"Edit button\"\n        className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.enableEditable)}\n      >\n        <Button\n          ref={editButtonRef}\n          aria-label={`Edit ${rowAriaLabel}`}\n          onClick={() => onClick('edit')}\n          onKeyDown={(event) => onKeyDown(event, 'edit')}\n          variant=\"plain\"\n        >\n          <RhUiEditFillIcon />\n        </Button>\n      </Td>\n    </>\n  );\n};\n\ninterface EditableCellProps {\n  dataLabel: string;\n  staticValue: React.ReactNode;\n  editingValue: React.ReactNode;\n  role?: string;\n  ariaLabel?: string;\n}\n\nconst EditableCell: React.FunctionComponent<EditableCellProps> = ({\n  dataLabel,\n  staticValue,\n  editingValue,\n  role,\n  ariaLabel\n}) => {\n  const hasMultipleInputs = Array.isArray(editingValue) && editingValue.every((elem) => isValidElement(elem));\n\n  return (\n    <Td dataLabel={dataLabel}>\n      <div className={css(inlineEditStyles.inlineEditValue)}>{staticValue}</div>\n      {hasMultipleInputs ? (\n        <div className={css(inlineEditStyles.inlineEditGroup, 'pf-m-column')} role={role} aria-label={ariaLabel}>\n          {(editingValue as React.ReactElement<any>[]).map((elem, index) => (\n            <div key={index} className={css(inlineEditStyles.inlineEditInput)}>\n              {elem}\n            </div>\n          ))}\n        </div>\n      ) : (\n        <div className={css(inlineEditStyles.inlineEditInput)}>{editingValue}</div>\n      )}\n    </Td>\n  );\n};\n\ninterface EditableRow {\n  data: CustomData;\n  columnNames: ColumnNames<CustomData>;\n  dataOptions?: CustomDataOptions;\n  saveChanges: (editedData: CustomData) => void;\n  ariaLabel: string;\n  rowIndex?: number;\n}\n\nconst EditableRow: React.FunctionComponent<EditableRow> = ({\n  data,\n  columnNames,\n  dataOptions,\n  saveChanges,\n  ariaLabel,\n  rowIndex\n}) => {\n  const [editable, setEditable] = useState(false);\n  const [editedData, setEditedData] = useState(data);\n\n  const inputRef = useRef(undefined);\n\n  return (\n    <Tr className={css(inlineEditStyles.inlineEdit, editable ? inlineEditStyles.modifiers.inlineEditable : '')}>\n      <EditableCell\n        dataLabel={columnNames.textInput}\n        staticValue={data.textInput}\n        editingValue={\n          <TextInput\n            aria-label={`${columnNames.textInput} ${ariaLabel}`}\n            ref={inputRef}\n            value={editedData.textInput}\n            onChange={(e) => setEditedData((data) => ({ ...data, textInput: (e.target as HTMLInputElement).value }))}\n          />\n        }\n      />\n      <EditableCell\n        dataLabel={columnNames.textInputDisabled}\n        staticValue={data.textInputDisabled}\n        editingValue={\n          <TextInput\n            aria-label={`${columnNames.textInputDisabled} ${ariaLabel}`}\n            isDisabled={true}\n            value={editedData.textInputDisabled ?? ''}\n          />\n        }\n      />\n      <EditableCell\n        dataLabel={columnNames.checkboxes}\n        staticValue={data.checkboxes.join(', ')}\n        role=\"group\"\n        ariaLabel={`Checkbox group row ${rowIndex}`}\n        editingValue={dataOptions?.checkboxes.map((option) => {\n          const id = getUniqueId('checkbox');\n          return (\n            <Checkbox\n              key={id}\n              name={id}\n              id={id}\n              label={option}\n              isChecked={editedData.checkboxes.includes(option)}\n              onChange={(_e, checked) =>\n                setEditedData((data) => ({\n                  ...data,\n                  checkboxes: checked ? [...data.checkboxes, option] : data.checkboxes.filter((item) => item !== option)\n                }))\n              }\n            />\n          );\n        })}\n      />\n      <EditableCell\n        dataLabel={columnNames.radios}\n        staticValue={data.radios}\n        ariaLabel={`Radio button group row ${rowIndex}`}\n        role=\"radiogroup\"\n        editingValue={dataOptions?.radios.map((option) => {\n          const id = getUniqueId('radio');\n          return (\n            <Radio\n              key={id}\n              name={id}\n              id={id}\n              label={option}\n              isChecked={editedData.radios === option}\n              onChange={() => setEditedData((data) => ({ ...data, radios: option }))}\n            />\n          );\n        })}\n      />\n      <EditButtonsCell\n        onClick={(type) => {\n          type === 'edit' ? setEditable(true) : setEditable(false);\n          type === 'save' && saveChanges(editedData);\n          type === 'cancel' && setEditedData(data);\n        }}\n        rowAriaLabel={ariaLabel}\n        elementToFocusOnEditRef={inputRef}\n      />\n    </Tr>\n  );\n};\n\ninterface CustomData {\n  textInput: string;\n  textInputDisabled: string | null;\n  checkboxes: string[];\n  radios: string;\n}\n\ninterface CustomDataOptions {\n  checkboxes: string[];\n  radios: string[];\n}\n\ntype ColumnNames<T> = { [K in keyof T]: string };\n\nexport const TableEditable: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const initialRows: CustomData[] = [\n    {\n      textInput: 'Editable text 1',\n      textInputDisabled: 'Non-editable text 1',\n      checkboxes: ['Option A'],\n      radios: 'Option A'\n    },\n    {\n      textInput: 'Editable text 2',\n      textInputDisabled: null,\n      checkboxes: [],\n      radios: 'Option B'\n    },\n    {\n      textInput: 'Editable text 3',\n      textInputDisabled: 'Non-editable text 3',\n      checkboxes: ['Option A', 'Option B'],\n      radios: 'Option A'\n    }\n  ];\n\n  // List of all selectable options for some cells of initialRows\n  const initialRowsOptions: CustomDataOptions[] = [\n    {\n      checkboxes: ['Option A', 'Option B', 'Option C'],\n      radios: ['Option A', 'Option B']\n    },\n    {\n      checkboxes: ['Option A', 'Option B'],\n      radios: ['Option A', 'Option B', 'Option C']\n    },\n    {\n      checkboxes: ['Option A', 'Option B'],\n      radios: ['Option A', 'Option B']\n    }\n  ];\n\n  const [rows, setRows] = useState(initialRows);\n\n  const columnNames: ColumnNames<CustomData> = {\n    textInput: 'Text input',\n    textInputDisabled: 'Disabled text input',\n    checkboxes: 'Checkboxes',\n    radios: 'Radios'\n  };\n\n  return (\n    <Table aria-label=\"Editable table\">\n      <Thead>\n        <Tr>\n          <Th>{columnNames.textInput}</Th>\n          <Th>{columnNames.textInputDisabled}</Th>\n          <Th>{columnNames.checkboxes}</Th>\n          <Th>{columnNames.radios}</Th>\n          <Th screenReaderText=\"Row edit actions\" />\n        </Tr>\n      </Thead>\n      <Tbody>\n        {rows.map((data, index) => (\n          <EditableRow\n            key={index}\n            data={data}\n            rowIndex={index}\n            dataOptions={initialRowsOptions[index]}\n            columnNames={columnNames}\n            saveChanges={(editedRow) => {\n              setRows((rows) => rows.map((row, i) => (i === index ? editedRow : row)));\n            }}\n            ariaLabel={`row ${index + 1}`}\n          ></EditableRow>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Editable rows","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`This example shows a table with editable rows. Cells in a row can be edited after clicking on the edit icon.`}
-      </p>
-    </Example>,
-  'Actions': props => 
-    <Example {...pageData} {...props} {...{"code":"/* eslint-disable no-console */\nimport { Fragment, useState } from 'react';\nimport { Button, MenuToggle, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps } from '@patternfly/react-core';\nimport {\n  Table,\n  TableText,\n  Thead,\n  Tr,\n  Th,\n  Tbody,\n  Td,\n  CustomActionsToggleProps,\n  ActionsColumn,\n  IAction\n} from '@patternfly/react-table';\n\ninterface Repository {\n  name: string;\n  branches: string;\n  prs: string;\n  workspaces: string;\n  lastCommit: string;\n  singleAction: string;\n}\n\ntype ExampleType = 'customToggle';\n\nexport const TableActions: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five', singleAction: 'Start' },\n    { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five', singleAction: '' },\n    { name: 'p', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five', singleAction: 'Start' },\n    { name: '4', branches: '2', prs: 'b', workspaces: 'four', lastCommit: 'five', singleAction: 'Start' },\n    { name: '5', branches: '2', prs: 'b', workspaces: 'four', lastCommit: 'five', singleAction: 'Start' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit',\n    singleAction: 'Single action'\n  };\n\n  // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.\n  const [exampleChoice, setExampleChoice] = useState<ExampleType | ''>('');\n  const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {\n    const id = event.currentTarget.id;\n    // Allow toggling off if clicking the already selected item\n    setExampleChoice(exampleChoice === id ? '' : (id as ExampleType));\n  };\n\n  const customActionsToggle = (props: CustomActionsToggleProps) => (\n    <MenuToggle ref={props.toggleRef} onClick={props.onToggle} isDisabled={props.isDisabled}>\n      Actions\n    </MenuToggle>\n  );\n\n  const defaultActions = (repo: Repository): IAction[] => [\n    {\n      title: 'Some action',\n      onClick: () => console.log(`clicked on Some action, on row ${repo.name}`)\n    },\n    {\n      title: <a href=\"https://www.patternfly.org\">Link action</a>\n    },\n    {\n      isSeparator: true\n    },\n    {\n      title: 'Third action',\n      onClick: () => console.log(`clicked on Third action, on row ${repo.name}`)\n    }\n  ];\n\n  const lastRowActions = (repo: Repository): IAction[] => [\n    {\n      title: 'Some action',\n      onClick: () => console.log(`clicked on Some action, on row ${repo.name}`)\n    },\n    {\n      title: <div>Another action</div>,\n      onClick: () => console.log(`clicked on Another action, on row ${repo.name}`)\n    },\n    {\n      isSeparator: true\n    },\n    {\n      title: 'Third action',\n      onClick: () => console.log(`clicked on Third action, on row ${repo.name}`)\n    }\n  ];\n\n  return (\n    <Fragment>\n      <ToggleGroup aria-label=\"Default uses kebab toggle\">\n        <ToggleGroupItem\n          text=\"Custom actions toggle\"\n          buttonId=\"customToggle\"\n          isSelected={exampleChoice === 'customToggle'}\n          onChange={onExampleTypeChange}\n        />\n      </ToggleGroup>\n      <Table aria-label=\"Actions table\">\n        <Thead>\n          <Tr>\n            <Th>{columnNames.name}</Th>\n            <Th>{columnNames.branches}</Th>\n            <Th>{columnNames.prs}</Th>\n            <Th>{columnNames.workspaces}</Th>\n            <Th>{columnNames.lastCommit}</Th>\n            <Th screenReaderText=\"Primary action\" />\n            <Th screenReaderText=\"Secondary action\" />\n          </Tr>\n        </Thead>\n        <Tbody>\n          {repositories.map((repo) => {\n            // Arbitrary logic to determine which rows get which actions in this example\n            let rowActions: IAction[] | null = defaultActions(repo);\n            if (repo.name === 'a') {\n              rowActions = null;\n            }\n            if (repo.name === '5') {\n              rowActions = lastRowActions(repo);\n            }\n            let singleActionButton: React.ReactNode = null;\n            if (repo.singleAction !== '') {\n              singleActionButton = (\n                <TableText>\n                  <Button variant=\"secondary\">{repo.singleAction}</Button>\n                </TableText>\n              );\n            }\n\n            return (\n              <Tr key={repo.name}>\n                <Td dataLabel={columnNames.name}>{repo.name}</Td>\n                <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n                <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n                <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n                <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n                <Td dataLabel={columnNames.singleAction} modifier=\"fitContent\" hasAction>\n                  {singleActionButton}\n                </Td>\n                <Td isActionCell>\n                  {rowActions ? (\n                    <ActionsColumn\n                      items={rowActions}\n                      isDisabled={repo.name === '4'} // Also arbitrary for the example\n                      actionsToggle={exampleChoice === 'customToggle' ? customActionsToggle : undefined}\n                    />\n                  ) : null}\n                </Td>\n              </Tr>\n            );\n          })}\n        </Tbody>\n      </Table>\n    </Fragment>\n  );\n};\n","title":"Actions","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`This example demonstrates adding actions as the last column. The header's last cell is an empty cell, and each body row's last cell is an action cell.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To make a cell an action cell, render an `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`ActionsColumn`}
-        </code>
-        {` component inside a row's last `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Td`}
-        </code>
-        {` and pass an array of `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`IAction`}
-        </code>
-        {` objects via the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`items`}
-        </code>
-        {` prop of `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`ActionsColumn`}
-        </code>
-        {`.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`If actions menus are getting clipped by other items on the page, such as sticky columns or rows, the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`ActionsColumn`}
-        </code>
-        {` can be passed a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`menuAppendTo`}
-        </code>
-        {` prop to adjust where the actions menu is appended.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`When a table row contains mixed content of text and interactive elements, the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`hasAction`}
-        </code>
-        {` property may be passed to a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Td`}
-        </code>
-        {` which contains interactive content like the below example's start `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Button`}
-        </code>
-        {`. This will align buttons and other elements with other cells' text. Note that `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`hasAction`}
-        </code>
-        {` should not be used with `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Td`}
-        </code>
-        {`s in an `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`ActionsColumn`}
-        </code>
-        {` because that comes with it's own spacing.`}
-      </p>
-    </Example>,
-  'Actions Overflow': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Button,\n  OverflowMenu,\n  OverflowMenuControl,\n  OverflowMenuContent,\n  OverflowMenuGroup,\n  OverflowMenuItem,\n  OverflowMenuDropdownItem,\n  MenuToggle,\n  Dropdown,\n  DropdownList\n} from '@patternfly/react-core';\nimport { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\ninterface Repository {\n  name: string;\n  branches: string;\n  prs: string;\n  workspaces: string;\n  lastCommit: string;\n  isMenuOpen: boolean;\n}\n\nexport const TableActions: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five', isMenuOpen: false },\n    { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five', isMenuOpen: false },\n    { name: 'p', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five', isMenuOpen: false },\n    { name: '4', branches: '2', prs: 'b', workspaces: 'four', lastCommit: 'five', isMenuOpen: false },\n    { name: '5', branches: '2', prs: 'b', workspaces: 'four', lastCommit: 'five', isMenuOpen: false }\n  ];\n\n  const [repos, setRepos] = useState(repositories);\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  const dropdownItems = [\n    <OverflowMenuDropdownItem itemId={0} key=\"item1\" isShared>\n      Primary\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={1} key=\"item2\" isShared>\n      Secondary\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={2} key=\"item3\" isShared>\n      Tertiary\n    </OverflowMenuDropdownItem>\n  ];\n\n  return (\n    <Fragment>\n      <Table aria-label=\"Actions table\">\n        <Thead>\n          <Tr>\n            <Th>{columnNames.name}</Th>\n            <Th>{columnNames.branches}</Th>\n            <Th>{columnNames.prs}</Th>\n            <Th>{columnNames.workspaces}</Th>\n            <Th>{columnNames.lastCommit}</Th>\n            <Th screenReaderText=\"Actions\" />\n          </Tr>\n        </Thead>\n        <Tbody>\n          {repos.map((repo) => (\n            <Tr key={repo.name}>\n              <Td dataLabel={columnNames.name}>{repo.name}</Td>\n              <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n              <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n              <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n              <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n              <Td isActionCell>\n                <OverflowMenu breakpoint=\"lg\">\n                  <OverflowMenuContent>\n                    <OverflowMenuGroup groupType=\"button\">\n                      <OverflowMenuItem>\n                        <Button variant=\"primary\">Primary</Button>\n                      </OverflowMenuItem>\n                      <OverflowMenuItem>\n                        <Button variant=\"secondary\">Secondary</Button>\n                      </OverflowMenuItem>\n                      <OverflowMenuItem>\n                        <Button variant=\"tertiary\">Tertiary</Button>\n                      </OverflowMenuItem>\n                    </OverflowMenuGroup>\n                  </OverflowMenuContent>\n                  <OverflowMenuControl>\n                    <Dropdown\n                      onSelect={() =>\n                        setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: !r.isMenuOpen })))\n                      }\n                      toggle={(toggleRef) => (\n                        <MenuToggle\n                          ref={toggleRef}\n                          variant=\"plain\"\n                          aria-label=\"Table actions overflow menu\"\n                          onClick={() =>\n                            setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: !r.isMenuOpen })))\n                          }\n                          isExpanded={repo.isMenuOpen}\n                          icon={<RhUiEllipsisVerticalFillIcon />}\n                        />\n                      )}\n                      isOpen={repo.isMenuOpen}\n                      onOpenChange={(isOpen) =>\n                        setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: isOpen })))\n                      }\n                    >\n                      <DropdownList>{dropdownItems}</DropdownList>\n                    </Dropdown>\n                  </OverflowMenuControl>\n                </OverflowMenu>\n              </Td>\n            </Tr>\n          ))}\n        </Tbody>\n      </Table>\n    </Fragment>\n  );\n};\n","title":"Actions Overflow","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Using an `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`OverflowMenu`}
-        </code>
-        {` in the actions column, allowing the actions to condense into a dropdown if necessary for space.`}
-      </p>
-    </Example>,
-  'Expandable': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent } from '@patternfly/react-table';\nimport { Checkbox } from '@patternfly/react-core';\n\ninterface Repository {\n  name: string;\n  branches: string;\n  prs: string;\n  workspaces: string;\n  lastCommit: string;\n  details?: {\n    detail1?: string;\n    detail2?: string;\n    detail3?: string;\n    detailFormat: 0 | 1 | 2 | 3;\n  };\n}\n\nexport const TableExpandable: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' },\n    {\n      name: 'parent 1',\n      branches: 'two',\n      prs: 'k',\n      workspaces: 'four',\n      lastCommit: 'five',\n      // This `details` structure is just for this example. You can drive expanded content from any kind of data.\n      details: { detailFormat: 0, detail1: 'single cell' }\n    },\n    {\n      name: 'parent 2',\n      branches: 'two',\n      prs: 'b',\n      workspaces: 'four',\n      lastCommit: 'five',\n      details: {\n        detailFormat: 1,\n        detail1:\n          'Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. '\n      }\n    },\n    {\n      name: 'parent 3',\n      branches: '2',\n      prs: 'b',\n      workspaces: 'four',\n      lastCommit: 'five',\n      details: { detailFormat: 2, detail1: 'single cell - noPadding' }\n    },\n    {\n      name: 'parent 4',\n      branches: '2',\n      prs: 'b',\n      workspaces: 'four',\n      lastCommit: 'five',\n      details: { detailFormat: 3, detail1: 'single cell - fullWidth & noPadding' }\n    },\n    {\n      name: 'parent 5',\n      branches: '2',\n      prs: 'b',\n      workspaces: 'four',\n      lastCommit: 'five',\n      details: {\n        detailFormat: 0,\n        detail1: \"spans 'Repositories and 'Branches'\",\n        detail2: \"spans 'Pull requests' and 'Workspaces', and 'Last commit'\"\n      }\n    },\n    {\n      name: 'parent 6',\n      branches: '2',\n      prs: 'b',\n      workspaces: 'four',\n      lastCommit: 'five',\n      details: {\n        detailFormat: 1,\n        detail1: \"fullWidth, spans the collapsible column and 'Repositories'\",\n        detail2: \"fullWidth, spans 'Branches' and 'Pull requests'\",\n        detail3: \"fullWidth, spans 'Workspaces' and 'Last commit'\"\n      }\n    }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  // In this example, expanded rows are tracked by the repo names from each row. This could be any unique identifier.\n  // This is to prevent state from being based on row order index in case we later add sorting.\n  // Note that this behavior is very similar to selection state.\n  const initialExpandedRepoNames = repositories.filter((repo) => !!repo.details).map((repo) => repo.name); // Default to all expanded\n  const [expandedRepoNames, setExpandedRepoNames] = useState<string[]>(initialExpandedRepoNames);\n  const setRepoExpanded = (repo: Repository, isExpanding = true) =>\n    setExpandedRepoNames((prevExpanded) => {\n      const otherExpandedRepoNames = prevExpanded.filter((r) => r !== repo.name);\n      return isExpanding ? [...otherExpandedRepoNames, repo.name] : otherExpandedRepoNames;\n    });\n  const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name);\n\n  const [isExampleCompact, setIsExampleCompact] = useState(true);\n\n  return (\n    <Fragment>\n      <Checkbox\n        label=\"Compact\"\n        isChecked={isExampleCompact}\n        onChange={(_event, checked) => setIsExampleCompact(checked)}\n        aria-label=\"toggle compact variation\"\n        id=\"toggle-compact\"\n        name=\"toggle-compact\"\n      />\n      <Table\n        isExpandable\n        hasAnimations\n        aria-label=\"Expandable table\"\n        variant={isExampleCompact ? 'compact' : undefined}\n      >\n        <Thead>\n          <Tr>\n            <Th screenReaderText=\"Row expansion\" />\n            <Th width={25}>{columnNames.name}</Th>\n            <Th width={10}>{columnNames.branches}</Th>\n            <Th width={15}>{columnNames.prs}</Th>\n            <Th width={30}>{columnNames.workspaces}</Th>\n            <Th width={10}>{columnNames.lastCommit}</Th>\n          </Tr>\n        </Thead>\n        {repositories.map((repo, rowIndex) => {\n          // Some arbitrary examples of how you could customize the child row based on your needs\n          let childIsFullWidth = false;\n          let childHasNoPadding = false;\n          let detail1Colspan = 1;\n          let detail2Colspan = 1;\n          let detail3Colspan = 1;\n          if (repo.details) {\n            const { detail1, detail2, detail3, detailFormat } = repo.details;\n            const numColumns = 5;\n            childIsFullWidth = [1, 3].includes(detailFormat);\n            childHasNoPadding = [2, 3].includes(detailFormat);\n            if (detail1 && !detail2 && !detail3) {\n              detail1Colspan = !childIsFullWidth ? numColumns : numColumns + 1; // Account for toggle column\n            } else if (detail1 && detail2 && !detail3) {\n              detail1Colspan = 2;\n              detail2Colspan = !childIsFullWidth ? 3 : 4;\n            } else if (detail1 && detail2 && detail3) {\n              detail1Colspan = 2;\n              detail2Colspan = 2;\n              detail3Colspan = !childIsFullWidth ? 1 : 2;\n            }\n          }\n          return (\n            <Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>\n              <Tr isContentExpanded={isRepoExpanded(repo)}>\n                <Td\n                  expand={\n                    repo.details\n                      ? {\n                          rowIndex,\n                          isExpanded: isRepoExpanded(repo),\n                          onToggle: () => setRepoExpanded(repo, !isRepoExpanded(repo)),\n                          expandId: 'composable-expandable-example'\n                        }\n                      : undefined\n                  }\n                />\n                <Td dataLabel={columnNames.name}>{repo.name}</Td>\n                <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n                <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n                <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n                <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n              </Tr>\n              {repo.details ? (\n                <Tr isExpanded={isRepoExpanded(repo)}>\n                  {!childIsFullWidth ? <Td /> : null}\n                  {repo.details.detail1 ? (\n                    <Td dataLabel=\"Repo detail 1\" noPadding={childHasNoPadding} colSpan={detail1Colspan}>\n                      <ExpandableRowContent>{repo.details.detail1}</ExpandableRowContent>\n                    </Td>\n                  ) : null}\n                  {repo.details.detail2 ? (\n                    <Td dataLabel=\"Repo detail 2\" noPadding={childHasNoPadding} colSpan={detail2Colspan}>\n                      <ExpandableRowContent>{repo.details.detail2}</ExpandableRowContent>\n                    </Td>\n                  ) : null}\n                  {repo.details.detail3 ? (\n                    <Td dataLabel=\"Repo detail 3\" noPadding={childHasNoPadding} colSpan={detail3Colspan}>\n                      <ExpandableRowContent>{repo.details.detail3}</ExpandableRowContent>\n                    </Td>\n                  ) : null}\n                </Tr>\n              ) : null}\n            </Tbody>\n          );\n        })}\n      </Table>\n    </Fragment>\n  );\n};\n","title":"Expandable","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To make a parent/child row pair expandable:`}
-      </p>
-      
-      <ol {...{"className":"pf-v6-c-content--ol pf-m-editorial ws-ol "}}>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Pass `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`isExpandable`}
-          </code>
-          {` to `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Table`}
-          </code>
-          {`.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Make the first cell in every row an expandable cell by passing `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`TdExpandType`}
-          </code>
-          {` object to the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`expand`}
-          </code>
-          {` prop on the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Td`}
-          </code>
-          {`.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Wrap the content of each child row cell in `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`ExpandableRowContent`}
-          </code>
-          {`.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Pass `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`isExpanded`}
-          </code>
-          {` to `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Tbody`}
-          </code>
-          {` and the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Tr`}
-          </code>
-          {` containing expandable content, and pass `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`isContentExpanded`}
-          </code>
-          {` to the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Tr`}
-          </code>
-          {` that acts as the "control row".`}
-        </li>
-        
-
-      </ol>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`The `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`TdExpandType`}
-        </code>
-        {` expects an `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`OnCollapse`}
-        </code>
-        {` event handler that has the following signature:`}
-      </p>
-      
-      <Example {...{"code":"type OnCollapse = (\n  event: React.MouseEvent,\n  rowIndex: number,\n  isOpen: boolean,\n  rowData: IRowData,\n  extraData: IExtraData\n) => void;","className":""}}>
-        
-      </Example>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Note: Table column widths will respond automatically when toggling expanded rows. To retain column widths between expanded and collapsed states, column header and/or data cell widths must be set.`}
-      </p>
-    </Example>,
-  'Compound expandable': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, TdProps, ExpandableRowContent } from '@patternfly/react-table';\n\nimport RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\n\ninterface Repository {\n  name: string;\n  branches: number;\n  prs: number;\n  workspaces: number;\n  lastCommit: string;\n}\n\nexport const TableCompoundExpandable: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'siemur/test-space', branches: 10, prs: 4, workspaces: 4, lastCommit: '20 minutes' },\n    { name: 'siemur/test-space-2', branches: 3, prs: 4, workspaces: 4, lastCommit: '20 minutes' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n  type ColumnKey = keyof typeof columnNames;\n\n  // In this example, expanded cells are tracked by the repo and property names from each row. This could be any pair of unique identifiers.\n  // This is to prevent state from being based on row and column order index in case we later add sorting and rearranging columns.\n  // Note that this behavior is very similar to selection state.\n  const [expandedCells, setExpandedCells] = useState<Record<string, ColumnKey>>({\n    'siemur/test-space': 'branches' // Default to the first cell of the first row being expanded\n  });\n  const setCellExpanded = (repo: Repository, columnKey: ColumnKey, isExpanding = true) => {\n    const newExpandedCells = { ...expandedCells };\n    if (isExpanding) {\n      newExpandedCells[repo.name] = columnKey;\n    } else {\n      delete newExpandedCells[repo.name];\n    }\n    setExpandedCells(newExpandedCells);\n  };\n  const compoundExpandParams = (\n    repo: Repository,\n    columnKey: ColumnKey,\n    rowIndex: number,\n    columnIndex: number\n  ): TdProps['compoundExpand'] => ({\n    isExpanded: expandedCells[repo.name] === columnKey,\n    onToggle: () => setCellExpanded(repo, columnKey, expandedCells[repo.name] !== columnKey),\n    expandId: 'compound-expandable-example',\n    rowIndex,\n    columnIndex\n  });\n\n  return (\n    <Table aria-label=\"Compound expandable table\" isExpandable hasAnimations>\n      <Thead>\n        <Tr>\n          <Th>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.workspaces}</Th>\n          <Th>{columnNames.lastCommit}</Th>\n          <Th screenReaderText=\"URL\" />\n        </Tr>\n      </Thead>\n      {repositories.map((repo: Repository, rowIndex: number) => {\n        const expandedCellKey = expandedCells[repo.name];\n        const isRowExpanded = !!expandedCellKey;\n        return (\n          <Tbody key={repo.name} isExpanded={isRowExpanded}>\n            <Tr isContentExpanded={isRowExpanded} isControlRow>\n              <Td width={25} dataLabel={columnNames.name} component=\"th\">\n                <a href=\"#\">{repo.name}</a>\n              </Td>\n              <Td\n                width={10}\n                dataLabel={columnNames.branches}\n                compoundExpand={compoundExpandParams(repo, 'branches', rowIndex, 1)}\n              >\n                <RhUiBranchFillIcon key=\"icon\" /> {repo.branches}\n              </Td>\n              <Td\n                width={10}\n                dataLabel={columnNames.prs}\n                compoundExpand={compoundExpandParams(repo, 'prs', rowIndex, 2)}\n              >\n                <RhUiCodeIcon key=\"icon\" /> {repo.prs}\n              </Td>\n              <Td\n                width={10}\n                dataLabel={columnNames.workspaces}\n                compoundExpand={compoundExpandParams(repo, 'workspaces', rowIndex, 3)}\n              >\n                <CubeIcon key=\"icon\" /> {repo.workspaces}\n              </Td>\n              <Td width={15} dataLabel={columnNames.lastCommit}>\n                {repo.lastCommit}\n              </Td>\n              <Td width={30}>\n                <a href=\"#\">Open in GitHub</a>\n              </Td>\n            </Tr>\n            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.branches}>\n              <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>\n                <ExpandableRowContent>\n                  <div>Expanded content for {repo.name}: branches goes here!</div>\n                </ExpandableRowContent>\n              </Td>\n            </Tr>\n            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.prs}>\n              <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>\n                <ExpandableRowContent>\n                  <div>Expanded content for {repo.name}: prs goes here!</div>\n                </ExpandableRowContent>\n              </Td>\n            </Tr>\n            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.workspaces}>\n              <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>\n                <ExpandableRowContent>\n                  <div>Expanded content for {repo.name}: workspaces goes here!</div>\n                </ExpandableRowContent>\n              </Td>\n            </Tr>\n          </Tbody>\n        );\n      })}\n    </Table>\n  );\n};\n","title":"Compound expandable","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To make a parent/child row pair compound expandable:`}
-      </p>
-      
-      <ol {...{"className":"pf-v6-c-content--ol pf-m-editorial ws-ol "}}>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Pass `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`isExpandable`}
-          </code>
-          {` to `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Table`}
-          </code>
-          {`.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Pass a `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`TdCompoundExpandType`}
-          </code>
-          {` object to the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`compoundExpand`}
-          </code>
-          {` prop on any `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Td`}
-          </code>
-          {` that has an expandable child row.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Wrap the content of each child row cell in `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`ExpandableRowContent`}
-          </code>
-          {`.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Pass `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`isExpanded`}
-          </code>
-          {` to `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Tbody`}
-          </code>
-          {` and the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Tr`}
-          </code>
-          {` containing expandable content, and pass `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`isContentExpanded`}
-          </code>
-          {` to the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Tr`}
-          </code>
-          {` that acts as the "control row".`}
-        </li>
-        
-
-      </ol>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`The `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`TdCompoundExpandType`}
-        </code>
-        {` expects an `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`OnExpand`}
-        </code>
-        {` event handler with the following signature`}
-      </p>
-      
-      <Example {...{"code":"export type OnExpand = (\n  event: React.MouseEvent,\n  rowIndex: number,\n  colIndex: number,\n  isOpen: boolean,\n  rowData: IRowData,\n  extraData: IExtraData\n) => void;","className":""}}>
-        
-      </Example>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`For a more complex compound expandable implementation with nested tables, see our `}
-        
-        <PatternflyThemeLink {...{"to":"/components/table/react-demos/compound-expansion","className":""}}>
-          {`table compound expansion demo`}
-        </PatternflyThemeLink>
-        {`.`}
-      </p>
-    </Example>,
-  'Cell width, breakpoint modifiers': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\n\ninterface Repository {\n  name: string;\n  branches: string | null;\n  prs: string | null;\n  workspaces: string;\n  lastCommit: string;\n}\n\nexport const TableCellWidth: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },\n    { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },\n    { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  return (\n    <Table aria-label=\"Cell widths\">\n      <Thead>\n        <Tr>\n          <Th width={15}>{columnNames.name}</Th>\n          <Th width={15}>{columnNames.branches}</Th>\n          <Th width={40} visibility={['hiddenOnMd', 'visibleOnLg']}>\n            {columnNames.prs}\n          </Th>\n          <Th width={15}>{columnNames.workspaces}</Th>\n          <Th width={15}>{columnNames.lastCommit}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {repositories.map((repo) => (\n          <Tr key={repo.name}>\n            <Td dataLabel={columnNames.name}>{repo.name}</Td>\n            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n            <Td dataLabel={columnNames.prs} visibility={['hiddenOnMd', 'visibleOnLg']}>\n              {repo.prs}\n            </Td>\n            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n          </Tr>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Cell width, breakpoint modifiers","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Controlling text': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\n\n// This example has been simplified to focus on the text modifier props. In real usage,\n// you may want to derive your rows from typed underlying data and minimal state. See other examples.\n\nconst columnNames = {\n  truncate: 'Truncate (width 20%)',\n  break: 'Break word',\n  wrap: 'Wrapping table header text. This th text will wrap instead of truncate.',\n  fit: 'Fit content',\n  nowrap: 'No wrap'\n};\n\nexport const TableControllingText: React.FunctionComponent = () => (\n  <Table aria-label=\"Controlling text\">\n    <Thead>\n      <Tr>\n        <Th width={20}>{columnNames.truncate}</Th>\n        <Th>{columnNames.break}</Th>\n        <Th modifier=\"wrap\">{columnNames.wrap}</Th>\n        <Th modifier=\"fitContent\">{columnNames.fit}</Th>\n        <Th>{columnNames.nowrap}</Th>\n      </Tr>\n    </Thead>\n    <Tbody>\n      <Tr>\n        <Td dataLabel={columnNames.truncate} modifier=\"truncate\">\n          This text will truncate instead of wrap.\n        </Td>\n        <Td dataLabel={columnNames.break} modifier=\"breakWord\">\n          <a>http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org</a>\n        </Td>\n        <Td dataLabel={columnNames.wrap}>\n          <p>\n            By default,\n            <code>thead</code> cells will truncate and\n            <code>tbody</code> cells will wrap. Use\n            <code>.pf-m-wrap</code> on a<code>th</code> to change its behavior.\n          </p>\n        </Td>\n        <Td dataLabel={columnNames.fit}>\n          This cell's content will adjust itself to the parent th width. This modifier only affects table layouts.\n        </Td>\n        <Td dataLabel={columnNames.nowrap} modifier=\"nowrap\">\n          <a href=\"#\">No wrap</a>\n        </Td>\n      </Tr>\n    </Tbody>\n  </Table>\n);\n","title":"Controlling text","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Modifiers with table text': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';\n\n// This example has been simplified to focus on the text modifier props. In real usage,\n// you may want to derive your rows from typed underlying data and minimal state. See other examples.\n\nconst columnNames = {\n  truncate: 'Truncating text',\n  wrap: 'Wrapping table header text. This th text will wrap instead of truncate.'\n};\n\nexport const TableTextModifiers: React.FunctionComponent = () => {\n  const [focused, setFocused] = useState(false);\n\n  return (\n    <Table aria-label=\"Table text\">\n      <Thead>\n        <Tr>\n          <Th width={30}>{columnNames.truncate}</Th>\n          <Th>{columnNames.wrap}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        <Tr>\n          <Td\n            onFocus={() => setFocused(true)}\n            onBlur={() => setFocused(false)}\n            tabIndex={0}\n            dataLabel={columnNames.truncate}\n          >\n            <TableText focused={focused} wrapModifier=\"truncate\">\n              This text will truncate instead of wrap.\n            </TableText>\n          </Td>\n          <Td dataLabel={columnNames.wrap}>\n            <TableText wrapModifier=\"nowrap\">\n              <a href=\"#\">This is a link that needs to be on one line and fully readable.</a>\n            </TableText>\n          </Td>\n        </Tr>\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Modifiers with table text","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`If the "wrapModifier" property is set to "truncate", it's needed to ensure that the corresponding tooltip can be opened using both keyboard and screen reader. Since this particular Td element is generic and doesn't have any predefined decorators, the focus management required to trigger the tooltip needs to be handled manually by defining and manipulating the requisite props.`}
-      </p>
-    </Example>,
-  'Empty state': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\nimport {\n  Bullseye,\n  EmptyState,\n  EmptyStateVariant,\n  EmptyStateBody,\n  Button,\n  EmptyStateFooter,\n  EmptyStateActions\n} from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\n\n// This example has been simplified to focus on the empty state. In real usage,\n// you may want to derive your rows from typed underlying data and minimal state. See other examples.\n\nexport const TableEmptyState: React.FunctionComponent = () => (\n  <Table aria-label=\"Empty state table\">\n    <Thead>\n      <Tr>\n        <Th>Repositories</Th>\n        <Th>Branches</Th>\n        <Th>Pull requests</Th>\n        <Th>Workspaces</Th>\n        <Th>Last commit</Th>\n      </Tr>\n    </Thead>\n    <Tbody>\n      <Tr>\n        <Td colSpan={8}>\n          <Bullseye>\n            <EmptyState headingLevel=\"h2\" titleText=\"No results found\" icon={SearchIcon} variant={EmptyStateVariant.sm}>\n              <EmptyStateBody>Clear all filters and try again.</EmptyStateBody>\n              <EmptyStateFooter>\n                <EmptyStateActions>\n                  <Button variant=\"link\">Clear all filters</Button>\n                </EmptyStateActions>\n              </EmptyStateFooter>\n            </EmptyState>\n          </Bullseye>\n        </Td>\n      </Tr>\n    </Tbody>\n  </Table>\n);\n","title":"Empty state","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Favoritable (implemented with sortable)': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useCallback, useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, ThProps } from '@patternfly/react-table';\n\ninterface Repository {\n  name: string;\n  branches: string;\n  prs: string;\n  workspaces: string;\n  lastCommit: string;\n}\n\nexport const TableFavoritable: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' },\n    { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },\n    { name: 'p', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  // Index of the currently sorted column\n  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key\n  // as the identifier of the sorted column. See the \"Compound expandable\" example.\n  const [activeSortIndex, setActiveSortIndex] = useState<number>();\n\n  // Sort direction of the currently sorted column\n  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc'>();\n\n  // Favorite state is similar to selection state, see Selectable with checkbox.\n  const [favoriteRepoNames, setFavoriteRepoNames] = useState<string[]>([]);\n  const setRepoFavorited = (repo: Repository, isFavoriting = true) =>\n    setFavoriteRepoNames((prevFavorites) => {\n      const otherFavorites = prevFavorites.filter((r) => r !== repo.name);\n      return isFavoriting ? [...otherFavorites, repo.name] : otherFavorites;\n    });\n  const isRepoFavorited = (repo: Repository) => favoriteRepoNames.includes(repo.name);\n\n  // State of the header cell to favorite / unfavorite all rows\n  const [headerFavorited, setHeaderFavorited] = useState(false);\n\n  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.\n  // In this example we only deal with booleans here because we only sort on the favorites column.\n  // For more complex sorting, see Sortable.\n  // Note: We also memoize the sortable values with useCallback to prevent rows jumping around when you change\n  // the favorites while sorting on that column. Only updating the sort state will reorder the rows.\n  const getSortableRowValues = useCallback(\n    (repo: Repository): boolean[] => [isRepoFavorited(repo)],\n    [activeSortIndex, activeSortDirection]\n  );\n\n  // Note that we perform the sort as part of the component's render logic and not in onSort.\n  // We shouldn't store the list of data in state because we don't want to have to sync that with props.\n  let sortedRepositories = repositories;\n  if (activeSortIndex !== undefined) {\n    sortedRepositories = repositories.sort((a, b) => {\n      const aValue = getSortableRowValues(a)[activeSortIndex];\n      const bValue = getSortableRowValues(b)[activeSortIndex];\n      if (aValue === bValue) {\n        return 0;\n      }\n      if (activeSortDirection === 'asc') {\n        return aValue > bValue ? 1 : -1;\n      } else {\n        return bValue > aValue ? 1 : -1;\n      }\n    });\n  }\n\n  const getSortParams = (columnIndex: number): ThProps['sort'] => ({\n    isFavorites: columnIndex === 0, // Not just statically true in case we add sorting on other columns later\n    sortBy: {\n      index: activeSortIndex,\n      direction: activeSortDirection\n    },\n    onSort: (_event, index, direction) => {\n      setActiveSortIndex(index);\n      setActiveSortDirection(direction);\n    },\n    'aria-label': 'Sort favorites',\n    columnIndex,\n    favoriteButtonProps: {\n      favorited: headerFavorited,\n      onClick: (_event) => {\n        repositories.forEach((repo) => setRepoFavorited(repo, !headerFavorited));\n        setHeaderFavorited(!headerFavorited);\n      },\n      'aria-label': headerFavorited ? 'Unfavorite all' : 'Favorite all'\n    }\n  });\n\n  return (\n    <Table aria-label=\"Favoritable table\" variant=\"compact\">\n      <Thead>\n        <Tr>\n          <Th sort={getSortParams(0)} />\n          <Th>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.workspaces}</Th>\n          <Th>{columnNames.lastCommit}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {sortedRepositories.map((repo, rowIndex) => (\n          <Tr key={rowIndex}>\n            <Td\n              favorites={{\n                isFavorited: isRepoFavorited(repo),\n                onFavorite: (_event, isFavoriting) => {\n                  setRepoFavorited(repo, isFavoriting);\n\n                  if (\n                    isFavoriting &&\n                    repositories.filter((r) => r !== repo).every((r) => favoriteRepoNames.includes(r.name))\n                  ) {\n                    setHeaderFavorited(true);\n                  }\n\n                  if (!isFavoriting && favoriteRepoNames.length === 1 && favoriteRepoNames.includes(repo.name)) {\n                    setHeaderFavorited(false);\n                  }\n                },\n                rowIndex\n              }}\n            />\n            <Td dataLabel={columnNames.name}>{repo.name}</Td>\n            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n          </Tr>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Favoritable (implemented with sortable)","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To make a row favoritable, the table needs a favoritable column.
-Pass a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`TdFavoritesType`}
-        </code>
-        {` object via the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`favorites`}
-        </code>
-        {` prop on each rows's first `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Td`}
-        </code>
-        {` in the favoritable column.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`The `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`TdFavoritesType`}
-        </code>
-        {` expects an `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`OnFavorite`}
-        </code>
-        {` event handler with the following signature:`}
-      </p>
-      
-      <Example {...{"code":"type OnFavorite = (\n  event: React.MouseEvent,\n  isFavorited: boolean,\n  rowIndex: number,\n  rowData: IRowData,\n  extraData: IExtraData\n) => void;","className":""}}>
-        
-      </Example>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To make a favoritable column sortable, pass a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`ThSortType`}
-        </code>
-        {` object to the favoritable column's `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Th`}
-        </code>
-        {` with `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isFavorites`}
-        </code>
-        {` set to true.`}
-      </p>
-    </Example>,
-  'Tree table': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, TreeRowWrapper, TdProps } from '@patternfly/react-table';\nimport LeafIcon from '@patternfly/react-icons/dist/esm/icons/leaf-icon';\nimport FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';\nimport FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';\n\ninterface RepositoriesTreeNode {\n  name: string;\n  branches: string;\n  pullRequests: string;\n  workspaces: string;\n  children?: RepositoriesTreeNode[];\n}\n\nexport const TableTree: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const data: RepositoriesTreeNode[] = [\n    {\n      name: 'Repositories one',\n      branches: 'Branch one',\n      pullRequests: 'Pull request one',\n      workspaces: 'Workplace one',\n      children: [\n        {\n          name: 'Repositories two',\n          branches: 'Branch two',\n          pullRequests: 'Pull request two',\n          workspaces: 'Workplace two',\n          children: [\n            {\n              name: 'Repositories three',\n              branches: 'Branch three',\n              pullRequests: 'Pull request three',\n              workspaces: 'Workplace three'\n            },\n            {\n              name: 'Repositories four',\n              branches: 'Branch four',\n              pullRequests: 'Pull request four',\n              workspaces: 'Workplace four'\n            }\n          ]\n        },\n        {\n          name: 'Repositories five',\n          branches: 'Branch five',\n          pullRequests: 'Pull request five',\n          workspaces: 'Workplace five'\n        },\n        {\n          name: 'Repositories six',\n          branches: 'Branch six',\n          pullRequests: 'Pull request six',\n          workspaces: 'Workplace six'\n        }\n      ]\n    },\n    {\n      name: 'Repositories seven',\n      branches: 'Branch seven',\n      pullRequests: 'Pull request seven',\n      workspaces: 'Workplace seven',\n      children: [\n        {\n          name: 'Repositories eight',\n          branches: 'Branch eight',\n          pullRequests: 'Pull request eight',\n          workspaces: 'Workplace eight'\n        }\n      ]\n    },\n    {\n      name: 'Repositories nine',\n      branches: 'Branch nine',\n      pullRequests: 'Pull request nine',\n      workspaces: 'Workplace nine'\n    }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces'\n  };\n\n  const [expandedNodeNames, setExpandedNodeNames] = useState<string[]>(['Repositories one']);\n  const [expandedDetailsNodeNames, setExpandedDetailsNodeNames] = useState<string[]>([]);\n  const [selectedNodeNames, setSelectedNodeNames] = useState<string[]>([]);\n\n  const getDescendants = (node: RepositoriesTreeNode): RepositoriesTreeNode[] => {\n    if (!node.children || !node.children.length) {\n      return [node];\n    } else {\n      let children: RepositoriesTreeNode[] = [];\n      node.children.forEach((child) => {\n        children = [...children, ...getDescendants(child)];\n      });\n      return children;\n    }\n  };\n\n  const areAllDescendantsSelected = (node: RepositoriesTreeNode) =>\n    getDescendants(node).every((n) => selectedNodeNames.includes(n.name));\n  const areSomeDescendantsSelected = (node: RepositoriesTreeNode) =>\n    getDescendants(node).some((n) => selectedNodeNames.includes(n.name));\n\n  const isNodeChecked = (node: RepositoriesTreeNode) => {\n    if (areAllDescendantsSelected(node)) {\n      return true;\n    }\n    if (areSomeDescendantsSelected(node)) {\n      return null;\n    }\n    return false;\n  };\n\n  /** \n    Recursive function which flattens the data into an array of flattened TreeRowWrapper components\n    params: \n      - nodes - array of a single level of tree nodes\n      - level - number representing how deeply nested the current row is\n      - posinset - position of the row relative to this row's siblings\n      - currentRowIndex - position of the row relative to the entire table\n      - isHidden - defaults to false, true if this row's parent is expanded\n  */\n  const renderRows = (\n    [node, ...remainingNodes]: RepositoriesTreeNode[],\n    level = 1,\n    posinset = 1,\n    rowIndex = 0,\n    isHidden = false\n  ): React.ReactNode[] => {\n    if (!node) {\n      return [];\n    }\n    const isExpanded = expandedNodeNames.includes(node.name);\n    const isDetailsExpanded = expandedDetailsNodeNames.includes(node.name);\n    const isChecked = isNodeChecked(node);\n    let icon = <LeafIcon />;\n    if (node.children) {\n      icon = isExpanded ? <FolderOpenIcon /> : <FolderIcon />;\n    }\n\n    const treeRow: TdProps['treeRow'] = {\n      onCollapse: () =>\n        setExpandedNodeNames((prevExpanded) => {\n          const otherExpandedNodeNames = prevExpanded.filter((name) => name !== node.name);\n          return isExpanded ? otherExpandedNodeNames : [...otherExpandedNodeNames, node.name];\n        }),\n      onToggleRowDetails: () =>\n        setExpandedDetailsNodeNames((prevDetailsExpanded) => {\n          const otherDetailsExpandedNodeNames = prevDetailsExpanded.filter((name) => name !== node.name);\n          return isDetailsExpanded ? otherDetailsExpandedNodeNames : [...otherDetailsExpandedNodeNames, node.name];\n        }),\n      onCheckChange: (_event, isChecking) => {\n        const nodeNamesToCheck = getDescendants(node).map((n) => n.name);\n        setSelectedNodeNames((prevSelected) => {\n          const otherSelectedNodeNames = prevSelected.filter((name) => !nodeNamesToCheck.includes(name));\n          return !isChecking ? otherSelectedNodeNames : [...otherSelectedNodeNames, ...nodeNamesToCheck];\n        });\n      },\n      rowIndex,\n      props: {\n        isExpanded,\n        isDetailsExpanded,\n        isHidden,\n        'aria-level': level,\n        'aria-posinset': posinset,\n        'aria-setsize': node.children ? node.children.length : 0,\n        isChecked,\n        checkboxId: `checkbox_id_${node.name.toLowerCase().replace(/\\s+/g, '_')}`,\n        icon\n      }\n    };\n\n    const childRows =\n      node.children && node.children.length\n        ? renderRows(node.children, level + 1, 1, rowIndex + 1, !isExpanded || isHidden)\n        : [];\n\n    return [\n      <TreeRowWrapper key={node.name} row={{ props: treeRow.props }}>\n        <Td dataLabel={columnNames.name} treeRow={treeRow}>\n          {node.name}\n        </Td>\n        <Td dataLabel={columnNames.branches}>{node.branches}</Td>\n        <Td dataLabel={columnNames.prs}>{node.pullRequests}</Td>\n        <Td dataLabel={columnNames.workspaces}>{node.workspaces}</Td>\n      </TreeRowWrapper>,\n      ...childRows,\n      ...renderRows(remainingNodes, level, posinset + 1, rowIndex + 1 + childRows.length, isHidden)\n    ];\n  };\n\n  return (\n    <Table isTreeTable aria-label=\"Tree table\">\n      <Thead>\n        <Tr>\n          <Th width={40}>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.workspaces}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>{renderRows(data)}</Tbody>\n    </Table>\n  );\n};\n","title":"Tree table","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To enable a tree table:`}
-      </p>
-      
-      <ol {...{"className":"pf-v6-c-content--ol pf-m-editorial ws-ol "}}>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Pass the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`isTreeTable`}
-          </code>
-          {` prop to the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Table`}
-          </code>
-          {` component`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Use a `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`TreeRowWrapper`}
-          </code>
-          {` rather than `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Tr`}
-          </code>
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Pass the following `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`props`}
-          </code>
-          {` to each row (both the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`TreeRowWrapper`}
-          </code>
-          {` and the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`treeRow`}
-          </code>
-          {` in the first column):`}
-          
-
-          
-          <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`isExpanded`}
-              </code>
-              {` - Flag indicating the node is expanded and its children are visible`}
-            </li>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`isDetailsExpanded`}
-              </code>
-              {` - (optional) Flag indicating the row's details are visible in responsive view`}
-            </li>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`isHidden`}
-              </code>
-              {` - Flag indicating the node's parent is expanded and this node is visible`}
-            </li>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`aria-level`}
-              </code>
-              {` - number representing how many levels deep this node is nested`}
-            </li>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`aria-posinset`}
-              </code>
-              {` - number representing where in the order this node sits amongst its siblings`}
-            </li>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`aria-setsize`}
-              </code>
-              {` - number representing the number of children this node has`}
-            </li>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`isChecked`}
-              </code>
-              {` - (optional) if this row uses checkboxes, flag indicating the checkbox checked`}
-            </li>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`icon`}
-              </code>
-              {` - (optional) ReactNode icon to display before the row title`}
-            </li>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`toggleAriaLabel`}
-              </code>
-              {` - (optional) accessible label for the expand/collapse children rows toggle arrow`}
-            </li>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`checkAriaLabel`}
-              </code>
-              {` - (optional) accessible label for the checkbox`}
-            </li>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`showDetailsAriaLabel`}
-              </code>
-              {` - (optional) accessible label for the show row details button in the responsive view`}
-            </li>
-            
-
-          </ul>
-          
-
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`The first `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Td`}
-          </code>
-          {` in each row will pass the following to the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`treeRow`}
-          </code>
-          {` prop:`}
-          
-
-          
-          <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`onCollapse`}
-              </code>
-              {` - Callback when user expands/collapses a row to reveal/hide the row's children.`}
-            </li>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`onCheckChange`}
-              </code>
-              {` - (optional) Callback when user changes the checkbox on a row.`}
-            </li>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`onToggleRowDetails`}
-              </code>
-              {` - (optional) Callback when user shows/hides the row details in responsive view.`}
-            </li>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`props`}
-              </code>
-              {` - (as defined above)`}
-            </li>
-            
-
-            
-            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-              
-              <code {...{"className":"ws-code "}}>
-                {`rowIndex`}
-              </code>
-              {` - number representing the index of the row`}
-            </li>
-            
-
-          </ul>
-          
-
-        </li>
-        
-
-      </ol>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Note: If this table is going to be tested using axe-core, the tests will flag the use of aria-level,
-aria-posinset, and aria-setsize as violations. This is an intentional choice at this time so that
-the voice over technologies will recognize the flat table structure as a tree.`}
-      </p>
-    </Example>,
-  'Flat tree table with no inset': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, TreeRowWrapper, TdProps } from '@patternfly/react-table';\nimport LeafIcon from '@patternfly/react-icons/dist/esm/icons/leaf-icon';\n\ninterface RepositoriesTreeNode {\n  name: string;\n  branches: string;\n  pullRequests: string;\n  workspaces: string;\n  children?: RepositoriesTreeNode[];\n}\n\nexport const TableTreeNoInset: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const data: RepositoriesTreeNode[] = [\n    {\n      name: 'Repositories one',\n      branches: 'Branch one',\n      pullRequests: 'Pull request one',\n      workspaces: 'Workplace one',\n      children: []\n    },\n    {\n      name: 'Repositories seven',\n      branches: 'Branch seven',\n      pullRequests: 'Pull request seven',\n      workspaces: 'Workplace seven',\n      children: []\n    },\n    {\n      name: 'Repositories nine',\n      branches: 'Branch nine',\n      pullRequests: 'Pull request nine',\n      workspaces: 'Workplace nine'\n    }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces'\n  };\n\n  const [selectedNodeNames, setSelectedNodeNames] = useState<string[]>([]);\n  const isNodeChecked = (node: RepositoriesTreeNode) => selectedNodeNames.includes(node.name);\n\n  /**\n   Recursive function which flattens the data into an array of flattened TreeRowWrapper components\n   params:\n   - nodes - array of a single level of tree nodes\n   - level - number representing how deeply nested the current row is\n   - posinset - position of the row relative to this row's siblings\n   - currentRowIndex - position of the row relative to the entire table\n   - isHidden - defaults to false, true if this row's parent is expanded\n   */\n  const renderRows = (\n    [node, ...remainingNodes]: RepositoriesTreeNode[],\n    level = 1,\n    posinset = 1,\n    rowIndex = 0,\n    isHidden = false\n  ): React.ReactNode[] => {\n    if (!node) {\n      return [];\n    }\n    const isChecked = isNodeChecked(node);\n    const icon = <LeafIcon />;\n\n    const treeRow: TdProps['treeRow'] = {\n      onCollapse: () => {},\n      onToggleRowDetails: () => {},\n      onCheckChange: (_event, isChecking) => {\n        setSelectedNodeNames((prevSelected) => {\n          const otherSelectedNodeNames = prevSelected.filter((name) => name === node.name);\n          return !isChecking ? otherSelectedNodeNames : [...otherSelectedNodeNames, node.name];\n        });\n      },\n      rowIndex,\n      props: {\n        isHidden,\n        'aria-level': level,\n        'aria-posinset': posinset,\n        'aria-setsize': node.children ? node.children.length : 0,\n        isChecked,\n        checkboxId: `flat_checkbox_id_${node.name.toLowerCase().replace(/\\s+/g, '_')}`,\n        icon\n      }\n    };\n\n    const childRows =\n      node.children && node.children.length ? renderRows(node.children, level + 1, 1, rowIndex + 1, isHidden) : [];\n\n    return [\n      <TreeRowWrapper key={node.name} row={{ props: treeRow.props }}>\n        <Td dataLabel={columnNames.name} treeRow={treeRow}>\n          {node.name}\n        </Td>\n        <Td dataLabel={columnNames.branches}>{node.branches}</Td>\n        <Td dataLabel={columnNames.prs}>{node.pullRequests}</Td>\n        <Td dataLabel={columnNames.workspaces}>{node.workspaces}</Td>\n      </TreeRowWrapper>,\n      ...childRows,\n      ...renderRows(remainingNodes, level, posinset + 1, rowIndex + 1 + childRows.length, isHidden)\n    ];\n  };\n\n  return (\n    <Table isTreeTable aria-label=\"Tree table\" hasNoInset>\n      <Thead>\n        <Tr>\n          <Th width={40}>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.workspaces}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>{renderRows(data)}</Tbody>\n    </Table>\n  );\n};\n","title":"Flat tree table with no inset","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To remove the inset used to leave space for the expand/collapse toggle in a flat tree table, use the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`hasNoInset`}
-        </code>
-        {` prop on the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Table`}
-        </code>
-        {` component.`}
-      </p>
-    </Example>,
-  'Draggable row table': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useRef, useState } from 'react';\nimport { Table, Thead, Tbody, Tr, Th, Td, TbodyProps, TrProps } from '@patternfly/react-table';\nimport styles from '@patternfly/react-styles/css/components/Table/table';\n\nexport const TableDraggable: React.FunctionComponent = () => {\n  const [draggedItemId, setDraggedItemId] = useState<string | null>(null);\n  const [draggingToItemIndex, setDraggingToItemIndex] = useState<number | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [itemOrder, setItemOrder] = useState(['row1', 'row2', 'row3']);\n  const [tempItemOrder, setTempItemOrder] = useState<string[]>([]);\n\n  const bodyRef = useRef<HTMLTableSectionElement>(undefined);\n\n  const onDragStart: TrProps['onDragStart'] = (evt) => {\n    evt.dataTransfer.effectAllowed = 'move';\n    evt.dataTransfer.setData('text/plain', evt.currentTarget.id);\n    const draggedItemId = evt.currentTarget.id;\n\n    evt.currentTarget.classList.add(styles.modifiers.ghostRow);\n    evt.currentTarget.setAttribute('aria-pressed', 'true');\n\n    setDraggedItemId(draggedItemId);\n    setIsDragging(true);\n  };\n\n  const moveItem = (arr: string[], i1: string, toIndex: number) => {\n    const fromIndex = arr.indexOf(i1);\n    if (fromIndex === toIndex) {\n      return arr;\n    }\n    const temp = arr.splice(fromIndex, 1);\n    arr.splice(toIndex, 0, temp[0]);\n\n    return arr;\n  };\n\n  const move = (itemOrder: string[]) => {\n    const ulNode = bodyRef.current;\n    const nodes = Array.from(ulNode.children);\n    if (nodes.map((node) => node.id).every((id, i) => id === itemOrder[i])) {\n      return;\n    }\n    while (ulNode.firstChild) {\n      ulNode.removeChild(ulNode.lastChild);\n    }\n\n    itemOrder.forEach((id) => {\n      ulNode.appendChild(nodes.find((n) => n.id === id));\n    });\n  };\n\n  const onDragCancel = () => {\n    Array.from(bodyRef.current.children).forEach((el) => {\n      el.classList.remove(styles.modifiers.ghostRow);\n      el.setAttribute('aria-pressed', 'false');\n    });\n    setDraggedItemId(null);\n    setDraggingToItemIndex(null);\n    setIsDragging(false);\n  };\n\n  const onDragLeave: TbodyProps['onDragLeave'] = (evt) => {\n    if (!isValidDrop(evt)) {\n      move(itemOrder);\n      setDraggingToItemIndex(null);\n    }\n  };\n\n  const isValidDrop = (evt: React.DragEvent<HTMLTableSectionElement | HTMLTableRowElement>) => {\n    const ulRect = bodyRef.current.getBoundingClientRect();\n    return (\n      evt.clientX > ulRect.x &&\n      evt.clientX < ulRect.x + ulRect.width &&\n      evt.clientY > ulRect.y &&\n      evt.clientY < ulRect.y + ulRect.height\n    );\n  };\n\n  const onDrop: TrProps['onDrop'] = (evt) => {\n    if (isValidDrop(evt)) {\n      setItemOrder(tempItemOrder);\n    } else {\n      onDragCancel();\n    }\n  };\n\n  const onDragOver: TbodyProps['onDragOver'] = (evt) => {\n    evt.preventDefault();\n\n    const curListItem = (evt.target as HTMLTableSectionElement).closest('tr');\n    if (!curListItem || !bodyRef.current.contains(curListItem) || curListItem.id === draggedItemId) {\n      return null;\n    } else {\n      const dragId = curListItem.id;\n      const newDraggingToItemIndex = Array.from(bodyRef.current.children).findIndex((item) => item.id === dragId);\n      if (newDraggingToItemIndex !== draggingToItemIndex) {\n        const tempItemOrder = moveItem([...itemOrder], draggedItemId, newDraggingToItemIndex);\n        move(tempItemOrder);\n        setDraggingToItemIndex(newDraggingToItemIndex);\n        setTempItemOrder(tempItemOrder);\n      }\n    }\n  };\n\n  const onDragEnd: TrProps['onDragEnd'] = (evt) => {\n    const target = evt.target as HTMLTableRowElement;\n    target.classList.remove(styles.modifiers.ghostRow);\n    target.setAttribute('aria-pressed', 'false');\n    setDraggedItemId(null);\n    setDraggingToItemIndex(null);\n    setIsDragging(false);\n  };\n\n  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];\n  const rows = [\n    {\n      id: 'row1',\n      repository: 'one',\n      branch: 'two',\n      pullRequest: 'three',\n      workspace: 'four',\n      lastCommit: 'five'\n    },\n    {\n      id: 'row2',\n      repository: 'one -2',\n      branch: null,\n      pullRequest: null,\n      workspace: 'four -2',\n      lastCommit: 'five -2'\n    },\n    {\n      id: 'row3',\n      repository: 'one - 3',\n      branch: 'two - 3',\n      pullRequest: 'three - 3',\n      workspace: 'four - 3',\n      lastCommit: 'five - 3'\n    }\n  ];\n\n  return (\n    <Table aria-label=\"Draggable table\" className={isDragging ? styles.modifiers.dragOver : ''}>\n      <Thead>\n        <Tr>\n          <Th screenReaderText=\"Drag and drop\" />\n          {columns.map((column, columnIndex) => (\n            <Th key={columnIndex}>{column}</Th>\n          ))}\n        </Tr>\n      </Thead>\n      <Tbody ref={bodyRef} onDragOver={onDragOver} onDrop={onDragOver} onDragLeave={onDragLeave}>\n        {rows.map((row, rowIndex) => {\n          const rowCellsToBuild = Object.keys(row).filter((rowCell) => rowCell !== 'id');\n          return (\n            <Tr key={rowIndex} id={row.id} draggable onDrop={onDrop} onDragEnd={onDragEnd} onDragStart={onDragStart}>\n              <Td\n                draggableRow={{\n                  id: `draggable-row-${row.id}`\n                }}\n              />\n              {rowCellsToBuild.map((key, keyIndex) => (\n                <Td key={`${rowIndex}_${keyIndex}`} dataLabel={columns[keyIndex]}>\n                  {row[key]}\n                </Td>\n              ))}\n            </Tr>\n          );\n        })}\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Draggable row table","lang":"ts","isBeta":true,"className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To make a row draggable:`}
-      </p>
-      
-      <ol {...{"className":"pf-v6-c-content--ol pf-m-editorial ws-ol "}}>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`The table needs a draggable column.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Each draggable `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Tr`}
-          </code>
-          {` needs to be passed `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`draggable`}
-          </code>
-          {`, `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`onDrop`}
-          </code>
-          {`, `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`onDragEnd`}
-          </code>
-          {`, and `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`onDragStart`}
-          </code>
-          {` props.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`The `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Tbody`}
-          </code>
-          {` needs `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`onDragOver`}
-          </code>
-          {`, `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`onDrop`}
-          </code>
-          {`, and `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`onDragLeave`}
-          </code>
-          {` props.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`While the user is dragging a row, the `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`pf-m-drag-over`}
-          </code>
-          {` class needs to be applied to `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Table`}
-          </code>
-          {`.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`The draggable `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Td`}
-          </code>
-          {` in each row needs a `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`TdDraggableType`}
-          </code>
-          {` object passed to its `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`draggable`}
-          </code>
-          {` prop.`}
-        </li>
-        
-
-      </ol>
-    </Example>,
-  'Sticky column': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';\n\ninterface Fact {\n  name: string;\n  state: string;\n  detail1: string;\n  detail2: string;\n  detail3: string;\n  detail4: string;\n  detail5: string;\n  detail6: string;\n  detail7: string;\n}\n\nexport const TableStickyColumn: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const facts: Fact[] = Array.from({ length: 9 }, (_, index) => ({\n    name: `Fact ${index + 1}`,\n    state: `State ${index + 1}`,\n    detail1: `Test cell ${index + 1}-3`,\n    detail2: `Test cell ${index + 1}-4`,\n    detail3: `Test cell ${index + 1}-5`,\n    detail4: `Test cell ${index + 1}-6`,\n    detail5: `Test cell ${index + 1}-7`,\n    detail6: `Test cell ${index + 1}-8`,\n    detail7: `Test cell ${index + 1}-9`\n  }));\n\n  const columnNames = {\n    name: 'Fact',\n    state: 'State',\n    header3: 'Header 3',\n    header4: 'Header 4',\n    header5: 'Header 5',\n    header6: 'Header 6',\n    header7: 'Header 7',\n    header8: 'Header 8',\n    header9: 'Header 9'\n  };\n\n  // Index of the currently sorted column\n  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key\n  // as the identifier of the sorted column. See the \"Compound expandable\" example.\n  const [activeSortIndex, setActiveSortIndex] = useState<number | null>(null);\n\n  // Sort direction of the currently sorted column\n  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);\n\n  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.\n  // This example is trivial since our data objects just contain strings, but if the data was more complex\n  // this would be a place to return simplified string or number versions of each column to sort by.\n  const getSortableRowValues = (fact: Fact): (string | number)[] => {\n    const { name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7 } = fact;\n    return [name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7];\n  };\n\n  // Note that we perform the sort as part of the component's render logic and not in onSort.\n  // We shouldn't store the list of data in state because we don't want to have to sync that with props.\n  let sortedFacts = facts;\n  if (activeSortIndex !== null) {\n    sortedFacts = facts.sort((a, b) => {\n      const aValue = getSortableRowValues(a)[activeSortIndex];\n      const bValue = getSortableRowValues(b)[activeSortIndex];\n      if (aValue === bValue) {\n        return 0;\n      }\n      if (activeSortDirection === 'asc') {\n        return aValue > bValue ? 1 : -1;\n      } else {\n        return bValue > aValue ? 1 : -1;\n      }\n    });\n  }\n\n  const getSortParams = (columnIndex: number): ThProps['sort'] => ({\n    sortBy: {\n      index: activeSortIndex,\n      direction: activeSortDirection\n    },\n    onSort: (_event, index, direction) => {\n      setActiveSortIndex(index);\n      setActiveSortDirection(direction);\n    },\n    columnIndex\n  });\n\n  return (\n    <InnerScrollContainer>\n      <Table aria-label=\"Sticky column table\" gridBreakPoint=\"\">\n        <Thead>\n          <Tr>\n            <Th isStickyColumn hasRightBorder modifier=\"truncate\" sort={getSortParams(0)}>\n              {columnNames.name}\n            </Th>\n            <Th modifier=\"truncate\" sort={getSortParams(1)}>\n              {columnNames.state}\n            </Th>\n            <Th modifier=\"truncate\">{columnNames.header3}</Th>\n            <Th modifier=\"truncate\">{columnNames.header4}</Th>\n            <Th modifier=\"truncate\">{columnNames.header5}</Th>\n            <Th modifier=\"truncate\">{columnNames.header6}</Th>\n            <Th modifier=\"truncate\">{columnNames.header7}</Th>\n            <Th modifier=\"truncate\">{columnNames.header8}</Th>\n            <Th modifier=\"truncate\">{columnNames.header9}</Th>\n          </Tr>\n        </Thead>\n        <Tbody>\n          {sortedFacts.map((fact) => (\n            <Tr key={fact.name}>\n              <Th isStickyColumn hasRightBorder modifier=\"truncate\">\n                {fact.name}\n              </Th>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.state}>\n                {fact.state}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header3}>\n                {fact.detail1}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header4}>\n                {fact.detail2}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header5}>\n                {fact.detail3}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header6}>\n                {fact.detail4}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header7}>\n                {fact.detail5}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header8}>\n                {fact.detail6}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header9}>\n                {fact.detail7}\n              </Td>\n            </Tr>\n          ))}\n        </Tbody>\n      </Table>\n    </InnerScrollContainer>\n  );\n};\n","title":"Sticky column","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To make a column sticky, wrap `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Table`}
-        </code>
-        {` with `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`InnerScrollContainer`}
-        </code>
-        {` and add the following properties to the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Th`}
-        </code>
-        {` or `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Td`}
-        </code>
-        {` that should be sticky:`}
-      </p>
-      
-      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          
-          <code {...{"className":"ws-code "}}>
-            {`isStickyColumn`}
-          </code>
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          
-          <code {...{"className":"ws-code "}}>
-            {`hasRightBorder`}
-          </code>
-          {` for a left-aligned sticky column, or `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`hasLeftBorder`}
-          </code>
-          {` for a right-aligned sticky column.`}
-        </li>
-        
-
-      </ul>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To prevent the default text wrapping behavior and allow horizontal scrolling, all `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Th`}
-        </code>
-        {` or `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Td`}
-        </code>
-        {` cells should also have the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`modifier="nowrap"`}
-        </code>
-        {` property. To set the minimum width of the sticky column, use the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`stickyMinWidth`}
-        </code>
-        {` property. For multiple sticky columns, use the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`stickyLeftOffset`}
-        </code>
-        {` and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`stickyRightOffset`}
-        </code>
-        {` properties for additional left or right sticky columns.`}
-      </p>
-    </Example>,
-  'Multiple left-aligned sticky columns': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';\nimport RhUiBlueprintIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-blueprint-icon';\n\ninterface Fact {\n  name: string;\n  state: string;\n  detail1: string;\n  detail2: string;\n  detail3: string;\n  detail4: string;\n  detail5: string;\n  detail6: string;\n  detail7: string;\n}\n\nexport const TableMultipleStickyColumns: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const facts: Fact[] = Array.from({ length: 9 }, (_, index) => ({\n    name: `Fact ${index + 1}`,\n    state: `State ${index + 1}`,\n    detail1: `Test cell ${index + 1}-3`,\n    detail2: `Test cell ${index + 1}-4`,\n    detail3: `Test cell ${index + 1}-5`,\n    detail4: `Test cell ${index + 1}-6`,\n    detail5: `Test cell ${index + 1}-7`,\n    detail6: `Test cell ${index + 1}-8`,\n    detail7: `Test cell ${index + 1}-9`\n  }));\n\n  const columnNames = {\n    name: 'Fact',\n    state: 'State',\n    header3: 'Header 3',\n    header4: 'Header 4',\n    header5: 'Header 5',\n    header6: 'Header 6',\n    header7: 'Header 7',\n    header8: 'Header 8',\n    header9: 'Header 9'\n  };\n\n  // Index of the currently sorted column\n  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key\n  // as the identifier of the sorted column. See the \"Compound expandable\" example.\n  const [activeSortIndex, setActiveSortIndex] = useState<number | null>(null);\n\n  // Sort direction of the currently sorted column\n  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);\n\n  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.\n  // This example is trivial since our data objects just contain strings, but if the data was more complex\n  // this would be a place to return simplified string or number versions of each column to sort by.\n  const getSortableRowValues = (fact: Fact): (string | number)[] => {\n    const { name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7 } = fact;\n    return [name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7];\n  };\n\n  // Note that we perform the sort as part of the component's render logic and not in onSort.\n  // We shouldn't store the list of data in state because we don't want to have to sync that with props.\n  let sortedFacts = facts;\n  if (activeSortIndex !== null) {\n    sortedFacts = facts.sort((a, b) => {\n      const aValue = getSortableRowValues(a)[activeSortIndex];\n      const bValue = getSortableRowValues(b)[activeSortIndex];\n      if (aValue === bValue) {\n        return 0;\n      }\n      if (activeSortDirection === 'asc') {\n        return aValue > bValue ? 1 : -1;\n      } else {\n        return bValue > aValue ? 1 : -1;\n      }\n    });\n  }\n\n  const getSortParams = (columnIndex: number): ThProps['sort'] => ({\n    sortBy: {\n      index: activeSortIndex,\n      direction: activeSortDirection\n    },\n    onSort: (_event, index, direction) => {\n      setActiveSortIndex(index);\n      setActiveSortDirection(direction);\n    },\n    columnIndex\n  });\n\n  return (\n    <InnerScrollContainer>\n      <Table aria-label=\"Multiple sticky column table\" gridBreakPoint=\"\">\n        <Thead>\n          <Tr>\n            <Th isStickyColumn modifier=\"truncate\" sort={getSortParams(0)}>\n              {columnNames.name}\n            </Th>\n            <Th\n              isStickyColumn\n              stickyMinWidth=\"120px\"\n              stickyLeftOffset=\"120px\"\n              hasRightBorder\n              modifier=\"truncate\"\n              sort={getSortParams(1)}\n            >\n              {columnNames.state}\n            </Th>\n            <Th modifier=\"truncate\">{columnNames.header3}</Th>\n            <Th modifier=\"truncate\">{columnNames.header4}</Th>\n            <Th modifier=\"truncate\">{columnNames.header5}</Th>\n            <Th modifier=\"truncate\">{columnNames.header6}</Th>\n            <Th modifier=\"truncate\">{columnNames.header7}</Th>\n            <Th modifier=\"truncate\">{columnNames.header8}</Th>\n            <Th modifier=\"truncate\">{columnNames.header9}</Th>\n          </Tr>\n        </Thead>\n        <Tbody>\n          {sortedFacts.map((fact) => (\n            <Tr key={fact.name}>\n              <Th isStickyColumn modifier=\"truncate\">\n                {fact.name}\n              </Th>\n              <Th isStickyColumn stickyMinWidth=\"120px\" stickyLeftOffset=\"120px\" modifier=\"truncate\" hasRightBorder>\n                <RhUiBlueprintIcon />\n                {` ${fact.state}`}\n              </Th>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header3}>\n                {fact.detail1}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header4}>\n                {fact.detail2}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header5}>\n                {fact.detail3}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header6}>\n                {fact.detail4}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header7}>\n                {fact.detail5}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header8}>\n                {fact.detail6}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header9}>\n                {fact.detail7}\n              </Td>\n            </Tr>\n          ))}\n        </Tbody>\n      </Table>\n    </InnerScrollContainer>\n  );\n};\n","title":"Multiple left-aligned sticky columns","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To make multiple left-aligned columns sticky:`}
-      </p>
-      
-      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`wrap `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Table`}
-          </code>
-          {` with `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`InnerScrollContainer`}
-          </code>
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`add `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`isStickyColumn`}
-          </code>
-          {` to all columns that should be sticky`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`add `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`hasRightBorder`}
-          </code>
-          {` to the rightmost sticky column`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`add `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`stickyLeftOffset`}
-          </code>
-          {` to each sticky column with a value that equals the combined width - set by `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`stickyMindWidth`}
-          </code>
-          {` - of the previous sticky columns. The leftmost sticky column should have a value of `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`0`}
-          </code>
-          {`, which is the default of this property.`}
-        </li>
-        
-
-      </ul>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To prevent the default text wrapping behavior and allow horizontal scrolling, all `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Th`}
-        </code>
-        {` or `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Td`}
-        </code>
-        {` cells should also have the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`modifier="nowrap"`}
-        </code>
-        {` property.`}
-      </p>
-    </Example>,
-  'Multiple right-aligned sticky columns': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';\n\ninterface Fact {\n  name: string;\n  state: string;\n  detail1: string;\n  detail2: string;\n  detail3: string;\n  detail4: string;\n  detail5: string;\n  detail6: string;\n  detail7: string;\n}\n\nexport const ComposableTableRightStickyColumn: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const facts: Fact[] = Array.from({ length: 9 }, (_, index) => ({\n    name: `Fact ${index + 1}`,\n    state: `State ${index + 1}`,\n    detail1: `Test cell ${index + 1}-3`,\n    detail2: `Test cell ${index + 1}-4`,\n    detail3: `Test cell ${index + 1}-5`,\n    detail4: `Test cell ${index + 1}-6`,\n    detail5: `Test cell ${index + 1}-7`,\n    detail6: `Test cell ${index + 1}-8`,\n    detail7: `Test cell ${index + 1}-9`\n  }));\n\n  const columnNames = {\n    name: 'Fact',\n    state: 'State',\n    header3: 'Header 3',\n    header4: 'Header 4',\n    header5: 'Header 5',\n    header6: 'Header 6',\n    header7: 'Header 7',\n    header8: 'Header 8',\n    header9: 'Header 9'\n  };\n\n  // Index of the currently sorted column\n  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key\n  // as the identifier of the sorted column. See the \"Compound expandable\" example.\n  const [activeSortIndex, setActiveSortIndex] = useState<number | null>(null);\n\n  // Sort direction of the currently sorted column\n  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);\n\n  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.\n  // This example is trivial since our data objects just contain strings, but if the data was more complex\n  // this would be a place to return simplified string or number versions of each column to sort by.\n  const getSortableRowValues = (fact: Fact): (string | number)[] => {\n    const { name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7 } = fact;\n    return [name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7];\n  };\n\n  // Note that we perform the sort as part of the component's render logic and not in onSort.\n  // We shouldn't store the list of data in state because we don't want to have to sync that with props.\n  let sortedFacts = facts;\n  if (activeSortIndex !== null) {\n    sortedFacts = facts.sort((a, b) => {\n      const aValue = getSortableRowValues(a)[activeSortIndex];\n      const bValue = getSortableRowValues(b)[activeSortIndex];\n      if (aValue === bValue) {\n        return 0;\n      }\n      if (activeSortDirection === 'asc') {\n        return aValue > bValue ? 1 : -1;\n      } else {\n        return bValue > aValue ? 1 : -1;\n      }\n    });\n  }\n\n  const getSortParams = (columnIndex: number): ThProps['sort'] => ({\n    sortBy: {\n      index: activeSortIndex,\n      direction: activeSortDirection\n    },\n    onSort: (_event, index, direction) => {\n      setActiveSortIndex(index);\n      setActiveSortDirection(direction);\n    },\n    columnIndex\n  });\n\n  return (\n    <InnerScrollContainer>\n      <Table aria-label=\"Sticky column table\" gridBreakPoint=\"\">\n        <Thead>\n          <Tr>\n            <Th modifier=\"truncate\" sort={getSortParams(0)}>\n              {columnNames.name}\n            </Th>\n            <Th modifier=\"truncate\" sort={getSortParams(1)}>\n              {columnNames.state}\n            </Th>\n            <Th modifier=\"truncate\">{columnNames.header3}</Th>\n            <Th modifier=\"truncate\">{columnNames.header4}</Th>\n            <Th modifier=\"truncate\">{columnNames.header5}</Th>\n            <Th modifier=\"truncate\">{columnNames.header6}</Th>\n            <Th modifier=\"truncate\">{columnNames.header7}</Th>\n            <Th isStickyColumn hasLeftBorder stickyMinWidth=\"130px\" stickyRightOffset=\"130px\" modifier=\"truncate\">\n              {columnNames.header8}\n            </Th>\n            <Th isStickyColumn stickyMinWidth=\"130px\" modifier=\"truncate\">\n              {columnNames.header9}\n            </Th>\n          </Tr>\n        </Thead>\n        <Tbody>\n          {sortedFacts.map((fact) => (\n            <Tr key={fact.name}>\n              <Th modifier=\"nowrap\">{fact.name}</Th>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.state}>\n                {fact.state}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header3}>\n                {fact.detail1}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header4}>\n                {fact.detail2}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header5}>\n                {fact.detail3}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header6}>\n                {fact.detail4}\n              </Td>\n              <Td modifier=\"nowrap\" dataLabel={columnNames.header7}>\n                {fact.detail5}\n              </Td>\n              <Td\n                isStickyColumn\n                hasLeftBorder\n                stickyMinWidth=\"130px\"\n                stickyRightOffset=\"130px\"\n                modifier=\"nowrap\"\n                dataLabel={columnNames.header8}\n              >\n                {fact.detail6}\n              </Td>\n              <Td isStickyColumn stickyMinWidth=\"130px\" modifier=\"nowrap\" dataLabel={columnNames.header9}>\n                {fact.detail7}\n              </Td>\n            </Tr>\n          ))}\n        </Tbody>\n      </Table>\n    </InnerScrollContainer>\n  );\n};\n","title":"Multiple right-aligned sticky columns","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To make multiple right-aligned columns sticky:`}
-      </p>
-      
-      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`wrap `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Table`}
-          </code>
-          {` with `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`InnerScrollContainer`}
-          </code>
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`add `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`isStickyColumn`}
-          </code>
-          {` to all columns that should be sticky`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`add `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`hasLeftBorder`}
-          </code>
-          {` to the leftmost sticky column`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`add `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`stickyRightOffset`}
-          </code>
-          {` to each sticky column with a value that equals the combined width - set by `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`stickyMindWidth`}
-          </code>
-          {` - of the next sticky columns. The rightmost sticky column should have a value of `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`0`}
-          </code>
-          {`, which is the default of this property.`}
-        </li>
-        
-
-      </ul>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To prevent the default text wrapping behavior and allow horizontal scrolling, all `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Th`}
-        </code>
-        {` or `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Td`}
-        </code>
-        {` cells should also have the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`modifier="nowrap"`}
-        </code>
-        {` property.`}
-      </p>
-    </Example>,
-  'Dynamic sticky header': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useLayoutEffect, useRef, useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';\nimport RhUiBlueprintIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-blueprint-icon';\n\ninterface Fact {\n  name: string;\n  state: string;\n  detail1: string;\n  detail2: string;\n  detail3: string;\n  detail4: string;\n  detail5: string;\n  detail6: string;\n  detail7: string;\n}\n\nconst useIsStuckFromScrollParent = ({\n  shouldTrack,\n  scrollParentRef\n}: {\n  /** Indicates whether to track the scroll top position of the scroll parent element */\n  shouldTrack: boolean;\n  /** Reference to the scroll parent element */\n  scrollParentRef: React.RefObject<any>;\n}): boolean => {\n  const [isStuck, setIsStuck] = useState(false);\n\n  useLayoutEffect(() => {\n    if (!shouldTrack) {\n      setIsStuck(false);\n      return;\n    }\n\n    const scrollElement = scrollParentRef.current;\n    if (!scrollElement) {\n      setIsStuck(false);\n      return;\n    }\n\n    const syncFromScroll = () => {\n      setIsStuck(scrollElement.scrollTop > 0);\n    };\n    syncFromScroll();\n    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });\n    return () => scrollElement.removeEventListener('scroll', syncFromScroll);\n  }, [shouldTrack, scrollParentRef]);\n\n  return isStuck;\n};\n\nexport const TableStickyHeaderDynamic: React.FunctionComponent = () => {\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n  const isStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef: scrollContainerRef });\n\n  // In real usage, this data would come from some external source like an API via props.\n  const facts: Fact[] = Array.from({ length: 9 }, (_, index) => ({\n    name: `Fact ${index + 1}`,\n    state: `State ${index + 1}`,\n    detail1: `Test cell ${index + 1}-3`,\n    detail2: `Test cell ${index + 1}-4`,\n    detail3: `Test cell ${index + 1}-5`,\n    detail4: `Test cell ${index + 1}-6`,\n    detail5: `Test cell ${index + 1}-7`,\n    detail6: `Test cell ${index + 1}-8`,\n    detail7: `Test cell ${index + 1}-9`\n  }));\n\n  const columnNames = {\n    name: 'Fact',\n    state: 'State',\n    header3: 'Header 3',\n    header4: 'Header 4',\n    header5: 'Header 5',\n    header6: 'Header 6',\n    header7: 'Header 7',\n    header8: 'Header 8',\n    header9: 'Header 9'\n  };\n\n  return (\n    <div style={{ height: '400px' }}>\n      <InnerScrollContainer ref={scrollContainerRef}>\n        <Table\n          aria-label=\"Dynamic sticky header table\"\n          gridBreakPoint=\"\"\n          isStickyHeaderBase\n          isStickyHeaderStuck={isStuck}\n        >\n          <Thead>\n            <Tr>\n              <Th modifier=\"truncate\">{columnNames.name}</Th>\n              <Th modifier=\"truncate\">{columnNames.state}</Th>\n              <Th modifier=\"truncate\">{columnNames.header3}</Th>\n              <Th modifier=\"truncate\">{columnNames.header4}</Th>\n              <Th modifier=\"truncate\">{columnNames.header5}</Th>\n              <Th modifier=\"truncate\">{columnNames.header6}</Th>\n              <Th modifier=\"truncate\">{columnNames.header7}</Th>\n              <Th modifier=\"truncate\">{columnNames.header8}</Th>\n              <Th modifier=\"truncate\">{columnNames.header9}</Th>\n            </Tr>\n          </Thead>\n          <Tbody>\n            {facts.map((fact) => (\n              <Tr key={fact.name}>\n                <Td modifier=\"nowrap\" dataLabel={columnNames.name}>\n                  {fact.name}\n                </Td>\n                <Td modifier=\"nowrap\" dataLabel={columnNames.state}>\n                  <RhUiBlueprintIcon />\n                  {` ${fact.state}`}\n                </Td>\n                <Td modifier=\"nowrap\" dataLabel={columnNames.header3}>\n                  {fact.detail1}\n                </Td>\n                <Td modifier=\"nowrap\" dataLabel={columnNames.header4}>\n                  {fact.detail2}\n                </Td>\n                <Td modifier=\"nowrap\" dataLabel={columnNames.header5}>\n                  {fact.detail3}\n                </Td>\n                <Td modifier=\"nowrap\" dataLabel={columnNames.header6}>\n                  {fact.detail4}\n                </Td>\n                <Td modifier=\"nowrap\" dataLabel={columnNames.header7}>\n                  {fact.detail5}\n                </Td>\n                <Td modifier=\"nowrap\" dataLabel={columnNames.header8}>\n                  {fact.detail6}\n                </Td>\n                <Td modifier=\"nowrap\" dataLabel={columnNames.header9}>\n                  {fact.detail7}\n                </Td>\n              </Tr>\n            ))}\n          </Tbody>\n        </Table>\n      </InnerScrollContainer>\n    </div>\n  );\n};\n","title":"Dynamic sticky header","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`A sticky header may alternatively be implemented with two properties: `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isStickyHeaderBase`}
-        </code>
-        {` and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isStickyHeaderStuck`}
-        </code>
-        {` - which allows separate control of the sticky position and sticky styling. `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isStickyHeaderBase`}
-        </code>
-        {` should always be applied to make the header position sticky, and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isStickyHeaderStuck`}
-        </code>
-        {` may be applied dynamically to enable the sticky styling, such as when the sticky header is not at the top of the scroll parent as shown in the example.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        
-        <code {...{"className":"ws-code "}}>
-          {`isStickyHeader`}
-        </code>
-        {` acts as if both properties are present and true when applied, and is useful when dynamic sticky styling is not necessary.`}
-      </p>
-    </Example>,
-  'Sticky columns and header': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Table,\n  Thead,\n  Tr,\n  Th,\n  Tbody,\n  Td,\n  InnerScrollContainer,\n  OuterScrollContainer,\n  ThProps,\n  ISortBy\n} from '@patternfly/react-table';\nimport RhUiBlueprintIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-blueprint-icon';\n\ninterface Fact {\n  name: string;\n  state: string;\n  detail1: string;\n  detail2: string;\n  detail3: string;\n  detail4: string;\n  detail5: string;\n  detail6: string;\n  detail7: string;\n}\n\nexport const TableStickyColumnsAndHeader: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const facts: Fact[] = Array.from({ length: 9 }, (_, index) => ({\n    name: `Fact ${index + 1}`,\n    state: `State ${index + 1}`,\n    detail1: `Test cell ${index + 1}-3`,\n    detail2: `Test cell ${index + 1}-4`,\n    detail3: `Test cell ${index + 1}-5`,\n    detail4: `Test cell ${index + 1}-6`,\n    detail5: `Test cell ${index + 1}-7`,\n    detail6: `Test cell ${index + 1}-8`,\n    detail7: `Test cell ${index + 1}-9`\n  }));\n\n  const columnNames = {\n    name: 'Fact',\n    state: 'State',\n    header3: 'Header 3',\n    header4: 'Header 4',\n    header5: 'Header 5',\n    header6: 'Header 6',\n    header7: 'Header 7',\n    header8: 'Header 8',\n    header9: 'Header 9'\n  };\n\n  // Index of the currently sorted column\n  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key\n  // as the identifier of the sorted column. See the \"Compound expandable\" example.\n  const [activeSortIndex, setActiveSortIndex] = useState(-1);\n\n  // Sort direction of the currently sorted column\n  const [activeSortDirection, setActiveSortDirection] = useState<ISortBy['direction']>();\n\n  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.\n  // This example is trivial since our data objects just contain strings, but if the data was more complex\n  // this would be a place to return simplified string or number versions of each column to sort by.\n  const getSortableRowValues = (fact: Fact): (string | number)[] => {\n    const { name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7 } = fact;\n    return [name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7];\n  };\n\n  // Note that we perform the sort as part of the component's render logic and not in onSort.\n  // We shouldn't store the list of data in state because we don't want to have to sync that with props.\n  let sortedFacts = facts;\n  if (activeSortIndex > -1) {\n    sortedFacts = facts.sort((a, b) => {\n      const aValue = getSortableRowValues(a)[activeSortIndex];\n      const bValue = getSortableRowValues(b)[activeSortIndex];\n      if (aValue === bValue) {\n        return 0;\n      }\n      if (activeSortDirection === 'asc') {\n        return aValue > bValue ? 1 : -1;\n      } else {\n        return bValue > aValue ? 1 : -1;\n      }\n    });\n  }\n\n  const getSortParams = (columnIndex: number): ThProps['sort'] => ({\n    sortBy: {\n      index: activeSortIndex,\n      direction: activeSortDirection\n    },\n    onSort: (_event, index, direction) => {\n      setActiveSortIndex(index);\n      setActiveSortDirection(direction);\n    },\n    columnIndex\n  });\n\n  return (\n    <div style={{ height: '400px' }}>\n      <OuterScrollContainer>\n        <InnerScrollContainer>\n          <Table aria-label=\"Sticky columns and header table\" gridBreakPoint=\"\" isStickyHeader>\n            <Thead>\n              <Tr>\n                <Th isStickyColumn modifier=\"truncate\" sort={getSortParams(0)}>\n                  {columnNames.name}\n                </Th>\n                <Th\n                  isStickyColumn\n                  stickyMinWidth=\"120px\"\n                  stickyLeftOffset=\"120px\"\n                  hasRightBorder\n                  modifier=\"truncate\"\n                  sort={getSortParams(1)}\n                >\n                  {columnNames.state}\n                </Th>\n                <Th modifier=\"truncate\">{columnNames.header3}</Th>\n                <Th modifier=\"truncate\">{columnNames.header4}</Th>\n                <Th modifier=\"truncate\">{columnNames.header5}</Th>\n                <Th modifier=\"truncate\">{columnNames.header6}</Th>\n                <Th modifier=\"truncate\">{columnNames.header7}</Th>\n                <Th modifier=\"truncate\">{columnNames.header8}</Th>\n                <Th modifier=\"truncate\">{columnNames.header9}</Th>\n              </Tr>\n            </Thead>\n            <Tbody>\n              {sortedFacts.map((fact) => (\n                <Tr key={fact.name}>\n                  <Th isStickyColumn modifier=\"truncate\">\n                    {fact.name}\n                  </Th>\n                  <Th isStickyColumn stickyMinWidth=\"120px\" stickyLeftOffset=\"120px\" modifier=\"truncate\" hasRightBorder>\n                    <RhUiBlueprintIcon />\n                    {` ${fact.state}`}\n                  </Th>\n                  <Td modifier=\"nowrap\" dataLabel={columnNames.header3}>\n                    {fact.detail1}\n                  </Td>\n                  <Td modifier=\"nowrap\" dataLabel={columnNames.header4}>\n                    {fact.detail2}\n                  </Td>\n                  <Td modifier=\"nowrap\" dataLabel={columnNames.header5}>\n                    {fact.detail3}\n                  </Td>\n                  <Td modifier=\"nowrap\" dataLabel={columnNames.header6}>\n                    {fact.detail4}\n                  </Td>\n                  <Td modifier=\"nowrap\" dataLabel={columnNames.header7}>\n                    {fact.detail5}\n                  </Td>\n                  <Td modifier=\"nowrap\" dataLabel={columnNames.header8}>\n                    {fact.detail6}\n                  </Td>\n                  <Td modifier=\"nowrap\" dataLabel={columnNames.header9}>\n                    {fact.detail7}\n                  </Td>\n                </Tr>\n              ))}\n            </Tbody>\n          </Table>\n        </InnerScrollContainer>\n      </OuterScrollContainer>\n    </div>\n  );\n};\n","title":"Sticky columns and header","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To maintain proper sticky behavior across sticky columns and header, `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Table`}
-        </code>
-        {` must be wrapped with `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`OuterScrollContainer`}
-        </code>
-        {` and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`InnerScrollContainer`}
-        </code>
-        {`.`}
-      </p>
-    </Example>,
-  'Nested column headers': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';\nimport { Stack, StackItem, Timestamp } from '@patternfly/react-core';\ninterface PodConnection {\n  source: {\n    podName: string;\n    port: { num: number; protocol: string };\n  };\n  destination: {\n    podName: string;\n    port: { num: number; protocol: string };\n  };\n  timestamp: string;\n  protocol: string;\n  flowRate: string;\n  traffic: string;\n  packets: number;\n}\n\nexport const TableNestedHeaders: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const connections: PodConnection[] = [\n    {\n      source: { podName: 'api-pod-source-name', port: { num: 443, protocol: 'HTTPS' } },\n      destination: { podName: 'api-pod-destination-name', port: { num: 24, protocol: 'SMTP' } },\n      timestamp: '2021-06-22T19:58:24.000Z',\n      protocol: 'TCP',\n      flowRate: '1.9 Kbps',\n      traffic: '2.1 KB',\n      packets: 3\n    },\n    {\n      source: { podName: 'api-pod-source2-name', port: { num: 80, protocol: 'HTTP' } },\n      destination: { podName: 'api-pod-destination2-name', port: { num: 24, protocol: 'SMTP' } },\n      timestamp: '2021-06-22T21:42:01.000Z',\n      protocol: 'UDP',\n      flowRate: '3.4 Kbps',\n      traffic: '6.1 KB',\n      packets: 7\n    }\n  ];\n\n  const columnNames = {\n    pods: 'Pods',\n    source: 'Source',\n    destination: 'Destination',\n    datetime: 'Date & Time',\n    ports: 'Ports',\n    protocol: 'Protocol',\n    flowRate: 'Flow rate',\n    traffic: 'Traffic',\n    packets: 'Packets'\n  };\n\n  // Index of the currently sorted column\n  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key\n  // as the identifier of the sorted column. See the \"Compound expandable\" example.\n  const [activeSortIndex, setActiveSortIndex] = useState<number | null>(null);\n\n  // Sort direction of the currently sorted column\n  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);\n\n  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.\n  const getSortableRowValues = (connection: PodConnection): (string | number)[] => {\n    const { source, destination, timestamp, protocol, flowRate, traffic, packets } = connection;\n    return [\n      source.podName,\n      destination.podName,\n      timestamp,\n      source.port.num,\n      destination.port.num,\n      protocol,\n      flowRate,\n      traffic,\n      packets\n    ];\n  };\n\n  // Note that we perform the sort as part of the component's render logic and not in onSort.\n  // We shouldn't store the list of data in state because we don't want to have to sync that with props.\n  let sortedConnections = connections;\n  if (activeSortIndex !== null) {\n    sortedConnections = connections.sort((a, b) => {\n      const aValue = getSortableRowValues(a)[activeSortIndex];\n      const bValue = getSortableRowValues(b)[activeSortIndex];\n      if (typeof aValue === 'number') {\n        // Numeric sort\n        if (activeSortDirection === 'asc') {\n          return (aValue as number) - (bValue as number);\n        }\n        return (bValue as number) - (aValue as number);\n      } else {\n        // String sort\n        if (activeSortDirection === 'asc') {\n          return (aValue as string).localeCompare(bValue as string);\n        }\n        return (bValue as string).localeCompare(aValue as string);\n      }\n    });\n  }\n\n  const getSortParams = (columnIndex: number): ThProps['sort'] => ({\n    sortBy: {\n      index: activeSortIndex,\n      direction: activeSortDirection\n    },\n    onSort: (_event, index, direction) => {\n      setActiveSortIndex(index);\n      setActiveSortDirection(direction);\n    },\n    columnIndex\n  });\n\n  return (\n    <InnerScrollContainer>\n      <Table aria-label=\"Nested column headers table\" gridBreakPoint=\"\">\n        <Thead hasNestedHeader>\n          <Tr>\n            <Th hasRightBorder colSpan={3}>\n              {columnNames.pods}\n            </Th>\n            <Th hasRightBorder colSpan={2}>\n              {columnNames.ports}\n            </Th>\n            <Th modifier=\"fitContent\" hasRightBorder rowSpan={2} sort={getSortParams(5)}>\n              {columnNames.protocol}\n            </Th>\n            <Th modifier=\"fitContent\" hasRightBorder rowSpan={2} sort={getSortParams(6)}>\n              {columnNames.flowRate}\n            </Th>\n            <Th modifier=\"fitContent\" hasRightBorder rowSpan={2} sort={getSortParams(7)}>\n              {columnNames.traffic}\n            </Th>\n            <Th modifier=\"fitContent\" rowSpan={2} sort={getSortParams(8)}>\n              {columnNames.packets}\n            </Th>\n          </Tr>\n          <Tr>\n            <Th isSubheader sort={getSortParams(0)}>\n              {columnNames.source}\n            </Th>\n            <Th isSubheader sort={getSortParams(1)}>\n              {columnNames.destination}\n            </Th>\n            <Th isSubheader modifier=\"fitContent\" hasRightBorder sort={getSortParams(2)}>\n              {columnNames.datetime}\n            </Th>\n            <Th isSubheader modifier=\"fitContent\" sort={getSortParams(3)}>\n              {columnNames.source}\n            </Th>\n            <Th isSubheader modifier=\"fitContent\" hasRightBorder sort={getSortParams(4)}>\n              {columnNames.destination}\n            </Th>\n          </Tr>\n        </Thead>\n        <Tbody>\n          {sortedConnections.map((connection) => (\n            <Tr key={connection.source.podName}>\n              <Td dataLabel={columnNames.source}>{connection.source.podName}</Td>\n              <Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>\\\n              <Td dataLabel={columnNames.datetime}>\n                <div>\n                  <Timestamp dateFormat=\"full\" timeFormat=\"medium\" date={new Date(connection.timestamp)} />\n                </div>\n              </Td>\n              <Td dataLabel={columnNames.source}>\n                <Stack>\n                  <StackItem>\n                    <span>{connection.source.port.num}</span>\n                  </StackItem>\n                  <StackItem>\n                    <small>({connection.source.port.protocol})</small>\n                  </StackItem>\n                </Stack>\n              </Td>\n              <Td dataLabel={columnNames.destination}>\n                <Stack>\n                  <StackItem>\n                    <span>{connection.destination.port.num}</span>\n                  </StackItem>\n                  <StackItem>\n                    <small>({connection.destination.port.protocol})</small>\n                  </StackItem>\n                </Stack>\n              </Td>\n              <Td dataLabel={columnNames.protocol}>{connection.protocol}</Td>\n              <Td dataLabel={columnNames.flowRate}>{connection.flowRate}</Td>\n              <Td dataLabel={columnNames.traffic}>{connection.traffic}</Td>\n              <Td dataLabel={columnNames.packets}>{connection.packets}</Td>\n            </Tr>\n          ))}\n        </Tbody>\n      </Table>\n    </InnerScrollContainer>\n  );\n};\n","title":"Nested column headers","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To make a nested column header:`}
-      </p>
-      
-      <ol {...{"className":"pf-v6-c-content--ol pf-m-editorial ws-ol "}}>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Wrap `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Table`}
-          </code>
-          {` with `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`InnerScrollContainer`}
-          </code>
-          {`.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Pass `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`nestedHeaderColumnSpans`}
-          </code>
-          {` to `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Table`}
-          </code>
-          {`. `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`nestedHeaderColumnSpans`}
-          </code>
-          {` is an array of numbers representing the column spans of the top level columns to `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Table`}
-          </code>
-          {`, where each number is equal to the number of sub columns for a column, or `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`1`}
-          </code>
-          {` if a column contains no sub columns.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Pass `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`hasNestedHeader`}
-          </code>
-          {` to `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Thead`}
-          </code>
-          {`.`}
-        </li>
-        
-
-        
-        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-          {`Pass two `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Tr`}
-          </code>
-          {` as children of `}
-          
-          <code {...{"className":"ws-code "}}>
-            {`Thead`}
-          </code>
-          {`.`}
-        </li>
-        
-
-      </ol>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`The first `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Tr`}
-        </code>
-        {` represents the top level of columns, and each must pass either `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`rowSpan`}
-        </code>
-        {` if the column does not contain sub columns or `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`colSpan`}
-        </code>
-        {` if the column contains sub columns. The value of `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`rowSpan`}
-        </code>
-        {` is equal to the number of rows the nested header will span, typically `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`2`}
-        </code>
-        {`, and the value of `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`colSpan`}
-        </code>
-        {` is equal to the number of sub columns in a column. Each `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Th`}
-        </code>
-        {` except the last should also pass `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`hasRightBorder`}
-        </code>
-        {`.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`The second `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Tr`}
-        </code>
-        {` represents the second level of sub columns. The `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Th`}
-        </code>
-        {` in this row each should pass `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isSubHeader`}
-        </code>
-        {`, and the last sub column of a column should also pass `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`hasRightBorder`}
-        </code>
-        {`.`}
-      </p>
-    </Example>,
-  'Nested column headers and expandable rows': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ExpandableRowContent } from '@patternfly/react-table';\nimport { Button } from '@patternfly/react-core';\n\ninterface Team {\n  name: string;\n  members: {\n    lead: string;\n    interaction: string;\n    visual: string;\n  };\n  email: string;\n  description: string;\n}\n\nexport const TableNestedExpandable: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const teams: Team[] = [\n    {\n      name: 'Developer program 1',\n      members: { lead: 'Person 1', interaction: 'Person 2', visual: 'Person 3' },\n      email: 'devteam1@example.com',\n      description:\n        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'\n    },\n    {\n      name: 'Developer program 2',\n      members: { lead: 'Person A', interaction: 'Person B', visual: 'Person C' },\n      email: 'devteam2@example.com',\n      description:\n        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'\n    },\n    {\n      name: 'Developer program 3',\n      members: { lead: 'Person X', interaction: 'Person Y', visual: 'Person Z' },\n      email: 'devteam3@example.com',\n      description:\n        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'\n    }\n  ];\n\n  const columnNames = {\n    team: 'Team',\n    members: 'Members',\n    lead: 'Design Lead',\n    interaction: 'Interaction Designer',\n    visual: 'Visual Designer',\n    contact: 'Contact'\n  };\n\n  // In this example, expanded rows are tracked by the team names from each row. This could be any unique identifier.\n  // This is to prevent state from being based on row order index in case we later add sorting.\n  // Note that this behavior is very similar to selection state.\n  const [expandedTeamNames, setExpandedTeamNames] = useState<string[]>([]);\n  const setTeamExpanded = (team: Team, isExpanding = true) =>\n    setExpandedTeamNames((prevExpanded) => {\n      const otherExpandedTeamNames = prevExpanded.filter((t) => t !== team.name);\n      return isExpanding ? [...otherExpandedTeamNames, team.name] : otherExpandedTeamNames;\n    });\n  const isTeamExpanded = (team: Team) => expandedTeamNames.includes(team.name);\n\n  return (\n    <InnerScrollContainer>\n      <Table isExpandable hasAnimations aria-label=\"Nested column headers with expandable rows table\" gridBreakPoint=\"\">\n        <Thead hasNestedHeader>\n          <Tr>\n            <Th screenReaderText=\"Row expansion\" rowSpan={2} />\n            <Th width={35} rowSpan={2} hasRightBorder>\n              {columnNames.team}\n            </Th>\n            <Th colSpan={3} hasRightBorder>\n              {columnNames.members}\n            </Th>\n            <Th width={25} rowSpan={2}>\n              {columnNames.contact}\n            </Th>\n          </Tr>\n          <Tr resetOffset>\n            <Th isSubheader>{columnNames.lead}</Th>\n            <Th isSubheader>{columnNames.interaction}</Th>\n            <Th isSubheader hasRightBorder>\n              {columnNames.visual}\n            </Th>\n          </Tr>\n        </Thead>\n        {teams.map((team, rowIndex) => (\n          <Tbody key={team.name} isExpanded={isTeamExpanded(team)}>\n            <Tr isContentExpanded={isTeamExpanded(team)}>\n              <Td\n                expand={{\n                  rowIndex,\n                  isExpanded: isTeamExpanded(team),\n                  onToggle: () => setTeamExpanded(team, !isTeamExpanded(team)),\n                  expandId: 'composable-nested-expandable-example'\n                }}\n              />\n              <Td dataLabel={columnNames.team}>{team.name}</Td>\n              <Td dataLabel={columnNames.lead}>{team.members.lead}</Td>\n              <Td dataLabel={columnNames.interaction}>{team.members.interaction}</Td>\n              <Td dataLabel={columnNames.visual}>{team.members.visual}</Td>\n              <Td dataLabel={columnNames.contact}>\n                <Button variant=\"link\" component=\"a\" href={`mailto:${team.email}`} isInline>\n                  Email team {rowIndex}\n                </Button>\n              </Td>\n            </Tr>\n            <Tr isExpanded={isTeamExpanded(team)}>\n              <Td dataLabel={`Team ${team.name} description`} colSpan={6}>\n                <ExpandableRowContent>{team.description}</ExpandableRowContent>\n              </Td>\n            </Tr>\n          </Tbody>\n        ))}\n      </Table>\n    </InnerScrollContainer>\n  );\n};\n","title":"Nested column headers and expandable rows","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Expandable with nested table': props => 
-    <Example {...pageData} {...props} {...{"code":"/* eslint-disable no-console */\nimport { useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent, ActionsColumn, IAction } from '@patternfly/react-table';\n\ninterface Repository {\n  name: string;\n  branches: string;\n  prs: string;\n  nestedComponent?: React.ReactNode;\n  link?: React.ReactNode;\n  noPadding?: boolean;\n}\ninterface NestedRepository {\n  name: string;\n  branches: string | null;\n  prs: string | null;\n  workspaces: string | null;\n  lastCommit: string | null;\n}\n\nconst NestedReposTable: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const prs: NestedRepository[] = [\n    { name: 'Repository 1', branches: '25', prs: '25', workspaces: '5', lastCommit: '2 days ago' },\n    { name: 'Repository 2', branches: '25', prs: '25', workspaces: '5', lastCommit: '2 days ago' },\n    { name: 'Repository 3', branches: '25', prs: '25', workspaces: '5', lastCommit: '2 days ago' },\n    { name: 'Repository 4', branches: '25', prs: '25', workspaces: '5', lastCommit: '2 days ago' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  return (\n    <Table aria-label=\"Simple table\" variant=\"compact\">\n      <Thead>\n        <Tr>\n          <Th>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.workspaces}</Th>\n          <Th>{columnNames.lastCommit}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {prs.map((repo) => (\n          <Tr key={repo.name}>\n            <Td dataLabel={columnNames.name}>{repo.name}</Td>\n            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n          </Tr>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n\nexport const TableExpandable: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'Node 1', branches: '10', prs: '2', nestedComponent: <NestedReposTable />, link: <a>Link 1</a> },\n    { name: 'Node 2', branches: '3', prs: '4', link: <a>Link 2</a> },\n    {\n      name: 'Node 3',\n      branches: '11',\n      prs: '7',\n      nestedComponent: (\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        </p>\n      ),\n      link: <a>Link 3</a>\n    },\n    {\n      name: 'Node 4',\n      branches: '11',\n      prs: '7',\n      nestedComponent: 'Expandable row content has no padding.',\n      link: <a>Link 4</a>,\n      noPadding: true\n    }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    link: 'Link',\n    action: 'Action'\n  };\n  // In this example, expanded rows are tracked by the repo names from each row. This could be any unique identifier.\n  // This is to prevent state from being based on row order index in case we later add sorting.\n  // Note that this behavior is very similar to selection state.\n  const initialExpandedRepoNames = repositories.filter((repo) => !!repo.nestedComponent).map((repo) => repo.name); // Default to all expanded\n  const [expandedRepoNames, setExpandedRepoNames] = useState<string[]>(initialExpandedRepoNames);\n  const setRepoExpanded = (repo: Repository, isExpanding = true) =>\n    setExpandedRepoNames((prevExpanded) => {\n      const otherExpandedRepoNames = prevExpanded.filter((r) => r !== repo.name);\n      return isExpanding ? [...otherExpandedRepoNames, repo.name] : otherExpandedRepoNames;\n    });\n  const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name);\n\n  const defaultActions = (repo: Repository): IAction[] => [\n    {\n      title: 'Some action',\n      onClick: () => console.log(`clicked on Some action, on row ${repo.name}`)\n    },\n    {\n      title: <a href=\"https://www.patternfly.org\">Link action</a>\n    },\n    {\n      isSeparator: true\n    },\n    {\n      title: 'Third action',\n      onClick: () => console.log(`clicked on Third action, on row ${repo.name}`)\n    }\n  ];\n\n  return (\n    <Table isExpandable hasAnimations aria-label=\"Simple table\">\n      <Thead>\n        <Tr>\n          <Th screenReaderText=\"Row expansion\" />\n          <Th width={20}>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.link}</Th>\n          <Th>{columnNames.action}</Th>\n        </Tr>\n      </Thead>\n      {repositories.map((repo, rowIndex) => (\n        <Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>\n          <Tr isContentExpanded={isRepoExpanded(repo)}>\n            <Td\n              expand={\n                repo.nestedComponent\n                  ? {\n                      rowIndex,\n                      isExpanded: isRepoExpanded(repo),\n                      onToggle: () => setRepoExpanded(repo, !isRepoExpanded(repo)),\n                      expandId: 'composable-nested-table-expandable-example'\n                    }\n                  : undefined\n              }\n            />\n            <Td dataLabel={columnNames.name}>{repo.name}</Td>\n            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n            <Td dataLabel={columnNames.link}>{repo.link}</Td>\n            <Td dataLabel={columnNames.action}>\n              <ActionsColumn items={defaultActions(repo)} />\n            </Td>\n          </Tr>\n          {repo.nestedComponent ? (\n            <Tr isExpanded={isRepoExpanded(repo)}>\n              <Td\n                noPadding={repo.noPadding}\n                dataLabel={`${columnNames.name} expended`}\n                colSpan={Object.keys(columnNames).length + 1}\n              >\n                <ExpandableRowContent>{repo.nestedComponent}</ExpandableRowContent>\n              </Td>\n            </Tr>\n          ) : null}\n        </Tbody>\n      ))}\n    </Table>\n  );\n};\n","title":"Expandable with nested table","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Nested sticky header': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';\nimport { Stack, StackItem, Timestamp } from '@patternfly/react-core';\ninterface PodConnection {\n  source: {\n    podName: string;\n    port: { num: number; protocol: string };\n  };\n  destination: {\n    podName: string;\n    port: { num: number; protocol: string };\n  };\n  timestamp: string;\n  protocol: string;\n  flowRate: string;\n  traffic: string;\n  packets: number;\n}\n\nexport const TableNestedHeaders: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const connections: PodConnection[] = [\n    {\n      source: { podName: 'api-pod-source-name', port: { num: 443, protocol: 'HTTPS' } },\n      destination: { podName: 'api-pod-destination-name', port: { num: 24, protocol: 'SMTP' } },\n      timestamp: '2021-06-22T19:58:24.000Z',\n      protocol: 'TCP',\n      flowRate: '1.9 Kbps',\n      traffic: '2.1 KB',\n      packets: 3\n    },\n    {\n      source: { podName: 'api-pod-source2-name', port: { num: 80, protocol: 'HTTP' } },\n      destination: { podName: 'api-pod-destination2-name', port: { num: 24, protocol: 'SMTP' } },\n      timestamp: '2021-06-22T21:42:01.000Z',\n      protocol: 'UDP',\n      flowRate: '3.4 Kbps',\n      traffic: '6.1 KB',\n      packets: 7\n    }\n  ];\n\n  const columnNames = {\n    pods: 'Pods',\n    source: 'Source',\n    destination: 'Destination',\n    datetime: 'Date & Time',\n    ports: 'Ports',\n    protocol: 'Protocol',\n    flowRate: 'Flow rate',\n    traffic: 'Traffic',\n    packets: 'Packets'\n  };\n\n  // Index of the currently sorted column\n  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key\n  // as the identifier of the sorted column. See the \"Compound expandable\" example.\n  const [activeSortIndex, setActiveSortIndex] = useState<number | null>(null);\n\n  // Sort direction of the currently sorted column\n  const [activeSortDirection, setActiveSortDirection] = useState<'asc' | 'desc' | null>(null);\n\n  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.\n  const getSortableRowValues = (connection: PodConnection): (string | number)[] => {\n    const { source, destination, timestamp, protocol, flowRate, traffic, packets } = connection;\n    return [\n      source.podName,\n      destination.podName,\n      timestamp,\n      source.port.num,\n      destination.port.num,\n      protocol,\n      flowRate,\n      traffic,\n      packets\n    ];\n  };\n\n  // Note that we perform the sort as part of the component's render logic and not in onSort.\n  // We shouldn't store the list of data in state because we don't want to have to sync that with props.\n  let sortedConnections = connections;\n  if (activeSortIndex !== null) {\n    sortedConnections = connections.sort((a, b) => {\n      const aValue = getSortableRowValues(a)[activeSortIndex];\n      const bValue = getSortableRowValues(b)[activeSortIndex];\n      if (typeof aValue === 'number') {\n        // Numeric sort\n        if (activeSortDirection === 'asc') {\n          return (aValue as number) - (bValue as number);\n        }\n        return (bValue as number) - (aValue as number);\n      } else {\n        // String sort\n        if (activeSortDirection === 'asc') {\n          return (aValue as string).localeCompare(bValue as string);\n        }\n        return (bValue as string).localeCompare(aValue as string);\n      }\n    });\n  }\n\n  const getSortParams = (columnIndex: number): ThProps['sort'] => ({\n    sortBy: {\n      index: activeSortIndex as number,\n      direction: activeSortDirection as 'asc' | 'desc'\n    },\n    onSort: (_event, index, direction) => {\n      setActiveSortIndex(index);\n      setActiveSortDirection(direction);\n    },\n    columnIndex\n  });\n\n  return (\n    <InnerScrollContainer>\n      <Table aria-label=\"Nested column headers table\" gridBreakPoint=\"\" isStickyHeader>\n        <Thead hasNestedHeader>\n          <Tr>\n            <Th hasRightBorder colSpan={3}>\n              {columnNames.pods}\n            </Th>\n            <Th hasRightBorder colSpan={2}>\n              {columnNames.ports}\n            </Th>\n            <Th modifier=\"fitContent\" hasRightBorder rowSpan={2} sort={getSortParams(5)}>\n              {columnNames.protocol}\n            </Th>\n            <Th modifier=\"fitContent\" hasRightBorder rowSpan={2} sort={getSortParams(6)}>\n              {columnNames.flowRate}\n            </Th>\n            <Th modifier=\"fitContent\" hasRightBorder rowSpan={2} sort={getSortParams(7)}>\n              {columnNames.traffic}\n            </Th>\n            <Th modifier=\"fitContent\" rowSpan={2} sort={getSortParams(8)}>\n              {columnNames.packets}\n            </Th>\n          </Tr>\n          <Tr>\n            <Th isSubheader sort={getSortParams(0)}>\n              {columnNames.source}\n            </Th>\n            <Th isSubheader sort={getSortParams(1)}>\n              {columnNames.destination}\n            </Th>\n            <Th isSubheader modifier=\"fitContent\" hasRightBorder sort={getSortParams(2)}>\n              {columnNames.datetime}\n            </Th>\n            <Th isSubheader modifier=\"fitContent\" sort={getSortParams(3)}>\n              {columnNames.source}\n            </Th>\n            <Th isSubheader modifier=\"fitContent\" hasRightBorder sort={getSortParams(4)}>\n              {columnNames.destination}\n            </Th>\n          </Tr>\n        </Thead>\n        <Tbody>\n          {sortedConnections.map((connection) => (\n            <Tr key={connection.source.podName}>\n              <Td dataLabel={columnNames.source}>{connection.source.podName}</Td>\n              <Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>\\\n              <Td dataLabel={columnNames.datetime}>\n                <div>\n                  <Timestamp dateFormat=\"full\" timeFormat=\"medium\" date={new Date(connection.timestamp)} />\n                </div>\n              </Td>\n              <Td dataLabel={columnNames.source}>\n                <Stack>\n                  <StackItem>\n                    <span>{connection.source.port.num}</span>\n                  </StackItem>\n                  <StackItem>\n                    <small>({connection.source.port.protocol})</small>\n                  </StackItem>\n                </Stack>\n              </Td>\n              <Td dataLabel={columnNames.destination}>\n                <Stack>\n                  <StackItem>\n                    <span>{connection.destination.port.num}</span>\n                  </StackItem>\n                  <StackItem>\n                    <small>({connection.destination.port.protocol})</small>\n                  </StackItem>\n                </Stack>\n              </Td>\n              <Td dataLabel={columnNames.protocol}>{connection.protocol}</Td>\n              <Td dataLabel={columnNames.flowRate}>{connection.flowRate}</Td>\n              <Td dataLabel={columnNames.traffic}>{connection.traffic}</Td>\n              <Td dataLabel={columnNames.packets}>{connection.packets}</Td>\n            </Tr>\n          ))}\n        </Tbody>\n      </Table>\n    </InnerScrollContainer>\n  );\n};\n","title":"Nested sticky header","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Striped': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\n\ninterface Repository {\n  name: string;\n  branches: number;\n  prs: number;\n  workspaces: number;\n  lastCommit: string;\n}\n\nexport const TableStriped: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'Repository 1', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' },\n    { name: 'Repository 2', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' },\n    { name: 'Repository 3', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' },\n    { name: 'Repository 4', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  return (\n    <Table aria-label=\"Simple table\" isStriped>\n      <Caption>Simple striped table using composable components</Caption>\n      <Thead>\n        <Tr>\n          <Th>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.workspaces}</Th>\n          <Th>{columnNames.lastCommit}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {repositories.map((repo) => (\n          <Tr key={repo.name}>\n            <Td dataLabel={columnNames.name}>{repo.name}</Td>\n            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n          </Tr>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Striped","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To apply striping to a basic table, add the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isStriped`}
-        </code>
-        {` property to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Table`}
-        </code>
-        {`.`}
-      </p>
-    </Example>,
-  'Striped expandable': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent } from '@patternfly/react-table';\nimport { Checkbox } from '@patternfly/react-core';\n\ninterface Repository {\n  name: string;\n  branches: string;\n  prs: string;\n  workspaces: string;\n  lastCommit: string;\n  details?: {\n    detail1?: string;\n    detail2?: string;\n    detail3?: string;\n    detailFormat: 0 | 1 | 2 | 3;\n  };\n}\n\nexport const TableStripedExpandable: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' },\n    {\n      name: 'parent 1',\n      branches: 'two',\n      prs: 'k',\n      workspaces: 'four',\n      lastCommit: 'five',\n      // This `details` structure is just for this example. You can drive expanded content from any kind of data.\n      details: { detailFormat: 0, detail1: 'single cell' }\n    },\n    {\n      name: 'parent 2',\n      branches: 'two',\n      prs: 'b',\n      workspaces: 'four',\n      lastCommit: 'five',\n      details: { detailFormat: 1, detail1: 'single cell - fullWidth' }\n    },\n    {\n      name: 'parent 3',\n      branches: '2',\n      prs: 'b',\n      workspaces: 'four',\n      lastCommit: 'five',\n      details: { detailFormat: 2, detail1: 'single cell - noPadding' }\n    },\n    {\n      name: 'parent 4',\n      branches: '2',\n      prs: 'b',\n      workspaces: 'four',\n      lastCommit: 'five',\n      details: { detailFormat: 3, detail1: 'single cell - fullWidth & noPadding' }\n    },\n    {\n      name: 'parent 5',\n      branches: '2',\n      prs: 'b',\n      workspaces: 'four',\n      lastCommit: 'five',\n      details: {\n        detailFormat: 0,\n        detail1: \"spans 'Repositories and 'Branches'\",\n        detail2: \"spans 'Pull requests' and 'Workspaces', and 'Last commit'\"\n      }\n    },\n    {\n      name: 'parent 6',\n      branches: '2',\n      prs: 'b',\n      workspaces: 'four',\n      lastCommit: 'five',\n      details: {\n        detailFormat: 1,\n        detail1: \"fullWidth, spans the collapsible column and 'Repositories'\",\n        detail2: \"fullWidth, spans 'Branches' and 'Pull requests'\",\n        detail3: \"fullWidth, spans 'Workspaces' and 'Last commit'\"\n      }\n    }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  // In this example, expanded rows are tracked by the repo names from each row. This could be any unique identifier.\n  // This is to prevent state from being based on row order index in case we later add sorting.\n  // Note that this behavior is very similar to selection state.\n  const initialExpandedRepoNames = repositories.filter((repo) => !!repo.details).map((repo) => repo.name); // Default to all expanded\n  const [expandedRepoNames, setExpandedRepoNames] = useState<string[]>(initialExpandedRepoNames);\n  const setRepoExpanded = (repo: Repository, isExpanding = true) =>\n    setExpandedRepoNames((prevExpanded) => {\n      const otherExpandedRepoNames = prevExpanded.filter((r) => r !== repo.name);\n      return isExpanding ? [...otherExpandedRepoNames, repo.name] : otherExpandedRepoNames;\n    });\n  const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name);\n\n  const [isExampleCompact, setIsExampleCompact] = useState(true);\n\n  return (\n    <Fragment>\n      <Checkbox\n        label=\"Compact\"\n        isChecked={isExampleCompact}\n        onChange={(_event, checked) => setIsExampleCompact(checked)}\n        aria-label=\"toggle striped compact variation\"\n        id=\"toggle-compact-striped\"\n        name=\"toggle-compact-striped\"\n      />\n      <Table\n        aria-label=\"Expandable table\"\n        variant={isExampleCompact ? 'compact' : undefined}\n        isStriped\n        isExpandable\n        hasAnimations\n      >\n        <Thead>\n          <Tr>\n            <Th screenReaderText=\"Row expansion\" />\n            <Th width={25}>{columnNames.name}</Th>\n            <Th width={10}>{columnNames.branches}</Th>\n            <Th width={15}>{columnNames.prs}</Th>\n            <Th width={30}>{columnNames.workspaces}</Th>\n            <Th width={10}>{columnNames.lastCommit}</Th>\n          </Tr>\n        </Thead>\n        {repositories.map((repo, rowIndex) => {\n          // Some arbitrary examples of how you could customize the child row based on your needs\n          let childIsFullWidth = false;\n          let childHasNoPadding = false;\n          let detail1Colspan = 1;\n          let detail2Colspan = 1;\n          let detail3Colspan = 1;\n          if (repo.details) {\n            const { detail1, detail2, detail3, detailFormat } = repo.details;\n            const numColumns = 5;\n            childIsFullWidth = [1, 3].includes(detailFormat);\n            childHasNoPadding = [2, 3].includes(detailFormat);\n            if (detail1 && !detail2 && !detail3) {\n              detail1Colspan = childIsFullWidth ? numColumns : numColumns + 1; // Account for toggle column\n            } else if (detail1 && detail2 && !detail3) {\n              detail1Colspan = 2;\n              detail2Colspan = childIsFullWidth ? 3 : 4;\n            } else if (detail1 && detail2 && detail3) {\n              detail1Colspan = 2;\n              detail2Colspan = 2;\n              detail3Colspan = childIsFullWidth ? 1 : 2;\n            }\n          }\n          return (\n            <Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>\n              <Tr isContentExpanded={isRepoExpanded(repo)}>\n                <Td\n                  expand={\n                    repo.details\n                      ? {\n                          rowIndex,\n                          isExpanded: isRepoExpanded(repo),\n                          onToggle: () => setRepoExpanded(repo, !isRepoExpanded(repo))\n                        }\n                      : undefined\n                  }\n                />\n                <Td dataLabel={columnNames.name}>{repo.name}</Td>\n                <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n                <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n                <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n                <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n              </Tr>\n              {repo.details ? (\n                <Tr isExpanded={isRepoExpanded(repo)}>\n                  {!childIsFullWidth ? <Td /> : null}\n                  {repo.details.detail1 ? (\n                    <Td dataLabel=\"Repo detail 1\" noPadding={childHasNoPadding} colSpan={detail1Colspan}>\n                      <ExpandableRowContent>{repo.details.detail1}</ExpandableRowContent>\n                    </Td>\n                  ) : null}\n                  {repo.details.detail2 ? (\n                    <Td dataLabel=\"Repo detail 2\" noPadding={childHasNoPadding} colSpan={detail2Colspan}>\n                      <ExpandableRowContent>{repo.details.detail2}</ExpandableRowContent>\n                    </Td>\n                  ) : null}\n                  {repo.details.detail3 ? (\n                    <Td dataLabel=\"Repo detail 3\" noPadding={childHasNoPadding} colSpan={detail3Colspan}>\n                      <ExpandableRowContent>{repo.details.detail3}</ExpandableRowContent>\n                    </Td>\n                  ) : null}\n                </Tr>\n              ) : null}\n            </Tbody>\n          );\n        })}\n      </Table>\n    </Fragment>\n  );\n};\n","title":"Striped expandable","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To apply striping to an expandable table, add the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isStriped`}
-        </code>
-        {` and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isExpandable`}
-        </code>
-        {` properties to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Table`}
-        </code>
-        {`.`}
-      </p>
-    </Example>,
-  'Striped multiple tobdy': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\n\ninterface Repository {\n  name: string;\n  branches: number;\n  description?: string;\n  prs: number;\n  workspaces: number;\n  lastCommit: string;\n}\n\nexport const TableStripedMultipleTbody: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories1: Repository[] = [\n    {\n      name: 'tbody 1 - Repository 1',\n      description: '(odd rows striped)',\n      branches: 10,\n      prs: 25,\n      workspaces: 5,\n      lastCommit: '2 days ago'\n    },\n    { name: 'tbody 1 - Repository 2', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' },\n    {\n      name: 'tbody 1 - Repository 3',\n      description: '(odd rows striped)',\n      branches: 10,\n      prs: 25,\n      workspaces: 5,\n      lastCommit: '2 days ago'\n    }\n  ];\n\n  const repositories2: Repository[] = [\n    { name: 'tbody 2 - Repository 4', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' },\n    {\n      name: 'tbody 2 - Repository 5',\n      description: '(even rows striped)',\n      branches: 10,\n      prs: 25,\n      workspaces: 5,\n      lastCommit: '2 days ago'\n    },\n    { name: 'tbody 2 - Repository 6', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' },\n    {\n      name: 'tbody 2 - Repository 7',\n      description: '(even rows striped)',\n      branches: 10,\n      prs: 25,\n      workspaces: 5,\n      lastCommit: '2 days ago'\n    }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  return (\n    <Table aria-label=\"Simple table\">\n      <Caption>Striped table using multiple tbody components</Caption>\n      <Thead>\n        <Tr>\n          <Th>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.workspaces}</Th>\n          <Th>{columnNames.lastCommit}</Th>\n        </Tr>\n      </Thead>\n      <Tbody isOddStriped>\n        {repositories1.map((repo) => (\n          <Tr key={repo.name}>\n            <Td dataLabel={columnNames.name}>\n              {repo.description ? (\n                <Fragment>\n                  {repo.name}\n                  <br />\n                  <small>{repo.description}</small>\n                </Fragment>\n              ) : (\n                repo.name\n              )}\n            </Td>\n            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n          </Tr>\n        ))}\n      </Tbody>\n      <Tbody isEvenStriped>\n        {repositories2.map((repo) => (\n          <Tr key={repo.name}>\n            <Td dataLabel={columnNames.name}>\n              {repo.description ? (\n                <Fragment>\n                  {repo.name}\n                  <br />\n                  <small>{repo.description}</small>\n                </Fragment>\n              ) : (\n                repo.name\n              )}\n            </Td>\n            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n          </Tr>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Striped multiple tobdy","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`When there are multiple `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Tbody`}
-        </code>
-        {` components within a table, a more granular application of striping may be controlled by adding either the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isEvenStriped`}
-        </code>
-        {` or `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isOddStriped`}
-        </code>
-        {` properties to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Tbody`}
-        </code>
-        {`. These properties will stripe even or odd rows within that `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Tbody`}
-        </code>
-        {` respectively.`}
-      </p>
-    </Example>,
-  'Striped tr': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\n\ninterface Repository {\n  name: string;\n  branches: number;\n  prs: number;\n  workspaces: number;\n  lastCommit: string;\n}\n\nexport const TableStripedTr: React.FunctionComponent = () => {\n  // In real usage, this data would come from some external source like an API via props.\n  const repositories: Repository[] = [\n    { name: 'Repository 1', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' },\n    { name: 'Repository 2', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' },\n    { name: 'Repository 3', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' },\n    { name: 'Repository 4', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' }\n  ];\n\n  const columnNames = {\n    name: 'Repositories',\n    branches: 'Branches',\n    prs: 'Pull requests',\n    workspaces: 'Workspaces',\n    lastCommit: 'Last commit'\n  };\n\n  return (\n    <Table aria-label=\"Simple table\">\n      <Caption>Manually striped table using composable components</Caption>\n      <Thead>\n        <Tr>\n          <Th>{columnNames.name}</Th>\n          <Th>{columnNames.branches}</Th>\n          <Th>{columnNames.prs}</Th>\n          <Th>{columnNames.workspaces}</Th>\n          <Th>{columnNames.lastCommit}</Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {repositories.map((repo, index) => (\n          <Tr key={repo.name} {...(index % 2 === 0 && { isStriped: true })}>\n            <Td dataLabel={columnNames.name}>{repo.name}</Td>\n            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>\n            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>\n            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>\n            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>\n          </Tr>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n","title":"Striped tr","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To manually control striping, add the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isStriped`}
-        </code>
-        {` property to each desired `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Tr`}
-        </code>
-        {`. This replaces adding the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isStriped`}
-        </code>
-        {` property to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Table`}
-        </code>
-        {`.`}
-      </p>
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`Note: Table lives in its own package at `}
-      <PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-table","className":""}}>
-        {`@patternfly/react-table`}
-      </PatternflyThemeLink>
-      {`!`}
-    </p>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`The `}
-      <code {...{"className":"ws-code "}}>
-        {`Table`}
-      </code>
-      {` component takes an explicit and declarative approach, and its implementation closely mirrors that of an HTML table.`}
-    </p>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`The documentation for the deprecated table implementation can be found under the `}
-      <PatternflyThemeLink {...{"to":"/components/table/react-deprecated","className":""}}>
-        {`React deprecated`}
-      </PatternflyThemeLink>
-      {` tab. It is configuration based and takes a less declarative and more implicit approach to laying out the table structure, such as the rows and cells within it.`}
-    </p>
-    <AutoLinkHeader {...{"id":"table-examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Table examples`}
-    </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`This `}
-      <code {...{"className":"ws-code "}}>
-        {`Table`}
-      </code>
-      {` component differs from the deprecated `}
-      <code {...{"className":"ws-code "}}>
-        {`Table`}
-      </code>
-      {` component, in that it allows you to compose the table by nesting the relevant `}
-      <code {...{"className":"ws-code "}}>
-        {`Thead`}
-      </code>
-      {`, `}
-      <code {...{"className":"ws-code "}}>
-        {`Tbody`}
-      </code>
-      {`, `}
-      <code {...{"className":"ws-code "}}>
-        {`Tr`}
-      </code>
-      {`, `}
-      <code {...{"className":"ws-code "}}>
-        {`Th`}
-      </code>
-      {` and `}
-      <code {...{"className":"ws-code "}}>
-        {`Td`}
-      </code>
-      {` components within it. For a less declarative and more implicit approach, use the `}
-      <code {...{"className":"ws-code "}}>
-        {`Table`}
-      </code>
-      {` component instead.`}
-    </p>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`Some general notes:`}
-    </p>
-    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`Provide `}
-        <code {...{"className":"ws-code "}}>
-          {`dataLabel`}
-        </code>
-        {` prop to the `}
-        <code {...{"className":"ws-code "}}>
-          {`Td`}
-        </code>
-        {` components so that in mobile view the cell has a label to provide context.`}
-      </li>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`If you want a table caption, simply place a `}
-        <code {...{"className":"ws-code "}}>
-          {`<Caption>My caption</Caption>`}
-        </code>
-        {` as the first child within a `}
-        <code {...{"className":"ws-code "}}>
-          {`Table`}
-        </code>
-        {`.`}
-      </li>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`You can set the `}
-        <code {...{"className":"ws-code "}}>
-          {`Table`}
-        </code>
-        {` variant to `}
-        <code {...{"className":"ws-code "}}>
-          {`compact`}
-        </code>
-      </li>
-    </ul>
-    {React.createElement(pageData.examples["Basic"])}
-    {React.createElement(pageData.examples["Plain"])}
-    {React.createElement(pageData.examples["Custom row wrapper, header tooltips & popovers"])}
-    {React.createElement(pageData.examples["Sortable & wrapping headers"])}
-    {React.createElement(pageData.examples["Sortable - custom control"])}
-    {React.createElement(pageData.examples["Selectable with checkbox"])}
-    {React.createElement(pageData.examples["Selectable with indeterminate state"])}
-    {React.createElement(pageData.examples["Selectable radio input"])}
-    {React.createElement(pageData.examples["Row click handler, clickable rows"])}
-    {React.createElement(pageData.examples["Editable rows"])}
-    {React.createElement(pageData.examples["Actions"])}
-    {React.createElement(pageData.examples["Actions Overflow"])}
-    {React.createElement(pageData.examples["Expandable"])}
-    {React.createElement(pageData.examples["Compound expandable"])}
-    {React.createElement(pageData.examples["Cell width, breakpoint modifiers"])}
-    {React.createElement(pageData.examples["Controlling text"])}
-    {React.createElement(pageData.examples["Modifiers with table text"])}
-    {React.createElement(pageData.examples["Empty state"])}
-    {React.createElement(pageData.examples["Favoritable (implemented with sortable)"])}
-    {React.createElement(pageData.examples["Tree table"])}
-    {React.createElement(pageData.examples["Flat tree table with no inset"])}
-    {React.createElement(pageData.examples["Draggable row table"])}
-    <AutoLinkHeader {...{"id":"sticky-table-modifiers","headingLevel":"h3","className":"ws-title ws-h3"}}>
-      {`Sticky table modifiers`}
-    </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`To make certain columns and the header sticky, the table must be wrapped in a combination of `}
-      <code {...{"className":"ws-code "}}>
-        {`OuterScrollContainer`}
-      </code>
-      {` and `}
-      <code {...{"className":"ws-code "}}>
-        {`InnerScrollContainer`}
-      </code>
-      {`. For sticky columns, only `}
-      <code {...{"className":"ws-code "}}>
-        {`InnerScrollContainer`}
-      </code>
-      {` is required. For sticky headers, and sticky headers with sticky columns, both containers are required to ensure the sticky behavior behaves correctly.`}
-    </p>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      <strong {...{"className":""}}>
-        {`Note:`}
-      </strong>
-      {` Sticky table headers and columns have a higher `}
-      <code {...{"className":"ws-code "}}>
-        {`z-index`}
-      </code>
-      {` than the `}
-      <code {...{"className":"ws-code "}}>
-        {`z-index`}
-      </code>
-      {` used for menus (dropdown, select, etc). The intent is that the contents of a scrollable table will scroll under the sticky header/column, including any expanded menus. However, there may be use cases where a menu needs to appear on top of a sticky header/column, such as an expanded menu in a toolbar above a table with a sticky header.`}
-    </p>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`There are a few ways this can be handled:`}
-    </p>
-    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`Manipulate the `}
-        <code {...{"className":"ws-code "}}>
-          {`z-index`}
-        </code>
-        {` of the menu and/or table headers/columns manually.`}
-      </li>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`Use the `}
-        <code {...{"className":"ws-code "}}>
-          {`menuAppendTo`}
-        </code>
-        {` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the table's parent element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.`}
-      </li>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `}
-        <code {...{"className":"ws-code "}}>
-          {`z-index`}
-        </code>
-        {` than the `}
-        <code {...{"className":"ws-code "}}>
-          {`z-index`}
-        </code>
-        {` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.`}
-      </li>
-    </ul>
-    {React.createElement(pageData.examples["Sticky column"])}
-    {React.createElement(pageData.examples["Multiple left-aligned sticky columns"])}
-    {React.createElement(pageData.examples["Multiple right-aligned sticky columns"])}
-    {React.createElement(pageData.examples["Dynamic sticky header"])}
-    {React.createElement(pageData.examples["Sticky columns and header"])}
-    {React.createElement(pageData.examples["Nested column headers"])}
-    {React.createElement(pageData.examples["Nested column headers and expandable rows"])}
-    {React.createElement(pageData.examples["Expandable with nested table"])}
-    {React.createElement(pageData.examples["Nested sticky header"])}
-    {React.createElement(pageData.examples["Striped"])}
-    {React.createElement(pageData.examples["Striped expandable"])}
-    {React.createElement(pageData.examples["Striped multiple tobdy"])}
-    {React.createElement(pageData.examples["Striped tr"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsTableReactDocs';
-Component.pageData = pageData;
-
-export default Component;