From a8813a140296ad7c71f54be88a6963c3094c5fd1 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 28 Nov 2022 10:09:38 -0500 Subject: [PATCH 1/3] feat(Table): allow sticky Td --- .../src/components/Table/base/types.tsx | 4 ++++ .../src/components/TableComposable/Td.tsx | 22 +++++++++++++++++++ .../src/components/TableComposable/Th.tsx | 5 +++++ 3 files changed, 31 insertions(+) diff --git a/packages/react-table/src/components/Table/base/types.tsx b/packages/react-table/src/components/Table/base/types.tsx index c69d9331177..15caac3f1af 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 */ + disable?: 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..2ede6029524 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?.disable, + props: select?.props + }, column: { extraParams: { onSelect: select?.onSelect, From d00c4c15efbc4409e3f5e390f5e05aaeadb847e0 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Fri, 2 Dec 2022 10:44:18 -0500 Subject: [PATCH 2/3] update description --- .../components/TableComposable/examples/ComposableTable.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTable.md b/packages/react-table/src/components/TableComposable/examples/ComposableTable.md index e9e91965063..63cb9c77766 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` 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` should also have the `modifier="nowrap"` property. ```ts file="ComposableTableMultipleStickyColumns.tsx" ``` From e886666ca8e4d8d3f860773e8baba17658fd8c00 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 6 Dec 2022 14:03:40 -0500 Subject: [PATCH 3/3] update disabled type, update desc --- packages/react-table/src/components/Table/base/types.tsx | 2 +- packages/react-table/src/components/TableComposable/Th.tsx | 2 +- .../components/TableComposable/examples/ComposableTable.md | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-table/src/components/Table/base/types.tsx b/packages/react-table/src/components/Table/base/types.tsx index 15caac3f1af..445ff299147 100644 --- a/packages/react-table/src/components/Table/base/types.tsx +++ b/packages/react-table/src/components/Table/base/types.tsx @@ -172,7 +172,7 @@ export interface ThSelectType { /** Flag indicating the select checkbox in the th is disabled */ isHeaderSelectDisabled?: boolean; /** Whether to disable the selection */ - disable?: boolean; + isDisabled?: boolean; /** Additional props forwarded to select rowData */ props?: any; } diff --git a/packages/react-table/src/components/TableComposable/Th.tsx b/packages/react-table/src/components/TableComposable/Th.tsx index 2ede6029524..4d51d78a02d 100644 --- a/packages/react-table/src/components/TableComposable/Th.tsx +++ b/packages/react-table/src/components/TableComposable/Th.tsx @@ -111,7 +111,7 @@ const ThBase: React.FunctionComponent = ({ ? selectable(children as IFormatterValueType, { rowData: { selected: select.isSelected, - disableSelection: select?.disable, + disableSelection: select?.isDisabled, props: select?.props }, column: { diff --git a/packages/react-table/src/components/TableComposable/examples/ComposableTable.md b/packages/react-table/src/components/TableComposable/examples/ComposableTable.md index 63cb9c77766..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` or `Td` that should be sticky: `isStickyColumn` and `hasRightBorder`. To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` 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` or `Td` 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" ```