Allow last column to be sub-cell scrolled to right edge if it is wider than the viewport

Author: texodus

src/js/scroll_panel.js

@@ -79,9 +79,7 @@ export class RegularVirtualTableViewModel extends HTMLElement {
                 ${sub_cell_offsets}
             </style>
             <div class="rt-virtual-panel"></div>
-            <div class="rt-scroll-table-clip">
-                ${slot}
-            </div>
+            <div class="rt-scroll-table-clip">${slot}</div>
         `;
 
         const [, style, virtual_panel, table_clip] = this.shadowRoot.children;
@@ -298,6 +296,11 @@ export class RegularVirtualTableViewModel extends HTMLElement {
             cidx++;
         }
 
+        if (cidx < this._column_sizes.indices.length) {
+            let viewport_width = this._column_sizes.indices.slice(0, this._view_cache.config.row_pivots.length).reduce((x, y) => x + y, 0);
+            virtual_width += Math.max(0, this._column_sizes.indices[cidx] - (this._container_size.width - viewport_width) || 0);
+        }
+
         return virtual_width;
     }
 

src/js/table.js

@@ -73,12 +73,14 @@ export class RegularTableViewModel {
     async *draw(container_size, view_cache, selected_id, preserve_width, viewport, num_columns) {
         const { width: container_width, height: container_height } = container_size;
         const { view, config } = view_cache;
-        let { data, row_headers, column_headers, metadata: data_listener_metadata, column_header_merge_depth, merge_headers = "both" } = await view(
-            Math.floor(viewport.start_col),
-            Math.floor(viewport.start_row),
-            Math.ceil(viewport.end_col),
-            Math.ceil(viewport.end_row)
-        );
+        let {
+            data,
+            row_headers,
+            column_headers,
+            metadata: data_listener_metadata,
+            column_header_merge_depth,
+            merge_headers = "both",
+        } = await view(Math.floor(viewport.start_col), Math.floor(viewport.start_row), Math.ceil(viewport.end_col), Math.ceil(viewport.end_row));
 
         const merge_row_headers = merge_headers === "both" || merge_headers === "row";
         const merge_column_headers = merge_headers === "both" || merge_headers === "column";