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

[nikhitasharma]

Summary

What was changed:
Added column span functionality to Terra Table to support it in FlowsheetDataGrid

Notes:

• The column highlighting functionality is disabled for columns with multiple column spans.
  The below example has column highlighting for Illness Severity but will not be supported since it has column span of 2.
  

Why it was changed:
To support multiple column spans and avoid histories to break on page loads.

Testing

This change was tested using:

• WDIO
• Jest
• Visual testing (please attach a screenshot or recording)
• Other (please describe below)
• No tests are needed

Reviews

In addition to engineering reviews, this PR needs:

• UX review
• Accessibility review
• Functional review

Additional Details

This PR resolves:

UXPLATFORM-10182

---

Thank you for contributing to Terra.
@cerner/terra

[adoroshk]

Are column actions supposed to be unsupported with columnSpan prop? I checked that in current implementation column actions don't work with column span, but in documentation I don't see a mentioning it's not supported, like, for example, Column Highlighting functionality.

[nikhitasharma]

Are column actions supposed to be unsupported with columnSpan prop? I checked that in current implementation column actions don't work with column span, but in documentation I don't see a mentioning it's not supported, like, for example, Column Highlighting functionality.

Thats a good catch, It is simple prop addition for column actions header to support column spans. I have added that in and it should work now:

[mjpalazzo]

@nikhitasharma - Should column header actions such as sort disabled for column span?

[mjpalazzo]

@nikhitasharma - I validated keyboard navigation and JAWS using the Edge browser. Everything is working as required. The issue in the column actions example where the button label does not match the column header is still there, but that is a minor issue with the example not the component.
Great job!

[nikhitasharma]

@nikhitasharma - I validated keyboard navigation and JAWS using the Edge browser. Everything is working as required. The issue in the column actions example where the button label does not match the column header is still there, but that is a minor issue with the example not the component. Great job!

Thanks for pointing that out clearly. I fixed it.