Is there any way to implement sorting and searching data from client side in AG-Grid?

Question

I want to show data in grid from API. so we have created API is in .NET Core C#. For showing up data we are using AG grid in Angular.

API is created with pagination in server side. Now I want to implement sorting and searching from client side in AG Grid angular.

Answer 1

It's not the best approach to use client side search and sorting when you have a server side pagination.

What you will get is that you will sort or search only the data you currently have in the page, leaving out all the other rows.

Still, you can enable client side sorting, adding the sortable parameter to your column defs:

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */>
</ag-grid-angular>

// enable sorting on 'name' and 'age' columns only
this.columnDefs = [
    { field: 'name', sortable: true },
    { field: 'age', sortable: true },
    { field: 'address' },
];

And you can enable searching using AG Grid Quick Filter:

<input
  type="text"
  id="filter-text-box"
  placeholder="Filter..."
  (input)="onFilterTextBoxChanged()"
/>

private gridApi!: GridApi;

onFilterTextBoxChanged() {
    this.gridApi.setQuickFilter(
      (document.getElementById('filter-text-box') as HTMLInputElement).value
    );
}

Answer 2

if you want server-side pagination, you must use sorting and filter server side.