carbon-react 111.8.4 → 111.9.0

package/lib/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js

@@ -28,6 +28,7 @@ const FlatTableCheckbox = ({
   selectable = true,
   onClick,
   leftPosition,
+  rightPosition,
   cellIndex,
   reportCellWidth,
   ariaLabelledBy,
@@ -53,7 +54,9 @@ const FlatTableCheckbox = ({
   return /*#__PURE__*/_react.default.createElement(_flatTableCheckbox.default, _extends({
     ref: ref,
     makeCellSticky: !!reportCellWidth,
-    leftPosition: leftPosition || 0,
+    className: reportCellWidth ? "isSticky" : undefined,
+    leftPosition: leftPosition,
+    rightPosition: rightPosition,
     "data-element": dataElement,
     as: as
   }, rest), selectable && /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
@@ -93,6 +96,13 @@ FlatTableCheckbox.propTypes = {
    */
   leftPosition: _propTypes.default.number,
 
+  /**
+   * @private
+   * @ignore
+   * Sets the right position when sticky column found
+   */
+  rightPosition: _propTypes.default.number,
+
   /**
    * @private
    * @ignore

package/lib/components/flat-table/flat-table-checkbox/flat-table-checkbox.style.js

@@ -19,6 +19,7 @@ const StyledFlatTableCheckbox = _styledComponents.default.td`
   ${({
   as,
   leftPosition,
+  rightPosition,
   makeCellSticky
 }) => (0, _styledComponents.css)`
     ${as === "td" && (0, _styledComponents.css)`
@@ -50,7 +51,6 @@ const StyledFlatTableCheckbox = _styledComponents.default.td`
       left: auto;
       padding: 0;
       text-align: left;
-      top: 0;
       user-select: none;
       vertical-align: middle;
       white-space: nowrap;
@@ -58,7 +58,8 @@ const StyledFlatTableCheckbox = _styledComponents.default.td`
 
     ${makeCellSticky && (0, _styledComponents.css)`
       top: auto;
-      left: ${leftPosition}px;
+      ${leftPosition !== undefined && `left: ${leftPosition}px;`}
+      ${rightPosition !== undefined && `right: ${rightPosition}px;`}
       position: sticky;
     `}
   `}

package/lib/components/flat-table/flat-table-head/flat-table-head.style.js

@@ -16,13 +16,14 @@ var _flatTableCheckbox = _interopRequireDefault(require("../flat-table-checkbox/
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledFlatTableHead = _styledComponents.default.thead`
-  ${_flatTableRowHeader.StyledFlatTableRowHeader}, ${_flatTableCheckbox.default} {
-    border-left: none;
-    border-right: none;
-    font-weight: 700;
-    z-index: ${({
-  theme
-}) => theme.zIndex.overlay};
+  &&& {
+    ${_flatTableCheckbox.default} {
+      border-left: none;
+      border-right: none;
+    }
+    ${_flatTableRowHeader.StyledFlatTableRowHeader}, ${_flatTableCheckbox.default} {
+      font-weight: 700;
+    }
   }
 `;
 StyledFlatTableHead.defaultProps = {

package/lib/components/flat-table/flat-table-header/flat-table-header.component.js

@@ -38,6 +38,7 @@ const FlatTableHeader = ({
   reportCellWidth,
   cellIndex,
   leftPosition,
+  rightPosition,
   ...rest
 }) => {
   const ref = (0, _react.useRef)(null);
@@ -51,8 +52,10 @@ const FlatTableHeader = ({
   }, [reportCellWidth, cellIndex]);
   return /*#__PURE__*/_react.default.createElement(_flatTableHeader.default, _extends({
     ref: ref,
-    leftPosition: leftPosition || 0,
+    leftPosition: leftPosition,
+    rightPosition: rightPosition,
     makeCellSticky: !!reportCellWidth,
+    className: reportCellWidth ? "isSticky" : undefined,
     align: align,
     colorTheme: colorTheme,
     "data-element": "flat-table-header",
@@ -88,6 +91,13 @@ FlatTableHeader.propTypes = {
    */
   leftPosition: _propTypes.default.number,
 
+  /**
+   * @private
+   * @ignore
+   * Sets the right position when sticky column found
+   */
+  rightPosition: _propTypes.default.number,
+
   /**
    * @private
    * @ignore

package/lib/components/flat-table/flat-table-header/flat-table-header.d.ts

@@ -15,6 +15,8 @@ export interface FlatTableHeaderProps extends PaddingProps {
   rowspan?: number | string;
   /** Sets a custom vertical right border */
   verticalBorder?: TableBorderSize;
+  /** Sets the color of the right border */
+  verticalBorderColor?: string;
   /** Column width, pass a number to set a fixed width in pixels */
   width?: number;
 }

package/lib/components/flat-table/flat-table-header/flat-table-header.style.js

@@ -11,6 +11,10 @@ var _styledSystem = require("styled-system");
 
 var _flatTableHeaderUtils = _interopRequireDefault(require("./flat-table-header-utils"));
 
+var _base = _interopRequireDefault(require("../../../style/themes/base"));
+
+var _color = require("../../../style/utils/color");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -28,9 +32,12 @@ const StyledFlatTableHeader = _styledComponents.default.th`
   alternativeBgColor,
   colWidth,
   leftPosition,
+  rightPosition,
   makeCellSticky,
   verticalBorder,
-  colorTheme
+  verticalBorderColor,
+  colorTheme,
+  theme
 }) => (0, _styledComponents.css)`
     background-color: transparent;
     border-width: 0;
@@ -38,7 +45,6 @@ const StyledFlatTableHeader = _styledComponents.default.th`
     font-weight: 700;
     left: auto;
     text-align: ${align};
-    top: 0;
     user-select: none;
     vertical-align: middle;
     white-space: nowrap;
@@ -74,37 +80,42 @@ const StyledFlatTableHeader = _styledComponents.default.th`
       `};
 
     ${makeCellSticky && (0, _styledComponents.css)`
-      left: ${leftPosition}px;
-      position: sticky;
-      &&& {
-        z-index: 1002;
-      }
-
-      &:first-child {
-        padding-right: 0.395em;
-
-        /* Applies specific styling for Firefox. Increased padding is required to ensure no gap is present between
-        the th elements. This includes FlatTableHeader and FlatTableRowHeader */
-        @-moz-document url-prefix() {
-          padding-right: 2px;
-        }
+        ${leftPosition !== undefined && `left: ${leftPosition}px;`}
+        ${rightPosition !== undefined && `right: ${rightPosition}px;`}
+        position: sticky;
+       
+        &:first-child {
+          padding-right: 0.395em;
+
+          /* Applies specific styling for Firefox. Increased padding is required to ensure no gap is present between
+          the th elements. This includes FlatTableHeader and FlatTableRowHeader */
+          @-moz-document url-prefix() {
+            padding-right: 2px;
+          }
 
-        /* Styling for safari. Increased padding is required to ensure no gap is present between
-        the th elements. This includes FlatTableHeader and FlatTableRowHeader  */
-        @media not all and (min-resolution:.001dpcm) {
-          @supports (-webkit-appearance:none) and (stroke-color:transparent) {
-            padding-right: 0.9em;
+          /* Styling for safari. Increased padding is required to ensure no gap is present between
+          the th elements. This includes FlatTableHeader and FlatTableRowHeader  */
+          @media not all and (min-resolution:.001dpcm) {
+            @supports (-webkit-appearance:none) and (stroke-color:transparent) {
+              padding-right: 0.9em;
+            }
           }
-        }
-    `}
+      `}
 
     &&& {
       ${verticalBorder && (0, _styledComponents.css)`
           border-right-width: ${verticalBorderSizes[verticalBorder]};
         `}
+
+      ${verticalBorderColor && (0, _styledComponents.css)`
+          border-right-color: ${(0, _color.toColor)(theme, verticalBorderColor)};
+        `}
       }
     }
   `}
 `;
+StyledFlatTableHeader.defaultProps = {
+  theme: _base.default
+};
 var _default = StyledFlatTableHeader;
 exports.default = _default;

package/lib/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _invariant = _interopRequireDefault(require("invariant"));
+
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 
 var _flatTableRow = _interopRequireDefault(require("./flat-table-row.style"));
@@ -57,13 +59,24 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
   let rowRef = (0, _react.useRef)();
   if (ref) rowRef = ref;
   const firstColumnExpandable = expandableArea === "firstColumn";
-  const [stickyCellWidths, setStickyCellWidths] = (0, _react.useState)([]);
+  const [leftStickyCellWidths, setLeftStickyCellWidths] = (0, _react.useState)([]);
+  const [rightStickyCellWidths, setRightStickyCellWidths] = (0, _react.useState)([]);
   const [leftPositions, setLeftPositions] = (0, _react.useState)([]);
+  const [rightPositions, setRightPositions] = (0, _react.useState)([]);
   const childrenArray = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
-  const rowHeaderIndex = (0, _react.useMemo)(() => childrenArray.findIndex(child => child.type.displayName === _flatTableRowHeader.default.displayName), [childrenArray]);
+  const lhsRowHeaderIndex = (0, _react.useMemo)(() => childrenArray.findIndex(child => child.type.displayName === _flatTableRowHeader.default.displayName && child.props.stickyAlignment !== "right"), [childrenArray]);
+  const rhsRowHeaderIndex = (0, _react.useMemo)(() => childrenArray.findIndex(child => child.type.displayName === _flatTableRowHeader.default.displayName && child.props.stickyAlignment === "right"), [childrenArray]);
+  const noStickyColumnsOverlap = (0, _react.useMemo)(() => {
+    const hasLhsColumn = lhsRowHeaderIndex !== -1;
+    const hasRhsColumn = rhsRowHeaderIndex !== -1;
+    if (!hasLhsColumn || !hasRhsColumn) return true;
+    return lhsRowHeaderIndex < rhsRowHeaderIndex;
+  }, [lhsRowHeaderIndex, rhsRowHeaderIndex]);
+  !noStickyColumnsOverlap ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `Do not render a right hand side \`${_flatTableRowHeader.default.displayName}\` before left hand side \`${_flatTableRowHeader.default.displayName}\``) : (0, _invariant.default)(false) : void 0;
   const themeContext = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
   const reportCellWidth = (0, _react.useCallback)((width, index) => {
-    const copiedArray = stickyCellWidths;
+    const isLeftSticky = index < lhsRowHeaderIndex;
+    const copiedArray = isLeftSticky ? leftStickyCellWidths : rightStickyCellWidths;
 
     if (copiedArray[index] !== undefined) {
       copiedArray[index] = width;
@@ -71,11 +84,14 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
       copiedArray.push(width);
     }
 
-    setStickyCellWidths(copiedArray);
-  }, [stickyCellWidths]);
+    if (isLeftSticky) {
+      setLeftStickyCellWidths(copiedArray);
+    } else {
+      setRightStickyCellWidths(copiedArray);
+    }
+  }, [lhsRowHeaderIndex, leftStickyCellWidths, rightStickyCellWidths]);
   let interactiveRowProps = {};
-
-  const firstCellIndex = () => childrenArray[0].type === _flatTableCheckbox.default ? 1 : 0;
+  const firstCellIndex = childrenArray[0].type === _flatTableCheckbox.default ? 1 : 0;
 
   const toggleExpanded = () => setIsExpanded(!isExpanded);
 
@@ -119,13 +135,22 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
     }
   }
 
+  const buildPositionArray = (setter, widthsArray, length) => {
+    setter([0, ...Array.from({
+      length
+    }).map((_, index) => widthsArray.slice(0, index + 1).reduce((a, b) => a + b, 0), 0)]);
+  };
+
+  (0, _react.useLayoutEffect)(() => {
+    if (leftStickyCellWidths.length && lhsRowHeaderIndex !== -1) {
+      buildPositionArray(setLeftPositions, leftStickyCellWidths, lhsRowHeaderIndex);
+    }
+  }, [lhsRowHeaderIndex, leftStickyCellWidths]);
   (0, _react.useLayoutEffect)(() => {
-    if (stickyCellWidths.length && rowHeaderIndex !== -1) {
-      setLeftPositions([0, ...Array.from({
-        length: rowHeaderIndex
-      }).map((_, index) => stickyCellWidths.slice(0, index + 1).reduce((a, b) => a + b, 0), 0)]);
+    if (rightStickyCellWidths.length && rhsRowHeaderIndex !== -1) {
+      buildPositionArray(setRightPositions, rightStickyCellWidths, childrenArray.length - (rhsRowHeaderIndex + 1));
     }
-  }, [rowHeaderIndex, stickyCellWidths]);
+  }, [rhsRowHeaderIndex, rightStickyCellWidths, childrenArray]);
   (0, _react.useEffect)(() => {
     setIsExpanded(expanded);
   }, [expanded]);
@@ -139,9 +164,10 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
     highlighted: highlighted,
     selected: selected,
     onClick: handleClick,
-    firstCellIndex: firstCellIndex(),
+    firstCellIndex: firstCellIndex,
     ref: rowRef,
-    rowHeaderIndex: rowHeaderIndex,
+    lhsRowHeaderIndex: lhsRowHeaderIndex,
+    rhsRowHeaderIndex: rhsRowHeaderIndex,
     colorTheme: themeContext.colorTheme,
     size: themeContext.size,
     stickyOffset: stickyOffset,
@@ -149,15 +175,17 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
     horizontalBorderColor: horizontalBorderColor,
     horizontalBorderSize: horizontalBorderSize,
     applyBorderLeft: applyBorderLeft,
-    draggable: draggable
+    draggable: draggable,
+    totalChildren: childrenArray.length
   }, interactiveRowProps, rest), _react.default.Children.map(children, (child, index) => {
     return child && /*#__PURE__*/_react.default.cloneElement(child, {
-      expandable: expandable && index === firstCellIndex(),
-      onClick: expandable && index === firstCellIndex() && firstColumnExpandable ? () => toggleExpanded() : undefined,
-      onKeyDown: expandable && index === firstCellIndex() && firstColumnExpandable ? handleCellKeyDown : undefined,
+      expandable: expandable && index === firstCellIndex,
+      onClick: expandable && index === firstCellIndex && firstColumnExpandable ? () => toggleExpanded() : undefined,
+      onKeyDown: expandable && index === firstCellIndex && firstColumnExpandable ? handleCellKeyDown : undefined,
       cellIndex: index,
-      reportCellWidth: index < rowHeaderIndex ? reportCellWidth : undefined,
+      reportCellWidth: index < lhsRowHeaderIndex || rhsRowHeaderIndex !== -1 && index > rhsRowHeaderIndex ? reportCellWidth : undefined,
       leftPosition: leftPositions[index],
+      rightPosition: rightPositions[childrenArray.length - (index + 1)],
       ...child.props
     });
   }));

package/lib/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -32,22 +32,31 @@ const horizontalBorderSizes = {
   large: "4px"
 };
 
-const stickyColumnFocusStyling = (index, theme) => {
+const getLeftStickyStyling = index => index === 0 && (0, _styledComponents.css)`
+    &:first-of-type::before {
+      border-left: 3px solid var(--colorsSemanticFocus500);
+    }
+  `;
+
+const getRightStickyStyling = (index, totalChildren) => index === totalChildren - 1 && (0, _styledComponents.css)`
+    &:last-of-type {
+      border-right: 2px solid var(--colorsSemanticFocus500);
+    }
+  `;
+
+const stickyColumnFocusStyling = theme => {
   return `
-    border-left: 2px solid
-      ${index === 0 ? "var(--colorsSemanticFocus500)" : "var(--colorsUtilityMajor100)"};
       width: calc(100% + 1px);
-      top: 0;
-      z-index: ${theme.zIndex.overlay + 2};
+      z-index: ${theme.zIndex.overlay};
       :before {
         content: "";
         border-top: 2px solid var(--colorsSemanticFocus500);
         border-bottom: 2px solid var(--colorsSemanticFocus500);
         display: block;
-        left: 0px;
+        left: -2px;
         top: 0px;
         height: calc(100% - 3px);
-        width: 101%;
+        width: 103%;
         position: absolute;
         z-index: ${theme.zIndex.overlay};
       }
@@ -72,6 +81,20 @@ const borderColor = colorTheme => {
   }
 };
 
+const verticalBorderColor = colorTheme => {
+  switch (colorTheme) {
+    case "transparent-base":
+      return "var(--colorsUtilityMajor025)";
+
+    case "transparent-white":
+      return "var(--colorsUtilityYang100)";
+    // default theme is "dark"
+
+    default:
+      return "var(--colorsUtilityMajor100)";
+  }
+};
+
 const StyledFlatTableRow = _styledComponents.default.tr`
   ${({
   bgColor,
@@ -80,7 +103,9 @@ const StyledFlatTableRow = _styledComponents.default.tr`
   stickyOffset,
   isRowInteractive,
   isFirstColumnInteractive,
-  rowHeaderIndex,
+  lhsRowHeaderIndex,
+  rhsRowHeaderIndex,
+  totalChildren,
   firstCellIndex,
   colorTheme,
   expandable,
@@ -126,6 +151,31 @@ const StyledFlatTableRow = _styledComponents.default.tr`
         `}
       }
 
+      ${_flatTableRowHeader.StyledFlatTableRowHeader} + td {
+        border-left: none;
+      }
+
+      ${lhsRowHeaderIndex !== -1 && (0, _styledComponents.css)`
+        ${_flatTableRowHeader.StyledFlatTableRowHeader}:nth-child(${lhsRowHeaderIndex + 1}) {
+          border-right: 2px solid ${verticalBorderColor(colorTheme)};
+        }
+      `}
+
+      ${rhsRowHeaderIndex !== -1 && (0, _styledComponents.css)`
+        ${_flatTableRowHeader.StyledFlatTableRowHeader}:nth-child(${rhsRowHeaderIndex + 1}) {
+          border-left: 2px solid ${verticalBorderColor(colorTheme)};
+        }
+        ${_flatTableHeader.default}:nth-child(${rhsRowHeaderIndex}) {
+          border-right: none;
+        }
+      `}
+
+      ${rhsRowHeaderIndex === totalChildren - 1 && (0, _styledComponents.css)`
+        td:last-of-type {
+          border-right: none;
+        }
+      `}
+
       ${_flatTableHeader.default} {
         border-bottom: 1px solid ${borderColor(colorTheme)};
 
@@ -178,17 +228,27 @@ const StyledFlatTableRow = _styledComponents.default.tr`
             }
           }
 
+          td:first-of-type:not(:nth-child(${lhsRowHeaderIndex + 2}))::before {
+            border-left: 3px solid var(--colorsSemanticFocus500);
+          }
+
+          td:last-of-type:not(:nth-child(${rhsRowHeaderIndex})) {
+            border-right: 2px solid var(--colorsSemanticFocus500);
+          }
+
           ${_flatTableRowHeader.StyledFlatTableRowHeader} {
-            ${stickyColumnFocusStyling(rowHeaderIndex, theme)}
+            ${getLeftStickyStyling(lhsRowHeaderIndex)}
+            ${getRightStickyStyling(rhsRowHeaderIndex, totalChildren)}
+            ${stickyColumnFocusStyling(theme)}
           }
 
-          ${![-1, 0].includes(rowHeaderIndex) && (0, _styledComponents.css)`
+          ${![-1, 0].includes(lhsRowHeaderIndex) && (0, _styledComponents.css)`
             ${Array.from({
-    length: rowHeaderIndex
+    length: lhsRowHeaderIndex
   }).map((_, index) => {
     return `
                 td:nth-of-type(${index + 1}) {
-                  ${stickyColumnFocusStyling(index, theme)}
+                  ${stickyColumnFocusStyling(theme)}
                 }
               `;
   })}
@@ -218,16 +278,6 @@ const StyledFlatTableRow = _styledComponents.default.tr`
         }
       `}
 
-      ${![-1, 0].includes(rowHeaderIndex) && (0, _styledComponents.css)`
-        td:nth-of-type(${rowHeaderIndex + 1}) {
-          border-left: 1px solid
-            ${customBorderColor || "var(--colorsUtilityMajor100)"};
-        }
-
-        th:nth-of-type(${rowHeaderIndex + 2}) {
-          border-left: 1px solid ${customBorderColor || borderColor(colorTheme)};
-        }
-      `}
 
       ${applyBorderLeft && (0, _styledComponents.css)`
         th:first-of-type {

package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,6 +19,10 @@ var _flatTableRowHeader = require("./flat-table-row-header.style");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const paddingPropTypes = (0, _utils.filterStyledSystemPaddingProps)(_propTypes2.default.space);
@@ -33,22 +37,32 @@ const FlatTableRowHeader = ({
   onClick,
   onKeyDown,
   leftPosition,
+  rightPosition,
   truncate,
   title,
+  stickyAlignment = "left",
   ...rest
 }) => {
+  const handleOnClick = (0, _react.useCallback)(ev => {
+    if (expandable && onClick) onClick(ev);
+  }, [expandable, onClick]);
+  const handleOnKeyDown = (0, _react.useCallback)(ev => {
+    if (expandable && onKeyDown) onKeyDown(ev);
+  }, [expandable, onKeyDown]);
   return /*#__PURE__*/_react.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeader, _extends({
-    leftPosition: leftPosition || 0,
+    leftPosition: stickyAlignment === "left" ? leftPosition || 0 : undefined,
+    rightPosition: stickyAlignment === "right" ? rightPosition || 0 : undefined,
     align: align,
     "data-element": "flat-table-row-header",
     colWidth: width,
     py: py || "10px",
     px: px || 3,
-    onClick: expandable && onClick ? onClick : undefined,
+    onClick: handleOnClick,
     tabIndex: expandable && onClick ? 0 : undefined,
-    onKeyDown: expandable && onKeyDown ? onKeyDown : undefined,
+    onKeyDown: handleOnKeyDown,
     isTruncated: truncate,
-    expandable: expandable
+    expandable: expandable,
+    stickyAlignment: stickyAlignment
   }, rest), /*#__PURE__*/_react.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeaderContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable
@@ -98,7 +112,22 @@ FlatTableRowHeader.propTypes = {
   verticalBorder: _propTypes.default.oneOf(["small", "medium", "large"]),
 
   /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
-  verticalBorderColor: _propTypes.default.string
+  verticalBorderColor: _propTypes.default.string,
+
+  /** Defines whether the column should be sticky on the left or right hand side of the Table */
+  stickyAlignment: _propTypes.default.oneOf(["left", "right"]),
+
+  /**
+   * @private
+   * @ignore
+   */
+  leftPosition: _propTypes.default.number,
+
+  /**
+   * @private
+   * @ignore
+   */
+  rightPosition: _propTypes.default.number
 };
 FlatTableRowHeader.displayName = "FlatTableRowHeader";
 var _default = FlatTableRowHeader;

package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.d.ts

@@ -16,6 +16,8 @@ export interface FlatTableRowHeaderProps extends PaddingProps {
   verticalBorder?: TableBorderSize;
   /** Sets the color of the right border */
   verticalBorderColor?: string;
+  /** Defines whether the column should be sticky on the left or right hand side of the Table */
+  stickyAlignment?: "left" | "right";
 }
 
 declare function FlatTableRowHeader(

package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.style.js

@@ -30,10 +30,12 @@ const StyledFlatTableRowHeader = _styledComponents.default.th`
   theme,
   colWidth,
   leftPosition,
+  rightPosition,
   isTruncated,
   expandable,
   verticalBorder,
-  verticalBorderColor
+  verticalBorderColor,
+  stickyAlignment
 }) => (0, _styledComponents.css)`
     background-color: var(--colorsUtilityYang100);
     border: 1px solid var(--colorsUtilityMajor100);
@@ -69,14 +71,19 @@ const StyledFlatTableRowHeader = _styledComponents.default.th`
         ${_styledSystem.padding}
       }
 
-      left: ${leftPosition}px;
+      ${leftPosition !== undefined && (0, _styledComponents.css)`
+        left: ${leftPosition}px;
+      `}
+      ${rightPosition !== undefined && (0, _styledComponents.css)`
+        right: ${rightPosition}px;
+      `}
 
       ${verticalBorder && (0, _styledComponents.css)`
-        border-right-width: ${verticalBorderSizes[verticalBorder]};
+        border-${stickyAlignment === "right" ? "left" : "right"}-width: ${verticalBorderSizes[verticalBorder]};
       `}
 
       ${verticalBorderColor && (0, _styledComponents.css)`
-        border-right-color: ${(0, _color.toColor)(theme, verticalBorderColor)};
+        border-${stickyAlignment === "right" ? "left" : "right"}-color: ${(0, _color.toColor)(theme, verticalBorderColor)};
       `}
     }