@patternfly/react-table 4.40.0 → 4.43.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "4.40.0",
+  "version": "4.43.1",
   "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",
@@ -31,10 +31,10 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.171.0",
-    "@patternfly/react-icons": "^4.22.0",
-    "@patternfly/react-styles": "^4.21.0",
-    "@patternfly/react-tokens": "^4.23.0",
+    "@patternfly/react-core": "^4.174.1",
+    "@patternfly/react-icons": "^4.25.1",
+    "@patternfly/react-styles": "^4.24.1",
+    "@patternfly/react-tokens": "^4.26.1",
     "lodash": "^4.17.19",
     "tslib": "^2.0.0"
   },
@@ -46,5 +46,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "09d356c99de79684e78f5dcd8caa40ce3a0873d4"
+  "gitHead": "8c1eb5d895aa2512f7b4197654e414394ff25b30"
 }

package/src/components/TableComposable/InnerScrollContainer.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Table/table-scrollable';
+
+export interface InnerScrollContainerProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the inner scroll container */
+  children?: React.ReactNode;
+  /** Additional classes added to the container */
+  className?: string;
+}
+
+export const InnerScrollContainer: React.FunctionComponent<InnerScrollContainerProps> = ({
+  children,
+  className,
+  ...props
+}: InnerScrollContainerProps) => (
+  <div className={css(className, styles.scrollInnerWrapper)} {...props}>
+    {children}
+  </div>
+);
+
+InnerScrollContainer.displayName = 'InnerScrollContainer';

package/src/components/TableComposable/OuterScrollContainer.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Table/table-scrollable';
+
+export interface OuterScrollContainerProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the outer scroll container */
+  children?: React.ReactNode;
+  /** Additional classes added to the container */
+  className?: string;
+}
+
+export const OuterScrollContainer: React.FunctionComponent<OuterScrollContainerProps> = ({
+  children,
+  className,
+  ...props
+}: OuterScrollContainerProps) => (
+  <div className={css(className, styles.scrollOuterWrapper)} {...props}>
+    {children}
+  </div>
+);
+
+OuterScrollContainer.displayName = 'OuterScrollContainer';

package/src/components/TableComposable/TableComposable.tsx

@@ -53,6 +53,8 @@ export interface TableComposableProps extends React.HTMLProps<HTMLTableElement>,
   isTreeTable?: boolean;
   /** Flag indicating this table is nested within another table */
   isNested?: boolean;
+  /** Collection of column spans for nested headers */
+  nestedHeaderColumnSpans?: number[];
 }
 
 const TableComposableBase: React.FunctionComponent<TableComposableProps> = ({
@@ -69,6 +71,7 @@ const TableComposableBase: React.FunctionComponent<TableComposableProps> = ({
   ouiaSafe = true,
   isTreeTable = false,
   isNested = false,
+  nestedHeaderColumnSpans,
   ...props
 }: TableComposableProps) => {
   const tableRef = innerRef || React.useRef(null);
@@ -156,6 +159,14 @@ const TableComposableBase: React.FunctionComponent<TableComposableProps> = ({
       {...ouiaProps}
       {...props}
     >
+      {nestedHeaderColumnSpans &&
+        nestedHeaderColumnSpans.map((span: number, index) => {
+          if (span === 1) {
+            return <col key={index} />;
+          } else {
+            return <colgroup key={index} span={span} />;
+          }
+        })}
       {children}
     </table>
   );

package/src/components/TableComposable/Th.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 { info } from '../Table/utils/decorators/info';
 import { sortable, sortableFavorites } from '../Table/utils/decorators/sortable';
 import { selectable } from '../Table/utils/decorators/selectable';
@@ -38,6 +39,16 @@ export interface ThProps
   info?: ThInfoType;
   /** Adds scope to the column to associate header cells with data cells*/
   scope?: string;
+  /** Indicates the header 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;
+  /** Indicates the <th> is part of a subheader of a nested header */
+  isSubheader?: boolean;
 }
 
 const ThBase: React.FunctionComponent<ThProps> = ({
@@ -56,6 +67,11 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   visibility,
   innerRef,
   info: infoProps,
+  isStickyColumn = false,
+  hasRightBorder = false,
+  stickyMinWidth = '120px',
+  stickyLeftOffset,
+  isSubheader = false,
   ...props
 }: ThProps) => {
   const [showTooltip, setShowTooltip] = React.useState(false);
@@ -132,11 +148,21 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       className={css(
         className,
         textCenter && styles.modifiers.center,
+        isSubheader && styles.tableSubhead,
+        isStickyColumn && scrollStyles.tableStickyColumn,
+        hasRightBorder && scrollStyles.modifiers.borderRight,
         modifier && styles.modifiers[modifier as 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap'],
         mergedClassName
       )}
       {...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
+      })}
     >
       {transformedChildren}
     </MergedComponent>

package/src/components/TableComposable/Thead.tsx

@@ -11,6 +11,8 @@ export interface TheadProps extends React.HTMLProps<HTMLTableSectionElement> {
   noWrap?: boolean;
   /** Forwarded ref */
   innerRef?: React.Ref<any>;
+  /** Indicates the <thead> contains a nested header */
+  hasNestedHeader?: boolean;
 }
 
 const TheadBase: React.FunctionComponent<TheadProps> = ({
@@ -18,9 +20,18 @@ const TheadBase: React.FunctionComponent<TheadProps> = ({
   className,
   noWrap = false,
   innerRef,
+  hasNestedHeader,
   ...props
 }: TheadProps) => (
-  <thead className={css(className, noWrap && styles.modifiers.nowrap)} ref={innerRef} {...props}>
+  <thead
+    className={css(
+      className,
+      noWrap && styles.modifiers.nowrap,
+      hasNestedHeader && styles.modifiers.nestedColumnHeader
+    )}
+    ref={innerRef}
+    {...props}
+  >
     {children}
   </thead>
 );

package/src/components/TableComposable/Tr.tsx

@@ -23,6 +23,8 @@ export interface TrProps extends React.HTMLProps<HTMLTableRowElement>, OUIAProps
   isRowSelected?: boolean;
   /** An event handler for the row */
   onRowClick?: (event?: React.KeyboardEvent | React.MouseEvent) => void;
+  /** Flag indicating the spacing offset of the first cell should be reset */
+  resetOffset?: boolean;
 }
 
 const TrBase: React.FunctionComponent<TrProps> = ({
@@ -36,6 +38,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
   innerRef,
   ouiaId,
   ouiaSafe = true,
+  resetOffset = false,
   onRowClick,
   ...props
 }: TrProps) => {
@@ -59,7 +62,8 @@ const TrBase: React.FunctionComponent<TrProps> = ({
         isExpanded && styles.modifiers.expanded,
         isEditable && inlineStyles.modifiers.inlineEditable,
         isHoverable && styles.modifiers.hoverable,
-        isRowSelected && styles.modifiers.selected
+        isRowSelected && styles.modifiers.selected,
+        resetOffset && styles.modifiers.firstCellOffsetReset
       )}
       hidden={isHidden || (isExpanded !== undefined && !isExpanded)}
       {...(isHoverable && { tabIndex: 0 })}