refactor(columns): split filter and sort properties (#14)

damyanpetev · web-flow · commit c8baaca9644b · 2025-12-10T18:55:22.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,8 +22,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
   ```ts
   const columns: ColumnConfiguration<User>[] = [
-    { key: 'id', headerText: 'User ID', type: 'number', filter: true, sort: true },
-    { key: 'name', filter: true, sort: true },
+    { key: 'id', headerText: 'User ID', type: 'number', filterable: true, sortable: true },
+    { key: 'name', filterable: true, sortable: true },
   ];
   ```
 
@@ -35,17 +35,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
       key="id"
       header-text="User ID"
       type="number"
-      .filter=${true}
-      .sort=${true}
+      filterable
+      sortable
     ></igc-grid-lite-column>
     <igc-grid-lite-column
       key="name"
-      .filter=${true}
-      .sort=${true}
+      filterable
+      sortable
     ></igc-grid-lite-column>
   </igc-grid-lite>
   ```
 
+- **BREAKING:** Column `sort` and `filter` properties have been replaced with separate boolean and configuration properties:
+  - `sort` → `sortable` (boolean) + `sortingCaseSensitive` (boolean) + `sortConfiguration` (object with `comparer` option)
+  - `filter` → `filterable` (boolean) + `filteringCaseSensitive` (boolean)
+
+- **BREAKING:** Removed `ColumnFilterConfiguration` type. Use `filteringCaseSensitive` boolean property directly on the column.
 - **BREAKING:** Renamed `GridSortConfiguration` type to `GridLiteSortingOptions`.
 - **BREAKING:** Renamed `IgcGridLite.sortConfiguration` property to `sortingOptions`.
 - **BREAKING:** Renamed `IgcGridLite.sortExpressions` property to `sortingExpressions`.
diff --git a/demo/demo.ts b/demo/demo.ts
@@ -106,12 +106,19 @@ const themeChoose = html`
 `;
 
 const columns: ColumnConfiguration<User>[] = [
-  { key: 'id', headerText: 'User ID', resizable: true, type: 'number', filter: true, sort: true },
+  {
+    key: 'id',
+    headerText: 'User ID',
+    resizable: true,
+    type: 'number',
+    filterable: true,
+    sortable: true,
+  },
   {
     key: 'name',
     cellTemplate: (params) => html`<igc-input .value=${params.value}></igc-input>`,
-    filter: true,
-    sort: true,
+    filterable: true,
+    sortable: true,
   },
   {
     key: 'avatar',
@@ -124,8 +131,8 @@ const columns: ColumnConfiguration<User>[] = [
   {
     key: 'satisfaction',
     type: 'number',
-    sort: true,
-    filter: true,
+    sortable: true,
+    filterable: true,
     cellTemplate: (params) =>
       html`<igc-rating
         readonly
@@ -144,7 +151,8 @@ const columns: ColumnConfiguration<User>[] = [
           (choice) => html`<igc-select-item .value=${choice}>${choice}</igc-select-item>`,
         )}</igc-select
       >`,
-    sort: {
+    sortable: true,
+    sortConfiguration: {
       comparer: (a, b) => choices.indexOf(a) - choices.indexOf(b),
     },
   },
@@ -157,8 +165,8 @@ const columns: ColumnConfiguration<User>[] = [
   {
     key: 'subscribed',
     type: 'boolean',
-    sort: true,
-    filter: true,
+    sortable: true,
+    filterable: true,
     cellTemplate: (params) =>
       html`<igc-checkbox
         label-position="before"
@@ -189,7 +197,7 @@ const toggleFiltering = () => {
     (col) => col.key === 'name',
   )!;
 
