feat: add nested path support for column fields (#28)

Author: damyanpetev

demo/demo.ts

@@ -30,10 +30,16 @@ type User = {
   priority: string;
   email: string;
   avatar: string;
+  address: {
+    city: string;
+    country: string;
+  };
 };
 
 const choices = ['low', 'standard', 'high'];
 const themes = ['bootstrap', 'material', 'fluent', 'indigo'];
+const cities = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix', 'London', 'Paris', 'Berlin', 'Tokyo', 'Sydney'];
+const countries = ['USA', 'USA', 'USA', 'USA', 'USA', 'UK', 'France', 'Germany', 'Japan', 'Australia'];
 
 function getElement<T>(qs: string): T {
   return document.querySelector(qs) as T;
@@ -42,8 +48,9 @@ function getElement<T>(qs: string): T {
 function generateData(length: number): User[] {
   return Array.from(
     { length },
-    (_, idx) =>
-      ({
+    (_, idx) => {
+      const cityIndex = getRandomInt(cities.length);
+      return {
         id: idx,
         name: `User - ${getRandomInt(length)}`,
         age: getRandomInt(100),
@@ -52,7 +59,12 @@ function generateData(length: number): User[] {
         priority: oneOf(choices),
         email: `user${idx}@org.com`,
         avatar: getAvatar(),
-      }) as User,
+        address: {
+          city: cities[cityIndex],
+          country: countries[cityIndex],
+        },
+      } as User;
+    },
   );
 }
 
@@ -162,6 +174,18 @@ const columns: ColumnConfiguration<User>[] = [
   {
     field: 'email',
   },
+  {
+    field: 'address.city',
+    header: 'City',
+    sortable: true,
+    filterable: true,
+  },
+  {
+    field: 'address.country',
+    header: 'Country',
+    sortable: true,
+    filterable: true,
+  },
   {
     field: 'subscribed',
     dataType: 'boolean',

src/components/column.ts

@@ -9,6 +9,7 @@ import type {
   ColumnSortConfiguration,
   IgcCellContext,
   IgcHeaderContext,
+  Keys,
 } from '../internal/types.js';
 
 /**
@@ -39,7 +40,7 @@ export class IgcGridLiteColumn<T extends object>
 
   /** The field from the data for this column. */
   @property()
-  public field!: keyof T;
+  public field!: Keys<T>;
 
   /** The data type of the column's values. */
   @property()

src/components/filter-row.ts

@@ -13,7 +13,7 @@ import { DEFAULT_COLUMN_CONFIG } from '../internal/constants.js';
 import { GRID_STATE_CONTEXT } from '../internal/context.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_FILTER_ROW_TAG } from '../internal/tags.js';
-import type { ColumnConfiguration } from '../internal/types.js';
+import type { ColumnConfiguration, PropertyType } from '../internal/types.js';
 import { getFilterOperandsFor } from '../internal/utils.js';
 import { watch } from '../internal/watch.js';
 import type { FilterExpressionTree } from '../operations/filter/tree.js';
@@ -99,11 +99,11 @@ export default class IgcFilterRow<T extends object> extends LitElement {
 
   #handleConditionChanged(event: CustomEvent<IgcDropdownItemComponent>) {
     event.stopPropagation();
-    const key = event.detail.value as OperandKeys<T[typeof this.column.field]>;
+    const key = event.detail.value as OperandKeys<PropertyType<T, typeof this.column.field>>;
 
     // XXX: Types
     this.expression.condition = (getFilterOperandsFor(this.column) as any)[key] as FilterOperation<
-      T[keyof T]
+      PropertyType<T, keyof T>
     >;
 
     if (this.input.value || this.expression.condition.unary) {

src/components/row.ts

@@ -4,6 +4,7 @@ import { map } from 'lit/directives/map.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_ROW_TAG } from '../internal/tags.js';
 import type { ActiveNode, ColumnConfiguration } from '../internal/types.js';
+import { resolveFieldValue } from '../internal/utils.js';
 import { styles } from '../styles/body-row/body-row.css.js';
 import IgcGridLiteCell from './cell.js';
 
@@ -51,7 +52,7 @@ export default class IgcGridLiteRow<T extends object> extends LitElement {
               .active=${key === column.field && index === this.index}
               .column=${column}
               .row=${this as IgcGridLiteRow<T>}
-              .value=${data[column.field]}
+              .value=${resolveFieldValue(data, column.field)}
             ></igc-grid-lite-cell>`
       )}
     `;

src/controllers/filter.ts

@@ -81,7 +81,7 @@ export class FilterController<T extends object> implements ReactiveController {
   public getDefaultExpression(column: ColumnConfiguration<T>) {
     const caseSensitive = Boolean(column.filteringCaseSensitive);
     const operands = getFilterOperandsFor(column);
-    const keys = Object.keys(operands) as Keys<typeof operands>[];
+    const keys = Object.keys(operands) as (keyof typeof operands)[];
 
     // XXX: Types
     return {

src/index.ts

@@ -9,7 +9,6 @@ export type {
   BaseColumnConfiguration,
   BaseColumnSortConfiguration,
   BaseIgcCellContext,
-  BasePropertyType,
   ColumnConfiguration,
   ColumnSortConfiguration,
   DataPipelineConfiguration,

src/internal/types.ts

@@ -8,22 +8,36 @@ import type { SortComparer } from '../operations/sort/types.js';
 export type NavigationState = 'previous' | 'current';
 export type GridHost<T extends object> = ReactiveControllerHost & IgcGridLite<T>;
 
+type FlatKeys<T> = keyof T;
+type DotPaths<T> = {
+  [K in keyof T & string]: T[K] extends object
+    ? K | `${K}.${DotPaths<T[K]>}` // Note: resolving `never` will collapse the entire interpolated string to never, leaving only valid paths
+    : K;
+}[keyof T & string];
+type NestedKeys<T> = Exclude<DotPaths<T>, FlatKeys<T>>;
+
 /**
  * Helper type for resolving keys of type T.
  */
-export type Keys<T> = keyof T;
+export type Keys<T> = FlatKeys<T> | NestedKeys<T>;
 
-/**
- * Helper type for resolving types of type T.
- */
-export type BasePropertyType<T, K extends Keys<T> = Keys<T>> = T[K];
+/** Recursive T[K] property type resolve with nested dot paths support */
+type PathValue<T, P extends string> = P extends `${infer K}.${infer Rest}`
+  ? K extends keyof T
+    ? PathValue<T[K], Rest>
+    : never
+  : P extends keyof T
+    ? T[P]
+    : never;
 
 /**
  * Helper type for resolving types of type T.
  */
-export type PropertyType<T, K extends Keys<T> = Keys<T>> = K extends Keys<T>
-  ? BasePropertyType<T, K>
-  : never;
+export type PropertyType<T, K extends Keys<T> = Keys<T>> = K extends NestedKeys<T>
+  ? PathValue<T, K> // nested path
+  : K extends keyof T
+    ? T[K] // flat key
+    : never;
 
 /** The data for the current column. */
 export type DataType = 'number' | 'string' | 'boolean';

src/internal/utils.ts

@@ -2,7 +2,28 @@ import type { StyleInfo } from 'lit/directives/style-map.js';
 import { BooleanOperands } from '../operations/filter/operands/boolean.js';
 import { NumberOperands } from '../operations/filter/operands/number.js';
 import { StringOperands } from '../operations/filter/operands/string.js';
-import type { ColumnConfiguration } from './types.js';
+import type { ColumnConfiguration, Keys, PropertyType } from './types.js';
+
+function _isObject(entity: unknown): entity is Record<string, unknown> {
+  return entity != null && typeof entity === 'object';
+}
+
+/**
+ * Resolves a value from an object using a path string.
+ * Supports nested properties using dot notation (e.g., 'prop.nestedProp').
+ *
+ * @param obj - The object to resolve the value from.
+ * @param path - The path to the property, can be a simple key or dot-separated path.
+ * @returns The resolved value, or undefined if the path cannot be resolved.
+ */
+export function resolveFieldValue<T>(obj: T, path: Keys<T>): PropertyType<T> {
+  if (typeof path === 'string' && path.includes('.')) {
+    return path.split('.').reduce<unknown>((current, key) => {
+      return _isObject(current) && key in current ? current[key] : undefined;
+    }, obj) as PropertyType<T>;
+  }
+  return obj[path as keyof T] as PropertyType<T>;
+}
 
 export function applyColumnWidths<T extends object>(
   columns: Array<ColumnConfiguration<T>>

src/operations/base.ts

@@ -1,11 +1,12 @@
-import type { Keys } from '../internal/types.js';
+import type { Keys, PropertyType } from '../internal/types.js';
+import { resolveFieldValue } from '../internal/utils.js';
 
 export default abstract class DataOperation<T, K extends Keys<T> = Keys<T>> {
   protected resolveValue(record: T, key: K) {
-    return record[key];
+    return resolveFieldValue(record, key);
   }
 
-  protected resolveCase<U = T[K]>(value: U, caseSensitive?: boolean) {
+  protected resolveCase<U = PropertyType<T, K>>(value: U, caseSensitive?: boolean) {
     return typeof value === 'string' && !caseSensitive ? (value.toLowerCase() as U) : value;
   }
 

src/operations/filter/types.ts

@@ -1,4 +1,4 @@
-import type { Keys } from '../../internal/types.js';
+import type { Keys, PropertyType } from '../../internal/types.js';
 import type { BooleanOperands } from './operands/boolean.js';
 import type { NumberOperands } from './operands/number.js';
 import type { StringOperands } from './operands/string.js';
@@ -38,15 +38,15 @@ export interface BaseFilterExpression<T, K extends Keys<T> = Keys<T>> {
   /**
    * The filter function which will be executed against the data records.
    */
-  condition: FilterOperation<T[K]> | OperandKeys<T[K]>;
+  condition: FilterOperation<PropertyType<T, K>> | OperandKeys<PropertyType<T, K>>;
 
   /**
    * The filtering value used in the filter condition function.
    *
    * @remarks
    * Optional for unary conditions.
    */
-  searchTerm?: T[K];
+  searchTerm?: PropertyType<T, K>;
   /**
    * Dictates how this expression should resolve in the filter operation in relation to
    * other expressions.