Devextreme-reactive: Allow data export from the Grid

[gsobolev]

Provide the capability to export data in different formats (CSV, Excel, etc.)

[gsobolev]

While the Grid does not have any built-in export capabilities, there is a way to work around this limitation. It is possible to obtain data that is displayed by the table and then export it manually in the required format.
Please check this example to see how the display data can be obtained.

[mannylau]

The example link is down. Please advise.

[gsobolev]

Hi @mannylau,

I have checked the link and it works fine for me. Are you still having this problem?

[scottsmith8]

Hi guys, that example is not working and throwing errors, any other options?

[gsobolev]

@samuelcotterell,
 
The '1.0.0-beta.1' version of React Grid is used in the example provided in this thread. We have made some API changes since that beta. I have created a separate example with the latest version. Please find it here.

[scottsmith8]

great! thanks for that.

[angaaron]

Hi @gsobolev thanks for that example. I was wondering how this would be done with a table with multiple pages? Seems to only extra data from the first page. Cheers

[gsobolev]

Hi @angaaron!

TemplateConnector allows you to access already processed data. So you need to use a bit different approach in the described case. Please try to use Getter like in the following demo.

Note that exported data will vary depending on the 'Getter' position.

[angaaron]

This is perfect! Thanks heaps @gsobolev !

[susuwatari2]

Hi guys, any examples for the export code? Please explain

[ppaul]

I was very happy to see this functioning. However, after more customizations I found out that it ignores column visibility (hiding some columns) and column ordering. If I put the Getter after those plugins, it gets no rows. Is there anything that should be done in certain way? Thanks

[MaximKudriavtsev]

Hi @ppaul,

The order of integrated and custom plugins can change your Grid's data processing logic. See this guide for more information.

[ppaul]

Hello @MaximKudriavtsev ,
The use case I am working on has already implemented some plugins in a specific order. I don't think that needs to be changed, as it works well as it is. The problem is that I do not know where to put the Getter in order to get the rows for using them for an export to excel file. If I put it first, of course it doesn't have the ordering and so on. If I put it after, it doesn't have any rows. I mention that the grid is virtual:

<Grid {...other} rows={dataSource} columns={columns}>
                {dataTypeProviders}
                <DragDropProvider />
                <VirtualTable
                    columnExtensions={columnExtensions}
                    cellComponent={VirtualTableCell}
                />
                <TableColumnVisibility
                    hiddenColumnNames={hiddenColumnNames}
                />
                <TableColumnReordering order={columnOrder} onOrderChange={changeColumnOrder} />
                <TableHeaderRow cellComponent={HeaderRowCell} />
            </Grid>

[MaximKudriavtsev]

@ppaul

To get the required behavior, we recommend you create a custom plugin. All plugins are based on our React Core components. Follow this guide for more information.
 
Create a custom plugin MyExportPlugin that allows access to Grid getters. I used rows and tableColums getters to create the plugin. You can see what getters are available in our documentation in the Plugin Developer Reference section. For example, the TableColumnReordering plugin exports two getters - tableColumns and tableHeaderRows. Refer to link for more information.
 
See this sample with the custom MyExportPlugin.

[ppaul]

@MaximKudriavtsev , I come back with a new question. It was clear with the previous ones. But now that I implemented as in the sample, I notice that the <DataTypeProvider /> we have, is not considered. As of order, I specified the plugin as last, so it should have taken into account the provider. Am I missing something here? The data type provider specifies some transformations that are applied on the cells with formatterComponent and for. What I want to achieve is having the same data collection as is displayed in the table. Thank you for your advices so far!

[MaximKudriavtsev]

Hi @ppaul,
 
Do you want to export data from the Grid with your display styles? Please provide more information about it. We suggest creating a Codesandbox example.

[ppaul]

Hello @MaximKudriavtsev ,
Unfortunately I cannot post the code due to privacy reasons. However, what I am saying is this: if custom formatters are used, with getCellValue functions attached, these functions come into tableColumns, but I have to call them (again) manually. It would be nice if the data would be available as it is seen, with these functions already applied. We have a language dependent app, therefore with the same data, the content of the cells vary. In summary, the set-up is like this:

 <Grid rows={dataSource} columns={columns}}> //'@devexpress/dx-react-grid-material-ui'
          // sorting component
          // dataTypeProvider component, has getCellValue functions defined
          <VirtualTable  columnExtensions={tableColumnExtensions} cellComponent={VirtualTableCell}        
                  // row component
              />
              <TableColumnReordering order={columnOrder} onOrderChange={changeColumnOrder} />
              <ExcelPlugin /> // the problem is that the data is still raw here, no formatters applied
       </Grid>

[MaximKudriavtsev]

The way you are suggesting is the best solution now - use the getCellValue function in the ExcelPlugin.
 
However, Data Export is a feature that we will consider to implement in the future. We would greatly appreciate your feedback.

[ciforusalterra]

Hi, any update here about exporting table to excel or even pdf? I need formated data to be exported, not just raw data. Thanks.

[SergeyAlexeev]

We have plans to implement it in the second half of 2019. Please take a look at the 'Native React Grid' section.

[MaximKudriavtsev]

Hi all,

We started to implement this feature. Please, follow this topic to be informed about our updates. We would also appreciate your feedback on this feature. You can provide it in the same topic.

[serche]

Hi guys, any plan to deliver excel export in near future?

[ushkal]

Hi @serche ,
This feature has high priority and we plan to implement it soon.

[flyfishMT]

Hello, I am trying to export in a Plugin. My Plugin is before IntegratedPaging in the Grid, but I still only get a page of data. Here is a sample.

[AryamnovEugeniy]

Hello @flyfishMT ,

Even when you create a custom plugin, you need to use Getter in this plugin, as you've done in index.js, to get the required behaviour. I've modified your example and use Getter instead of TemplateConnector.
To the point, our export feature will be implemented very soon and you will be able to use it instead (you can follow this thread to be informed about our progress).

[MaximKudriavtsev]

We have released the 2.5.0 version of DevExtreme Reactive Grid with Excel export feature.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.