ソート操作

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

return (
  <igc-grid-lite data={data}>
    <igc-grid-lite-column field="price" sortable></igc-grid-lite-column>
  </igc-grid-lite>
);

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

return (
  <igc-grid-lite data={data}>
    <igc-grid-lite-column 
      field="name" 
      sortable
      sorting-case-sensitive
    ></igc-grid-lite-column>
  </igc-grid-lite>
);

For custom comparison logic, set the sortConfiguration property with a comparer function:

<IgbGridLiteColumn 
    Field="Name" 
    Sortable="true"
    SortingCaseSensitive="true" />

単一および複数列ソート

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

// 単一列のソートを有効にします
grid.SortingOptions = new IgbGridLiteSortingOptions { Mode = GridLiteSortingMode.Single };

3 状態ソート

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

ascending -> descending -> none -> ascending

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

ソート インジケーター

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

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

ソート モデル

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

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

The grid consumes these expressions for its sort API methods and configuration and produces them for events and its sorting state when an end-user interacts with the component. See below for additional information.

ソート API

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

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

// 単一
await grid.Sort(new IgbGridLiteSortingExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending });

// 複数
await grid.Sort(new IgbGridLiteSortingExpression[]
{
    new IgbGridLiteSortingExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending },
    new IgbGridLiteSortingExpression { Key = "Name", Direction = GridLiteSortingDirection.Descending }
});

clearSort() メソッドは、その名の通り、単一列またはグリッド全体のソート状態をクリアします。引数に応じて挙動が変わります。

// Clear the sort state for the `price` column.
gridRef.current.clearSort('price');

// Clear the sort state of the grid.
gridRef.current.clearSort();

初期のソート状態

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

例:

private IgbGridLiteSortingExpression[] sortState = new[]
{
    new IgbGridLiteSortingExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending },
    new IgbGridLiteSortingExpression { Key = "Name", Direction = GridLiteSortingDirection.Ascending, CaseSensitive = true }
};

<IgbGridLite SortingExpressions="sortState" />

It can be used to get the current sort state of the component and do additional processing depending on another state in your application.

const state = gridRef.current.sortingExpressions;
// Save the current sort state
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 は、この動作を実装およびカスタマイズできるフックを公開します。

Using the dataPipelineConfiguration property, you can provide a custom hook which will be called each time a sort operation is about to run. The callback is passed a IgrDataPipelineParams object.

export type DataPipelineParams<T extends object> = {
  /**
   * The current data state of the grid.
   */
  data: T[];
  /**
   * The grid component itself.
   */
  grid: IgcGridLite<T>;
  /**
   * The type of data operation being performed.
   */
  type: 'sort' | 'filter';
};

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

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

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

その他のリソース

• 列の構成
• フィルタリング

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

• Grid Lite GitHub