add features to export table

[hyonaldo]

This is a transition of the pull-request from ZEPL/zeppelin#398

Using https://www.datatables.net/extensions/tabletools/ we can export table by csv, pdf... etc.

Thanks. ^^

[Leemoonsoo]

Thanks for the cool contribution! Your pull request looks like not based on latest master branch.
Could you rebase your branch with latest master?

[hyonaldo]

Thank you, @Leemoonsoo

I detected the conflicts and fixed them.
Is there any other problem?

[Leemoonsoo]

I've tried this branch, and

1. It works with chrome, but not works with firefox or safari. (i didn't tested with IE).
   is it supposed to work only with chrome?
2. When i click 'csv' (for 'pdf', too) the default file name is '.csv.csv', it looks bit weird. (tested on OSX). Is it possible to change default name?

3. Is it possible to style the 'csv', 'pdf' buttons to make look similar to other buttons?

[hyonaldo]

@Leemoonsoo

1. It works In both Firefox and Safari. (and also IE) Do you have Flash installed and enabled? (and updated ?) The Flash is used to provide cross browser / platform ability to save files entirely on the client-side.
   Chrome ships with the Flash plug-in installed locally for itself only. It uses its own plug-in even if there is a system wide one available, although you might want to check with the Chrome folks about that. It means that they can ensure that the latest version of Flash is always used, since they have ever-green updating. I think that's why you think it works with only Chrome.
2. I think it is weird. It's possible to change default name, as below
   as is:
   "aButtons": [ "csv", "pdf" ]
   to be:
   
"aButtons": [
{
"sExtends": "csv",
"sTitle": "My title",
"sFileName": "TableTools - *.csv"
}
]

   This parameter defines the name of the file that is to be saved. The special character " * " will be replaced by the HTML document's "TITLE" tag if it is present. Otherwise you can use this parameter to define the file name to be used.
3. It use CSS, so we can style the buttons ( .DTTT_button ).
   http://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css
   Or we can set the class of a button.
   as is:
   "aButtons": [ "csv", "pdf" ]
   to be:
   "aButtons": [ {
"sExtends": "csv",
"sButtonClass": "my_button_class"
} ]

   But, I have no idea about what looks good. Could you help me? ^^a

[hyonaldo]

@Leemoonsoo

Did you try in firefox or safari with updated Flash?

I removed the entire codes and re-created it, since it had some confilcts with latest incubator-zeppelin.

With the following changes.

when clicking the button,

And it can be used with a Bootstrap styled DataTable.
http://www.datatables.net/release-datatables/extensions/TableTools/examples/bootstrap.html

[Leemoonsoo]

Thanks, let me try

[bzz]

Hey, what is the status of this branch?

[jongyoul]

heartbeat

[felixcheung]

Hi - would you still be interested in completing this?
Seems like datatables also has a bunch of cool capability in addition to export that would be very good to have.

[ankurmitujjain]

Hi @ hyonaldo Any update on this?

[hyonaldo]

I'm still interested in this. However no one has directed me to contributing this.

[jongyoul]

@hyonaldo I'm not good at frontend but i think it's not a good idea using flash for implementing something. Like Moon, I also don't install flash on safari by default. Could you please suggest any other mechanism for doing this? This feature looks very good to me but if I should install flash, I won't use this and find another way.

[ankurmitujjain]

Hi @jongyoul @Leemoonsoo @hyonaldo ,
I had worked on data-tables.

You can also refer its feature on below URL (Last para.)
https://www.datatables.net/extensions/buttons/

For modern browsers with HTML 5 support datatables don't use Flash, but for legacy browsers
with no HTML5 support it uses FLASH.

So with this I believe it would be very useful feature to use it with HTML5.
Your thoughts?

[ankurmitujjain]

So instead of using retired tabletools we can use datatables button
https://www.datatables.net/extensions/buttons/

[ankurmitujjain]

Another way to use it in angular way....
http://l-lin.github.io/angular-datatables

[corneadoug]

http://l-lin.github.io/angular-datatables/#/withOptions
Actually it could be quite quick to add that one (but not use the angular way of that plugin)

[jongyoul]

@hyonaldo @ankurmitujjain Thanks for explaining it, but, personally, #714 looks better approach. How about you?

[ankurmitujjain]

@jongyoul I feel #714 is quick approach, but stability and features provided by DataTable are good and rich. Also to remove confusion Data-tables table-tool (retired and replaced by buttons extension) used FLASH, but new buttons plugin dont need FLASH if your browser support HTML5.
You can confirm this from below URL that it dont need FLASH.

https://www.datatables.net/extensions/buttons/examples/html5/simple.html

As per my experience when we have multi-line text in a single cell (Header or Data cell) or text in a single cell separated by tab or comma, DataTable is good in handling that.There are many such issues where DataTable had provided solution, and if we implement custom export than we have to handle them.

Also see below URL, where we can select columns to export, pagination, filtration.
https://www.datatables.net/extensions/buttons/examples/html5/columns.html

So as per my thought integrating DataTable instead of custom export, can remove issues already handled and fixed by DataTable and this will also make way for having more features in Zeppelin Table.

[adejanovski]

+1 on using datatables.

#714 seems nice but viewers have to find out that they need to click on the gear, which is hidden in report mode and simply absent when you link directly to the paragraph as an iframe.

Datatables work fine and are very extensible.

[jongyoul]

@ankurmitujjain @adejanovski Thanks for explaining it and checking a problem. @corneadoug What do you think of https://www.datatables.net/extensions/buttons/ ? I've heard from some analysts that they want to download a result as an Excel or csv.

[corneadoug]

Adding those buttons also means changing the table rendering to use Datatables right?
I see no problems for testing that option with the angular plugin. Might not be as easy as it looks because of the paragraph height. But if it can improve the table features or performances, lets give it a try!

[jongyoul]

@corneadoug Thanks for the positive feedback! @hyonaldo Do you want to improve this feature?

[zhongneu]

@ankurmitujjain @jongyoul @corneadoug @adejanovski
Hi, I am the author of #714 . Sorry that I missed the previous conversions of this PR. I created #714 because this PR hadn't been updated for quite a while, and I really need a simple exporting functionality.

I have to say that I am conservative about using DataTable as an exporting tool. DataTable is a very powerful tool, but it will also introduce many extra dependencies into Zeppelin, which we should always be careful about. For exporting functionality, I think a simple solution is good enough.

[corneadoug]

I'm fine with adding a new dependency for that feature if :

• Its an Angular plugin
• It improves the current Table features without degrading its performances

And also if it act as we would expect from that feature, which in my opinion should be:

• Allowing Export to be not only Table based, but also of Chart Pivoted data
• Have a PDF export for both table and graphs

On a separate note, In the future we could think about extending it with a back-end export also.

[adejanovski]

Seems like this is the port of datatables to Angular : http://l-lin.github.io/angular-datatables/#/welcome
It requires both JQuery and Angular to be imported though.

Datatables are notoriously fast if you pick the right loader for data. It does lazy loading with pagination which makes it really fast on big datasets.

I agree that what we're also looking for is some kind of full pdf export of all the paragraphs at once (if that's what you meant), in order to have some full report rendering feature that would be awesome, but trickier to do with Javascript...

