[flowsheet-data-grid] Hide columns headers

packages/terra-data-grid/CHANGELOG.md

@@ -10,6 +10,9 @@
 * Added
   * Added ability to select a range of cells to FlowsheetDataGrid.
 
+* Changed
+  * Updated FlowsheetDataGrid to no longer have column headers.
+
 ## 1.0.0 - (October 25, 2023)
 * Initial working component release.
 

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.
+   */
+  hasColumnHeaders: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -136,29 +141,31 @@ const defaultProps = {
   pinnedColumns: [],
   overflowColumns: [],
   rows: [],
+  hasColumnHeaders: true,
 };
 
 const DataGrid = injectIntl((props) => {
   const {
-    id,
-    ariaLabelledBy,
     ariaLabel,
-    rows,
-    pinnedColumns,
-    overflowColumns,
-    onColumnResize,
-    defaultColumnWidth,
+    ariaLabelledBy,
     columnHeaderHeight,
     columnResizeIncrement,
-    rowHeight,
-    onColumnSelect,
+    defaultColumnWidth,
+    hasColumnHeaders,
+    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);
@@ -520,6 +527,7 @@ const DataGrid = injectIntl((props) => {
           onCellSelect={handleCellSelection}
           onRowSelectionHeaderSelect={handleRowSelectionHeaderSelect}
           hasSelectableRows={hasSelectableRows}
+          hasColumnHeaders={hasColumnHeaders}
           isStriped
         />
       </GridContext.Provider>

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

@@ -295,6 +295,7 @@ function FlowsheetDataGrid(props) {
         onCellSelect={handleCellSelection}
         onClearSelection={handleClearSelectedCells}
         onCellRangeSelect={handleCellRangeSelection}
+        hasColumnHeaders={false}
       />
       <VisuallyHiddenText aria-live="polite" text={cellSelectionAriaLiveMessage} />
     </div>

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

@@ -159,6 +159,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
     columnHeaderHeight="2.5rem"
     defaultColumnWidth={200}
     focusFuncRef={null}
+    hasColumnHeaders={true}
     id="test-terra-data-grid"
     intl={
       Object {
@@ -318,6 +319,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
       columnHeaderHeight="2.5rem"
       defaultColumnWidth={200}
       focusFuncRef={null}
+      hasColumnHeaders={true}
       id="test-terra-data-grid"
       intl={
         Object {
@@ -485,6 +487,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
         <InjectIntl(Table)
           columnHeaderHeight="2.5rem"
           defaultColumnWidth={200}
+          hasColumnHeaders={true}
           id="test-terra-data-grid-table"
           isActiveColumnResizing={false}
           isStriped={true}
@@ -2888,6 +2891,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
     columnHeaderHeight="2.5rem"
     defaultColumnWidth={200}
     focusFuncRef={null}
+    hasColumnHeaders={true}
     id="test-terra-data-grid"
     intl={
       Object {
@@ -3047,6 +3051,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
       columnHeaderHeight="2.5rem"
       defaultColumnWidth={200}
       focusFuncRef={null}
+      hasColumnHeaders={true}
       id="test-terra-data-grid"
       intl={
         Object {
@@ -3214,6 +3219,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
         <InjectIntl(Table)
           columnHeaderHeight="2.5rem"
           defaultColumnWidth={200}
+          hasColumnHeaders={true}
           id="test-terra-data-grid-table"
           isActiveColumnResizing={false}
           isStriped={true}
@@ -5609,6 +5615,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
     columnHeaderHeight="2.5rem"
     defaultColumnWidth={200}
     focusFuncRef={null}
+    hasColumnHeaders={true}
     hasSelectableRows={true}
     id="test-terra-data-grid"
     intl={
@@ -5760,6 +5767,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
       columnHeaderHeight="2.5rem"
       defaultColumnWidth={200}
       focusFuncRef={null}
+      hasColumnHeaders={true}
       hasSelectableRows={true}
       id="test-terra-data-grid"
       intl={
@@ -5919,6 +5927,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
         <InjectIntl(Table)
           columnHeaderHeight="2.5rem"
           defaultColumnWidth={200}
+          hasColumnHeaders={true}
           hasSelectableRows={true}
           id="test-terra-data-grid-table"
           isActiveColumnResizing={false}
@@ -9013,6 +9022,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
     columnHeaderHeight="2.5rem"
     defaultColumnWidth={200}
     focusFuncRef={null}
+    hasColumnHeaders={true}
     id="test-terra-data-grid"
     intl={
       Object {
@@ -9150,6 +9160,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
       columnHeaderHeight="2.5rem"
       defaultColumnWidth={200}
       focusFuncRef={null}
+      hasColumnHeaders={true}
       id="test-terra-data-grid"
       intl={
         Object {
@@ -9295,6 +9306,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
         <InjectIntl(Table)
           columnHeaderHeight="2.5rem"
           defaultColumnWidth={200}
+          hasColumnHeaders={true}
           id="test-terra-data-grid-table"
           isActiveColumnResizing={false}
           isStriped={true}
@@ -11672,6 +11684,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
     columnHeaderHeight="2.5rem"
     defaultColumnWidth={200}
     focusFuncRef={null}
+    hasColumnHeaders={true}
     id="test-terra-data-grid"
     intl={
       Object {
@@ -11806,6 +11819,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
       columnHeaderHeight="2.5rem"
       defaultColumnWidth={200}
       focusFuncRef={null}
+      hasColumnHeaders={true}
       id="test-terra-data-grid"
       intl={
         Object {
@@ -11948,6 +11962,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
         <InjectIntl(Table)
           columnHeaderHeight="2.5rem"
           defaultColumnWidth={200}
+          hasColumnHeaders={true}
           id="test-terra-data-grid-table"
           isActiveColumnResizing={false}
           isStriped={true}

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}
+    hasColumnHeaders={false}
     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}
+    hasColumnHeaders={false}
     id="test-terra-flowsheet-data-grid"
     onCellRangeSelect={[Function]}
     onCellSelect={[Function]}