[flowsheet-data-grid] Hide columns headers

packages/terra-data-grid/CHANGELOG.md

@@ -4,6 +4,9 @@
 
 * Fixed
   * Fixed issue where focus was given to the column header instead of its button element.
+
+* Added
+  * Added `hasVisibleColumnHeaders` prop for FlowsheetDataGrid to toggle visibility of column headers.
 
 ## 1.1.0 - (November 9, 2023)
 

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

@@ -126,6 +126,11 @@ const propTypes = {
    * rendered to allow for row selection to occur.
    */
   hasSelectableRows: PropTypes.bool,
+
+  /**
+   * Boolean indicating whether or not the DataGrid should hide the column headers.
+   */
+  hasVisibleColumnHeaders: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -136,29 +141,31 @@ const defaultProps = {
   pinnedColumns: [],
   overflowColumns: [],
   rows: [],
+  hasVisibleColumnHeaders: true,
 };
 
 const DataGrid = injectIntl((props) => {
   const {
-    id,
-    ariaLabelledBy,
     ariaLabel,
-    rows,
-    pinnedColumns,
-    overflowColumns,
-    onColumnResize,
-    defaultColumnWidth,
+    ariaLabelledBy,
     columnHeaderHeight,
     columnResizeIncrement,
-    rowHeight,
-    onColumnSelect,
+    defaultColumnWidth,
+    hasVisibleColumnHeaders,
+    hasSelectableRows,
+    id,
+    onCellRangeSelect,
     onCellSelect,
     onClearSelection,
+    onColumnResize,
+    onColumnSelect,
     onRangeSelection,
     onRowSelectionHeaderSelect,
-    onCellRangeSelect,
-    hasSelectableRows,
+    overflowColumns,
+    pinnedColumns,
     rowHeaderIndex,
+    rowHeight,
+    rows,
   } = props;
 
   const displayedColumns = (hasSelectableRows ? [WorklistDataGridUtils.ROW_SELECTION_COLUMN] : []).concat(pinnedColumns).concat(overflowColumns);
@@ -179,7 +186,9 @@ const DataGrid = injectIntl((props) => {
   const handleFocus = useRef(true);
 
   const [checkResizable, setCheckResizable] = useState(false);
-  const [focusedRow, setFocusedRow] = useState(0);
+
+  // if columns are not visible then set the first selectable row index to 1
+  const [focusedRow, setFocusedRow] = useState(hasVisibleColumnHeaders ? 0 : 1);
   const [focusedCol, setFocusedCol] = useState(0);
   const [gridHasFocus, setGridHasFocus] = useState(false);
 
@@ -455,7 +464,7 @@ const DataGrid = injectIntl((props) => {
       event.preventDefault(); // prevent the page from moving with the arrow keys.
       return;
     }
-    if (nextCol < 0 || nextRow < 0) {
+    if (nextCol < 0 || nextRow < (hasVisibleColumnHeaders ? 0 : 1)) {
       event.preventDefault(); // prevent the page from moving with the arrow keys.
       return;
     }
@@ -525,6 +534,7 @@ const DataGrid = injectIntl((props) => {
           onCellSelect={handleCellSelection}
           onRowSelectionHeaderSelect={handleRowSelectionHeaderSelect}
           hasSelectableRows={hasSelectableRows}
+          hasVisibleColumnHeaders={hasVisibleColumnHeaders}
           isStriped
         />
       </GridContext.Provider>

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

@@ -82,6 +82,11 @@ const propTypes = {
    * The intl object containing translations. This is retrieved from the context automatically by injectIntl.
    */
   intl: PropTypes.shape({ formatMessage: PropTypes.func }).isRequired,
+
+  /**
+   * Boolean to show/hide column headers. By default, it is set to `true` and column headers are visible.
+   */
+  hasVisibleColumnHeaders: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -90,6 +95,7 @@ const defaultProps = {
   rowHeight: '2.5rem',
   rows: [],
   columns: [],
+  hasVisibleColumnHeaders: true,
 };
 
 function FlowsheetDataGrid(props) {
@@ -106,6 +112,7 @@ function FlowsheetDataGrid(props) {
     onClearSelectedCells,
     onCellRangeSelect,
     intl,
+    hasVisibleColumnHeaders,
   } = props;
 
   const anchorCell = useRef(null);
@@ -295,6 +302,7 @@ function FlowsheetDataGrid(props) {
         onCellSelect={handleCellSelection}
         onClearSelection={handleClearSelectedCells}
         onCellRangeSelect={handleCellRangeSelection}
+        hasVisibleColumnHeaders={hasVisibleColumnHeaders}
       />
       <VisuallyHiddenText aria-live="polite" text={cellSelectionAriaLiveMessage} />
     </div>

packages/terra-data-grid/tests/jest/__snapshots__/DataGrid.test.jsx.snap

@@ -160,6 +160,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
     columnHeaderHeight="2.5rem"
     defaultColumnWidth={200}
     focusFuncRef={null}
+    hasVisibleColumnHeaders={true}
     id="test-terra-data-grid"
     intl={
       Object {
@@ -320,6 +321,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
       columnHeaderHeight="2.5rem"
       defaultColumnWidth={200}
       focusFuncRef={null}
+      hasVisibleColumnHeaders={true}
       id="test-terra-data-grid"
       intl={
         Object {
@@ -488,6 +490,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
         <InjectIntl(Table)
           columnHeaderHeight="2.5rem"
           defaultColumnWidth={200}
+          hasVisibleColumnHeaders={true}
           id="test-terra-data-grid-table"
           isActiveColumnResizing={false}
           isStriped={true}
@@ -602,7 +605,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
           <Table
             columnHeaderHeight="2.5rem"
             defaultColumnWidth={200}
-            hasColumnHeaders={true}
+            hasVisibleColumnHeaders={true}
             id="test-terra-data-grid-table"
             intl={
               Object {
@@ -808,7 +811,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
                       },
                     ]
                   }
-                  hasColumnHeaders={true}
+                  hasVisibleColumnHeaders={true}
                   headerHeight="2.5rem"
                   isActiveColumnResizing={false}
                   onColumnSelect={[Function]}
@@ -819,7 +822,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
                 >
                   <thead>
                     <tr
-                      aria-rowindex={1}
                       className="column-header-row"
                       height="2.5rem"
                     >
@@ -3081,6 +3083,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
     columnHeaderHeight="2.5rem"
     defaultColumnWidth={200}
     focusFuncRef={null}
+    hasVisibleColumnHeaders={true}
     id="test-terra-data-grid"
     intl={
       Object {
@@ -3241,6 +3244,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
       columnHeaderHeight="2.5rem"
       defaultColumnWidth={200}
       focusFuncRef={null}
+      hasVisibleColumnHeaders={true}
       id="test-terra-data-grid"
       intl={
         Object {
@@ -3409,6 +3413,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
         <InjectIntl(Table)
           columnHeaderHeight="2.5rem"
           defaultColumnWidth={200}
+          hasVisibleColumnHeaders={true}
           id="test-terra-data-grid-table"
           isActiveColumnResizing={false}
           isStriped={true}
@@ -3523,7 +3528,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
           <Table
             columnHeaderHeight="2.5rem"
             defaultColumnWidth={200}
-            hasColumnHeaders={true}
+            hasVisibleColumnHeaders={true}
             id="test-terra-data-grid-table"
             intl={
               Object {
@@ -3729,7 +3734,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
                       },
                     ]
                   }
-                  hasColumnHeaders={true}
+                  hasVisibleColumnHeaders={true}
                   headerHeight="2.5rem"
                   isActiveColumnResizing={false}
                   onColumnSelect={[Function]}
@@ -3740,7 +3745,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
                 >
                   <thead>
                     <tr
-                      aria-rowindex={1}
                       className="column-header-row"
                       height="2.5rem"
                     >
@@ -5994,6 +5998,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
     defaultColumnWidth={200}
     focusFuncRef={null}
     hasSelectableRows={true}
+    hasVisibleColumnHeaders={true}
     id="test-terra-data-grid"
     intl={
       Object {
@@ -6145,6 +6150,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
       defaultColumnWidth={200}
       focusFuncRef={null}
       hasSelectableRows={true}
+      hasVisibleColumnHeaders={true}
       id="test-terra-data-grid"
       intl={
         Object {
@@ -6304,6 +6310,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
           columnHeaderHeight="2.5rem"
           defaultColumnWidth={200}
           hasSelectableRows={true}
+          hasVisibleColumnHeaders={true}
           id="test-terra-data-grid-table"
           isActiveColumnResizing={false}
           isStriped={true}
@@ -6418,8 +6425,8 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
           <Table
             columnHeaderHeight="2.5rem"
             defaultColumnWidth={200}
-            hasColumnHeaders={true}
             hasSelectableRows={true}
+            hasVisibleColumnHeaders={true}
             id="test-terra-data-grid-table"
             intl={
               Object {
@@ -6641,7 +6648,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
                       },
                     ]
                   }
-                  hasColumnHeaders={true}
+                  hasVisibleColumnHeaders={true}
                   headerHeight="2.5rem"
                   isActiveColumnResizing={false}
                   onColumnSelect={[Function]}
@@ -6652,7 +6659,6 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
                 >
                   <thead>
                     <tr
-                      aria-rowindex={1}
                       className="column-header-row"
                       height="2.5rem"
                     >
@@ -9620,6 +9626,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
     columnHeaderHeight="2.5rem"
     defaultColumnWidth={200}
     focusFuncRef={null}
+    hasVisibleColumnHeaders={true}
     id="test-terra-data-grid"
     intl={
       Object {
@@ -9757,6 +9764,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
       columnHeaderHeight="2.5rem"
       defaultColumnWidth={200}
       focusFuncRef={null}
+      hasVisibleColumnHeaders={true}
       id="test-terra-data-grid"
       intl={
         Object {
@@ -9902,6 +9910,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
         <InjectIntl(Table)
           columnHeaderHeight="2.5rem"
           defaultColumnWidth={200}
+          hasVisibleColumnHeaders={true}
           id="test-terra-data-grid-table"
           isActiveColumnResizing={false}
           isStriped={true}
@@ -10016,7 +10025,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
           <Table
             columnHeaderHeight="2.5rem"
             defaultColumnWidth={200}
-            hasColumnHeaders={true}
+            hasVisibleColumnHeaders={true}
             id="test-terra-data-grid-table"
             intl={
               Object {
@@ -10222,7 +10231,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
                       },
                     ]
                   }
-                  hasColumnHeaders={true}
+                  hasVisibleColumnHeaders={true}
                   headerHeight="2.5rem"
                   isActiveColumnResizing={false}
                   onColumnSelect={[Function]}
@@ -10233,7 +10242,6 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
                 >
                   <thead>
                     <tr
-                      aria-rowindex={1}
                       className="column-header-row"
                       height="2.5rem"
                     >
@@ -12468,6 +12476,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
     columnHeaderHeight="2.5rem"
     defaultColumnWidth={200}
     focusFuncRef={null}
+    hasVisibleColumnHeaders={true}
     id="test-terra-data-grid"
     intl={
       Object {
@@ -12602,6 +12611,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
       columnHeaderHeight="2.5rem"
       defaultColumnWidth={200}
       focusFuncRef={null}
+      hasVisibleColumnHeaders={true}
       id="test-terra-data-grid"
       intl={
         Object {
@@ -12744,6 +12754,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
         <InjectIntl(Table)
           columnHeaderHeight="2.5rem"
           defaultColumnWidth={200}
+          hasVisibleColumnHeaders={true}
           id="test-terra-data-grid-table"
           isActiveColumnResizing={false}
           isStriped={true}
@@ -12855,7 +12866,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
           <Table
             columnHeaderHeight="2.5rem"
             defaultColumnWidth={200}
-            hasColumnHeaders={true}
+            hasVisibleColumnHeaders={true}
             id="test-terra-data-grid-table"
             intl={
               Object {
@@ -13058,7 +13069,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
                       },
                     ]
                   }
-                  hasColumnHeaders={true}
+                  hasVisibleColumnHeaders={true}
                   headerHeight="2.5rem"
                   isActiveColumnResizing={false}
                   onColumnSelect={[Function]}
@@ -13069,7 +13080,6 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
                 >
                   <thead>
                     <tr
-                      aria-rowindex={1}
                       className="column-header-row"
                       height="2.5rem"
                     >

packages/terra-data-grid/tests/jest/__snapshots__/FlowsheetDataGrid.test.jsx.snap

@@ -9,6 +9,7 @@ exports[`FlowsheetDataGrid renders the row header column as pinned and remaining
     ariaLabel="Test Flowsheet Data Grid"
     columnHeaderHeight="2.5rem"
     defaultColumnWidth={200}
+    hasVisibleColumnHeaders={true}
     id="test-terra-flowsheet-data-grid"
     onCellRangeSelect={[Function]}
     onCellSelect={[Function]}
@@ -130,6 +131,7 @@ exports[`FlowsheetDataGrid replaces non-header empty, null, or "--" cell content
     ariaLabel="Test Flowsheet Data Grid"
     columnHeaderHeight="2.5rem"
     defaultColumnWidth={200}
+    hasVisibleColumnHeaders={true}
     id="test-terra-flowsheet-data-grid"
     onCellRangeSelect={[Function]}
     onCellSelect={[Function]}