feat(Table): add sticky modifiers to Td (patternfly#8391)

* feat(Table): allow sticky Td

* update description

* update disabled type, update desc

packages/react-table/src/components/Table/base/types.tsx

@@ -171,6 +171,10 @@ export interface ThSelectType {
   isSelected: boolean;
   /** Flag indicating the select checkbox in the th is disabled */
   isHeaderSelectDisabled?: boolean;
+  /** Whether to disable the selection */
+  isDisabled?: boolean;
+  /** Additional props forwarded to select rowData */
+  props?: any;
 }
 
 export interface ThExpandType {

packages/react-table/src/components/TableComposable/Td.tsx

@@ -1,6 +1,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 { BaseCellProps } from './TableComposable';
 import { cellActions } from '../Table/utils/decorators/cellActions';
 import { selectable } from '../Table/utils/decorators/selectable';
@@ -57,6 +58,14 @@ export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDa
   tooltip?: React.ReactNode;
   /** Callback on mouse enter */
   onMouseEnter?: (event: any) => void;
+  /** Indicates the column should be sticky */
+  isStickyColumn?: boolean;
+  /** Adds a border to the right side of the cell */
+  hasRightBorder?: boolean;
+  /** Minimum width for a sticky column */
+  stickyMinWidth?: string;
+  /** 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. */
+  stickyLeftOffset?: string;
 }
 
 const TdBase: React.FunctionComponent<TdProps> = ({
@@ -80,6 +89,10 @@ const TdBase: React.FunctionComponent<TdProps> = ({
   draggableRow: draggableRowProp = null,
   tooltip = '',
   onMouseEnter: onMouseEnterProp = () => {},
+  isStickyColumn = false,
+  hasRightBorder = false,
+  stickyMinWidth = '120px',
+  stickyLeftOffset,
   ...props
 }: TdProps) => {
   const [showTooltip, setShowTooltip] = React.useState(false);
@@ -239,13 +252,22 @@ const TdBase: React.FunctionComponent<TdProps> = ({
         isActionCell && styles.tableAction,
         textCenter && styles.modifiers.center,
         noPadding && styles.modifiers.noPadding,
+        isStickyColumn && scrollStyles.tableStickyColumn,
+        hasRightBorder && scrollStyles.modifiers.borderRight,
         styles.modifiers[modifier as 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap' | undefined],
         draggableParams && styles.tableDraggable,
         mergedClassName
       )}
       ref={innerRef}
       {...mergedProps}
       {...props}
+      {...(isStickyColumn && {
+        style: {
+          '--pf-c-table__sticky-column--MinWidth': stickyMinWidth ? stickyMinWidth : undefined,
+          '--pf-c-table__sticky-column--Left': stickyLeftOffset ? stickyLeftOffset : undefined,
+          ...props.style
+        } as React.CSSProperties
+      })}
     >
       {mergedChildren || children}
     </MergedComponent>

packages/react-table/src/components/TableComposable/Th.tsx

@@ -109,6 +109,11 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   }
   const selectParams = select
     ? selectable(children as IFormatterValueType, {
+        rowData: {
+          selected: select.isSelected,
+          disableSelection: select?.isDisabled,
+          props: select?.props
+        },
         column: {
           extraParams: {
             onSelect: select?.onSelect,

packages/react-table/src/components/TableComposable/examples/ComposableTable.md

@@ -327,14 +327,14 @@ There are a few ways this can be handled:
 
 ### Composable: Sticky column
 
-To make a column sticky, wrap `TableComposable` with `InnerScrollContainer` and add the following properties to the `Th` that should be sticky: `isStickyColumn` and `hasRightBorder`. To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` should also have the `modifier="nowrap"` property. To set the minimum width of the sticky column, use the `stickyMinWidth` property.
+To make a column sticky, wrap `TableComposable` with `InnerScrollContainer` and add the following properties to the `Th` or `Td` that should be sticky: `isStickyColumn` and `hasRightBorder`. 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.
 
 ```ts file="ComposableTableStickyColumn.tsx"
 ```
 
 ### Composable: Multiple sticky columns
 
-To make multiple columns sticky, wrap `TableComposable` with `InnerScrollContainer` and add `isStickyColumn` to all columns that should be sticky. The rightmost column should also have the `hasRightBorder` property, and each sticky column after the first must define a `stickyLeftOffset` property that equals the combined width of the previous sticky columns - set by `stickyMinWidth`. To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` should also have the `modifier="nowrap"` property.
+To make multiple columns sticky, wrap `TableComposable` with `InnerScrollContainer` and add `isStickyColumn` to all columns that should be sticky. The rightmost column should also have the `hasRightBorder` property, and each sticky column after the first must define a `stickyLeftOffset` property that equals the combined width of the previous sticky columns - set by `stickyMinWidth`. 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="ComposableTableMultipleStickyColumns.tsx"
 ```