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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.10",
   "description": "This library provides a set of React table components for use with the PatternFly 4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -40,10 +40,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.1",
-    "@patternfly/react-icons": "^6.0.0-alpha.1",
-    "@patternfly/react-styles": "^6.0.0-alpha.1",
-    "@patternfly/react-tokens": "^6.0.0-alpha.1",
+    "@patternfly/react-core": "^6.0.0-alpha.10",
+    "@patternfly/react-icons": "^6.0.0-alpha.6",
+    "@patternfly/react-styles": "^6.0.0-alpha.6",
+    "@patternfly/react-tokens": "^6.0.0-alpha.6",
     "lodash": "^4.17.19",
     "tslib": "^2.5.0"
   },
@@ -55,5 +55,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "abccf530a0a642a4d7b4eda6ada09c5822c855b0"
+  "gitHead": "a90b9d4b4ca299a42104d2c3cefae79bb2e05b6b"
 }

package/src/components/Table/EditableSelectInputCell.tsx

@@ -76,7 +76,7 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
       <div className={inlineStyles.inlineEditValue}>{Array.isArray(value) ? value.join(', ') : value}</div>
       <div className={inlineStyles.inlineEditInput}>
         {select}
-        <div className={css(formStyles.formHelperText, formStyles.modifiers.error)} aria-live="polite">
+        <div className={css(formStyles.formHelperText)} aria-live="polite">
           {props.errorText}
         </div>
       </div>

package/src/components/Table/EditableTextCell.tsx

@@ -49,7 +49,7 @@ export const EditableTextCell: React.FunctionComponent<IEditableTextCell> = ({
         }}
         aria-label={inputAriaLabel}
       />
-      <div className={css(formStyles.formHelperText, formStyles.modifiers.error)} aria-live="polite">
+      <div className={css(formStyles.formHelperText)} aria-live="polite">
         {props.errorText}
       </div>
     </div>

package/src/components/Table/SelectColumn.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Tooltip, TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
 
 export enum RowSelectVariant {
   radio = 'radio',
@@ -11,6 +12,10 @@ export interface SelectColumnProps {
   className?: string;
   onSelect?: (event: React.FormEvent<HTMLInputElement>) => void;
   selectVariant?: RowSelectVariant;
+  /** text to display on the tooltip */
+  tooltip?: React.ReactNode;
+  /** other props to pass to the tooltip */
+  tooltipProps?: Omit<TooltipProps, 'content'>;
 }
 
 export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
@@ -19,13 +24,27 @@ export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
   className,
   onSelect = null as (event: React.FormEvent<HTMLInputElement>) => void,
   selectVariant,
+  tooltip,
+  tooltipProps,
   ...props
-}: SelectColumnProps) => (
-  <React.Fragment>
-    <label>
-      <input {...props} type={selectVariant} onChange={onSelect} />
-    </label>
-    {children}
-  </React.Fragment>
-);
+}: SelectColumnProps) => {
+  const inputRef = React.createRef<HTMLInputElement>();
+
+  const content = (
+    <React.Fragment>
+      <label>
+        <input {...props} ref={inputRef} type={selectVariant} onChange={onSelect} />
+      </label>
+      {children}
+    </React.Fragment>
+  );
+
+  return tooltip ? (
+    <Tooltip triggerRef={inputRef} content={tooltip} {...tooltipProps}>
+      {content}
+    </Tooltip>
+  ) : (
+    content
+  );
+};
 SelectColumn.displayName = 'SelectColumn';

package/src/components/Table/SortColumn.tsx

@@ -5,6 +5,7 @@ import ArrowsAltVIcon from '@patternfly/react-icons/dist/esm/icons/arrows-alt-v-
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { TableText } from './TableText';
+import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
 
 export enum SortByDirection {
   asc = 'asc',
@@ -17,6 +18,9 @@ export interface SortColumnProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   isSortedBy?: boolean;
   onSort?: Function;
   sortDirection?: string;
+  tooltip?: React.ReactNode;
+  tooltipProps?: Omit<TooltipProps, 'content'>;
+  tooltipHasDefaultBehavior?: boolean;
 }
 
 export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
@@ -26,6 +30,9 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
   onSort = null,
   sortDirection = '',
   type = 'button',
