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

dondenone es el estado inicial de los datos, es decir, sin que la cuadrícula aplique ordenación.

Sorting Indicators

Cuando se habilita la ordenación por varias columnas, las cabeceras de columna muestran un indicador de ordenación, que es un número que representa el orden en que se aplicaron las operaciones de ordenación.

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

Sort Model

El bloque de construcción para las operaciones de ordenación en la Grid Lite es aquelSortingExpression<T>, que tiene las siguientes propiedades:

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

La cuadrícula consume estas expresiones para sus métodos y configuración de la API de ordenación y las produce para eventos y su estado de ordenamiento cuando un usuario final interactúa con el componente. Consulta más abajo para más información.

Sort API

El Grid Lite expone dos enfoques principales para aplicar operaciones de ordenación desde su API. Ya sea a través de lossort() métodosclearSort() o a través de lasortingExpressions propiedad.

Elsort() método acepta una sola expresión o un array de expresiones de ordenación y luego ordena los datos de la cuadrícula basándose en esas expresiones.

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

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

ElclearSort() método, como su nombre indica, limpia el estado de tipo de una sola columna o de todo el componente de la cuadrícula, dependiendo de los argumentos aprobados.

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

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

Initial Sorting State

LasortingExpressions propiedad es muy similar en comportamiento a lasort() llamada al método. Expone una forma declarativa de controlar el estado de ordenación en la cuadrícula, pero la propiedad más útil es la capacidad de establecer el estado inicial de ordenación cuando se renderiza por primera vez la Grid Lite.

Por ejemplo, aquí tienes una muestra basada en 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>`
  }
}

Se puede usar para obtener el estado actual de ordenación del componente y hacer procesamiento adicional dependiendo de otro estado en tu aplicación.

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

Eventos

Cuando se realiza una operación de ordenamiento a través de la interfaz, el componente emite un evento personalizadosorting. Ladetail propiedad es la expresión de ordenación que aplicará el Grid Lite. El evento es cancelable y, si se cancela, detendrá la operación de ordenamiento actual.

Después de que la cuadrícula aplica el nuevo estado de ordenación, se emite unsorted evento. Contiene la expresión que se usó en la última operación de ordenamiento y no es cancelable.

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

En el siguiente ejemplo, cuando intentes ordenar las columnas Nombre y Valoración, la operación se cancelará. Mira el registro de eventos a continuación para verlo en acción.

Remote sort operations

En casos en los que la ordenación debe hacerse remotamente o quieres guardar el estado/datos actuales en algún servidor, la Grid Lite muestra un gancho donde puedes implementar y personalizar este comportamiento.

Usando ladataPipelineConfiguration propiedad, puedes proporcionar un hook personalizado que se llamará cada vez que se ejecute una operación de ordenación. La callback se pasa unDataPipelineParams 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[]> };

La callback personalizada puede ser asincrónica porque la cuadrícula esperará hasta que se resuelva.

El siguiente ejemplo simula la operación de ordenación remota, reflejando el endpoint REST generado en función del estado de ordenación del componente.

Additional Resources

• Column Configuration
• Filtración

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Grid Lite GitHub