Data grid add column actions

package.json

@@ -146,6 +146,7 @@
     "stylelint": "^15.0.0",
     "terra-aggregate-translations": "^1.0.0",
     "terra-application": "^1.57.0",
+    "terra-button": "^3.73.0",
     "terra-disclosure-manager": "^4.9.0",
     "terra-enzyme-intl": "^3.4.0",
     "terra-icon": "^3.58.0",

packages/terra-data-grid/CHANGELOG.md

@@ -3,7 +3,10 @@
 ## Unreleased
 
 * Changed
- * Removed the default rowMinimumHeight from FlowsheetDataGrid so that the `terra-table` default value is used.  
+ * Removed the default rowMinimumHeight from FlowsheetDataGrid so that the `terra-table` default value is used.
+
+* Added
+  * Column actions support added.
 
 ## 1.12.0 - (February 1, 2024)
 

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

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import * as KeyCode from 'keycode-js';
 import Table, {
-  GridConstants, GridContext, sectionShape, rowShape, columnShape, validateRowHeaderIndex,
+  GridConstants, GridContext, sectionShape, rowShape, columnShape, validateRowHeaderIndex, checkForColumnActions,
 } from 'terra-table';
 import VisuallyHiddenText from 'terra-visually-hidden-text';
 import WorklistDataGridUtils from './utils/WorklistDataGridUtils';
@@ -205,8 +205,15 @@ const DataGrid = forwardRef((props, ref) => {
 
   const [checkResizable, setCheckResizable] = useState(false);
 
-  // if columns are not visible then set the first selectable row index to 1
-  const [focusedRow, setFocusedRow] = useState(hasVisibleColumnHeaders ? 0 : 1);
+  // check if at least one column has a valid action
+  // same check is done in Table, but as Table can be a stand-alone component, it can't relay on a passed prop.
+  const hasColumnHeaderActions = checkForColumnActions(pinnedColumns) || checkForColumnActions(overflowColumns);
+
+  // eslint-disable-next-line no-nested-ternary
+  const firstRowIndex = hasVisibleColumnHeaders ? 0 : (hasColumnHeaderActions ? 2 : 1);
+
+  // if columns are not visible then set the first selectable row index to 1 or 2
+  const [focusedRow, setFocusedRow] = useState(firstRowIndex);
   const [focusedCol, setFocusedCol] = useState(0);
 
   // Aria live region message management
@@ -426,7 +433,7 @@ const DataGrid = forwardRef((props, ref) => {
         } else {
           // Left key
           nextCol -= 1;
-          setCheckResizable(cellCoordinates.row === 0);
+          setCheckResizable(cellCoordinates.row === 0 || (hasColumnHeaderActions && cellCoordinates.row === 1));
         }
         break;
       case KeyCode.KEY_RIGHT:
@@ -486,7 +493,7 @@ const DataGrid = forwardRef((props, ref) => {
       event.preventDefault(); // prevent the page from moving with the arrow keys.
       return;
     }
-    if (nextCol < 0 || nextRow < (hasVisibleColumnHeaders ? 0 : 1)) {
+    if (nextCol < 0 || nextRow < (firstRowIndex)) {
       event.preventDefault(); // prevent the page from moving with the arrow keys.
       return;
     }
@@ -548,6 +555,7 @@ const DataGrid = forwardRef((props, ref) => {
   // -------------------------------------
 
   const isGridActive = grid.current?.contains(document.activeElement);
+  const isOneOfHeaderRows = focusedRow === 0 || (hasColumnHeaderActions && focusedRow === 1);
 
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -569,7 +577,7 @@ const DataGrid = forwardRef((props, ref) => {
           ariaLabelledBy={ariaLabelledBy}
           ariaLabel={ariaLabel}
           activeColumnIndex={(isGridActive && focusedRow === 0) ? focusedCol : undefined}
-          isActiveColumnResizing={focusedRow === 0 && checkResizable}
+          isActiveColumnResizing={isOneOfHeaderRows && checkResizable}
           columnResizeIncrement={columnResizeIncrement}
           pinnedColumns={pinnedColumns}
           overflowColumns={overflowColumns}