Sort operations

The Grid Lite supports sorting operations on its data source. Data sorting is controlled on per-column level, allowing you to have sortable and non-sortable columns, while the grid itself controls certain sort behaviors. By default, sorting on a column is disabled unless explicitly configured with the sortable property of the column.

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

You can also control whether the sort operations for string columns should be case sensitive by using the sortingCaseSensitive property or sorting-case-sensitive attribute.

<igc-grid-lite-column 
  field="name" 
  sortable
  sorting-case-sensitive
></igc-grid-lite-column>

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

const column = document.querySelector('igc-grid-lite-column[field="name"]');
column.sortConfiguration = {
  /**
   * Custom comparer function which will be used for sort operations for this column.
   * In the following sample, we compare the `name` values based on their length.
   */
  comparer: (a, b) => a.length - b.length
};

Single and multi-sorting

The Grid Lite supports both single and multi-column sorting. Multi-column is enabled by default and can be configured through the sortingOptions property of the grid. The mode property accepts 'single' or 'multiple' as values.

// Enable single-column sorting
grid.sortingOptions = { mode: 'single' };

[!NOTE] The single/multi-column sorting behavior controls how end-users interact with the Grid Lite. Sorting through the API with multiple expression will still work when single sorting is enabled.

Tri-state sorting

The Grid Lite supports tri-state sorting and it is always enabled. End-users will cycle through the following direction states when clicking on sortable column headers:

ascending -> descending -> none -> ascending

여기서none는 데이터의 초기 상태, 즉 그리드에서 정렬이 적용되지 않은 상태입니다.

Sorting Indicators

다열 정렬이 활성화되면 열 헤더에 정렬 표시기가 표시되는데, 이는 정렬 연산이 적용된 순서를 나타내는 숫자입니다.

The following sample shows the grid sortingOptions property and how it controls the grid sorting behavior.

Sort Model

Grid Lite에서 정렬 연산의 기본 구성 요소는SortingExpression<T> 다음과 같은 속성을 가지며,

type SortingExpression<T> = {
  /**
   * The `key` of the target column for the sort operation.
   */
  key: keyof T;
  /**
   * The sort direction for the operation.
   */
  direction: 'ascending' | 'descending' | 'none';
  /**
   * Should the operation be case sensitive. Applies to the default string type.
   * If not explicitly passed, it will use the value from the target column sort configuration if applicable.
   */
  caseSensitive?: boolean;
  /**
   * Specifies a custom comparer function for the operation.
   * Will use the value from the target column sort configuration if applicable.
   */
  comparer?: SortComparer<T, T[keyof T]>;
};

그리드는 정렬 API 메서드와 구성에 이 표현식들을 소비하고, 최종 사용자가 컴포넌트와 상호작용할 때 이벤트와 정렬 상태를 생성합니다. 추가 정보는 아래를 참조하세요.

Sort API

Grid Lite는 API에서 정렬 작업을 적용하기 위한 두 가지 주요 접근법을 제공합니다. 방법이나sort() 부동산을clearSort() 통sortingExpressions 해서든 말이죠.

이 메서드는sort() 단일 표현식 또는 정렬 표현식 배열을 받고, 그 표현식들을 바탕으로 그리드 데이터를 정렬합니다.

// Single
grid.sort({ key: 'price', direction: 'descending' });

// Multiple
grid.sort([
  { key: 'price', direction: 'descending' },
  { key: 'name', direction: 'descending' },
]);

clearSort()이 메서드는 이름 그대로 전달된 인자에 따라 단일 열의 정렬 상태 또는 전체 그리드 구성 요소의 정렬 상태를 지웁니다.

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

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

Initial Sorting State

이 속성은sortingExpressions 메서드 호출과sort() 매우 유사한 동작을 가지고 있습니다. 이 기능은 그리드에서 정렬 상태를 선언적으로 제어하는 방법을 제공하지만, 가장 유용한 기능은 Grid Lite가 처음 렌더링될 때 초기 정렬 상태를 설정할 수 있는 기능입니다.

예를 들어, 다음은 문학 기반 샘플입니다:

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

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

컴포넌트의 현재 정렬 상태를 얻고, 애플리케이션 내 다른 상태에 따라 추가 처리를 할 수 있습니다.

const state = grid.sortingExpressions;
// Save the current sort state
saveUserSortState(state);

이벤트

UI를 통해 정렬 작업이 수행되면, 컴포넌트는 맞춤형sorting 이벤트를 생성합니다. 속성은detail Grid Lite에서 적용될 정렬 표현식입니다. 이벤트는 취소 가능하며, 취소되면 현재 정렬 작업이 중단됩니다.

그리드가 새로운 정렬 상태를 적용하면 이벤트가sorted 발생한다. 이 표현식은 마지막 정렬 연산에서 사용된 표현식을 포함하며, 취소할 수 없습니다.

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

다음 샘플에서는 이름과 등급 열을 정렬하려고 하면 연산이 취소됩니다. 아래 이벤트 로그를 확인하시면 실제 운영 상황을 확인할 수 있습니다.

Remote sort operations

정렬이 원격으로 이루어져야 하거나 현재 상태/데이터를 서버에 저장하고 싶은 경우, Grid Lite는 이 동작을 구현하고 맞춤화할 수 있는 훅을 제공합니다.

이dataPipelineConfiguration 속성을 사용하면 정렬 연산이 실행될 때마다 호출되는 맞춤형 훅을 제공할 수 있습니다. 콜백은 객체를DataPipelineParams 전달합니다.

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';
};

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

커스텀 콜백은 비동기일 수 있는데, 그리드가 해결될 때까지 기다립니다.

다음 예시는 컴포넌트의 정렬 상태를 기반으로 생성된 REST 엔드포인트를 반영하여 원격 정렬 작업을 모방합니다.

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

Grid Lite GitHub