F12183 download table as csv

Documentation/Form.rst

@@ -3214,7 +3214,7 @@ This example will display graphics instead of text 'add' and 'remove'. Also ther
      tgClass = qfq-child-margin-top
      tgAddClass = btn alert-success
      tgAddText = <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
-     tgRemoveClass = btn btn-danger alert-danger
+     tgRemoveClass = btn alert-danger
      tgRemoveText = <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
 
 Chart

Documentation/Installation.rst

@@ -251,14 +251,15 @@ Setup CSS & JS
         file10 = typo3conf/ext/qfq/Resources/Public/JavaScript/jquery.tablesorter.combined.min.js
         file11 = typo3conf/ext/qfq/Resources/Public/JavaScript/jquery.tablesorter.pager.min.js
         file12 = typo3conf/ext/qfq/Resources/Public/JavaScript/widget-columnSelector.min.js
+        file13 = typo3conf/ext/qfq/Resources/Public/JavaScript/widget-output.min.js
 
         # Only needed in case FormElement 'annotate' is used.
-        file13 = typo3conf/ext/qfq/Resources/Public/JavaScript/fabric.min.js
-        file14 = typo3conf/ext/qfq/Resources/Public/JavaScript/qfq.fabric.min.js
+        file14 = typo3conf/ext/qfq/Resources/Public/JavaScript/fabric.min.js
+        file15 = typo3conf/ext/qfq/Resources/Public/JavaScript/qfq.fabric.min.js
 
         # Only needed in case FullCalendar is used
-        file15 = typo3conf/ext/qfq/Resources/Public/JavaScript/moment.min.js
-        file16 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullcalendar.min.js
+        file16 = typo3conf/ext/qfq/Resources/Public/JavaScript/moment.min.js
+        file17 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullcalendar.min.js
     }
 
 

Documentation/Report.rst

@@ -2846,8 +2846,6 @@ The *tablesorter* options:
   is shown.
 * Class `tablesorter-column-selector` adds a column selector widget.
 
-
-
 * Activate/Save/Delete `views`: Insert inside of a table html-tag the command::
 
    {{ '<uniqueName>' AS _tablesorter-view-saver }}
@@ -2879,6 +2877,22 @@ The *tablesorter* options:
 
   * If there is a public view with the name 'Default' and a user has no choosen a view earlier, that one will be selected.
 
+* You can export your tablesorter tables as CSV files using the output widget (be sure to include the separate JS file):
+
+  * Create a button to trigger the export with the following Javascript::
+
+         $('table.tablesorter').trigger('outputTable');
+
+  * Default export file name: `tableExport.csv`
+  * Exported with column separator `;`
+  * Only currently filtered rows are exported.
+  * Values are exported as text, without HTML tags
+  * You can change the formatting/value of each cell as follows::
+
+         <td data-name="12345">CHF 12,345.-</td>
+
+  * Headers and footers are exported as well.
+
 Customization of tablesorter
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
@@ -2909,7 +2923,7 @@ Customization of tablesorter
       `data-tablesorter-config` on the table.
       Use JSON syntax when passing in your own configuration, such as: ::
 
-        data-tablesorter-config='{"theme":"bootstrap","widthFixed":true,"headerTemplate":"{content} {icon}","dateFormat":"ddmmyyyy","widgets":["uitheme","filter","saveSort","columnSelector"],"widgetOptions":{"filter_columnFilters":true,"filter_reset":".reset","filter_cssFilter":"form-control","columnSelector_mediaquery":false} }'
+        data-tablesorter-config='{"theme":"bootstrap","widthFixed":true,"headerTemplate":"{content} {icon}","dateFormat":"ddmmyyyy","widgets":["uitheme","filter","saveSort","columnSelector","output"],"widgetOptions":{"filter_columnFilters":true,"filter_reset":".reset","filter_cssFilter":"form-control","columnSelector_mediaquery":false,"output_delivery":"download","output_saveFileName":"tableExport.csv","output_separator":";"} }'
 
     * If the above customization options are not enough, you can output your own HTML for the pager and/or column selector,
       as well as your own `$(document).ready()` function with the desired config. In this case, it is recommended not to

Gruntfile.js

@@ -113,7 +113,8 @@ module.exports = function (grunt) {
                         src: [
                             'jquery.tablesorter.combined.min.js',
                             'extras/jquery.tablesorter.pager.min.js',
-                            'widgets/widget-columnSelector.min.js'
+                            'widgets/widget-columnSelector.min.js',
+                            'widgets/widget-output.min.js'
                         ],
                         expand: true,
                         dest: typo3_js,
@@ -124,7 +125,8 @@ module.exports = function (grunt) {
                         src: [
                             'jquery.tablesorter.combined.min.js',
                             'extras/jquery.tablesorter.pager.min.js',
-                            'widgets/widget-columnSelector.min.js'
+                            'widgets/widget-columnSelector.min.js',
+                            'widgets/widget-output.min.js'
                         ],
                         expand: true,
                         dest: 'js/',

javascript/src/TablesorterController.js

@@ -32,12 +32,15 @@ var QfqNS = QfqNS || {};
                 widthFixed: true,
                 headerTemplate: "{content} {icon}",
                 dateFormat: "ddmmyyyy",
-                widgets: ["uitheme", "filter", "saveSort", "columnSelector"],
+                widgets: ["uitheme", "filter", "saveSort", "columnSelector", "output"],
                 widgetOptions: {
                     filter_columnFilters: hasFilter, // turn filters on/off with true/false
                     filter_reset: ".reset",
                     filter_cssFilter: "form-control",
-                    columnSelector_mediaquery: false
+                    columnSelector_mediaquery: false,
+                    output_delivery: "download",
+                    output_saveFileName: "tableExport.csv",
+                    output_separator: ";"
                 } };
         }