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

Author: damyanpetev

CHANGELOG.md

@@ -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}