Client Side row model in ag-Grid with angular, Sorting and Filtering in ag-Grid

Hello folks, this is my 2nd article over ag-Grid. In this article we will show you

• ✔ How to use Client side row model to show the data in tabular form.

• ✔ How to do sorting and searching.

If you do not know about the models in ag-Grid then click here to check my article on it where we learn about row models and which model is good for our application.

Prerequisites: 

• Basic Knowledge of Angular 2 or higher
• Visual Studio Code
• Set up of angular environment.

Here i am working on Angular Version 10 project.

Now follow the below steps :-

Step 1: Install the ag-Grid package.

Use the below command to install the package.

npm install --save ag-grid-community ag-grid-angular

Step 2: Add the ag-Grid angular module.

Go to src/app/app.module.ts file and then add module in it as show in below snapshot.

AgGridModule.withComponents([])

Step 3: Add ag-Grid style files.

Go to Style.css file and add below files in it. (Here i am using CSS)

@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";

@import "../node_modules/ag-grid-community/dist/styles/ag-theme-alpine.css";

Step 4: Create a service to fetch the data. (optional)

Step 4.1: Here i am creating a new service to fetch the data. if you have a service for the data then you can skip this 4th step.

ng g s FOLDER_NAME/SERVICE_NAME

Step 4.2: Let's create a function to fetch the data. Here we are fetching the data from remote server.

Step 4.3: Add Http module in app.component.ts file.

HttpClientModule

Step 5: Now configure the grid.

Go to .TS file of the component in which you want to apply grid. Here i am going to app.component.ts file and the below code as show in snapshot.

columnDefs = [

    { headerName: 'Athlete', field: 'athlete' },

    { headerName: 'age', field: 'age' },

    { headerName: 'Country', field: 'country' }

  ];

rowData: any;

  this.dataService.getData().subscribe(data => {

      this.rowData = data;

    });

columnDefs and rowData two essential configuration properties of the grid.

Step 6: Add ag-Grid component definition.

Go to .HTML file of the component and add below code.

<ag-grid-angular

    style="height: 500px;"

    class="ag-theme-alpine"

    [rowData]="rowData"

    [columnDefs]="columnDefs"

    >

</ag-grid-angular>

After follow all the above steps, Now run the project and check.It would look like this.

Enable Sorting and Searching :

Enabling sorting and searching is actually quite simple in client row model of ag-Grid. We have to just set the sortable and filter property to true.

Now check, we can do sorting and searching.

For more information on ag-Grid, check this link : https://www.ag-grid.com/angular-grid/

Hope it's helps you to learn about it.

Keep learning , Keep Growing, Keep sharing !!!