@patternfly/react-table 6.0.0-alpha.1 → 6.0.0-alpha.100

package/src/components/Table/Td.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import scrollStyles from '@patternfly/react-styles/css/components/Table/table-scrollable';
+import treeViewStyles from '@patternfly/react-styles/css/components/Table/table-tree-view';
 import { BaseCellProps } from './Table';
 import {
   cellActions,
@@ -28,6 +29,10 @@ import {
   TdSelectType,
   TdTreeRowType
 } from './base/types';
+import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
+import cssStickyCellInlineStart from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineStart';
+import cssStickyCellInlineEnd from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineEnd';
+
 export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDataCellElement>, 'onSelect' | 'width'> {
   /**
    * The column header the cell corresponds to.
@@ -50,7 +55,7 @@ export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDa
   draggableRow?: TdDraggableType;
   /** True to remove padding */
   noPadding?: boolean;
-  /** Applies pf-v5-c-table__action to td */
+  /** Applies pf-v6-c-table__action to td */
   isActionCell?: boolean;
   /**
    * Tooltip to show on the body cell.
@@ -253,8 +258,8 @@ const TdBase: React.FunctionComponent<TdProps> = ({
   } = merged;
 
   const treeTableTitleCell =
-    (className && className.includes('pf-v5-c-table__tree-view-title-cell')) ||
-    (mergedClassName && mergedClassName.includes('pf-v5-c-table__tree-view-title-cell'));
+    (className && className.includes(treeViewStyles.tableTreeViewTitleCell)) ||
+    (mergedClassName && mergedClassName.includes(treeViewStyles.tableTreeViewTitleCell));
 
   React.useEffect(() => {
     setTruncated(
@@ -288,9 +293,9 @@ const TdBase: React.FunctionComponent<TdProps> = ({
       {...props}
       {...(isStickyColumn && {
         style: {
-          '--pf-v5-c-table__sticky-cell--MinWidth': stickyMinWidth ? stickyMinWidth : undefined,
-          '--pf-v5-c-table__sticky-cell--Left': stickyLeftOffset ? stickyLeftOffset : 0,
-          '--pf-v5-c-table__sticky-cell--Right': stickyRightOffset ? stickyRightOffset : 0,
+          [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined,
+          [cssStickyCellInlineStart.name]: stickyLeftOffset ? stickyLeftOffset : 0,
+          [cssStickyCellInlineEnd.name]: stickyRightOffset ? stickyRightOffset : 0,
           ...props.style
         } as React.CSSProperties
       })}

package/src/components/Table/Th.tsx

@@ -6,9 +6,12 @@ import { info, sortable, sortableFavorites, selectable, collapsible, cellWidth,
 import { ThInfoType, ThSelectType, ThExpandType, ThSortType, formatterValueType } from './base/types';
 import { mergeProps } from './base/merge-props';
 import { IVisibility } from './utils/decorators/classNames';
-import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip/Tooltip';
+import { Tooltip, TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
 import { BaseCellProps } from './Table';
 import { IFormatterValueType, IColumn } from './TableTypes';
+import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
+import cssStickyCellInlineStart from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineStart';
+import cssStickyCellInlineEnd from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineEnd';
 
 export interface ThProps
   extends BaseCellProps,
@@ -31,6 +34,8 @@ export interface ThProps
    * To disable it completely you can set it to null.
    */
   tooltip?: React.ReactNode;
+  /** other props to pass to the tooltip */
+  tooltipProps?: Omit<TooltipProps, 'content'>;
   /** Callback on mouse enter */
   onMouseEnter?: (event: any) => void;
   /** Adds tooltip/popover info button */
@@ -51,6 +56,14 @@ export interface ThProps
   stickyRightOffset?: string;
   /** Indicates the <th> is part of a subheader of a nested header */
   isSubheader?: boolean;
+  /** Visually hidden text accessible only via assistive technologies. This must be passed in if the
+   * th is intended to be visually empty, and must be conveyed as a column header text.
+   */
+  screenReaderText?: string;
+  /** Provides an accessible name to the th. This should only be passed in when the th contains only non-text
+   * content, such as a "select all" checkbox or "expand all" toggle.
+   */
+  'aria-label'?: string;
 }
 
 const ThBase: React.FunctionComponent<ThProps> = ({
@@ -65,6 +78,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   select = null,
   expand: collapse = null,
   tooltip = '',
+  tooltipProps,
   onMouseEnter: onMouseEnterProp = () => {},
   width,
   visibility,
@@ -77,8 +91,17 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   stickyLeftOffset,
   stickyRightOffset,
   isSubheader = false,
+  screenReaderText,
+  'aria-label': ariaLabel,
   ...props
 }: ThProps) => {
+  if (!children && !screenReaderText && !ariaLabel) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Th: Table headers must have an accessible name. If the Th is intended to be visually empty, pass in screenReaderText. If the Th contains only non-text, interactive content such as a checkbox or expand toggle, pass in an aria-label.'
+    );
+  }
+
   const [showTooltip, setShowTooltip] = React.useState(false);
   const [truncated, setTruncated] = React.useState(false);
   const cellRef = innerRef ? innerRef : React.createRef();
