added boundedref prop

packages/terra-data-grid/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+* Added `boundingRef` prop for bounded flowsheet data grids.
+
 ## 1.14.0 - (February 20, 2024)
 
 * Changed

packages/terra-data-grid/src/DataGrid.jsx

@@ -145,6 +145,10 @@ const propTypes = {
    * With this property the height of the cell will grow to fit the cell content.
    */
   rowMinimumHeight: PropTypes.string,
+  /**
+   * Bounding container for the grid, will use window if no value provided.
+   */
+  boundingRef: PropTypes.func,
 };
 
 const defaultProps = {
@@ -182,6 +186,7 @@ const DataGrid = forwardRef((props, ref) => {
     rows,
     sections,
     rowMinimumHeight,
+    boundingRef,
   } = props;
 
   const displayedColumns = (hasSelectableRows ? [WorklistDataGridUtils.ROW_SELECTION_COLUMN] : []).concat(pinnedColumns).concat(overflowColumns);
@@ -586,6 +591,7 @@ const DataGrid = forwardRef((props, ref) => {
           hasVisibleColumnHeaders={hasVisibleColumnHeaders}
           isStriped
           rowMinimumHeight={rowMinimumHeight}
+          boundingRef={boundingRef}
         />
       </GridContext.Provider>
       <VisuallyHiddenText aria-live="polite" aria-atomic="true" text={cellAriaLiveMessage} />

packages/terra-data-grid/src/FlowsheetDataGrid.jsx

@@ -108,6 +108,10 @@ const propTypes = {
    * Boolean to show/hide column headers. By default, it is set to `true` and column headers are visible.
    */
   hasVisibleColumnHeaders: PropTypes.bool,
+  /**
+   * Bounding container for the flowsheet grid, will use window if no value provided.
+   */
+  boundingRef: PropTypes.func,
 };
 
 const defaultProps = {
@@ -137,6 +141,7 @@ function FlowsheetDataGrid(props) {
     intl,
     hasVisibleColumnHeaders,
     rowMinimumHeight,
+    boundingRef,
   } = props;
 
   const anchorCell = useRef(null);
@@ -423,6 +428,7 @@ function FlowsheetDataGrid(props) {
         hasVisibleColumnHeaders={hasVisibleColumnHeaders}
         ref={dataGridFuncRef}
         rowMinimumHeight={rowMinimumHeight}
+        boundingRef={boundingRef}
       />
       <VisuallyHiddenText aria-live="polite" text={cellSelectionAriaLiveMessage} />
     </div>

packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/BoundedFlowsheetWithSections.test.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useRef } from 'react';
 import { FlowsheetDataGrid } from 'terra-data-grid';
 
 const gridDataJSON = {
@@ -75,6 +75,7 @@ const gridDataJSON = {
 };
 
 const BoundedFlowsheetWithSections = () => {
+  const boundingRef = useRef(null);
   const [tableSections, setTableSections] = useState(gridDataJSON.sections);
 
   const handleSectionSelect = (sectionId) => {
@@ -147,14 +148,15 @@ const BoundedFlowsheetWithSections = () => {
 
   return (
   // eslint-disable-next-line react/forbid-dom-props
-    <div style={{ height: '150px', width: '700px' }}>
+    <div style={{ height: '150px', width: '700px' }} ref={boundingRef}>
       <FlowsheetDataGrid
         id="flowsheet-with-sections-bounded"
         columns={gridDataJSON.cols}
         sections={tableSections}
         onCellSelect={onCellSelect}
         onSectionSelect={handleSectionSelect}
         onCellRangeSelect={handleCellRangeSelection}
+        boundingRef={boundingRef}
       />
     </div>
   );

packages/terra-table/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+* Added
+  * Added `boundingRef` prop for bounded table.
+
+* Changed
+  * Changed flowsheet data grid sections to have sticky title.
+
 ## 5.7.0 - (February 20, 2024)
 
 * Added
@@ -11,7 +17,6 @@
 
 * Changed
   * Changed the default rowMinimumHeight value to auto to fit the row contents.
-  * Changed flowsheet data grid sections to have sticky title.
 
 ## 5.5.0 - (February 1, 2024)
 

packages/terra-table/src/Table.jsx

@@ -176,6 +176,10 @@ const propTypes = {
    * The intl object containing translations. This is retrieved from the context automatically by injectIntl.
    */
   intl: PropTypes.shape({ formatMessage: PropTypes.func }).isRequired,
+  /**
+   * Bounding container for table, will use window if no value provided.
+   */
+  boundingRef: PropTypes.func,
 };
 
 const defaultProps = {
@@ -219,6 +223,7 @@ function Table(props) {
     rowHeaderIndex,
     intl,
     rowMinimumHeight,
+    boundingRef,
   } = props;
 
   // Manage column resize
@@ -617,6 +622,7 @@ function Table(props) {
               onCellSelect={isGridContext || rowSelectionMode ? handleCellSelection : undefined}
               onSectionSelect={onSectionSelect}
               rowMinimumHeight={rowMinimumHeight}
+              boundingRef={boundingRef}
             />
           ))}
         </ColumnContext.Provider>

packages/terra-table/src/subcomponents/Section.jsx

@@ -101,6 +101,10 @@ const propTypes = {
    * Function that is called when a collapsible section is selected. Parameters: `onSectionSelect(sectionId)`
    */
   onSectionSelect: PropTypes.func,
+  /**
+   * Bounding container for the table, will use window if no value provided.
+   */
+  boundingRef: PropTypes.func,
 };
 
 const defaultProps = {
@@ -128,6 +132,7 @@ function Section(props) {
     rows,
     onSectionSelect,
     rowMinimumHeight,
+    boundingRef,
   } = props;
 
   const theme = useContext(ThemeContext);
@@ -136,6 +141,8 @@ function Section(props) {
   const isGridContext = gridContext.role === GridConstants.GRID;
 
   const hasSectionButton = isCollapsible && onSectionSelect;
+  const boundedWidth = isCollapsible && boundingRef && boundingRef.current ? boundingRef.current.clientWidth - 50 : null;
+  const titlePosition = boundingRef ? { isTitleSticky: true } : { isTitleFixed: true };
 
   const handleClick = useCallback(() => {
     onSectionSelect(id);
@@ -164,8 +171,9 @@ function Section(props) {
               className={cx('section-header')}
               text={text}
               isOpen={hasSectionButton ? !isCollapsed : undefined}
-              isTitleSticky
               onClick={hasSectionButton ? handleClick : undefined}
+              boundedWidth={boundedWidth}
+              {...titlePosition}
             />
           </th>
         </tr>