fix: handle declarative columns nested in wrapping element (#35)

Author: damyanpetev

src/components/grid.ts

@@ -40,6 +40,14 @@ import IgcGridLiteHeaderRow from './header-row.js';
 import IgcGridLiteRow from './row.js';
 import IgcVirtualizer from './virtualizer.js';
 
+/** Column reducer matching either direct column element or one nested in container */
+function columnReducer<T extends Element>(acc: T[], el: T): T[] {
+  const tag = IgcGridLiteColumn.tagName;
+  const column = el.matches(tag) ? el : el.querySelector(tag);
+  if (column) acc.push(column as T);
+  return acc;
+}
+
 /**
  * Event object for the filtering event of the grid.
  */
@@ -348,15 +356,15 @@ export class IgcGridLite<T extends object> extends EventEmitterBase<IgcGridLiteE
     const slot = this.renderRoot.querySelector('slot') as HTMLSlotElement;
     const assignedNodes = slot
       .assignedElements({ flatten: true })
-      .filter((element) => element.matches(IgcGridLiteColumn.tagName));
+      .reduce<Element[]>(columnReducer, []);
     return assignedNodes.length > 0;
   }
 
   private _handleSlotChange(event: Event): void {
     const slot = event.target as HTMLSlotElement;
     const assignedNodes = slot
       .assignedElements({ flatten: true })
-      .filter((element) => element.matches(IgcGridLiteColumn.tagName));
+      .reduce<Element[]>(columnReducer, []);
 
     this._stateController.setColumnConfiguration(
       assignedNodes as unknown as ColumnConfiguration<T>[]

test/column-config.test.ts

@@ -26,9 +26,14 @@ describe('Column configuration', () => {
       const newKeys: Array<Keys<TestData>> = ['id', 'name'];
 
       TDD.grid.replaceChildren(
-        ...newKeys.map((key) => {
+        ...newKeys.map((key, i) => {
           const col = document.createElement(GRID_COLUMN_TAG) as IgcGridLiteColumn<TestData>;
           col.field = key;
+          if (i % 2 === 0) {
+            const div = document.createElement('div');
+            div.appendChild(col);
+            return div;
+          }
           return col;
         })
       );