Open Source

ソート操作

Grid Lite はデータソースに対してソート操作をサポートします。ソートは列単位で制御され、ソート可能な列とソート不可の列を設定できます。グリッド自体も特定のソート動作を制御します。デフォルトでは、列の sortable プロパティで明示的に設定されない限り、列のソートは無効です。

return (
  <IgrGridLite data={data}>
    <IgrGridLiteColumn field="price" sortable></IgrGridLiteColumn>
  </IgrGridLite>
);

sortingCaseSensitive プロパティを使用して、文字列列のソート操作で大文字と小文字を区別するかどうかを制御することもできます。

return (
  <IgrGridLite data={data}>
    <IgrGridLiteColumn 
      field="name" 
      sortable
      sortingCaseSensitive
    ></IgrGridLiteColumn>
  </IgrGridLite>
);

カスタム比較ロジックの場合は、comparer 関数を使用して sortConfiguration プロパティを設定します:

/**
 * この列のソート操作に使用されるカスタム比較関数を指定します。
 * 次のサンプルでは、`name` の値をその長さに基づいて比較します。
 */
return (
  <IgrGridLite data={data}>
    <IgrGridLiteColumn 
      field="name" 
      sortable
      sortConfiguration={{
        comparer: (a: string, b: string) => a.length - b.length
      }}
    ></IgrGridLiteColumn>
  </IgrGridLite>
);

単一および複数列ソート

Grid Lite は単一および複数列ソートの両方をサポートします。複数列ソートはデフォルトで有効で、グリッドの sortingOptions プロパティを通じて設定可能です。mode プロパティは、値として 'single' または 'multiple' を受け入れます。

// 単一列のソートを有効にします
gridRef.current.sortingOptions = { mode: 'single' };

// または JSX 内で直接指定します
<IgrGridLite sortingOptions={{ mode: 'single' }}/>

単一/複数列ソートの動作は、エンドユーザーが Grid Lite を操作する方法を制御します。単一ソートが有効な場合でも、API を介した複数の式によるソートは引き続き機能します。

3 状態ソート

Grid Lite は 3 状態ソートをサポートしており、常に有効になっています。エンドユーザーがソート可能な列ヘッダーをクリックすると、ソート方向が次の順序で切り替わります:

ascending -> descending -> none -> ascending

none はデータの初期状態、つまりグリッドによるソートが適用されていない状態です。

ソートインジケーター

複数列ソートが有効な場合、列ヘッダーにはソートインジケーターが表示されます。これはソート操作が適用された順序を示す番号です。

次のサンプルは、グリッドの sortingOptions プロパティと、それがグリッドのソート動作を制御する方法を示しています。

ソートモデル

Grid Lite におけるソート操作の基本単位は SortingExpression<T> で、以下のプロパティを持ちます:

type SortingExpression<T> = {
  /**
   * ソート操作の対象列の `key`。
   */
  key: keyof T;
  /**
   * 操作のソート方向。
   */
  direction: 'ascending' | 'descending' | 'none';
  /**
   * 大文字と小文字を区別して操作するかどうかを指定します。デフォルトの string タイプに適用されます。
   * 明示的に渡されていない場合、該当する列のソート設定の値が使用されます。
   */
  caseSensitive?: boolean;
  /**
   * 操作に対してカスタム比較関数を指定します。
   * 該当する列のソート設定が適用可能な場合、その値が使用されます。
   */
  comparer?: SortComparer<T, T[keyof T]>;
};

グリッドはこれらの式をソート API メソッドや構成で使用するほか、エンドユーザーがコンポーネントを操作したときには、イベントやソート状態のためにこれらの式を生成します。詳細は以下を参照してください。

ソート API

Grid Lite は、ソート操作を API から適用するために 2 つの方法を提供します。sort()/clearSort() メソッドを使用するか、sortingExpressions プロパティを使用します。

sort() メソッドは、単一式または複数のソート式の配列を受け取り、それらに基づいてグリッドデータをソートします。

// 単一
gridRef.current.sort({ key: 'price', direction: 'descending' });

// 複数
gridRef.current.sort([
  { key: 'price', direction: 'descending' },
  { key: 'name', direction: 'descending' },
]);

clearSort() メソッドは、その名の通り、渡された引数に応じて、単一列またはグリッドコンポーネント全体のソート状態をクリアします。

// `price` 列のソート状態をクリアします。
gridRef.current.clearSort('price');

// グリッドのソート状態をクリアします。
gridRef.current.clearSort();

初期のソート状態

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

例:

const sortState: SortingExpression<Products>[] = [
  { key: 'price', direction: 'descending' },
  { key: 'name', direction: 'ascending', caseSensitive: true },
];

return (
  <IgrGridLite sortingExpressions={sortState} />
);

これを使用すると、コンポーネントの現在のソート状態を取得し、アプリケーション内の別の状態に応じて追加の処理を実行できます。

const state = gridRef.current.sortingExpressions;
// 現在のソート状態を保存します
saveUserSortState(state);

イベント

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

グリッドが新しいソート状態を適用した後、sorted イベントが発行されます。このイベントには最後のソート操作で使用された式が含まれ、キャンセルはできません。

gridRef.current.addEventListener('sorting', (event: CustomEvent<SortingExpression<T>>) => { ... });
gridRef.current.addEventListener('sorted', (event: CustomEvent<SortingExpression<T>>) => { ... });

次のサンプルでは、Name と Rating 列のソートを試みると操作がキャンセルされます。下記のイベントログで動作を確認してください。

リモートソート操作

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

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

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

gridRef.current.dataPipelineConfiguration = { sort: (params: DataPipelineParams<T>) => T[] | Promise<T[]> };

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

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

その他のリソース

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

Grid Lite GitHub