-  column.filter = !column.filter;
+  column.filterable = !column.filterable;
 };
 
 render(
@@ -214,8 +222,9 @@ render(
             .headerText=${col.headerText}
             ?hidden=${col.hidden}
             ?resizable=${col.resizable}
-            .sort=${col.sort}
-            .filter=${col.filter}
+            ?sortable=${col.sortable}
+            .sortConfiguration=${col.sortConfiguration}
+            ?filterable=${col.filterable}
             .cellTemplate=${col.cellTemplate}
             .headerTemplate=${col.headerTemplate as any}
           ></igc-grid-lite-column>`,
diff --git a/src/components/column.ts b/src/components/column.ts
@@ -6,7 +6,6 @@ import { registerComponent } from '../internal/register.js';
 import { GRID_COLUMN_TAG } from '../internal/tags.js';
 import type {
   BaseColumnConfiguration,
-  ColumnFilterConfiguration,
   ColumnSortConfiguration,
   IgcCellContext,
   IgcHeaderContext,
@@ -62,13 +61,25 @@ export class IgcGridLiteColumn<T extends object>
   @property({ type: Boolean })
   public resizable = false;
 
-  /** Sort configuration for the column. */
-  @property({ attribute: false })
-  public sort?: ColumnSortConfiguration<T> | boolean = false;
+  /** Indicates whether the column is sortable. */
+  @property({ type: Boolean })
+  public sortable = false;
+
+  /** Whether sort operations will be case sensitive. */
+  @property({ type: Boolean, attribute: 'sorting-case-sensitive' })
+  public sortingCaseSensitive = false;
 
-  /** Filter configuration for the column. */
+  /** Sort configuration for the column (e.g., custom comparer). */
   @property({ attribute: false })
-  public filter?: ColumnFilterConfiguration | boolean = false;
+  public sortConfiguration?: ColumnSortConfiguration<T>;
+
+  /** Indicates whether the column is filterable. */
+  @property({ type: Boolean })
+  public filterable = false;
+
+  /** Whether filter operations will be case sensitive. */
+  @property({ type: Boolean, attribute: 'filtering-case-sensitive' })
+  public filteringCaseSensitive = false;
 
   /** Custom header template for the column. */
   @property({ attribute: false })
diff --git a/src/components/filter-row.ts b/src/components/filter-row.ts
@@ -377,7 +377,7 @@ export default class IgcFilterRow<T extends object> extends LitElement {
         ? nothing
         : html`
             <div part="filter-row-preview">
-              ${column.filter ? this.renderFilterState(column) : nothing}
+              ${column.filterable ? this.renderFilterState(column) : nothing}
             </div>
           `
     );
diff --git a/src/components/grid.ts b/src/components/grid.ts
@@ -476,7 +476,7 @@ export class IgcGridLite<T extends object> extends EventEmitterBase<IgcGridLiteE
 
   protected _renderFilterRow() {
     return html`${cache(
-      this._stateController.columns.some((column) => column.filter)
+      this._stateController.columns.some((column) => column.filterable)
         ? html`<igc-filter-row style=${styleMap(this._domController.columnSizes)}></igc-filter-row>`
         : nothing
     )}`;
diff --git a/src/components/header.ts b/src/components/header.ts
@@ -36,7 +36,7 @@ export default class IgcGridLiteHeader<T extends object> extends LitElement {
   }
 
   protected get isSortable() {
-    return Boolean(this.column.sort);
+    return Boolean(this.column.sortable);
   }
 
   protected get resizeController() {
diff --git a/src/controllers/filter.ts b/src/controllers/filter.ts
@@ -71,16 +71,15 @@ export class FilterController<T extends object> implements ReactiveController {
   }
 
   public setActiveColumn(column?: ColumnConfiguration<T>) {
-    if (column?.filter && this.filterRow?.active) {
+    if (column?.filterable && this.filterRow?.active) {
       this.filterRow.column = column;
       this.filterRow.expression = this.getDefaultExpression(column);
       this.host.requestUpdate();
     }
   }
 
   public getDefaultExpression(column: ColumnConfiguration<T>) {
-    const caseSensitive =
-      typeof column.filter === 'boolean' ? false : Boolean(column.filter?.caseSensitive);
+    const caseSensitive = Boolean(column.filteringCaseSensitive);
     const operands = getFilterOperandsFor(column);
     const keys = Object.keys(operands) as Keys<typeof operands>[];
 
diff --git a/src/controllers/sort.ts b/src/controllers/sort.ts
@@ -1,11 +1,6 @@
 import type { ReactiveController } from 'lit';
 import { PIPELINE } from '../internal/constants.js';
-import type {
-  ColumnConfiguration,
-  ColumnSortConfiguration,
-  GridHost,
-  Keys,
-} from '../internal/types.js';
+import type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';
 import { asArray } from '../internal/utils.js';
 import type { SortingDirection, SortingExpression, SortState } from '../operations/sort/types.js';
 
@@ -24,29 +19,29 @@ export class SortController<T extends object> implements ReactiveController {
     return true;
   }
 
-  #resolveSortOptions(options?: boolean | ColumnSortConfiguration<T>) {
+  #resolveSortOptions(column?: ColumnConfiguration<T>) {
     const expr: Pick<SortingExpression<T>, 'caseSensitive' | 'comparer'> = {
       caseSensitive: false,
       comparer: undefined,
     };
 
-    if (!options || typeof options === 'boolean') {
+    if (!column) {
       return expr as Partial<SortingExpression<T>>;
     }
 
     return Object.assign(expr, {
-      caseSensitive: options.caseSensitive,
-      comparer: options.comparer,
+      caseSensitive: column.sortingCaseSensitive,
+      comparer: column.sortConfiguration?.comparer,
     }) as Partial<SortingExpression<T>>;
   }
 
   #createDefaultExpression(key: Keys<T>) {
-    const options = this.host.getColumn(key)?.sort;
+    const column = this.host.getColumn(key);
 
     return {
       key,
       direction: 'ascending',
-      ...this.#resolveSortOptions(options),
+      ...this.#resolveSortOptions(column),
     } as SortingExpression<T>;
   }
 
@@ -93,18 +88,18 @@ export class SortController<T extends object> implements ReactiveController {
     this.#emitSortedEvent(expression);
   }
 
-  public prepareExpression({ key, sort: options }: ColumnConfiguration<T>): SortingExpression<T> {
-    if (this.state.has(key)) {
-      const expr = this.state.get(key)!;
+  public prepareExpression(column: ColumnConfiguration<T>): SortingExpression<T> {
+    if (this.state.has(column.key)) {
+      const expr = this.state.get(column.key)!;
 
       return Object.assign(expr, {
         direction: this.#orderBy(expr.direction),
-        ...this.#resolveSortOptions(options),
+        ...this.#resolveSortOptions(column),
       });
     }
 
     // Initial state
-    return this.#createDefaultExpression(key);
+    return this.#createDefaultExpression(column.key);
   }
 
   public reset(key?: Keys<T>) {
diff --git a/src/index.ts b/src/index.ts
@@ -11,7 +11,6 @@ export type {
   BaseIgcCellContext,
   BasePropertyType,
   ColumnConfiguration,
-  ColumnFilterConfiguration,
   ColumnSortConfiguration,
   DataPipelineConfiguration,
   DataPipelineHook,
diff --git a/src/internal/constants.ts b/src/internal/constants.ts
@@ -18,8 +18,8 @@ export const DEFAULT_COLUMN_CONFIG = Object.freeze<ColumnConfiguration<any>>({
   type: 'string',
   resizable: false,
   hidden: false,
-  sort: false,
-  filter: false,
+  sortable: false,
+  filterable: false,
 });
 export const NAVIGATION_STATE: Map<NavigationState, ActiveNode<any>> = new Map([
   ['previous', SENTINEL_NODE],
diff --git a/src/internal/types.ts b/src/internal/types.ts
@@ -42,10 +42,6 @@ export interface GridLiteSortingOptions {
  * Extended sort configuration for a column.
  */
 export interface BaseColumnSortConfiguration<T, K extends Keys<T> = Keys<T>> {
-  /**
-   * Whether the sort operations will be case sensitive.
-   */
-  caseSensitive?: boolean;
   /**
    * Custom comparer function for sort operations for this column.
    */
@@ -59,16 +55,6 @@ export type ColumnSortConfiguration<T, K extends Keys<T> = Keys<T>> = K extends
   ? BaseColumnSortConfiguration<T, K>
   : never;
 
-/**
- * Extended filter configuration for a column.
- */
-export interface ColumnFilterConfiguration {
-  /**
-   * Whether the filter operations will be case sensitive.
-   */
-  caseSensitive?: boolean;
-}
-
 /** Configuration object for grid columns. */
 export interface BaseColumnConfiguration<T extends object, K extends Keys<T> = Keys<T>> {
   /**
@@ -110,13 +96,25 @@ export interface BaseColumnConfiguration<T extends object, K extends Keys<T> = K
    */
   resizable?: boolean;
   /**
-   * Whether the column can be sorted or not.
+   * Whether the column can be sorted.
    */
-  sort?: ColumnSortConfiguration<T, K> | boolean;
+  sortable?: boolean;
   /**
-   * Whether filter operation can be applied on the column or not.
+   * Whether the sort operations will be case sensitive.
+   */
+  sortingCaseSensitive?: boolean;
+  /**
+   * Sort configuration options for the column (e.g., custom comparer).
+   */
+  sortConfiguration?: ColumnSortConfiguration<T, K>;
+  /**
+   * Whether the column can be filtered.
+   */
+  filterable?: boolean;
+  /**
+   * Whether the filter operations will be case sensitive.
    */
-  filter?: ColumnFilterConfiguration | boolean;
+  filteringCaseSensitive?: boolean;
   /**
    * Header template callback.
    */
diff --git a/src/internal/utils.ts b/src/internal/utils.ts
@@ -73,8 +73,11 @@ export function createColumnConfiguration<T extends object>(
     width: config.width,
     hidden: config.hidden ?? false,
     resizable: config.resizable ?? false,
-    sort: config.sort ?? false,
-    filter: config.filter ?? false,
+    sortable: config.sortable ?? false,
+    sortingCaseSensitive: config.sortingCaseSensitive ?? false,
+    sortConfiguration: config.sortConfiguration,
+    filterable: config.filterable ?? false,
+    filteringCaseSensitive: config.filteringCaseSensitive ?? false,
     headerTemplate: config.headerTemplate,
     cellTemplate: config.cellTemplate,
   } as ColumnConfiguration<T>;
diff --git a/test/data-operation/filter-ui.test.ts b/test/data-operation/filter-ui.test.ts
diff --git a/test/data-operation/sort-ui.test.ts b/test/data-operation/sort-ui.test.ts
diff --git a/test/grid.properties.test.ts b/test/grid.properties.test.ts
diff --git a/test/utils/grid-fixture.ts b/test/utils/grid-fixture.ts

Original file line number	Diff line number	Diff line change
`@@ -377,7 +377,7 @@ export default class IgcFilterRow<T extends object> extends LitElement {`
`377`	`377`	`? nothing`
`378`	`378`	: html`
`379`	`379`	`<div part="filter-row-preview">`
`380`		`- ${column.filter ? this.renderFilterState(column) : nothing}`
	`380`	`+ ${column.filterable ? this.renderFilterState(column) : nothing}`
`381`	`381`	`</div>`
`382`	`382`	`
`383`	`383`	`);`
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ export default class IgcGridLiteHeader<T extends object> extends LitElement {`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`protected get isSortable() {`
`39`		`- return Boolean(this.column.sort);`
	`39`	`+ return Boolean(this.column.sortable);`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`protected get resizeController() {`
Original file line number	Diff line number	Diff line change
`@@ -71,16 +71,15 @@ export class FilterController<T extends object> implements ReactiveController {`
`71`	`71`	`}`
`72`	`72`
`73`	`73`	`public setActiveColumn(column?: ColumnConfiguration<T>) {`
`74`		`- if (column?.filter && this.filterRow?.active) {`
	`74`	`+ if (column?.filterable && this.filterRow?.active) {`
`75`	`75`	`this.filterRow.column = column;`
`76`	`76`	`this.filterRow.expression = this.getDefaultExpression(column);`
`77`	`77`	`this.host.requestUpdate();`
`78`	`78`	`}`
`79`	`79`	`}`
`80`	`80`
`81`	`81`	`public getDefaultExpression(column: ColumnConfiguration<T>) {`
`82`		`- const caseSensitive =`
`83`		`- typeof column.filter === 'boolean' ? false : Boolean(column.filter?.caseSensitive);`
	`82`	`+ const caseSensitive = Boolean(column.filteringCaseSensitive);`
`84`	`83`	`const operands = getFilterOperandsFor(column);`
`85`	`84`	`const keys = Object.keys(operands) as Keys<typeof operands>[];`
`86`	`85`