[terra-table] [terra-data-grid] Add column span functionality to FlowsheetDataGrid and Table

packages/terra-data-grid/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Added
+  * Added column span functionality to FlowsheetDataGrid.
   * Added `isAutoFocusEnabled` prop to allow auto focus of interactable elements when the only interactable element is a button or hyperlink.
 
 ## 1.25.0 - (April 4, 2024)

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

@@ -195,6 +195,25 @@ const DataGrid = forwardRef((props, ref) => {
   } = props;
 
   const displayedColumns = (hasSelectableRows ? [WorklistDataGridUtils.ROW_SELECTION_COLUMN] : []).concat(pinnedColumns).concat(overflowColumns);
+  // Create new displayedColumns object to account for column spans
+  const displayedColumnsWithColumnSpan = useMemo(() => {
+    let i = 0;
+    const newDisplayedColumns = [];
+    displayedColumns.forEach((column) => {
+      if (column.columnSpan > 1) {
+        newDisplayedColumns[i] = { ...column, columnSpanIndex: 0 };
+        i += 1;
+        for (let counter = column.columnSpan; counter > 1; counter -= 1) {
+          newDisplayedColumns[i] = { id: `${column.id}`, columnSpanIndex: `${column.columnSpan - counter + 1}` };
+          i += 1;
+        }
+      } else {
+        newDisplayedColumns[i] = column;
+        i += 1;
+      }
+    });
+    return newDisplayedColumns;
+  }, [displayedColumns]);
 
   // By default, all grid-based components have selectable cells.
   const dataGridRows = useMemo(() => (rows.map((row) => ({
@@ -241,8 +260,8 @@ const DataGrid = forwardRef((props, ref) => {
   // functions
 
   const isRowSelectionCell = useCallback((columnIndex) => (
-    hasSelectableRows && columnIndex < displayedColumns.length && displayedColumns[columnIndex].id === WorklistDataGridUtils.ROW_SELECTION_COLUMN.id
-  ), [displayedColumns, hasSelectableRows]);
+    hasSelectableRows && columnIndex < displayedColumnsWithColumnSpan.length && displayedColumnsWithColumnSpan[columnIndex].id === WorklistDataGridUtils.ROW_SELECTION_COLUMN.id
+  ), [displayedColumnsWithColumnSpan, hasSelectableRows]);
 
   const isSection = useCallback((rowIndex) => (
     grid.current.rows[rowIndex].hasAttribute('data-section-id')
@@ -253,10 +272,10 @@ const DataGrid = forwardRef((props, ref) => {
     setFocusedRow(newRowIndex);
     setFocusedCol(newColIndex);
 
-    if (newColIndex < displayedColumns.length) {
+    if (newColIndex < displayedColumnsWithColumnSpan.length) {
       focusedCellRef.current = {
         rowId: grid.current.rows[newRowIndex].getAttribute('data-row-id'),
-        columnId: displayedColumns[newColIndex].id,
+        columnId: displayedColumnsWithColumnSpan[newColIndex].id,
       };
     }
 
@@ -304,7 +323,7 @@ const DataGrid = forwardRef((props, ref) => {
     }
 
     focusedCell?.focus();
-  }, [displayedColumns, isSection, hasColumnHeaderActions, isAutoFocusEnabled, isRowSelectionCell]);
+  }, [displayedColumnsWithColumnSpan, isSection, hasColumnHeaderActions, isAutoFocusEnabled, isRowSelectionCell]);
 
   // The focus is handled by the DataGrid. However, there are times
   // when the other components may want to change the currently focus
@@ -327,7 +346,7 @@ const DataGrid = forwardRef((props, ref) => {
     if (!isSection(toCell.row)) {
     // Obtain coordinate rectangles for grid container, column header, and new cell selection
       const gridContainerRect = tableContainerRef.current.getBoundingClientRect();
-      const columnHeaderRect = grid.current.rows[0].cells[toCell.col].getBoundingClientRect();
+      const columnHeaderRect = grid.current.rows[0].getBoundingClientRect();
       const nextCellRect = grid.current.rows[toCell.row].cells[toCell.col].getBoundingClientRect();
 
       // Calculate horizontal scroll offset for right boundary
@@ -358,7 +377,6 @@ const DataGrid = forwardRef((props, ref) => {
         tableContainerRef.current.scrollBy(0, scrollOffsetY);
       }
     }
-
     setFocusedRowCol(toCell.row, toCell.col, true);
   };
 
@@ -479,7 +497,7 @@ const DataGrid = forwardRef((props, ref) => {
         if (event.metaKey) {
           // Mac: Cmd + Right
           // Win: End
-          nextCol = displayedColumns.length - 1;
+          nextCol = displayedColumnsWithColumnSpan.length - 1;
 
           if (event.ctrlKey) {
             // Mac: Ctrl + Cmd + Right
@@ -498,7 +516,7 @@ const DataGrid = forwardRef((props, ref) => {
         }
         break;
       case KeyCode.KEY_END:
-        nextCol = displayedColumns.length - 1; // Col are zero based.
+        nextCol = displayedColumnsWithColumnSpan.length - 1; // Col are zero based.
         if (event.ctrlKey) {
           // Though rows are zero based, the header is the first row so the rowsLength will
           // always be one more than then actual number of data rows.
@@ -528,7 +546,7 @@ const DataGrid = forwardRef((props, ref) => {
       onCellRangeSelect(cellCoordinates.row, cellCoordinates.col, event.keyCode);
     }
 
-    if (nextRow >= gridRowCount || nextCol >= displayedColumns.length) {
+    if (nextRow >= gridRowCount || nextCol >= displayedColumnsWithColumnSpan.length) {
       event.preventDefault(); // prevent the page from moving with the arrow keys.
       return;
     }
@@ -578,9 +596,9 @@ const DataGrid = forwardRef((props, ref) => {
 
         // Check for last focused column ID. If found set the index. Otherwise set it to the last focused column or last index.
         if (focusedCellRef.current.columnId) {
-          newColumnIndex = displayedColumns.findIndex(column => column.id === focusedCellRef.current.columnId);
+          newColumnIndex = displayedColumnsWithColumnSpan.findIndex(column => column.id === focusedCellRef.current.columnId);
           newColumnIndex = newColumnIndex === -1
-            ? Math.min(focusedCol, displayedColumns.length - 1)
+            ? Math.min(focusedCol, displayedColumnsWithColumnSpan.length - 1)
             : newColumnIndex;
         }
 

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

@@ -157,6 +157,38 @@ function FlowsheetDataGrid(props) {
     isResizable: false,
   })), [columns]);
 
+  const displayedColumnsWithColumnSpan = useMemo(() => {
+    let i = 0;
+    const newDisplayedColumns = [];
+    columns.forEach((column) => {
+      if (column.columnSpan > 1) {
+        newDisplayedColumns[i] = {
+          ...column,
+          columnSpanIndex: 0,
+          isSelectable: false,
+          isSelected: false,
+          isResizable: false,
+        };
+        i += 1;
+        for (let counter = column.columnSpan; counter > 1; counter -= 1) {
+          newDisplayedColumns[i] = {
+            id: `${column.id}`, columnSpanIndex: `${column.columnSpan - counter + 1}`, isSelectable: false, isResizable: false, isSelected: false,
+          };
+          i += 1;
+        }
+      } else {
+        newDisplayedColumns[i] = {
+          ...column,
+          isSelectable: false,
+          isSelected: false,
+          isResizable: false,
+        };
+        i += 1;
+      }
+    });
+    return newDisplayedColumns;
+  }, [columns]);
+
   const pinnedColumns = flowsheetColumns.length ? [flowsheetColumns[0]] : [];
   const overflowColumns = flowsheetColumns.length > 1 ? flowsheetColumns.slice(1) : [];
 
@@ -238,7 +270,7 @@ function FlowsheetDataGrid(props) {
     rowsToSearch.forEach((row) => {
       row.cells.forEach((cell, cellIndex) => {
         if (cell.isSelected) {
-          newSelectedCells.push({ rowId: row.id, columnId: columns[cellIndex].id });
+          newSelectedCells.push({ rowId: row.id, columnId: displayedColumnsWithColumnSpan[cellIndex].id });
         }
       });
     });
@@ -253,25 +285,23 @@ function FlowsheetDataGrid(props) {
     } else if (selectedCells.current.length) {
       setCellSelectionAriaLiveMessage(intl.formatMessage({ id: 'Terra.flowsheetDataGrid.cells-selected' }, { cellCount: selectedCells.current.length }));
     }
-  }, [intl, rowsToSearch, columns, setCellSelectionAriaLiveMessage]);
+  }, [intl, rowsToSearch, displayedColumnsWithColumnSpan, setCellSelectionAriaLiveMessage]);
 
-  const selectCellRange = useCallback((rowId, columnId, sectionId) => {
+  const selectCellRange = useCallback((rowId, columnId, columnIndex, sectionId) => {
     if (anchorCell.current === null) {
       return;
     }
 
     const anchorRowIndex = rowsToSearch.findIndex(row => row.id === anchorCell.current.rowId);
-    const anchorColumnIndex = columns.findIndex(col => col.id === anchorCell.current.columnId);
-
+    const anchorColumnIndex = anchorCell.current.columnIndex;
     const rowIndex = rowsToSearch.findIndex(row => row.id === rowId);
-    const columnIndex = columns.findIndex(col => col.id === columnId);
+    // const columnIndex = displayedColumnsWithColumnSpan.findIndex(col => col.id === columnId);
 
     // Determine the boundaries of selected region.
     let rowIndexTopBound = Math.min(anchorRowIndex, rowIndex);
     let rowIndexBottomBound = Math.max(anchorRowIndex, rowIndex);
     const columnIndexLeftBound = Math.min(anchorColumnIndex, columnIndex);
     const columnIndexRightBound = Math.max(anchorColumnIndex, columnIndex);
-
     if (flowsheetSections) {
       const selectedSection = flowsheetSections.find(section => section.id === sectionId);
       const sectionTopBound = rowsToSearch.findIndex(row => row.sectionId === sectionId);
@@ -285,15 +315,17 @@ function FlowsheetDataGrid(props) {
     for (let rowIdx = rowIndexTopBound; rowIdx <= rowIndexBottomBound; rowIdx += 1) {
       const rowIdToSelect = rowsToSearch[rowIdx].id;
       for (let colIdx = columnIndexLeftBound; colIdx <= columnIndexRightBound; colIdx += 1) {
-        const columnIdToSelect = columns[colIdx].id;
-        cellsToSelect.push({ rowId: rowIdToSelect, columnId: columnIdToSelect, sectionId });
+        const columnIdToSelect = displayedColumnsWithColumnSpan[colIdx].id;
+        cellsToSelect.push({
+          rowId: rowIdToSelect, columnId: columnIdToSelect, columnIndex: colIdx, sectionId,
+        });
       }
     }
 
     if (onCellRangeSelect) {
       onCellRangeSelect(cellsToSelect);
     }
-  }, [rowsToSearch, flowsheetSections, columns, onCellRangeSelect]);
+  }, [rowsToSearch, flowsheetSections, displayedColumnsWithColumnSpan, onCellRangeSelect]);
 
   const handleCellSelection = useCallback((selectionDetails, event) => {
     // Call onRowSelect for row header column
@@ -302,12 +334,15 @@ function FlowsheetDataGrid(props) {
         onRowSelect({ rowId: selectionDetails.rowId, sectionId: selectionDetails.sectionId, isMetaPressed: selectionDetails.isMetaPressed });
       }
     } else if (selectionDetails.isShiftPressed && anchorCell.current !== null) {
-      selectCellRange(selectionDetails.rowId, selectionDetails.columnId, selectionDetails.sectionId);
+      selectCellRange(selectionDetails.rowId, selectionDetails.columnId, selectionDetails.columnIndex, selectionDetails.sectionId);
     } else if (onCellSelect) {
-      anchorCell.current = { rowId: selectionDetails.rowId, columnId: selectionDetails.columnId, sectionId: selectionDetails.sectionId };
+      anchorCell.current = {
+        rowId: selectionDetails.rowId, columnId: selectionDetails.columnId, columnIndex: selectionDetails.columnIndex, sectionId: selectionDetails.sectionId,
+      };
       onCellSelect({
         rowId: selectionDetails.rowId,
         columnId: selectionDetails.columnId,
+        columnIndex: selectionDetails.columnIndex,
         sectionId: selectionDetails.sectionId,
         isMetaPressed: selectionDetails.isMetaPressed,
       }, event);
@@ -339,7 +374,8 @@ function FlowsheetDataGrid(props) {
       if (anchorCell.current === null && !gridRef.rows[rowIndex].hasAttribute('data-section-id')) {
         anchorCell.current = {
           rowId: gridRef.rows[rowIndex].getAttribute('data-row-id'),
-          columnId: columns[columnIndex].id,
+          columnId: displayedColumnsWithColumnSpan[columnIndex].id,
+          columnIndex,
           sectionId: anchorSectionId,
         };
       }
@@ -374,11 +410,11 @@ function FlowsheetDataGrid(props) {
 
     if (nextColumnIndex <= 0) {
       nextColumnIndex = 1;
-    } else if (nextColumnIndex >= columns.length) {
-      nextColumnIndex = columns.length - 1;
+    } else if (nextColumnIndex >= displayedColumnsWithColumnSpan.length) {
+      nextColumnIndex = displayedColumnsWithColumnSpan.length - 1;
     }
 
-    const nextColumnId = columns[nextColumnIndex].id;
+    const nextColumnId = displayedColumnsWithColumnSpan[nextColumnIndex].id;
     const nextRowId = gridRef.rows[nextRowIndex].getAttribute('data-row-id');
 
     if (!gridRef.rows[nextRowIndex].hasAttribute('data-section-id')) {
@@ -391,9 +427,9 @@ function FlowsheetDataGrid(props) {
           break;
         }
       }
-      selectCellRange(nextRowId, nextColumnId, nextSectionId);
+      selectCellRange(nextRowId, nextColumnId, nextColumnIndex, nextSectionId);
     }
-  }, [flowsheetSections, columns, selectCellRange]);
+  }, [flowsheetSections, displayedColumnsWithColumnSpan, selectCellRange]);
 
   const handleKeyUp = (event) => {
     const key = event.keyCode;