add save as html table data UI option (#26)

Author: RandomFractals

CHANGELOG.md

@@ -48,3 +48,5 @@ Add hide, freeze, and delete column context menu options
 Add data loading progress ring display
 - [#25](https://github.com/RandomFractals/tabular-data-viewer/issues/25)
 Add Save as CSV or JSON data UI options
+- [#26](https://github.com/RandomFractals/tabular-data-viewer/issues/26)
+Add Save as HTML data table UI option

README.md

@@ -28,7 +28,7 @@ Tabular Data Viewer 🀄 provides custom Table View for `.csv`, `.tsv` and `.tab
 - Freeze or delete table rows
 - Perisist table settings per data file
 - Copy table data to Clipboard
-- Save table data in `CSV` or `JSON` data array format
+- Save table data in `CSV`, `HTML` table, or `JSON` data array format
 
 ...
 

src/views/tableView.ts

@@ -351,6 +351,7 @@ export class TableView {
                 <option value="">📥&nbsp;Save</option>
                 <option value="csv">,,, csv</option>
                 <option value="json">{} &nbsp;json</option>
+                <option value="html">&lt;&gt; &nbsp;html</option>
               </select>
               <vscode-button id="reload-button"
                 appearance="icon" aria-label="Reload Data">

web/scripts/tableView.js

@@ -254,7 +254,15 @@ function saveData() {
   const dataFileName = fileName.substring(0, fileName.lastIndexOf('.') + 1);
   saveDataFileName = dataFileName + dataFileType;
   console.log('tabView:saveData(): saving data:', saveDataFileName);
-  table.download(dataFileType, saveDataFileName);
+  switch (dataFileType) {
+    case 'csv':
+    case 'json':
+      table.download(dataFileType, saveDataFileName);
+      break;
+    case 'html':
+      table.download(dataFileType, saveDataFileName, { style: true});
+      break;
+  }
 }
 
 /**