jupyterlab_tabular_data_viewer_extension 1.2.24 → 1.2.29

package/lib/widget.js

@@ -41,16 +41,17 @@ export class TabularDataViewer extends Widget {
             // With table-layout: fixed, this automatically applies to all cells in the column
             const columnIndex = this._columns.findIndex(col => col.name === this._resizing.columnName);
             if (columnIndex !== -1) {
-                const headerCell = this._headerRow.children[columnIndex];
-                const filterCell = this._filterRow.children[columnIndex];
+                // Add 1 to account for row number column being first cell
+                const headerCell = this._headerRow.children[columnIndex + 1];
+                const filterCell = this._filterRow.children[columnIndex + 1];
                 if (headerCell) {
                     headerCell.style.width = `${newWidth}px`;
                 }
                 if (filterCell) {
                     filterCell.style.width = `${newWidth}px`;
                 }
-                // Update table width to sum of all column widths
-                const totalWidth = Array.from(this._columnWidths.values()).reduce((sum, w) => sum + w, 0);
+                // Update table width to sum of all column widths plus row number column (60px)
+                const totalWidth = Array.from(this._columnWidths.values()).reduce((sum, w) => sum + w, 0) + 60;
                 this._table.style.width = `${totalWidth}px`;
             }
         };
@@ -325,9 +326,8 @@ export class TabularDataViewer extends Widget {
             nameSpan.className = 'jp-TabularDataViewer-columnName';
             nameSpan.textContent = col.name;
             // Add info icon for column statistics
-            const infoIcon = document.createElement('span');
-            infoIcon.className = 'jp-TabularDataViewer-infoIcon';
-            infoIcon.textContent = '🛈';
+            const infoIcon = document.createElement('i');
+            infoIcon.className = 'jp-TabularDataViewer-infoIcon fas fa-info-circle';
             infoIcon.title = 'Show column statistics';
             infoIcon.addEventListener('click', async (e) => {
                 e.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_tabular_data_viewer_extension",
-    "version": "1.2.24",
+    "version": "1.2.29",
     "description": "Jupyterlab extension to browse tabular data files (Parquet, Excel, CSV, TSV) with filtering and sorting capabilities",
     "keywords": [
         "jupyter",

package/src/widget.ts

@@ -366,9 +366,8 @@ export class TabularDataViewer extends Widget {
       nameSpan.textContent = col.name;
 
       // Add info icon for column statistics
-      const infoIcon = document.createElement('span');
-      infoIcon.className = 'jp-TabularDataViewer-infoIcon';
-      infoIcon.textContent = '🛈';
+      const infoIcon = document.createElement('i');
+      infoIcon.className = 'jp-TabularDataViewer-infoIcon fas fa-info-circle';
       infoIcon.title = 'Show column statistics';
       infoIcon.addEventListener('click', async (e: MouseEvent) => {
         e.preventDefault();
@@ -517,8 +516,9 @@ export class TabularDataViewer extends Widget {
     // With table-layout: fixed, this automatically applies to all cells in the column
     const columnIndex = this._columns.findIndex(col => col.name === this._resizing!.columnName);
     if (columnIndex !== -1) {
-      const headerCell = this._headerRow.children[columnIndex] as HTMLElement;
-      const filterCell = this._filterRow.children[columnIndex] as HTMLElement;
+      // Add 1 to account for row number column being first cell
+      const headerCell = this._headerRow.children[columnIndex + 1] as HTMLElement;
+      const filterCell = this._filterRow.children[columnIndex + 1] as HTMLElement;
 
       if (headerCell) {
         headerCell.style.width = `${newWidth}px`;
@@ -527,8 +527,8 @@ export class TabularDataViewer extends Widget {
         filterCell.style.width = `${newWidth}px`;
       }
 
-      // Update table width to sum of all column widths
-      const totalWidth = Array.from(this._columnWidths.values()).reduce((sum, w) => sum + w, 0);
+      // Update table width to sum of all column widths plus row number column (60px)
+      const totalWidth = Array.from(this._columnWidths.values()).reduce((sum, w) => sum + w, 0) + 60;
       this._table.style.width = `${totalWidth}px`;
     }
   };

package/style/base.css

@@ -293,19 +293,22 @@
 /* Column Info Icon */
 .jp-TabularDataViewer-infoIcon {
   margin-left: 6px;
-  font-size: 16px;
+  font-size: 14px;
   color: transparent;
   cursor: pointer;
   transition: color 0.2s ease;
   user-select: none;
+  opacity: 0;
 }
 
 .jp-TabularDataViewer-headerCell:hover .jp-TabularDataViewer-infoIcon {
   color: var(--jp-brand-color1) !important;
+  opacity: 1;
 }
 
 .jp-TabularDataViewer-infoIcon:hover {
   color: var(--jp-brand-color1) !important;
+  opacity: 1;
 }
 
 /* Column Statistics Modal */

package/style/index.css

@@ -1 +1,2 @@
+@import url('~@fortawesome/fontawesome-free/css/all.min.css');
 @import url('base.css');