add some features of DataTables plugin (including Excel export)

[hyonaldo]

Hi. I'm Hyokyun Park.

I needed to download HTML tables on the notebook to my local PC.
So I applied the jquery plugin DataTables (available under the MIT license) to zeppelin-web.
https://www.datatables.net/
I used TableTools extension which is a plug-in for the DataTables for Excel-export feature.

DataTables has most features Sorting(ordering), searcing, paging etc goodness, as shown below.

I want to contribute to this project.
Review and comment, please.

[syepes]

+1 Great contribution!

[anthonycorbacho]

Does it apply to the chart too?
if i filter (search), it should also apply for the chart.

[swkimme]

Great contribution!

[swkimme]

Things to consider:
Do we need all of DataTable features?

1. show limited entries, searching, ordering could be done in SQL
2. Exporting CSV, Excel could be great! But do we need print, pdf, copy buttons?

May be we can partially adopt DataTable features to keep Zeppelin simple.

[corneadoug]

Maybe we could also do some angular code for once: http://l-lin.github.io/angular-datatables/#/withTableTools

[juhwi]

Great contribution!

[julienjtpierre]

I know some scenarios where the print function would be needed. Would be to have it in there.

[anthonycorbacho]

I would prefer to have on PDF instead of print.
If you need to print the table, you just have to get the pdf and print it.

[julienjtpierre]

@anthonycorbacho Yes. Is there an export to pdf for charts too? (Little off topic sorry!)

[anthonycorbacho]

@julienjtpierre nope, I guess this PR should introduce this feature since it brings the ability to export.

[hyonaldo]

@swkimme
Thank you for your comments.

I'm OK with you keeping Zeppelin simple.
Features can be disabled to meet your exact needs as shown below

To make use of the buttons above, we simply need to modify the aButtons initialisation option, as shown in the example below.

  // use datatables
  $('#p'+$scope.paragraph.id+'_table .table').DataTable( {
    dom: 'Tt',
    tableTools: {
        "sSwfPath": "images/copy_csv_xls.swf",
        "aButtons": [ "csv", "xls" ]
    },
    lengthChange: false,
    searching: false,
    ordering:  false,
    paging: false
  });

[felixcheung]

+1 for copy (copy to clipboard?)
maybe +1 for pdf

[hyonaldo]

@anthonycorbacho @julienjtpierre
Hi.
Thanks for your sugegestions.

I wanted some features to download directly from HTML tables of client-side, not from the server-side.
This library (DataTables) meets the requirements.

But zeppelin chart does not come from HTML tables of client-side.
I think another approach is needed to do something related to the chart like Databricks. (such as filtering, exporting PDF... etc)

[hyonaldo]

@corneadoug
Hi. Thank you for your comments.

I had known about the angular-datatables (http://l-lin.github.io/angular-datatables/#/withTableTools)
But it did not work for me.
I guess "datatables" directive doesn't work in our table tags...
That's why I used the original data-tables library.

[hyonaldo]

Hi, @felixcheung

Of course, we can.
Using the aButtons parameter we can use any of the options.
See http://datatables.net/extensions/tabletools/buttons

Thanks.

[hyonaldo]

@swkimme @felixcheung

On second thought, I'd better add +1 copy and +1 pdf.
Since we might need to copy without resizing or scrolling paragraph.

And -1 csv, because it's pretty similar to excel.
https://datatables.net/forums/discussion/14413/when-saving-as-excel-using-excel-button-from-tabletools-csv-option-is-offered

What do you think?

[corneadoug]

I think Copy is not needed, Excel neither.

CSV is way better than Excel since everything can read CSV (Excel program also), however not everything can read Excel format.

If such options should be provided, it should be:
CSV -> Download the data in csv format
PDF -> Export what is shown to user (screenshot of visualization basically)

Now, the download Data should probably be the one used by the current visualization (Data transformed by pivot for Charts, Table data without pivot since we don't have pivot function on it)

For the other features of DataTables, It doesn't make sense to restrict it to Table only,
Search feature (filtering) as well as Ordering features for examples should be paragraph based and not visualization based.

I think this kind of feature request should be discussed in the mailing list :)

[swkimme]

Totally agree with @corneadoug for Copy and CSV.
For copy, we can drag contents of table and just copy by doing ctrl+c, no need of buttons.
(Buttons would be good when contents is large, but in that case, downloading CSV will be a better choice)

ps) This thread is so Hot! Thanks for great contribution again!

[hyonaldo]

@corneadoug
Thanks for your comments.

I agree with @swkimme that downloading CSV will be a better choice for large tables.
So, I changed the options like below.

"aButtons": [ "csv", "pdf" ]

Is there any additional requirements?

[felixcheung]

Sounds good if ctrl-c works well...

[zirho]

Such a great thing

[akaroice]

Great contribution!

[seongminwoo]

I really want this feature! Great contribution! (:-

[anthonycorbacho]

yeah, I aggre with @corneadoug about the pdf part, this must export what the user see.
If the view is set to a graph, then export PDF should export this graph in the pdf (with maybe the table?)

[Leemoonsoo]

@hyonaldo
Thanks for great contribution!

We're now in transition of code base to ASF repo. With some reason, changes in NFLabs/zeppelin will not be automatically transfered to apache/incubator-zeppelin repo since 20/Mar. Could you please re-create your pull request to https://github.com/apache/incubator-zeppelin?

[hyonaldo]

Hi, @Leemoonsoo

Sure, I would readily accept your proposal.
Did you mean I have to re-fork and re-pull request from https://github.com/apache/incubator-zeppelin ?

[hyonaldo]

@Leemoonsoo

This conversation has moved to following page.
apache/zeppelin#6

[Leemoonsoo]

@hyonaldo Thanks for recreating the PullRequest.