[corneadoug]

@adejanovski
Good thing we already have both dependencies in the project :)
Full document would be nice (and its not that hard), however I was talking about a single paragraph.
But I don't know if people would think single paragraph PDF export is useful

[adejanovski]

@corneadoug
Nice :)

I agree, single paragraph PDF might not be that useful if we get csv/xls export.
Still, full document PDF export would be a killer feature...

[khalidhuseynov]

hi guys, I wonder what's the state of this PR? Also does it support exporting whole table? since there's limitation on number of rows loaded in front-end

[b3nbk1m70]

+1 on Khalid's comment.

For my use case, CSV (header, delimiter options) and Excel exports are the most important to my company.

[ankurmitujjain]

@adejanovski @corneadoug @bzz @Leemoonsoo

http://l-lin.github.io/angular-datatables
seems to have issue with angular-animate...

So I had tried to use the way this PR was proposed using data-tables with buttons only (No angular-datatables).
Please let me know if this is fine, I can create a new PR to commit it...

Thanks
Ankur

[corneadoug]

I already posted pre-requisite before.
If the angular version do not work, then what is left is:

• It improves the current Table features without degrading its performances
• Allowing Export to be not only Table based, but also of Chart Pivoted data

[ankurmitujjain]

Hello Team,
I am not sure how I can contribute to this PR, but I had implemented Datatables and added it as part #761 please review and let me know your views..

Thanks
Ankur