diff --git a/packages/react-table/src/components/Table/base/types.tsx b/packages/react-table/src/components/Table/base/types.tsx index c69d9331177..445ff299147 100644 --- a/packages/react-table/src/components/Table/base/types.tsx +++ b/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 { diff --git a/packages/react-table/src/components/TableComposable/Td.tsx b/packages/react-table/src/components/TableComposable/Td.tsx index 1e59cf3b49c..8f95a37b73a 100644 --- a/packages/react-table/src/components/TableComposable/Td.tsx +++ b/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 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 = ({ @@ -80,6 +89,10 @@ const TdBase: React.FunctionComponent = ({ draggableRow: draggableRowProp = null, tooltip = '', onMouseEnter: onMouseEnterProp = () => {}, + isStickyColumn = false, + hasRightBorder = false, + stickyMinWidth = '120px', + stickyLeftOffset, ...props }: TdProps) => { const [showTooltip, setShowTooltip] = React.useState(false); @@ -239,6 +252,8 @@ const TdBase: React.FunctionComponent = ({ 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 @@ -246,6 +261,13 @@ const TdBase: React.FunctionComponent = ({ 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} diff --git a/packages/react-table/src/components/TableComposable/Th.tsx b/packages/react-table/src/components/TableComposable/Th.tsx index 4541abfefbf..4d51d78a02d 100644 --- a/packages/react-table/src/components/TableComposable/Th.tsx +++ b/packages/react-table/src/components/TableComposable/Th.tsx @@ -109,6 +109,11 @@ const ThBase: React.FunctionComponent = ({ } const selectParams = select ? selectable(children as IFormatterValueType, { + rowData: { + selected: select.isSelected, + disableSelection: select?.isDisabled, + props: select?.props + }, column: { extraParams: { onSelect: select?.onSelect, diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTable.md b/packages/react-table/src/components/TableComposable/examples/ComposableTable.md index e9e91965063..7ad63acef1c 100644 --- a/packages/react-table/src/components/TableComposable/examples/ComposableTable.md +++ b/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" ```