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

packages/terra-data-grid/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added column span functionality to FlowsheetDataGrid.
+
 ## 1.21.0 - (March 19, 2024)
 
 * Removed

packages/terra-data-grid/tests/wdio/flowsheet-data-grid-spec.js

@@ -58,6 +58,18 @@ Terra.describeViewports('FlowsheetDataGrid', ['medium', 'large'], () => {
       });
     });
 
+    describe('flowsheet data grid with column span', () => {
+      before(() => {
+        browser.url('/raw/tests/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/flowsheet-with-column-span');
+      });
+
+      it('renders a flowsheet data grid with column span', () => {
+        browser.keys(['Tab']); // Cell 0,0 gets focus
+        expect(browser.$('[class*="column-header-row"] th:nth-child(1)').isFocused()).toBe(true);
+        Terra.validates.element('flowsheet-with-column-span', { selector: '#flowsheet-with-column-span' });
+      });
+    });
+
     describe('flowsheet data grid with no column headers', () => {
       before(() => {
         browser.url('/raw/tests/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/column-headers-hidden');

packages/terra-framework-docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added examples for column span support in  Flowsheet Data Grid and `terra-table`.
+
 * Changed
   * Updated `terra-navigation-side-menu` example.
   * Updated single row selection example of `terra-table`.

packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/About.5.doc.mdx

@@ -34,6 +34,8 @@ See [keyboard interactions](/components/cerner-terra-framework-docs/data-grid/fl
   * [Row selection](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/row-selection)
   * [Sections](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/flowsheet-with-sections)
   * [Headerless Flowsheet](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/column-headers-hidden)
+  * [Column Highlighting](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/column-highlight-orange-green)
+  * [Column Span](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/flowsheet-with-column-span)
 
 ## Examples
 |Link to Example| Description|
@@ -46,6 +48,7 @@ See [keyboard interactions](/components/cerner-terra-framework-docs/data-grid/fl
 |[Flowsheet Data Grid with Sections](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/flowsheet-with-sections)|An example demonstrating how to create a Flowsheet Data Grid with sections.|
 |[ColumnHighlightOrangeGreen](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/column-highlight-orange-green)|Examples of the Flowsheet Data Grid with orange and green column highlighting.|
 |[MultiColumnHighlight](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/multi-column-highlight)|An example of the Flowsheet Data Grid with multi-column highlighting.|
+|[Flowsheet Data Grid with Column Span](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/flowsheet-with-column-span)|An example of Flowsheet Data Grid with column span.|
 
 ## Accessibility
 ### Keyboard Interactions
@@ -135,6 +138,8 @@ A column specifies the data to render a cell in the header row of the Flowsheet
 |**width**|number|optional|none|A number (in px) specifying the width of the column. If not provided, the Data Grid's default column width is used.|
 |**columnHighlightColor**|`enum: ["green", "orange"]`|optional|none|The color to be used for highlighting a column.|
 |**columnHighlightDescription**|string|optional|none|The information to be conveyed to screen readers about the highlighted column.|
+|**columnSpan**|number|optional|none|Number that specifies the column span value for a column.|
+
 
 ### Rows
 Rows define the cells rendered in the row and the row's selection properties.

packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/FlowsheetDataGridWithColumnSpan.7.doc.mdx

@@ -0,0 +1,11 @@
+import FlowsheetDataGridWithColumnSpan from './FlowsheetDataGridWithColumnSpan?dev-site-example';
+
+# Flowsheet Data Grid With Column Span
+
+### Description
+
+This example demonstrates a [Flowsheet Data Grid](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/about) with column span support.
+
+<FlowsheetDataGridWithColumnSpan title='Flowsheet Data Grid With Column Span' />
+
+Note: Column Highlighting functionality will not be supported for columns with column span.

packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/FlowsheetDataGridWithColumnSpan.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { FlowsheetDataGrid } from 'terra-data-grid';
+
+const gridDataJSON = {
+  cols: [
+    { id: 'Column-0', displayName: 'Vitals' },
+    { id: 'Column-1', displayName: 'March 16', columnSpan: 2 },
+    { id: 'Column-2', displayName: 'March 17', columnSpan: 3 },
+    { id: 'Column-3', displayName: 'March 18' },
+  ],
+  rows: [
+    {
+      id: '1',
+      cells: [
+        { content: 'Heart Rate Monitored (bpm)' },
+        { content: '68' },
+        { content: '69' },
+        { content: '66' },
+        { content: '68' },
+        { content: '69' },
+        { content: '67' },
+      ],
+    },
+    {
+      id: '2',
+      cells: [
+        { content: 'Temperature Oral (degC)' },
+        { content: '36.7' },
+        { content: '36.9' },
+        { content: '36.7' },
+        { content: '37' },
+        { content: '36.7' },
+        { content: '37' },
+      ],
+    },
+    {
+      id: '3',
+      cells: [
+        { content: 'Cardiac Index (L/min/m2)' },
+        { content: '2.25' },
+        { content: '2.28' },
+        { content: '2.25' },
+        { content: '2.8' },
+        { content: '2.25' },
+        { content: '2.8' },
+      ],
+    },
+    {
+      id: '4',
+      cells: [
+        { content: 'ICP (mmHg)' },
+        { content: '11' },
+        { content: '12' },
+        { content: '11' },
+        { content: '12' },
+        { content: '13' },
+        { content: '14' },
+      ],
+    },
+    {
+      id: '5',
+      cells: [
+        { content: 'CPP (mmHg)' },
+        { content: '63' },
+        { content: '47' },
+        { content: '63' },
+        { content: '48' },
+        { content: '63' },
+        { content: '47' },
+      ],
+    },
+  ],
+};
+
+const FlowsheetDataGridWithColumnSpan = () => {
+  const { cols, rows } = gridDataJSON;
+
+  return (
+    <FlowsheetDataGrid
+      id="default-terra-flowsheet-data-grid"
+      columns={cols}
+      rows={rows}
+      ariaLabel="Flowsheet Data Grid"
+    />
+  );
+};
+
+export default FlowsheetDataGridWithColumnSpan;

packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/FlowsheetSectionsWithColHighlight.doc.mdx

@@ -16,3 +16,5 @@ This example demonstrates a [Flowsheet Data Grid](/components/cerner-terra-frame
 - `columnHighlightDescription` can be used to provide context regarding the highlighted column to screen readers.
 
 <FlowsheetSectionsWithColHighlight />
+
+Note: Column Highlighting functionality will not be supported for columns with column span. 

packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/MultiColumnHighlight.8.doc.mdx

@@ -12,3 +12,6 @@ Below are the attributes used for column highlighting.
 
 
 <MultiColumnHighlight title='Flowsheet Data Grid with orange and green column highlight' />
+
+Note: Column Highlighting functionality will not be supported for columns with column span. 
+

packages/terra-framework-docs/src/terra-dev-site/doc/table/About.1.doc.mdx

@@ -42,6 +42,7 @@ See the following example of a default table:
   * [Headerless Table](/components/cerner-terra-framework-docs/table/examples/table-without-headers)
   * [Column Sorting](/components/cerner-terra-framework-docs/table/examples/sortable-table)
   * [Column Error Indicator](/components/cerner-terra-framework-docs/table/examples/table-column-states)
+  * [Column Span](/components/cerner-terra-framework-docs/table/examples/table-column-span)
 
 ## Examples
 |Link to Example| Description|
@@ -56,6 +57,7 @@ See the following example of a default table:
 |[Multiple Row Selection](/components/cerner-terra-framework-docs/table/examples/table-multiple-row-selection)|An example demonstrating a table with multiple row selection mode. Consumers control the selection state with the **onRowSelect** callback and **isSelected** row property.|
 |[Table with Sections](/components/cerner-terra-framework-docs/table/examples/table-with-sections)|An example demonstrating how to create a table with sections.|
 |[Table Without Headers](/components/cerner-terra-framework-docs/table/examples/table-without-headers)|An example demonstrating how to hide table column headers. The column headers still exist in the Document Object Model (DOM) for accessibility.|
+|[Table with Column Span](/components/cerner-terra-framework-docs/table/examples/table-column-span)| An example demonstrating a table with column span.|
 
 ## Accessibility
 ### Keyboard Interactions
@@ -137,6 +139,7 @@ A column specifies the information to render a cell in the header row of the Wor
 |**maximumWidth**|Number|Optional|None|A number that specifies the maximum column width in pixels.|
 |**width**|number|Optional|None|A number that specifies the width of the column in pixels. If not provided, the Worklist Data Grid component's default column width is used.|
 |**sortIndicator**|Custom|Optional|None|A string indicating which sorting indicator is rendered (`ascending` or `descending`). A sorting indicator is rendered only if a value is provided.
+|**columnSpan**|number|Optional|None|A number that specifies the column span value for a column.|
 
 ### Section
 <Notice variant="important" ariaLevel="2">

packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableColumnSpan.doc.mdx

@@ -0,0 +1,10 @@
+import { Badge } from "terra-table/package.json?dev-site-package";
+import TableColumnSpan from "./TableColumnSpan?dev-site-example";
+
+# Table With Column Span
+
+### Description
+
+This example demonstrates a [Table](/components/cerner-terra-framework-docs/table/about) with column span implementation.
+
+<TableColumnSpan />