Download Table Data in CSV Format

[mihirchronicles]

Is it possible to download the table data in csv format on a click handler?

[xaksis]

this functionality doesn't exist yet... but sure would be nice to have that.

[arivera12]

@xaksis for this I use this plugin tableExport.jquery.plugin I have worked with this plugin for various of years and never had issues with it. You can still take a look of the source and do some portations from jQuery to pure JS instead to integrate it with vuejs nature. I think there are still a lot of plugins that are depending on jQuery so making portations from jQuery to vuejs plugins maybe more easy doing a wrapper of it inside vuejs in the meantime. I think this plugin is huge plus in any project due to his various ways to export a table. Hope this helps!

[mihirchronicles]

Thanks for the update! That is a good point @arivera12.

[mgd722]

@mihirchronicles I'm not sure I understand why you closed this? This still seems like a valid enhancement to me.

[mihirchronicles]

@mgd722 I reopened it.

[xaksis]

@mihirchronicles @mgd722 There are services available to export table out to csv/excel as @arivera12 mentioned and I don't know if vue-good-table core should include these. These are hefty optional features that'll increase the vue-good-table size by quite a bit. Vue-good-table does provide action slots where you can place the interactive elements (export buttons) that can be used to trigger these third-party services. thoughts?

[mgd722]

PapaParse (minified) weighs in at 17kb, so bundling it with VGT would be about a 20% increase in size. Pretty hefty indeed. I guess I'd have to take a look at how much faster (if at all) it is to convert our native JSON to CSV versus parsing the HTML table to CSV.

Past that, one of my main use-cases for exporting being integrated is the ability to export fields that exist in the data but aren't rendered as HTML. If I have data like field1, field2, exportOnlyField, I'd like to be able to only see field1, field2 on the table but still have the remaining field available for export. Sure, I could use my data, bind something to @on-search to get the query, re-implement the filtering logic, and then export my rows to CSV, but that's getting pretty involved. Coming from jQuery dataTables in the past, the ability to export data that isn't visible was pretty handy.

[mgd722]

Perhaps having @on-search and @on-column-filter emit the filtered dataset would be a happy compromise? With that I'd just listen to one of those events and store the filtered data as JSON outside of VGT. When a user clicks on the export action button, I could use whatever CSV serialization logic I wanted to export the filtered dataset to CSV (or whatever format I choose, actually). Emitting the filtered data would allow users to handle exports on their own without reimplementing the search logic and still keep the library size down. I'd be happy to submit a PR for this if you're interested; this is definitely something I'd use.

[mgd722]

Seems like it could be as easy as adding filteredRows here and here?

[mgd722]

@xaksis Any thoughts here? I'll submit a PR with these changes and the associated documentation if it's desired core functionality.

[kmonagle]

I'd absolutely use this. I actually need it today!!:)

I only want to export what's filtered in the current table, so any type of access to filteredRows would work, whether emitted or direct

[xaksis]

@mgd722 @kmonagle sorry for the delay in response!

filteredRows actually contains the entire filtered set and not just the current page, so depending on your use-case you might want to access:

1. filteredRows - set of all rows that match filter combinations
2. paginated - set of all rows that match filter in the current page

in either case, you access the desired set of rows at any time by putting a ref on the vue-good-table instance. like:

<vue-good-table ref="myTable" ...>
</vue-good-table

// and later when user clicks on export, simply get the filtered rows from table
this.$refs.myTable.filteredRows[0].children; // this would contain all rows that currently match filters. 

isn't that easier for your use-case than having to maintain the filtered set on component level everytime it is emitted via events? what do you think?

[kmonagle]

that is perfect. I had gotten as far as this.$refs.myTable.filteredRows, didn't realize I needed to drill down a bit more. Direct access to the currently filtered rows is exactly what I need. Thanks!!!

[xaksis]

cool! so I'll close this for now. @mgd722 let me know if this doesn't work for you and we can re-open and discuss more.

[mgd722]

oh, nope, that works great! thank you!