Devextreme-reactive: How to get the currently displayed data in the `VirtualTable`

Created on 16 Sep 2020  路  6Comments  路  Source: DevExpress/devextreme-reactive

  • [x] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

  • [x] React Grid

Description

I'm using VirtualTable and applying filters/sorting/searching and I need a way to get the currently displayed data in the VirtualTable like the custom exporter to export only displayed data here

Grid Need response question

Most helpful comment

Hello!

Our exporter works with Virtual Table. Here is an example: https://codesandbox.io/s/unruffled-cookies-jj903?file=/demo.js.
if you want to get only the rows that are in the viewport, you may use the following two getters: tableBodyRows and viewport. Here is an example where I display in console the rows in the viewport: https://codesandbox.io/s/xenodochial-sky-zd0iq?file=/demo.js
Note that viewport is our non-documented Getter, it may be changed in future.

All 6 comments

Hello!

Our exporter works with Virtual Table. Here is an example: https://codesandbox.io/s/unruffled-cookies-jj903?file=/demo.js.
if you want to get only the rows that are in the viewport, you may use the following two getters: tableBodyRows and viewport. Here is an example where I display in console the rows in the viewport: https://codesandbox.io/s/xenodochial-sky-zd0iq?file=/demo.js
Note that viewport is our non-documented Getter, it may be changed in future.

@AryamnovEugeniy

Sorry for the late response, I was on vacation :beach_umbrella: :smile:

Thanks for your reply, here is my use-case,
We have a lot of data loaded by VirtualTable and we wanted to do some (filtering, sorting, searching, hide-columns) and after that, we can print only the data with these criteria.

I had a custom plugin that I use in all of the tables which is the toolbar action
image

I have added some getters to get the info about filtering/sorting/searching/hide-columns and after that, I used this as input to print the data in the same way that it is currently displayed to the user

image

and this was my custom solution for this issue, thanks for such a great library!

You are welcome!

@mohamedGamalAbuGalala That toolbar looks absolutely great, could you share the main code/structure behind it? Thanks!

@mohamedGamalAbuGalala That toolbar looks absolutely great, could you share the main code/structure behind it? Thanks!

Unfortunately separating it is a hard issue, although we are planning to separate them in the future, sure I'll let you know if we do.
But I remember this link was our reference https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/custom-plugin-development/#react-grid---custom-plugin-development
you can use it if you need to implement it yourself

@mohamedGamalAbuGalala That toolbar looks absolutely great, could you share the main code/structure behind it? Thanks!

Unfortunately separating it is a hard issue, although we are planning to separate them in the future, sure I'll let you know if we do.
But I remember this link was our reference https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/custom-plugin-development/#react-grid---custom-plugin-development
you can use it if you need to implement it yourself

Thanks for the reply anyways! If you ever separate it would be great if you post a sandboax about it, but either way I'm glad to see that that kind of implementation is possible with this library. I'll use the link you provided, thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jesusgp22 picture jesusgp22  路  3Comments

Vaccano picture Vaccano  路  3Comments

madebymt picture madebymt  路  3Comments

franklixuefei picture franklixuefei  路  3Comments

slava-lu picture slava-lu  路  3Comments