Open Source

Web Components Grid Lite フィルター操作

Grid Lite は、データソースでのフィルター操作をサポートします。データフィルタリングは列ごとに制御されるため、フィルタリング可能な列とフィルタリング不可能な列を設定できます。デフォルトでは、列の filterable プロパティで明示的に構成されない限り、列のフィルタリングは無効になっています。

<igc-grid-lite .data=${data}>
  <igc-grid-lite-column field="price" filterable></igc-grid-lite-column>
</igc-grid-lite>

filteringCaseSensitive プロパティまたは filtering-case-sensitive 属性を使用して、文字列列のフィルター操作で大文字と小文字を区別するかどうかを制御することもできます:

<igc-grid-lite-column 
  field="price" 
  filterable
  filtering-case-sensitive
></igc-grid-lite-column>

フィルターモデル

グリッド内のフィルター操作の構成要素は、次の構造を持つ FilterExpression<T, K> です。

export interface FilterExpression<T, K extends Keys<T> = Keys<T>> {
  /**
   * フィルター操作の対象となる列です。
   */
  key: K;
  /**
   * データ レコードに対して実行されるフィルター関数です。
   */
  condition: FilterOperation<T[K]> | OperandKeys<T[K]>;

  /**
   * フィルター条件関数で使用されるフィルター値です。
   *
   * @remarks
   * 単項条件の場合はオプションです。
   */
  searchTerm?: T[K];
  /**
   * この式がフィルター操作において他の式との関係でどのように解決されるべきか
   * を指定します。
   */
  criteria?: FilterCriteria;
  /**
   * フィルター操作で大文字と小文字を区別するかどうかを指定します。
   *
   * @remarks
   * 指定されていない場合、値は列のフィルター構成 (存在する場合) に基づいて解決されます。
   */
  caseSensitive?: boolean;
}

フィルター API

Grid Lite は、API からフィルター操作を適用する 2 つの方法を提供します。GridLite.filter()/GridLite.clearFilter() メソッドまたは GridLite.filterExpressions プロパティのいずれかを使用します。

filter() メソッドは、単一の式またはフィルター式の配列を受け入れ、それらの式に基づいてグリッドデータをフィルターします。

// 単一
grid.filter({ key: 'firstName', condition: 'contains', searchTerm: 'George' });

// 複数
grid.filter([
  { key: 'firstName', condition: 'startsWith', searchTerm: 'a' },
  { key: 'firstName', condition: 'startsWith', searchTerm: 'g', criteria: 'or' },
]);

clearFilter() メソッドは、その名前が示すように、渡された引数に応じて、単一の列またはグリッドコンポーネント全体のフィルター状態をクリアします。

// `age` 列のフィルター状態をクリアします。
grid.clearFilter('age');

// グリッドのフィルター状態をクリアします。
grid.clearFilter();

初期のフィルター状態

filterExpressions プロパティの動作は、filter() メソッド呼び出しと非常に似ています。これはグリッド内のフィルター状態を制御する宣言的な方法を公開していますが、最も便利なのは、Grid Lite コンポーネントが最初にレンダリングされるときに初期フィルター状態を設定できることです。

たとえば、Lit ベースのサンプルを次に示します。

{
  filterState: FilterExpression<User>[] = [
    { key: 'age', condition: 'greaterThan', searchTerm: 21 },
    /** 単項条件のため `searchTerm` は不要です。 */
    { key: 'active', condition: 'true' },
  ];

  render() {
    return html`<igc-grid-lite .filterExpressions=${filterState}></igc-grid-lite>`
  }
}

このプロパティを使用してコンポーネントの現在のフィルター状態を取得し、アプリケーション内の別の状態に応じて追加の処理を行うこともできます。

const state = grid.filterExpressions;
// 現在のフィルター状態を保存します。
saveUserFilterState(state);

イベント

UI を通じてフィルター操作が実行されると、コンポーネントはカスタム filtering イベントを発行します。detail プロパティは、Grid Lite によって適用されるフィルター式です。イベントはキャンセル可能で、キャンセルすると現在のフィルター操作が停止します。

グリッドが新しいフィルター状態を適用すると、filtered イベントが発生します。対象列のフィルター状態を含み、このイベントはキャンセルできません。

grid.addEventListener('filtering', (event: CustomEvent<GridLiteFilteringEvent<T>>) => { ... });
grid.addEventListener('filtered', (event: CustomEvent<GridLiteFilteredEvent<T>>) => { ... });

リモートフィルター操作

フィルタリングをリモートで実行する必要がある場合、または現在の状態/データをどこかのサーバーに保存する必要がある場合、Grid Lite は、この動作を実装およびカスタマイズできるフックを公開します。

dataPipelineConfiguration プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタムフックを提供できます。コールバックには DataPipelineParams オブジェクトが渡されます。

export type DataPipelineParams<T extends object> = {
  /**
   * グリッドの現在のデータ状態です。
   */
  data: T[];
  /**
   * グリッド コンポーネント自体です。
   */
  grid: GridLite<T>;
  /**
   * 実行されるデータ操作の種類です。
   */
  type: 'sort' | 'filter';
};

grid.dataPipelineConfiguration = { filter: (params: DataPipelineParams<T>) => T[] | Promise<T[]> };

カスタムコールバックは非同期にすることができ、グリッドは解決されるまでコールバックを待機します。

次の例では、コンポーネントのフィルター状態に基づいて生成される REST エンドポイントを反映して、リモートフィルター操作をモックしています。

API リファレンス

IgcGridLite
IgcGridLiteColumn

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

Grid Lite GitHub