[terra-flowsheet-data-grid] Allow flowsheet sections to have sticky title

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/CHANGELOG.md

@@ -5,6 +5,9 @@
 * Changed
   * Updated `terra-menu` test for selectable menu to retain selection state when using `isToggled` prop after closing and re-opening the menu.
 
+* Added
+  * Added example for bounded `terra-flowsheet-data-grid` with sections.
+
 ## 1.67.0 - (February 22, 2024)
 
 * Changed

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

@@ -0,0 +1,165 @@
+import React, { useCallback, useState, useRef } from 'react';
+import { FlowsheetDataGrid } from 'terra-data-grid';
+
+const gridDataJSON = {
+  cols: [
+    {
+      id: 'Column-0', displayName: 'Patient', sortIndicator: 'ascending', isSelectable: true,
+    },
+    {
+      id: 'Column-1', displayName: 'Location', isSelectable: true,
+    },
+    { id: 'Column-2', displayName: 'Illness Severity', isSelectable: true },
+    { id: 'Column-3', displayName: 'Visit' },
+    { id: 'Column-4', displayName: 'Allergy' },
+    { id: 'Column-5', displayName: 'Primary Contact' },
+
+  ],
+  sections: [{
+    id: 'section-0',
+    isCollapsible: true,
+    text: 'Test Section',
+    rows: [
+      {
+        id: '1',
+        cells: [
+          { content: 'Fleck, Arthur' },
+          { content: '1007-MTN' },
+          { content: 'Unstable' },
+          { content: 'Inpatient, 2 months' },
+          { content: '' },
+          { content: 'Quinzell, Harleen' },
+        ],
+      },
+      {
+        id: '2',
+        cells: [
+          { content: 'Wayne, Bruce' },
+          { content: '1007-MTN-DR' },
+          { content: 'Stable' },
+          { content: 'Outpatient, 2 days' },
+          { content: 'Phytochemicals' },
+          { content: 'Grayson, Richard' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'section-1',
+    text: 'Test Section #2',
+    rows: [
+      {
+        id: '3',
+        cells: [
+          { content: 'Parker, Peter' },
+          { content: '1007-MTN' },
+          { content: 'Unstable' },
+          { content: 'Inpatient, 2 months' },
+          { content: '' },
+          { content: 'Octopus, Doctor' },
+        ],
+      },
+      {
+        id: '4',
+        cells: [
+          { content: 'Stark, Tony' },
+          { content: '1007-MTN-DR' },
+          { content: 'Stable' },
+          { content: 'Outpatient, 2 days' },
+          { content: 'Phytochemicals' },
+          { content: 'America, Captain' },
+        ],
+      },
+    ],
+  }],
+};
+
+const BoundedFlowsheetWithSections = () => {
+  const boundingRef = useRef(null);
+  const [tableSections, setTableSections] = useState(gridDataJSON.sections);
+
+  const handleSectionSelect = (sectionId) => {
+    const newSections = [...tableSections];
+    const sectionIndex = newSections.findIndex(section => section.id === sectionId);
+
+    const sectionToClear = newSections.find(section => section.id === sectionId);
+
+    sectionToClear.rows = sectionToClear.rows.map(row => ({
+      ...row,
+      cells: row.cells.map(cell => ({
+        ...cell,
+        isSelected: false,
+      })),
+    }));
+
+    if (sectionIndex > -1) {
+      newSections[sectionIndex].isCollapsed = !newSections[sectionIndex].isCollapsed;
+    }
+
+    setTableSections(newSections);
+  };
+
+  const getClearedSections = useCallback(() => tableSections.map(section => ({
+    ...section,
+    rows: section.rows.map(row => ({
+      ...row,
+      cells: row.cells.map(cell => ({
+        ...cell,
+        isSelected: false,
+      })),
+    })),
+  })), [tableSections]);
+
+  const onCellSelect = useCallback((selectedCell) => {
+    let selectedSection = tableSections.find(section => section.id === selectedCell.sectionId);
+
+    const columnIndex = gridDataJSON.cols.findIndex(col => col.id === selectedCell.columnId);
+    const rowIndex = selectedSection.rows.findIndex(row => row.id === selectedCell.rowId);
+    const previousCell = selectedSection.rows[rowIndex].cells[columnIndex];
+
+    const newSections = getClearedSections();
+
+    //   // If the current cell is the only selected cell, toggle it to unselected. Otherwise, set it to selected.
+    selectedSection = newSections.find(section => section.id === selectedCell.sectionId);
+    selectedSection.rows[rowIndex].cells[columnIndex].isSelected = !previousCell.isSelected;
+    setTableSections(newSections);
+  }, [tableSections, getClearedSections]);
+
+  const handleCellRangeSelection = useCallback((cells) => {
+    const columnIndexesToUpdate = new Set(cells
+      .map(cell => cell.columnId)
+      .map(id => gridDataJSON.cols.findIndex(col => col.id === id)));
+
+    const rowsToUpdate = new Set(cells.map(cell => cell.rowId));
+
+    const newSections = getClearedSections();
+    const selectedSection = newSections.find(section => section.id === cells[0].sectionId);
+
+    selectedSection.rows = selectedSection.rows.map(row => ({
+      ...row,
+      cells: row.cells.map((cell, cellIndex) => ({
+        ...cell,
+        isSelected: columnIndexesToUpdate.has(cellIndex) && rowsToUpdate.has(row.id),
+      })),
+    }));
+
+    setTableSections(newSections);
+  }, [getClearedSections]);
+
+  return (
+  // eslint-disable-next-line react/forbid-dom-props
+    <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>
+  );
+};
+
+export default BoundedFlowsheetWithSections;

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

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}
-              isTitleFixed
               onClick={hasSectionButton ? handleClick : undefined}
+              boundedWidth={boundedWidth}
+              {...titlePosition}
             />
           </th>
         </tr>