refactor(columns): sorting & filtering properties for case sensitivity

Author: damyanpetev

CHANGELOG.md

@@ -7,7 +7,7 @@ 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.
 
-## [Unreleased]
+## [0.1.0] - 2025-12-10
 
 ### Changed
 
@@ -47,8 +47,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   ```
 
 - **BREAKING:** Column `sort` and `filter` properties have been replaced with separate boolean and configuration properties:
-  - `sort` → `sortable` (boolean) + `sortConfiguration` (object with `caseSensitive` and `comparer` options)
-  - `filter` → `filterable` (boolean) + `filterConfiguration` (object with `caseSensitive` option)
+  - `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`.

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,
@@ -66,17 +65,21 @@ export class IgcGridLiteColumn<T extends object>
   @property({ type: Boolean })
   public sortable = false;
 
-  /** Sort configuration for the column. */
+  /** Whether sort operations will be case sensitive. */
+  @property({ type: Boolean, attribute: 'sorting-case-sensitive' })
+  public sortingCaseSensitive = false;
+
+  /** Sort configuration for the column (e.g., custom comparer). */
   @property({ attribute: false })
   public sortConfiguration?: ColumnSortConfiguration<T>;
 
   /** Indicates whether the column is filterable. */
   @property({ type: Boolean })
   public filterable = false;
 
-  /** Filter configuration for the column. */
-  @property({ attribute: false })
-  public filterConfiguration?: ColumnFilterConfiguration;
+  /** 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 })

src/controllers/filter.ts

@@ -79,7 +79,7 @@ export class FilterController<T extends object> implements ReactiveController {
   }
 
   public getDefaultExpression(column: ColumnConfiguration<T>) {
-    const caseSensitive = Boolean(column.filterConfiguration?.caseSensitive);
+    const caseSensitive = Boolean(column.filteringCaseSensitive);
     const operands = getFilterOperandsFor(column);
     const keys = Object.keys(operands) as Keys<typeof operands>[];
 

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?: ColumnSortConfiguration<T>) {
+  #resolveSortOptions(column?: ColumnConfiguration<T>) {
     const expr: Pick<SortingExpression<T>, 'caseSensitive' | 'comparer'> = {
       caseSensitive: false,
       comparer: undefined,
     };
 
-    if (!options) {
+    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)?.sortConfiguration;
+    const column = this.host.getColumn(key);
 
     return {
       key,
       direction: 'ascending',
-      ...this.#resolveSortOptions(options),
+      ...this.#resolveSortOptions(column),
     } as SortingExpression<T>;
   }
 
@@ -93,21 +88,18 @@ export class SortController<T extends object> implements ReactiveController {
     this.#emitSortedEvent(expression);
   }
 
-  public prepareExpression({
-    key,
-    sortConfiguration,
-  }: 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(sortConfiguration),
+        ...this.#resolveSortOptions(column),
       });
     }
 
     // Initial state
-    return this.#createDefaultExpression(key);
+    return this.#createDefaultExpression(column.key);
   }
 
   public reset(key?: Keys<T>) {

src/index.ts

@@ -11,7 +11,6 @@ export type {
   BaseIgcCellContext,
   BasePropertyType,
   ColumnConfiguration,
-  ColumnFilterConfiguration,
   ColumnSortConfiguration,
   DataPipelineConfiguration,
   DataPipelineHook,

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>> {
   /**
@@ -114,17 +100,21 @@ export interface BaseColumnConfiguration<T extends object, K extends Keys<T> = K
    */
   sortable?: boolean;
   /**
-   * Sort configuration options for the column.
+   * 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;
   /**
-   * Filter configuration options for the column.
+   * Whether the filter operations will be case sensitive.
    */
-  filterConfiguration?: ColumnFilterConfiguration;
+  filteringCaseSensitive?: boolean;
   /**
    * Header template callback.
    */

src/internal/utils.ts

@@ -74,9 +74,10 @@ export function createColumnConfiguration<T extends object>(
     hidden: config.hidden ?? false,
     resizable: config.resizable ?? false,
     sortable: config.sortable ?? false,
+    sortingCaseSensitive: config.sortingCaseSensitive ?? false,
     sortConfiguration: config.sortConfiguration,
     filterable: config.filterable ?? false,
-    filterConfiguration: config.filterConfiguration,
+    filteringCaseSensitive: config.filteringCaseSensitive ?? false,
     headerTemplate: config.headerTemplate,
     cellTemplate: config.cellTemplate,
   } as ColumnConfiguration<T>;

test/data-operation/filter-ui.test.ts

@@ -269,7 +269,7 @@ describe('Grid UI filter', () => {
       await TDD.updateColumns({
         key: 'name',
         filterable: true,
-        filterConfiguration: { caseSensitive: true },
+        filteringCaseSensitive: true,
       });
       await TDD.activateFilterRow('name');
       await TDD.filterByInput('a');
@@ -377,7 +377,7 @@ describe('Grid UI filter', () => {
       await TDD.updateColumns({
         key: 'name',
         filterable: true,
-        filterConfiguration: { caseSensitive: true },
+        filteringCaseSensitive: true,
       });
       await TDD.filter({ key: 'name', condition: 'contains', searchTerm: 'D' });
 
@@ -388,7 +388,7 @@ describe('Grid UI filter', () => {
       await TDD.updateColumns({
         key: 'name',
         filterable: true,
-        filterConfiguration: { caseSensitive: true },
+        filteringCaseSensitive: true,
       });
       await TDD.filter({
         key: 'name',

test/utils/grid-fixture.ts

@@ -62,8 +62,9 @@ export default class GridTestFixture<T extends object> {
             html`<igc-grid-lite-column
               .key=${col.key}
               ?filterable=${col.filterable}
-              .filterConfiguration=${col.filterConfiguration}
+              ?filtering-case-sensitive=${col.filteringCaseSensitive}
               ?sortable=${col.sortable}
+              ?sorting-case-sensitive=${col.sortingCaseSensitive}
               .sortConfiguration=${col.sortConfiguration}
               .width=${col.width}
               .headerText=${col.headerText}