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()メソッドまたは Grid.Lite.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 エンドポイントを反映して、リモートフィルター操作をモックします。

その他のリソース

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

Grid Lite GitHub