We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to get dataSource after filtering, sorting

Hi Syncfusion team,
I'm using Grid component and I have a need is get all data grid after filtering, sorting.


Expected: get all data showed on Grid (image)
Link: https://stackblitz.com/edit/react-ta71qb?file=index.js
Are there any way to reach my requirement?


13 Replies 1 reply marked as answer

JC Joseph Christ Nithin Issack Syncfusion Team February 24, 2023 10:47 AM UTC

Hi Ton,

  Greetings from Syncfusion support.

  Based on your query, you want to get the filtered records. Your requirements can be achieved by calling the getFilteredRecords method of the EJ2 Grid.

  Documentation: https://helpej2.syncfusion.com/react/documentation/api/grid/#getfilteredrecords


Joseph I.

TT Ton That Hung February 24, 2023 11:39 AM UTC

Hi Joseph,

Seem like if I don't filter in grid, getFilteredRecords ​will return empty array.

Are you have the way to control this problems?


JC Joseph Christ Nithin Issack Syncfusion Team February 27, 2023 01:58 PM UTC


  Before proceeding with the solution, we would like you to share the below details.

  • Complete grid rendering code.
  • Details on where you have used the `getFilteredRecords` method.
  • Video demo of your requirement.

TT Ton That Hung March 1, 2023 03:03 AM UTC

Hi Joseph,

In my example: I have the getDataSource button, if you click on this button, the console will show the dataSource.
If I have filtered, the console would be shown true.
But If I haven't filtered, the console only show empty array.

Link: https://stackblitz.com/edit/react-ta71qb-35neud?file=index.js

Didn't filter + sorted:

Filtered + sorted:

I want to get the dataSource that is showing on the grid when I have sorted but not filtered.


JC Joseph Christ Nithin Issack Syncfusion Team March 8, 2023 03:40 AM UTC


  Based on your query, you want to get the data when you perform either sorting or filtering. On inspecting the sample provided, you are using url adaptor for fetching the data for the grid. When you are using remote data, you have access to only the current view data. You can get the current view data using the ‘grid.getCurrentVirewRecords’ method.

Please refer the below code example.


  async function getDataSource() {

    console.log('DataSource:'await gridInstance.getCurrentViewRecords());



Using which you can get the data in the current page viewport.

Note: you have also enabled virtualization, which will load the data based on the current view port only.

Sample: https://stackblitz.com/edit/react-ta71qb-oey2f3?file=index.js

TT Ton That Hung March 8, 2023 03:52 AM UTC

Hi Joseph,
That mean, if I haven't filtered and enabled virtualization(or paging), I would not got the sorted dataSource(all records, not current view records) ?


JC Joseph Christ Nithin Issack Syncfusion Team March 16, 2023 04:19 PM UTC


  On inspecting the code example provided, we could see that you are using UrlAdaptor for binding the data. By default in UrlAdaptor, the data will be fetched on demand from the server. Hence it is not feasible to get all the data in the dataSource in the client side.

CT Carlos Tenorio Perez May 15, 2023 02:07 PM UTC


If you already have loaded from the beggining the data without the UrlAdaptor, is there some way? Can we access to some internal variable that contains all the datasource sorted and filtered?

Best regards

Carlos Tenorio Pérez

DM Dineshnarasimman Muthu Syncfusion Team May 29, 2023 04:22 PM UTC

Hi Ton,

We have reviewed your query about getting data after sorting and filter without URL adaptor. We have prepared a sample with local data and used getCurrentViewRecords() method to get the record in the grid. We have attached the sample for your reference.

 function getDataSource() {

    var data = gridInstance.getCurrentViewRecords();


  return (

    <div className="control-pane">

      <div className="control-section row">

        <button onClick={getDataSource}>Get dataSource</button>




          ref={(grid=> (gridInstance = grid)}





Sample: https://stackblitz.com/edit/react-e4zmej?file=index.js

Please let us know if you need any further assistance.



TT Ton That Hung replied to Dineshnarasimman Muthu May 30, 2023 05:03 AM UTC

Hi Dineshnarasimman Muthu,

Thanks for your support.

Your solution is working so well in these cases: filtering, and sorting. But if I want to use Virtual Scroll, Infinite Scroll, or Paging. The "getCurrentViewRecords" function returns the data shown in the UI. My requirement is to get all data.

Link sample:https://stackblitz.com/edit/react-e4zmej-r6muns?file=index.js


DM Dineshnarasimman Muthu Syncfusion Team May 31, 2023 05:12 PM UTC

Hi Ton,

We have reviewed your query about retrieving data after sorting and filtering in the grid. We would like to tell you that when using infinite scroll, pagination, we can only render the current view record. We cannot retrieve all the data while using infinite scroll, pagination. The purpose of infinite scroll and pagination is to retrieve the data on demand. It will request data for each page and each scroll from the server-side or your data source, allowing you to retrieve data on demand, hence we cannot retrieve all the data.



Marked as answer

TT Ton That Hung replied to Dineshnarasimman Muthu June 1, 2023 01:23 AM UTC

Hi Dineshnarasimman Muthu,

Thanks for your support.

SG Suganya Gopinath Syncfusion Team June 2, 2023 06:18 AM UTC

We are glad that the provided solution helped to solve the issue. Please get back to us for further assistance. 

Live Chat Icon For mobile
Up arrow icon