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

ondenone é o estado inicial dos dados, ou seja, sem ordenação aplicada pela grade.

Sorting Indicators

Quando a ordenação por múltiplas colunas é ativada, os cabeçalhos das colunas exibirão um indicador de ordenação, que é um número que representa a ordem em que as operações de ordenação foram aplicadas.

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

Sort Model

O bloco de construção para operações de ordenação no Grid Lite é oSortingExpression<T> que possui as seguintes propriedades:

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

A grade consome essas expressões para seus métodos e configuração da API de sortação e as produz para eventos e seu estado de ordenação quando um usuário final interage com o componente. Veja abaixo para informações adicionais.

Sort API

O Grid Lite expõe duas abordagens principais para aplicar operações de ordenação a partir de sua API. Seja pelossort() métodosclearSort() ou pela propriedadesortingExpressions.

Osort() método aceita uma única expressão ou um array de expressões de ordenação e então ordena os dados da grade com base nessas expressões.

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

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

OclearSort() método, como o nome indica, limpa o estado de tipo de uma única coluna ou de todo o componente da grade, dependendo dos argumentos aprovados.

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

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

Initial Sorting State

AsortingExpressions propriedade é muito semelhante em comportamento àsort() chamada de método. Ele expõe uma forma declarativa de controlar o estado de ordenação na grade, mas a propriedade mais útil é a capacidade de definir o estado inicial de ordenação quando o Grid Lite é renderizado pela primeira vez.

Por exemplo, aqui está uma amostra baseada em literatura:

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

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

Ele pode ser usado para obter o estado atual de sortagem do componente e fazer processamento adicional dependendo de outro estado na sua aplicação.

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

Eventos

Quando uma operação de ordenação é realizada pela interface, o componente emite um evento personalizadosorting. Adetail propriedade é a expressão de ordenação que será aplicada pelo Grid Lite. O evento pode ser cancelado e, se cancelado, interrompe a operação de ordenação atual.

Após a grade aplicar o novo estado de ordenação, umsorted evento é emitido. Ele contém a expressão usada na última operação de ordenação e não é cancelável.

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

No exemplo a seguir, quando você tentar ordenar as colunas Nome e Classificação, a operação será cancelada. Assista ao registro de eventos abaixo para ver isso em ação.

Remote sort operations

Em casos em que a ordenação precisa ser feita remotamente ou você quer salvar o estado/dados atuais em algum servidor, o Grid Lite expõe um hook onde você pode implementar e personalizar esse comportamento.

Usando adataPipelineConfiguration propriedade, você pode fornecer um hook personalizado que será chamado toda vez que uma operação de ordenação estiver prestes a ser executada. O callback recebe umDataPipelineParams objeto.

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[]> };

O callback personalizado pode ser assíncrono, pois a grade espera até que resolva.

O exemplo a seguir simula a operação de ordenação remota, refletindo o endpoint REST gerado com base no estado de ordenação do componente.

Additional Resources

• Column Configuration
• Filtragem

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Grid Lite GitHub