# Creating Views with CollectionView

Learn how to create data View in Wijmo applications using CollectionView in this documentation topic

## Content

The __CollectionView__ class represents a view for grouping, sorting, filtering, and navigating data collections.

## Sorting

Sorting is controlled through __SortDescriptions__. A SortDescription, is an object with only 2 properties: 

* _property_ - string name of property to sort on from collection
* _ascending_ - boolean value determing if a sort is in ascending or descending order

Use the __CollectionView.sortDescriptions__ property to specify which fields should be sorted on and in which direction.

##### Example

The __SortDescription__ created below creates a sort description object that will sort the _country_ property in _ascending_ order.

```javascript
import * as wijmo from '@mescius/wijmo';

let cv = new wijmo.CollectionView(data);

let sd = new wijmo.SortDescription("country", true);

// add the SortDescription to the collectionview's sortDescriptions array property.
cv.sortDescriptions.push(sd);
```

> The sorting takes place when the __CollectionView__'s __sortDescriptions__ array is updated.

### International Sort

The __CollectionView__ class uses the __Intl.Collator__ class to compare strings for sorting. This class handles lower/upper case as well as diacritics (accents) often present in international applications.

By default, the __CollectionView__ class uses the default __Intl.Collator__ for comparing strings, and JavaScript to compare all other objects. You can override this by setting the CollectionView's __sortComparer__ property to a function that compares two values using whatever logic you want.

Check out the sample in the [Demos](/wijmo/demos/Core/CollectionView/CreatingViews/Sorting/InternationalSort/) that shows the different behaviors.

### Stable Sort

The __CollectionView__ class has a __stableSort__ property that allows you to keep the original sequence of items when sorting by any fields in the data objects.

The __stableSort__ property is set to _false_ by default because it does have a performance cost, and therefore should be used only when needed.

Check out the [__Stable Sort__](/wijmo/demos/Core/CollectionView/CreatingViews/Sorting/StableSort/) demo for an example.

## Filtering

Use the __CollectionView.filter__ property to specify a filter function that defines which items should be included in the view.

##### Example
```javascript
let view = new wijmo.CollectionView(getData());

view.filter = (item) => {
    // only return items with country value = 'US'
    return item.country == 'US';
};
```
### Chaining

The __CollectionView.filter__ property allows you to specify one filtering function for the collection.

In some cases, you may want to use two or more independent filter functions. For example, you may want to apply a filter on the incoming data and let the __FlexGridFilter__ apply a second level of filtering to the data.

To achieve this, you can chain multiple __CollectionView__ objects so the output of one collection serves as input for the next.


Check out the [__Chaining Demo__](/wijmo/demos/Core/CollectionView/CreatingViews/Filtering/Chaining/) for an example of this implementation.

## Grouping

Use the __CollectionView.groupDescriptions__ property to specify which fields should be grouped. First, create a __PropertyGroupDescription__ object and then add it to the __groupDescriptions__ array.

##### Example
```javascript
let cv = new wijmo.CollectionView(data);

let gd = new wijmo.PropertyGroupDescription("country");

// add the SortDescription to the collectionview's sortDescriptions array property.
cv.groupDescriptions.push(gd);
```

![FlexGrid Grouping](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/wijmo/grouping-flexgrid.png)

### Custom Groups

The __CollectionView__ class allows you to group items based on their content. In most cases, the content is the value of a property (e.g. Product, Color, Country), but you can also group by calculated values by overriding the GroupDescription's __groupNameFromItem__ method.

Custom grouping can be useful to group data into value bins (e.g. high, low, medium), date ranges (e.g. this week, this year), etc.

This sample demonstrates this by creating a __PropertyGroupDescription__ that returns the first letter of the name. This groups the data by initial:


## Paging

Paging is a common technique for dealing with large collections of data.

### Client-Side Paging
The __CollectionView__ class supports client-side paging by default, so you can generate grids and tables that contain only a reasonable amount of data. To enable paging, simply set the __pageSize__ property 

##### Example
```javascript
let view = new wijmo.CollectionView(getData(), {
        pageSize: 6,
        pageChanged: updateCurrentPage
    });
```

There are also several methods to load pages. Use these methods to control navigation through pages:

*  __moveToFirstPage()__
*  __moveToLastPage()__
*  __moveToPreviousPage()__
*  __moveToNextPage()__
*  __moveToPage(pageNumber)__

### Server-Side Paging
Server-side paging consists of making requests that bring in one page of data at a time. The actual commands used to retrieve the data depend on the API exposed by the server.

Wijmo includes an __ODataCollectionView__ class that implements server-based paging (as well as sorting and filtering) for OData data sources.

Check out the [Paging Demo](/wijmo/demos/Core/CollectionView/CreatingViews/Paging/) for an example of both approaches.