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

RandomFractals · Dec 24, 2021 · 90aa94f · 90aa94f
1 parent 9d9e3f1
commit 90aa94f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/CHANGELOG.md b/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
diff --git a/README.md b/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
 
 ...
 

diff --git a/src/views/tableView.ts b/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">

diff --git a/web/scripts/tableView.js b/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;
+  }
 }
 
 /**