Fix DataTable type error when clicking on headers (#6781)

* Resolves `DataTable` type error.

* Adds changeset

Co-authored-by: Alex Page <[email protected]>

Author: philschoefer

.changeset/strange-vans-speak.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed console error in `DataTable` that is triggered by sorting data via table headers

polaris-react/src/components/DataTable/DataTable.tsx

@@ -234,7 +234,7 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
           styles.FixedFirstColumn,
           !isScrolledFarthestLeft && styles.separate,
         )}
-        style={{maxWidth: `${columnVisibilityData[0].rightEdge}px`}}
+        style={{maxWidth: `${columnVisibilityData[0]?.rightEdge}px`}}
       >
         <thead>
           <tr style={{height: `${headerRowHeights[0]}px`}}>
@@ -541,7 +541,7 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
     const tableRightEdge = tableScrollLeft + tableViewableWidth;
     const firstColumnWidth =
       this.state.columnVisibilityData.length > 0
-        ? this.state.columnVisibilityData[0].rightEdge
+        ? this.state.columnVisibilityData[0]?.rightEdge
         : 0;
     const currentColumnLeftEdge = currentCell.offsetLeft;
     const currentColumnRightEdge =
@@ -599,7 +599,7 @@ class DataTableInner extends PureComponent<CombinedProps, DataTableState> {
     const currentCell = event.target.parentNode as HTMLTableCellElement;
     const fixedFirstColumn = this.props;
     const firstColumnWidth = fixedFirstColumn
-      ? this.state.columnVisibilityData[0].rightEdge
+      ? this.state.columnVisibilityData[0]?.rightEdge
       : 0;
     const currentColumnLeftEdge = currentCell.offsetLeft;
     const desiredScrollLeft = currentColumnLeftEdge - firstColumnWidth;