@@ -96,7 +119,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       sortParams = sortableFavorites({
         onSort: sort?.onSort,
         columnIndex: sort.columnIndex,
-        sortBy: sort.sortBy
+        sortBy: sort.sortBy,
+        tooltip: tooltip as string,
+        tooltipProps
       })();
     } else {
       sortParams = sortable(children as IFormatterValueType, {
@@ -106,7 +131,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
             sortBy: sort.sortBy,
             onSort: sort?.onSort
           }
-        } as IColumn
+        } as IColumn,
+        tooltip: tooltip as string,
+        tooltipProps
       });
     }
   }
@@ -124,7 +151,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
             allRowsSelected: select.isSelected,
             isHeaderSelectDisabled: !!select.isHeaderSelectDisabled
           }
-        }
+        },
+        tooltip: tooltip as string,
+        tooltipProps
       })
     : null;
   const collapseParams = collapse
@@ -176,8 +205,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       onBlur={() => setShowTooltip(false)}
       data-label={dataLabel}
       onMouseEnter={tooltip !== null ? onMouseEnter : onMouseEnterProp}
-      scope={component === 'th' && children ? scope : null}
+      scope={component === 'th' ? scope : null}
       ref={cellRef}
+      aria-label={ariaLabel}
       className={css(
         styles.tableTh,
         className,
@@ -193,25 +223,27 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       {...props}
       {...(isStickyColumn && {
         style: {
-          '--pf-v5-c-table__sticky-cell--MinWidth': stickyMinWidth ? stickyMinWidth : undefined,
-          '--pf-v5-c-table__sticky-cell--Left': stickyLeftOffset ? stickyLeftOffset : 0,
-          '--pf-v5-c-table__sticky-cell--Right': stickyRightOffset ? stickyRightOffset : 0,
+          [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined,
+          [cssStickyCellInlineStart.name]: stickyLeftOffset ? stickyLeftOffset : 0,
+          [cssStickyCellInlineEnd.name]: stickyRightOffset ? stickyRightOffset : 0,
           ...props.style
         } as React.CSSProperties
       })}
     >
-      {transformedChildren}
+      {transformedChildren || (screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>)}
     </MergedComponent>
   );
 
   const canMakeDefaultTooltip = tooltip === '' ? typeof transformedChildren === 'string' : true;
-  return tooltip !== null && canMakeDefaultTooltip && showTooltip ? (
+  const childControlsTooltip = sortParams || selectParams;
+  return tooltip !== null && canMakeDefaultTooltip && !childControlsTooltip && showTooltip ? (
     <>
       {cell}
       <Tooltip
         triggerRef={cellRef as React.RefObject<any>}
         content={tooltip || (tooltip === '' && children)}
         isVisible
+        {...tooltipProps}
       />
     </>
   ) : (

package/src/components/Table/Tr.tsx

@@ -5,7 +5,7 @@ import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inl
 import { css } from '@patternfly/react-styles';
 import { TableContext } from './Table';
 
-export interface TrProps extends React.HTMLProps<HTMLTableRowElement>, OUIAProps {
+export interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onResize'>, OUIAProps {
   /** Content rendered inside the <tr> row */
   children?: React.ReactNode;
   /** Additional classes added to the <tr> row  */
@@ -28,6 +28,8 @@ export interface TrProps extends React.HTMLProps<HTMLTableRowElement>, OUIAProps
   isStriped?: boolean;
   /** Flag indicating the row will act as a border. This is typically used for a table with a nested and sticky header. */
   isBorderRow?: boolean;
+  /** Flag indicating the row is controlling the expansion of another row. */
+  isControlRow?: boolean;
   /** An event handler for the row */
   onRowClick?: (event?: React.KeyboardEvent | React.MouseEvent) => void;
   /** Flag indicating that the row is selectable */
@@ -50,6 +52,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
   isRowSelected = false,
   isStriped = false,
   isBorderRow = false,
+  isControlRow = false,
   innerRef,
   ouiaId,
   ouiaSafe = true,
@@ -100,6 +103,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
           isRowSelected && styles.modifiers.selected,
           isStriped && styles.modifiers.striped,
           isBorderRow && styles.modifiers.borderRow,
+          isControlRow && styles.tableControlRow,
           resetOffset && styles.modifiers.firstCellOffsetReset
         )}
         hidden={rowIsHidden}

package/src/components/Table/__tests__/Th.test.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Th } from '../Th';
+
+test('Does not render with aria-label by default', () => {
+  render(<Th />);
+  expect(screen.getByRole('columnheader')).not.toHaveAccessibleName();
+});
+
+test('Renders with aria-label when passed in', () => {
+  render(<Th aria-label="Test" />);
+  expect(screen.getByRole('columnheader')).toHaveAccessibleName('Test');
+});
+
+test('Does not render with screen reader text by default', () => {
+  render(<Th />);
+
+  expect(screen.getByRole('columnheader')).toBeEmptyDOMElement();
+});
+
+test('Does not render with screen reader text when children are passed in', () => {
+  render(<Th screenReaderText="Test">Heading label</Th>);
+
+  expect(screen.getByRole('columnheader')).not.toHaveTextContent('Test');
+});
+
+test('Renders with screen reader text when screenReaderText is passed in', () => {
+  render(<Th screenReaderText="Test" />);
+
+  expect(screen.getByRole('columnheader')).toHaveTextContent('Test');
+});

package/src/components/Table/__tests__/__snapshots__/RowWrapper.test.tsx.snap

@@ -5,9 +5,9 @@ exports[`RowWrapper renders correctly 1`] = `
   <table>
     <tbody>
       <tr
-        class="pf-v5-c-table__tr"
+        class="pf-v6-c-table__tr"
         data-ouia-component-id="OUIA-Generated-TableRow-1"
-        data-ouia-component-type="PF5/TableRow"
+        data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />
     </tbody>
@@ -20,9 +20,9 @@ exports[`RowWrapper renders expanded correctly 1`] = `
   <table>
     <tbody>
       <tr
-        class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
+        class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
         data-ouia-component-id="OUIA-Generated-TableRow-2"
-        data-ouia-component-type="PF5/TableRow"
+        data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />
     </tbody>

package/src/components/Table/base/types.tsx

@@ -8,8 +8,7 @@
 import * as React from 'react';
 import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
 import { PopoverProps } from '@patternfly/react-core/dist/esm/components/Popover';
-import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown';
-import { SelectOptionObject, SelectProps } from '@patternfly/react-core/dist/esm/deprecated/components/Select';
+import { SelectProps } from '@patternfly/react-core/dist/esm/components/Select';
 import { Table } from '../Table';
 import { Thead } from '../Thead';
 import { Tbody } from '../Tbody';
@@ -61,9 +60,9 @@ export interface TdActionsType {
   /** Whether the actions are disabled */
   isDisabled?: boolean;
   /** Actions dropdown position */
-  dropdownPosition?: DropdownPosition;
+  dropdownPosition?: 'right' | 'left';
   /** Actions dropdown direction */
-  dropdownDirection?: DropdownDirection;
+  dropdownDirection?: 'up' | 'down';
   /** The container to append the dropdown menu to. Defaults to 'inline'.
    * If your menu is being cut off you can append it to an element higher up the DOM tree.
    * Some examples:
@@ -286,11 +285,11 @@ export interface EditableSelectInputProps {
   value: string | string[];
   /** Flag controlling isOpen state of select */
   isSelectOpen: boolean;
-  /** String or SelectOptionObject, or array of strings or SelectOptionObjects representing current selections */
-  selected: string | SelectOptionObject | (string | SelectOptionObject)[];
+  /** 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 */
+  selected: any | any[];
   /** Array of react elements to display in the select menu */
   options: React.ReactElement[];
-  /** Props to be passed down to the Select component */
+  /** Props to be passed down to the select component */
   editableSelectProps?: SelectProps;
   /** arbitrary data to pass to the internal select component in the editable select input cell */
   [key: string]: any;

package/src/components/Table/examples/Table.md

@@ -51,9 +51,16 @@ import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-i
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-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 global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/global_background_color_secondary_default';
 
 ## Table examples
 
@@ -68,6 +75,7 @@ Some general notes:
 ### Basic
 
 ```ts file="TableBasic.tsx"
+
 ```
 
 ### Custom row wrapper, header tooltips & popovers
@@ -79,6 +87,7 @@ Some general notes:
 To add a header tooltip or popover to `Th`, pass a `ThInfoType` object via the `info` prop.
 
 ```ts file="TableMisc.tsx"
+
 ```
 
 ### Sortable & wrapping headers
@@ -100,6 +109,7 @@ type OnSort = (
 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 `Sortable - responsive` demo in the `React demos` tab.
 
 ```ts file="TableSortable.tsx"
+
 ```
 
 ### Sortable - custom control
@@ -107,6 +117,7 @@ The built in display for sorting is not fully responsive, as the column headers
 Sorting a table may also be controlled manually with a toolbar control. To see a full page demo of a responsive table, view the `Sortable - responsive` demo in the `React demos` tab.
 
 ```ts file="TableSortableCustom.tsx"
+
 ```
 
 ### Selectable with checkbox
@@ -137,6 +148,7 @@ type OnSelect = (
 checking checkboxes will check intermediate rows' checkboxes.
 
 ```ts file="TableSelectable.tsx"
+
 ```
 
 ### Selectable radio input
@@ -144,6 +156,7 @@ checking checkboxes will check intermediate rows' checkboxes.
 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.
 
 ```ts file="TableSelectableRadio.tsx"
+
 ```
 
 ### Row click handler, clickable rows
@@ -151,6 +164,14 @@ Similarly to the selectable example above, the radio buttons use the first colum
 This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view.
 
 ```ts file="TableClickable.tsx"
+
+```
+
+### Editable rows
+
+This example shows a table with editable rows. Cells in a row can be edited after clicking on the edit icon.
+
+```ts file="TableEditable.tsx"
 ```
 
 ### Actions
@@ -162,6 +183,7 @@ To make a cell an action cell, render an `ActionsColumn` component inside a row'
 If actions menus are getting clipped by other items on the page, such as sticky columns or rows, the `ActionsColumn` can be passed a `menuAppendTo` prop to adjust where the actions menu is appended.
 
 ```ts file="TableActions.tsx"
+
 ```
 
 ### Actions Overflow
@@ -169,6 +191,7 @@ If actions menus are getting clipped by other items on the page, such as sticky
 Useing an `OverflowMenu` in the actions column, allowing the actions to condense into a dropdown if necessary for space.
 
 ```ts file="TableActionsOverflow.tsx"
+
 ```
 
 ### Expandable
@@ -194,6 +217,7 @@ type OnCollapse = (
 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.
 
 ```ts file="TableExpandable.tsx"
+
 ```
 
 ### Compound expandable
@@ -218,16 +242,19 @@ export type OnExpand = (
 ```
 
 ```ts file="TableCompoundExpandable.tsx"
+
 ```
 
 ### Cell width, breakpoint modifiers
 
 ```ts file="TableCellWidth.tsx"
+
 ```
 
 ### Controlling text
 
 ```ts file="TableControllingText.tsx"
+
 ```
 
 ### Modifiers with table text
@@ -235,11 +262,13 @@ export type OnExpand = (
 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.
 
 ```ts file="TableTextModifiers.tsx"
+
 ```
 
 ### Empty state
 
 ```ts file="TableEmptyState.tsx"
+
 ```
 
 ### Favoritable (implemented with sortable)
@@ -262,6 +291,7 @@ type OnFavorite = (
 To make a favoritable column sortable, pass a `ThSortType` object to the favoritable column's `Th` with `isFavorites` set to true.
 
 ```ts file="TableFavoritable.tsx"
+
 ```
 
 ### Tree table
@@ -295,6 +325,7 @@ aria-posinset, and aria-setsize as violations. This is an intentional choice at
 the voice over technologies will recognize the flat table structure as a tree.
 
 ```ts file="TableTree.tsx"
+
 ```
 
 ### Flat tree table with no inset
@@ -302,6 +333,7 @@ the voice over technologies will recognize the flat table structure as a tree.
 To remove the inset used to leave space for the expand/collapse toggle in a flat tree table, use the `hasNoInset` prop on the `Table` component.
 
 ```ts file="TableTreeNoInset.tsx"
+
 ```
 
 ### Draggable row table
@@ -315,6 +347,7 @@ To make a row draggable:
 5. The draggable `Td` in each row needs a `TdDraggableType` object passed to its `draggable` prop.
 
 ```ts isBeta file="TableDraggable.tsx"
+
 ```
 
 ### Sticky table modifiers
@@ -331,7 +364,7 @@ There are a few ways this can be handled:
 
 ### Sticky column
 
-To make a column sticky, wrap `Table` with `InnerScrollContainer` and add the following properties to the `Th` or `Td` that should be sticky: 
+To make a column sticky, wrap `Table` with `InnerScrollContainer` and add the following properties to the `Th` or `Td` that should be sticky:
 
 - `isStickyColumn`
 - `hasRightBorder` for a left-aligned sticky column, or `hasLeftBorder` for a right-aligned sticky column.
@@ -339,6 +372,7 @@ To make a column sticky, wrap `Table` with `InnerScrollContainer` and add the fo
 To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property. To set the minimum width of the sticky column, use the `stickyMinWidth` property. For multiple sticky columns, use the `stickyLeftOffset` and `stickyRightOffset` properties for additional left or right sticky columns.
 
 ```ts file="TableStickyColumn.tsx"
+
 ```
 
 ### Multiple left-aligned sticky columns
@@ -348,11 +382,12 @@ To make multiple left-aligned columns sticky:
 - wrap `Table` with `InnerScrollContainer`
 - add `isStickyColumn` to all columns that should be sticky
 - add `hasRightBorder` to the rightmost sticky column
-- add `stickyLeftOffset` to each sticky column with a value that equals the combined width - set by `stickyMindWidth` - of the previous sticky columns. The leftmost sticky column should have a value of `0`, which is the default of this property. 
+- add `stickyLeftOffset` to each sticky column with a value that equals the combined width - set by `stickyMindWidth` - of the previous sticky columns. The leftmost sticky column should have a value of `0`, which is the default of this property.
 
 To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property.
 
 ```ts file="TableMultipleStickyColumns.tsx"
+
 ```
 
 ### Multiple right-aligned sticky columns
@@ -362,11 +397,12 @@ To make multiple right-aligned columns sticky:
 - wrap `Table` with `InnerScrollContainer`
 - add `isStickyColumn` to all columns that should be sticky
 - add `hasLeftBorder` to the leftmost sticky column
-- add `stickyRightOffset` to each sticky column with a value that equals the combined width - set by `stickyMindWidth` - of the next sticky columns. The rightmost sticky column should have a value of `0`, which is the default of this property. 
+- add `stickyRightOffset` to each sticky column with a value that equals the combined width - set by `stickyMindWidth` - of the next sticky columns. The rightmost sticky column should have a value of `0`, which is the default of this property.
 
 To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property.
 
 ```ts file="TableRightStickyColumn.tsx"
+
 ```
 
 ### Sticky columns and header
@@ -374,6 +410,7 @@ To prevent the default text wrapping behavior and allow horizontal scrolling, al
 To maintain proper sticky behavior across sticky columns and header, `Table` must be wrapped with `OuterScrollContainer` and `InnerScrollContainer`.
 
 ```ts file="TableStickyColumnsAndHeader.tsx"
+
 ```
 
 ### Nested column headers
@@ -390,21 +427,25 @@ The first `Tr` represents the top level of columns, and each must pass either `r
 The second `Tr` represents the second level of sub columns. The `Th` in this row each should pass `isSubHeader`, and the last sub column of a column should also pass `hasRightBorder`.
 
 ```ts file="TableNestedHeaders.tsx"
+
 ```
 
 ### Nested column headers and expandable rows
 
 ```ts file="TableNestedExpandable.tsx"
+
 ```
 
 ### Expandable with nested table
 
 ```ts file="TableNestedTableExpandable.tsx"
+
 ```
 
 ### Nested sticky header
 
 ```ts file="TableNestedStickyHeader.tsx"
+
 ```
 
 ### Striped
@@ -412,6 +453,7 @@ The second `Tr` represents the second level of sub columns. The `Th` in this row
 To apply striping to a basic table, add the `isStriped` property to `Table`.
 
 ```ts file="TableStriped.tsx"
+
 ```
 
 ### Striped expandable
@@ -419,6 +461,7 @@ To apply striping to a basic table, add the `isStriped` property to `Table`.
 To apply striping to an expandable table, add the `isStriped` and `isExpandable` properties to `Table`.
 
 ```ts file="TableStripedExpandable.tsx"
+
 ```
 
 ### Striped multiple tobdy
@@ -426,6 +469,7 @@ To apply striping to an expandable table, add the `isStriped` and `isExpandable`
 When there are multiple `Tbody` components within a table, a more granular application of striping may be controlled by adding either the `isEvenStriped` or `isOddStriped` properties to `Tbody`. These properties will stripe even or odd rows within that `Tbody` respectively.
 
 ```ts file="TableStripedMultipleTbody.tsx"
+
 ```
 
 ### Striped tr
@@ -433,4 +477,5 @@ When there are multiple `Tbody` components within a table, a more granular appli
 To manually control striping, add the `isStriped` property to each desired `Tr`. This replaces adding the `isStriped` property to `Table`.
 
 ```ts file="TableStripedTr.tsx"
+
 ```

package/src/components/Table/examples/TableActions.tsx

@@ -116,8 +116,8 @@ export const TableActions: React.FunctionComponent = () => {
             <Th>{columnNames.prs}</Th>
             <Th>{columnNames.workspaces}</Th>
             <Th>{columnNames.lastCommit}</Th>
-            <Td></Td>
-            <Td></Td>
+            <Th screenReaderText="Primary action" />
+            <Th screenReaderText="Secondary action" />
           </Tr>
         </Thead>
         <Tbody>

package/src/components/Table/examples/TableActionsOverflow.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import React from 'react';
 import {
   Button,
@@ -66,7 +65,7 @@ export const TableActions: React.FunctionComponent = () => {
             <Th>{columnNames.prs}</Th>
             <Th>{columnNames.workspaces}</Th>
             <Th>{columnNames.lastCommit}</Th>
-            <Td></Td>
+            <Th screenReaderText="Actions" />
           </Tr>
         </Thead>
         <Tbody>
@@ -106,9 +105,8 @@ export const TableActions: React.FunctionComponent = () => {
                             setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: !r.isMenuOpen })))
                           }
                           isExpanded={repo.isMenuOpen}
-                        >
-                          <EllipsisVIcon />
-                        </MenuToggle>
+                          icon={<EllipsisVIcon />}
+                        />
                       )}
                       isOpen={repo.isMenuOpen}
                       onOpenChange={(isOpen) =>

package/src/components/Table/examples/TableCompoundExpandable.tsx

@@ -4,6 +4,7 @@ import { Table, Thead, Tr, Th, Tbody, Td, TdProps, ExpandableRowContent } from '
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 interface Repository {
   name: string;
@@ -66,7 +67,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
           <Th>{columnNames.prs}</Th>
           <Th>{columnNames.workspaces}</Th>
           <Th>{columnNames.lastCommit}</Th>
-          <Th />
+          <Th screenReaderText="URL" />
         </Tr>
       </Thead>
       {repositories.map((repo: Repository, rowIndex: number) => {
@@ -74,7 +75,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
         const isRowExpanded = !!expandedCellKey;
         return (
           <Tbody key={repo.name} isExpanded={isRowExpanded}>
-            <Tr>
+            <Tr isControlRow>
               <Td width={25} dataLabel={columnNames.name} component="th">
                 <a href="#">{repo.name}</a>
               </Td>
@@ -108,9 +109,9 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
             </Tr>
             {isRowExpanded ? (
               <Tr isExpanded={isRowExpanded}>
-                <Td dataLabel={columnNames[expandedCellKey]} noPadding colSpan={6}>
+                <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
                   <ExpandableRowContent>
-                    <div className="pf-v5-u-m-md">
+                    <div className={spacing.mMd}>
                       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