refactor(columns): rename column properties

Author: damyanpetev

CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 > **Note:** This project is currently in initial development (0.0.x versions). Until version 1.0.0 is released, the public API is not considered stable and breaking changes may occur in any release without following semantic versioning conventions.
 
+## [0.3.0] - 2025-12-10
+
+### Changed
+
+- **BREAKING:** Column properties have been renamed:
+  - `key` → `field` - The field from the data that the column references
+  - `type` → `dataType` - The data type of the column's values
+  - `headerText` → `header` - The header text of the column
+
 ## [0.2.0] - 2025-12-10
 
 ### Changed

demo/demo.ts

@@ -107,30 +107,30 @@ const themeChoose = html`
 
 const columns: ColumnConfiguration<User>[] = [
   {
-    key: 'id',
-    headerText: 'User ID',
+    field: 'id',
+    header: 'User ID',
     resizable: true,
-    type: 'number',
+    dataType: 'number',
     filterable: true,
     sortable: true,
   },
   {
-    key: 'name',
+    field: 'name',
     cellTemplate: (params) => html`<igc-input .value=${params.value}></igc-input>`,
     filterable: true,
     sortable: true,
   },
   {
-    key: 'avatar',
+    field: 'avatar',
     cellTemplate: (params) =>
       html`<igc-avatar
         shape="circle"
         .src=${params.value}
       ></igc-avatar>`,
   },
   {
-    key: 'satisfaction',
-    type: 'number',
+    field: 'satisfaction',
+    dataType: 'number',
     sortable: true,
     filterable: true,
     cellTemplate: (params) =>
@@ -141,7 +141,7 @@ const columns: ColumnConfiguration<User>[] = [
       ></igc-rating>`,
   },
   {
-    key: 'priority',
+    field: 'priority',
     cellTemplate: (params) =>
       html`<igc-select
         outlined
@@ -157,14 +157,14 @@ const columns: ColumnConfiguration<User>[] = [
     },
   },
   {
-    key: 'age',
+    field: 'age',
   },
   {
-    key: 'email',
+    field: 'email',
   },
   {
-    key: 'subscribed',
-    type: 'boolean',
+    field: 'subscribed',
+    dataType: 'boolean',
     sortable: true,
     filterable: true,
     cellTemplate: (params) =>
@@ -179,11 +179,11 @@ const data = generateData(1e3);
 IgcGridLite.register();
 
 const column = document.createElement(IgcGridLiteColumn.tagName) as IgcGridLiteColumn<User>;
-column.key = 'email';
-column.headerText = 'Toggle Me';
+column.field = 'email';
+column.header = 'Toggle Me';
 
 const column2 = document.createElement(IgcGridLiteColumn.tagName) as IgcGridLiteColumn<User>;
-column2.headerText = 'Non-existent';
+column2.header = 'Non-existent';
 
 const toggleColumn = () => {
   const grid = getElement<IgcGridLite<User>>(IgcGridLite.tagName);
@@ -194,7 +194,7 @@ const toggleColumn = () => {
 const toggleFiltering = () => {
   const grid = getElement<IgcGridLite<User>>(IgcGridLite.tagName);
   const column = Array.from(grid.querySelectorAll(IgcGridLiteColumn.tagName)).find(
-    (col) => col.key === 'name',
+    (col) => col.field === 'name',
   )!;
 
   column.filterable = !column.filterable;
@@ -217,16 +217,16 @@ render(
       ${columns.map(
         (col) =>
           html`<igc-grid-lite-column
-            .key=${col.key}
-            .type=${col.type}
-            .headerText=${col.headerText}
+            .field=${col.field}
+            .dataType=${col.dataType}
+            .header=${col.header}
             ?hidden=${col.hidden}
             ?resizable=${col.resizable}
             ?sortable=${col.sortable}
             .sortConfiguration=${col.sortConfiguration}
             ?filterable=${col.filterable}
             .cellTemplate=${col.cellTemplate}
-            .headerTemplate=${col.headerTemplate as any}
+            .headerTemplate=${col.headerTemplate}
           ></igc-grid-lite-column>`,
       )}
     </igc-grid-lite>

src/components/column.ts

@@ -37,17 +37,17 @@ export class IgcGridLiteColumn<T extends object>
   @consume({ context: COLUMN_UPDATE_CONTEXT })
   protected _setConfig?: (config: BaseColumnConfiguration<T>) => void;
 
-  /** The key of the column, used to identify the data field. */
+  /** The field from the data for this column. */
   @property()
-  public key!: keyof T;
+  public field!: keyof T;
 
   /** The data type of the column's values. */
   @property()
-  public type?: 'number' | 'string' | 'boolean' = 'string';
+  public dataType?: 'number' | 'string' | 'boolean' = 'string';
 
   /** The header text of the column. */
   @property()
-  public headerText?: string;
+  public header?: string;
 
   /** The width of the column. */
   @property()

src/components/filter-row.ts

@@ -53,7 +53,7 @@ export default class IgcFilterRow<T extends object> extends LitElement {
   public state!: StateController<T>;
 
   protected get isNumeric() {
-    return this.column.type === 'number';
+    return this.column.dataType === 'number';
   }
 
   protected get filterController() {
@@ -99,7 +99,7 @@ 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.key]>;
+    const key = event.detail.value as OperandKeys<T[typeof this.column.field]>;
 
     // XXX: Types
     this.expression.condition = (getFilterOperandsFor(this.column) as any)[key] as FilterOperation<
@@ -150,7 +150,7 @@ export default class IgcFilterRow<T extends object> extends LitElement {
   }
 
   #handleResetClick() {
-    this.filterController.removeAllExpressions(this.column.key);
+    this.filterController.removeAllExpressions(this.column.field);
     this.requestUpdate();
   }
 
@@ -236,7 +236,7 @@ export default class IgcFilterRow<T extends object> extends LitElement {
   }
 
   protected renderActiveChips() {
-    const state = this.filterController.get(this.column.key);
+    const state = this.filterController.get(this.column.field);
 
     return !state
       ? nothing
@@ -350,7 +350,7 @@ export default class IgcFilterRow<T extends object> extends LitElement {
   }
 
   protected renderFilterState(column: ColumnConfiguration<T>) {
-    const state = this.filterController.get(column.key);
+    const state = this.filterController.get(column.field);
 
     const partial = state && state.length < 3;
     const hidden = state && state.length >= 3;
@@ -363,7 +363,7 @@ export default class IgcFilterRow<T extends object> extends LitElement {
 
     const count = hidden ? html`<span slot="suffix">${state.length}</span>` : nothing;
     const chip = html`<igc-chip
-      data-column=${column.key}
+      data-column=${column.field}
       @click=${open}
       >${prefixedIcon('filter')}Filter${count}</igc-chip
     >`;

src/components/grid.ts

@@ -406,7 +406,7 @@ export class IgcGridLite<T extends object> extends EventEmitterBase<IgcGridLiteE
    */
   public getColumn(id: Keys<T> | number): ColumnConfiguration<T> | undefined {
     return this._stateController.columns.find((column, index) =>
-      isNumber(id) ? index === id : column.key === id
+      isNumber(id) ? index === id : column.field === id
     );
   }
 
@@ -422,7 +422,7 @@ export class IgcGridLite<T extends object> extends EventEmitterBase<IgcGridLiteE
     const target = getElementFromEventPath<IgcGridLiteCell<T>>(IgcGridLiteCell.tagName, event);
 
     if (target) {
-      this._stateController.active = { column: target.column.key, row: target.row.index };
+      this._stateController.active = { column: target.column.field, row: target.row.index };
     }
   }
 

src/components/header-row.ts

@@ -60,7 +60,7 @@ export default class IgcGridLiteHeaderRow<T extends object> extends LitElement {
         ? nothing
         : html`
             <igc-grid-lite-header
-              part=${partMap({ filtered: column.key === filterRow?.column?.key })}
+              part=${partMap({ filtered: column.field === filterRow?.column?.field })}
               .column=${column}
             ></igc-grid-lite-header>
           `

src/components/header.ts

@@ -103,7 +103,7 @@ export default class IgcGridLiteHeader<T extends object> extends LitElement {
   #handleAutosize = () => this.resizeController.autosize(this.column, this);
 
   protected renderSortPart() {
-    const state = this.state.sorting.state.get(this.column.key);
+    const state = this.state.sorting.state.get(this.column.field);
     const idx = Array.from(this.state.sorting.state.values()).indexOf(state!);
     const attr =
       this.state.host.sortingOptions.mode === 'multiple' ? (idx > -1 ? idx + 1 : nothing) : nothing;
@@ -129,7 +129,7 @@ export default class IgcGridLiteHeader<T extends object> extends LitElement {
   }
 
   protected renderContentPart() {
-    const defaultContent = this.column.headerText ?? this.column.key;
+    const defaultContent = this.column.header ?? this.column.field;
     const template = this.column.headerTemplate;
 
     return html`

src/components/row.ts

@@ -48,10 +48,10 @@ export default class IgcGridLiteRow<T extends object> extends LitElement {
           ? nothing
           : html`<igc-grid-lite-cell
               part="cell"
-              .active=${key === column.key && index === this.index}
+              .active=${key === column.field && index === this.index}
               .column=${column}
               .row=${this as IgcGridLiteRow<T>}
-              .value=${data[column.key]}
+              .value=${data[column.field]}
             ></igc-grid-lite-cell>`
       )}
     `;

src/controllers/filter.ts

@@ -85,7 +85,7 @@ export class FilterController<T extends object> implements ReactiveController {
 
     // XXX: Types
     return {
-      key: column.key,
+      key: column.field,
       condition: operands[keys[0]],
       caseSensitive,
     } as unknown as FilterExpression<T>;

src/controllers/navigation.ts

@@ -36,12 +36,12 @@ export class NavigationController<T extends object> implements ReactiveControlle
   }
 
   protected get _firstColumn() {
-    return this._state.host.getColumn(0)!.key ?? '';
+    return this._state.host.getColumn(0)!.field ?? '';
   }
 
   protected getPreviousColumn(key: Keys<T>) {
     return this._columns[Math.max(this._columns.indexOf(this._state.host.getColumn(key)!) - 1, 0)]
-      .key;
+      .field;
   }
 
   protected getNextColumn(key: Keys<T>) {
@@ -50,7 +50,7 @@ export class NavigationController<T extends object> implements ReactiveControlle
         this._columns.indexOf(this._state.host.getColumn(key)!) + 1,
         this._columns.length - 1
       )
-    ].key;
+    ].field;
   }
 
   protected scrollToCell(node: ActiveNode<T>) {
@@ -60,7 +60,7 @@ export class NavigationController<T extends object> implements ReactiveControlle
 
     if (row) {
       row.cells
-        .find((cell) => cell.column.key === node.column)
+        .find((cell) => cell.column.field === node.column)
         ?.scrollIntoView({ block: 'nearest' });
     }
   }