UX: Wrap words instead of dynamic widths and align left (#11)

* UX: Wrap words instead of dynamic widths and align left

* UX: Improve sticky header on scroll

* DEV: Convert default column text to localizable strings

javascripts/discourse/components/spreadsheet-editor.js

@@ -11,6 +11,7 @@ import { tracked } from "@glimmer/tracking";
 export default class SpreadsheetEditor extends GlimmerComponent {
   @tracked showEditReason = false;
   spreadsheet = null;
+  defaultColWidth = 150;
 
   // Getters:
   get isEditingTable() {
@@ -100,9 +101,24 @@ export default class SpreadsheetEditor extends GlimmerComponent {
     ];
 
     const columns = [
-      { title: "Column 1", width: 150 },
-      { title: "Column 2", width: 150 },
-      { title: "Column 3", width: 150 },
+      {
+        title: I18n.t(
+          themePrefix("discourse_table_builder.default_header.col_1")
+        ),
+        width: this.defaultColWidth,
+      },
+      {
+        title: I18n.t(
+          themePrefix("discourse_table_builder.default_header.col_2")
+        ),
+        width: this.defaultColWidth,
+      },
+      {
+        title: I18n.t(
+          themePrefix("discourse_table_builder.default_header.col_3")
+        ),
+        width: this.defaultColWidth,
+      },
     ];
 
     return this.buildSpreadsheet(data, columns);
@@ -127,23 +143,16 @@ export default class SpreadsheetEditor extends GlimmerComponent {
         headings = this.extractTableContent(row).map((heading) => {
           return {
             title: heading,
-            width: heading.length * rowWidthFactor,
+            width: Math.max(
+              heading.length * rowWidthFactor,
+              this.defaultColWidth
+            ),
+            align: "left",
           };
         });
       } else {
         // rows:
-        const rowContent = this.extractTableContent(row);
-
-        // If row content is larger than header, update column width:
-        rowContent.forEach((c, i) => {
-          const colWidth = rowContent[i].length * rowWidthFactor;
-
-          if (headings[i].width < colWidth) {
-            headings[i].width = colWidth;
-          }
-        });
-
-        rows.push(rowContent);
+        rows.push(this.extractTableContent(row));
       }
     });
 
@@ -155,6 +164,8 @@ export default class SpreadsheetEditor extends GlimmerComponent {
     this.spreadsheet = jspreadsheet(this.spreadsheet, {
       data,
       columns,
+      defaultColAlign: "left",
+      wordWrap: true,
       ...opts,
     });
   }

locales/en.yml

@@ -23,5 +23,9 @@ en:
         reason: "why are you editing?"
         trigger_reason: "Add reason for edit"
       default_edit_reason: "Update Table with Table Editor"
+    default_header:
+      col_1: "Column 1"
+      col_2: "Column 2"
+      col_3: "Column 3"
   theme_metadata:
     description: "Adds a button to the composer to easily build tables in markdown"

scss/modal/insert-table-modal.scss

@@ -28,6 +28,11 @@
     width: max-content;
   }
 
+  .modal-body {
+    padding: 0;
+    margin: 0.5em;
+  }
+
   .btn-edit-reason {
     background: none;
     .d-icon {

scss/theme/jspreadsheet-theme.scss

@@ -23,7 +23,7 @@
 
 .jexcel {
   border-bottom: 1px solid var(--jexcel_border_color);
-  border-right: 1px solid var(--jexcel_border_color);
+  border-right: transparent;
   background-color: transparent;
 }
 
@@ -225,7 +225,7 @@ table.jexcel > tbody > tr.selected > td:first-child {
 table.jexcel > thead > tr > td {
   border-top: 1px solid var(--jexcel_border_color);
   border-right: 1px solid var(--jexcel_border_color);
-  border-bottom: none;
+  border-bottom: 1px solid var(--jexcel_border_color);
   background-color: var(--jexcel_header_background);
 
   &:first-child {