+  tooltip,
+  tooltipProps,
+  tooltipHasDefaultBehavior,
   ...props
 }: SortColumnProps) => {
   let SortedByIcon;
@@ -45,7 +52,14 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
       onBlur={() => setFocused(false)}
     >
       <div className={css(className, styles.tableButtonContent)}>
-        <TableText focused={focused}>{children}</TableText>
+        <TableText
+          tooltip={tooltip}
+          tooltipProps={tooltipProps}
+          tooltipHasDefaultBehavior={tooltipHasDefaultBehavior}
+          focused={focused}
+        >
+          {children}
+        </TableText>
         <span className={css(styles.tableSortIndicator)}>
           <SortedByIcon />
         </span>

package/src/components/Table/Table.tsx

@@ -159,8 +159,8 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   const handleKeys = (event: KeyboardEvent) => {
     if (
       isNested ||
-      !(tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) || // implements roving tab-index to tree tables only
-      (tableRef && tableRef.current !== (event.target as HTMLElement).closest('.pf-v5-c-table:not(.pf-m-nested)'))
+      !(tableRef && tableRef.current && tableRef.current.classList.contains(stylesTreeView.modifiers.treeView)) || // implements roving tab-index to tree tables only
+      (tableRef && tableRef.current !== (event.target as HTMLElement).closest(`.${styles.table}:not(.pf-m-nested)`))
     ) {
       return;
     }

package/src/components/Table/TableText.tsx

@@ -26,13 +26,15 @@ export interface TableTextProps extends React.HTMLProps<HTMLDivElement> {
   /** Determines which wrapping modifier to apply to the table text */
   wrapModifier?: WrapModifier | 'wrap' | 'nowrap' | 'truncate' | 'breakWord' | 'fitContent';
   /** text to display on the tooltip */
-  tooltip?: string;
+  tooltip?: React.ReactNode;
   /** other props to pass to the tooltip */
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** callback used to create the tooltip if text is truncated */
   onMouseEnter?: (event: any) => void;
   /** Determines if the TableText is focused by parent component */
   focused?: boolean;
+  /** Determines if tooltip should have normal visbility behavior. If false, the tooltip will only be shown when children is not entirely visible */
+  tooltipHasDefaultBehavior?: boolean;
 }
 
 export const TableText: React.FunctionComponent<TableTextProps> = ({
@@ -44,12 +46,13 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
   tooltipProps = {},
   onMouseEnter: onMouseEnterProp = () => {},
   focused = false,
+  tooltipHasDefaultBehavior = false,
   ...props
 }: TableTextProps) => {
   const Component: TableTextVariant | 'span' | 'div' = variant;
   const textRef = React.createRef<HTMLElement>();
 
-  const [tooltip, setTooltip] = React.useState('');
+  const [tooltip, setTooltip] = React.useState(tooltipProp);
   const onMouseEnter = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       setTooltip(tooltipProp || event.target.innerText);
@@ -70,7 +73,7 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
   const text = (
     <Component
       ref={textRef as React.Ref<HTMLDivElement>}
-      onMouseEnter={onMouseEnter}
+      onMouseEnter={!tooltipHasDefaultBehavior ? onMouseEnter : undefined}
       className={css(className, wrapModifier && styles.modifiers[wrapModifier], styles.tableText)}
       {...props}
     >
@@ -79,15 +82,22 @@ export const TableText: React.FunctionComponent<TableTextProps> = ({
   );
 
   React.useEffect(() => {
-    if (focused) {
-      onFocus(textRef.current);
-    } else {
-      setTooltip('');
+    if (!tooltipHasDefaultBehavior) {
+      if (focused) {
+        onFocus(textRef.current);
+      } else {
+        setTooltip('');
+      }
     }
-  }, [focused]);
+  }, [focused, tooltipHasDefaultBehavior]);
 
   return tooltip !== '' ? (
-    <Tooltip triggerRef={textRef} content={tooltip} isVisible {...tooltipProps}>
+    <Tooltip
+      triggerRef={textRef}
+      content={tooltip}
+      {...(!tooltipHasDefaultBehavior && { isVisible: true })}
+      {...tooltipProps}
+    >
       {text}
     </Tooltip>
   ) : (

package/src/components/Table/TableTypes.tsx

@@ -132,6 +132,9 @@ export interface IExtra extends IExtraData {
   rowData?: IRowData;
   className?: string;
   ariaLabel?: string;
+  tooltip?: React.ReactNode;
+  tooltipProps?: Omit<TooltipProps, 'content'>;
+  tooltipHasDefaultBehavior?: boolean;
 }
 
 export type IFormatterValueType = formatterValueType & {

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 cssStickyCellLeft from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Left';
+import cssStickyCellRight from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Right';
+
 export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDataCellElement>, 'onSelect' | 'width'> {
   /**
    * The column header the cell corresponds to.
@@ -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,
+          [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0,
+          [cssStickyCellRight.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 cssStickyCellLeft from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Left';
+import cssStickyCellRight from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Right';
 
 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 */
@@ -65,6 +70,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   select = null,
   expand: collapse = null,
   tooltip = '',
+  tooltipProps,
   onMouseEnter: onMouseEnterProp = () => {},
   width,
   visibility,
@@ -96,7 +102,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 +114,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
             sortBy: sort.sortBy,
             onSort: sort?.onSort
           }
-        } as IColumn
+        } as IColumn,
+        tooltip: tooltip as string,
+        tooltipProps
       });
     }
   }
