Enable sorting on the grid.
Enable filters on the grid.
Enable paging on the grid.
For more information on the controls used in this lesson, see Data Grid.
Setting up the Project
You may download the starter project for this lesson by clicking here. (You can also download the final project by clicking here.)
After downloading the project, navigate to the directory and run the commands below:
Execute the npm install command to install all dependencies, then execute the npm start command to run the Angular application. If the project setup is correct, you will have a running Angular application as shown in the image below.
Scroll to the bottom of the application to find the Ignite UI Grid. At the end of the lesson, this grid will be configured with sorting, paging, and filtering features.
Step 1 Enable Sorting
To enable local sorting, create an object with the following properties and add it to the features property of the grid option:
name : set to Sorting
type : set to local
To do this, in the App folder, open the file grid.component.ts. Just after the getData() function, add the getGridFeatures() function shown below:
Next, add sorting features to the grid options. In the this.gridOptions, add a new property called feature and set its value to this.getGridFeatures(). The updated ngOnInit() function in the grid.component.ts file will look like the code shown below:
Navigate to the application and scroll down to the bottom of the page to find the grid added as shown below:
Click on any of the columns to find that the grid is sorted for that particular column, as shown in the image above. In addition, you will notice that sorted column headers have sorting indicators applied, to distinguish sortable columns from the rest of the columns in the grid. Ignite UI also supports sorting on multiple columns.
To enable local paging, create an object with the following properties and add it to the features property of the grid option:
name : set to Paging
type : set to local
pageSize : 5
You can also show or hide the size drop-down, or show or hide paging buttons, etc. The paging feature object would look like this:
Add the above object in the features object array. To do that, open the file grid.component.ts and modify getGridFeatures() function such that it returns both paging and sorting features. After adding paging feature, getGridFeatures() function will look like below:
Add the above object in the features object array. To do that, open the file grid.component.ts and modify getGridFeatures() function such that it returns paging, sorting, and filtering features. After the filtering feature is added, getGridFeatures() function will look like this: