Change queryselector to target outer table's header (#2661)

* chore: change queryselector to target parent level table header

* chore: add changeset

* chore: update changeset desc

.changeset/fuzzy-dogs-sip.md

@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/data-table': patch
+---
+
+Updated table columns width calculation to take into account only main table header. This allows for having nested tables in its rows.
+

packages/components/data-table/src/use-manual-column-resizing-reducer.ts

@@ -123,12 +123,14 @@ const useManualColumnResizing = (tableRef?: TTableRef) => {
   // if the table element has been rendered and we haven't yet measured the columns
   if (state.tableRef?.current && !state.sizes) {
     const renderedColumnMeasurements: TRenderedColumnMeasurements[] = [];
-    state.tableRef.current.querySelectorAll('th').forEach((header) => {
-      renderedColumnMeasurements.push({
-        key: header.getAttribute('data-id'),
-        width: header.getBoundingClientRect().width,
+    state.tableRef.current
+      .querySelectorAll(':scope > thead > tr > th')
+      .forEach((header) => {
+        renderedColumnMeasurements.push({
+          key: header.getAttribute('data-id'),
+          width: header.getBoundingClientRect().width,
+        });
       });
-    });
 
     dispatch({
       type: 'registerColumnMeasurements',