@@ -124,7 +134,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
             allRowsSelected: select.isSelected,
             isHeaderSelectDisabled: !!select.isHeaderSelectDisabled
           }
-        }
+        },
+        tooltip: tooltip as string,
+        tooltipProps
       })
     : null;
   const collapseParams = collapse
@@ -193,9 +205,9 @@ 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,
+          [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0,
+          [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0,
           ...props.style
         } as React.CSSProperties
       })}
@@ -205,13 +217,15 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   );
 
   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  */

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

@@ -54,6 +54,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 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 global_BackgroundColor_150 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_150';
 
 ## Table examples
 

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;
@@ -110,7 +111,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
               <Tr isExpanded={isRowExpanded}>
                 <Td dataLabel={columnNames[expandedCellKey]} noPadding 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

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+/* eslint-disable camelcase */
+import global_BackgroundColor_150 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_150';
 
 interface Repository {
   name: string;
@@ -65,7 +67,7 @@ export const TableMisc: React.FunctionComponent = () => {
         {repositories.map((repo, rowIndex) => {
           const isOddRow = (rowIndex + 1) % 2;
           const customStyle = {
-            backgroundColor: 'var(--pf-v5-global--BackgroundColor--150)'
+            backgroundColor: global_BackgroundColor_150.var
           };
           // Some arbitrary logic to demonstrate that cell styles can be based on anything
           const nameColSpan = repo.branches === null && repo.prs === null ? 3 : 1;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 import { Stack, StackItem } from '@patternfly/react-core';
+import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
 
 interface PodConnection {
   source: {
@@ -162,7 +163,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               <Td dataLabel={columnNames.datetime}>
                 <div>
                   <span>{new Date(connection.timestamp).toDateString()}</span>{' '}
-                  <span className="pf-v5-u-color-200">{new Date(connection.timestamp).toLocaleTimeString()}</span>
+                  <span className={textStyles.color_200}>{new Date(connection.timestamp).toLocaleTimeString()}</span>
                 </div>
               </Td>
               <Td dataLabel={columnNames.source}>
@@ -171,7 +172,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.source.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className="pf-v5-u-color-200">({connection.source.port.protocol})</span>
+                    <span className={textStyles.color_200}>({connection.source.port.protocol})</span>
                   </StackItem>
                 </Stack>
               </Td>
@@ -181,7 +182,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.destination.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className="pf-v5-u-color-200">({connection.destination.port.protocol})</span>
+                    <span className={textStyles.color_200}>({connection.destination.port.protocol})</span>
                   </StackItem>
                 </Stack>
               </Td>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 import { Stack, StackItem } from '@patternfly/react-core';
+import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
 
 interface PodConnection {
   source: {
@@ -165,7 +166,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               <Td dataLabel={columnNames.datetime}>
                 <div>
                   <span>{new Date(connection.timestamp).toDateString()}</span>{' '}
-                  <span className="pf-v5-u-color-200">{new Date(connection.timestamp).toLocaleTimeString()}</span>
+                  <span className={textStyles.color_200}>{new Date(connection.timestamp).toLocaleTimeString()}</span>
                 </div>
               </Td>
               <Td dataLabel={columnNames.source}>
@@ -174,7 +175,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.source.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className="pf-v5-u-color-200">({connection.source.port.protocol})</span>
+                    <span className={textStyles.color_200}>({connection.source.port.protocol})</span>
                   </StackItem>
                 </Stack>
               </Td>
@@ -184,7 +185,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.destination.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className="pf-v5-u-color-200">({connection.destination.port.protocol})</span>
+                    <span className={textStyles.color_200}>({connection.destination.port.protocol})</span>
                   </StackItem>
                 </Stack>
               </Td>

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

@@ -8,7 +8,8 @@ import {
   Td,
   InnerScrollContainer,
   OuterScrollContainer,
-  ThProps
+  ThProps,
+  ISortBy
 } from '@patternfly/react-table';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
 
@@ -53,10 +54,10 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
   // Index of the currently sorted column
   // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
   // as the identifier of the sorted column. See the "Compound expandable" example.
-  const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
+  const [activeSortIndex, setActiveSortIndex] = React.useState(-1);
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = React.useState<ISortBy['direction']>();
 
   // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
   // This example is trivial since our data objects just contain strings, but if the data was more complex
@@ -69,7 +70,7 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
   // Note that we perform the sort as part of the component's render logic and not in onSort.
   // We shouldn't store the list of data in state because we don't want to have to sync that with props.
   let sortedFacts = facts;
-  if (activeSortIndex !== null) {
+  if (activeSortIndex > -1) {
     sortedFacts = facts.sort((a, b) => {
       const aValue = getSortableRowValues(a)[activeSortIndex];
       const bValue = getSortableRowValues(b)[activeSortIndex];

package/src/components/Table/utils/decorators/selectable.tsx

@@ -7,7 +7,7 @@ import checkStyles from '@patternfly/react-styles/css/components/Check/check';
 
 export const selectable: ITransform = (
   label: IFormatterValueType,
-  { rowIndex, columnIndex, rowData, column, property }: IExtra
+  { rowIndex, columnIndex, rowData, column, property, tooltip }: IExtra
 ) => {
   const {
     extraParams: { onSelect, selectVariant, allRowsSelected, isHeaderSelectDisabled }
@@ -69,6 +69,7 @@ export const selectable: ITransform = (
         selectVariant={selectVariant as RowSelectVariant}
         onSelect={selectClick}
         name={selectName}
+        tooltip={tooltip}
       >
         {label as React.ReactNode}
       </SelectColumn>

package/src/components/Table/utils/decorators/sortable.tsx

@@ -15,12 +15,15 @@ export const sortableFavorites = (sort: any) => () =>
         sortBy: sort.sortBy,
         onSort: sort?.onSort
       }
-    }
+    },
+    tooltip: sort.tooltip,
+    tooltipProps: sort.tooltipProps,
+    tooltipHasDefaultBehavior: true
   });
 
 export const sortable: ITransform = (
   label: IFormatterValueType,
-  { columnIndex, column, property, className, ariaLabel }: IExtra
+  { columnIndex, column, property, className, ariaLabel, tooltip, tooltipProps, tooltipHasDefaultBehavior }: IExtra
 ) => {
   const {
     extraParams: { sortBy, onSort }
@@ -56,6 +59,9 @@ export const sortable: ITransform = (
         sortDirection={isSortedBy ? sortBy.direction : ''}
         onSort={sortClicked}
         aria-label={ariaLabel}
+        tooltip={tooltip}
+        tooltipProps={tooltipProps}
+        tooltipHasDefaultBehavior={tooltipHasDefaultBehavior}
       >
         {label as React.ReactNode}
       </SortColumn>

package/src/components/Table/utils/decorators/treeRow.tsx

@@ -31,7 +31,7 @@ export const treeRow =
             {icon}
           </span>
         )}
-        <span className="pf-v5-c-table__text" key="table-text">
+        <span className={styles.tableText} key="table-text">
           {content as React.ReactNode}
         </span>
       </div>
@@ -41,7 +41,7 @@ export const treeRow =
     };
     return {
       component: 'th',
-      className: 'pf-v5-c-table__tree-view-title-cell',
+      className: stylesTreeView.tableTreeViewTitleCell,
       children:
         level !== undefined ? (
           <div className={css(stylesTreeView.tableTreeViewMain)}>
@@ -83,7 +83,7 @@ export const treeRow =
                     onToggleRowDetails && onToggleRowDetails(event, rowIndex, content as React.ReactNode, rowData)
                   }
                 >
-                  <span className="pf-v5-c-table__details-toggle-icon">
+                  <span className={`${styles.table}__details-toggle-icon`}>
                     <EllipsisHIcon aria-hidden />
                   </span>
                 </Button>