jupyterlab_tabular_data_viewer_extension 1.2.14 → 1.2.19

package/README.md

@@ -1,10 +1,10 @@
 # jupyterlab_tabular_data_viewer_extension
 
-![GitHub Actions](https://github.com/stellarshenson/jupyterlab_tabular_data_viewer_extension/actions/workflows/build.yml/badge.svg)
-[![npm version](https://badge.fury.io/js/jupyterlab_tabular_data_viewer_extension.svg)](https://www.npmjs.com/package/jupyterlab_tabular_data_viewer_extension)
-[![PyPI version](https://badge.fury.io/py/jupyterlab-tabular-data-viewer-extension.svg)](https://pypi.org/project/jupyterlab-tabular-data-viewer-extension/)
+[![GitHub Actions](https://github.com/stellarshenson/jupyterlab_tabular_data_viewer_extension/actions/workflows/build.yml/badge.svg)](https://github.com/stellarshenson/jupyterlab_tabular_data_viewer_extension/actions/workflows/build.yml)
+[![npm version](https://img.shields.io/npm/v/jupyterlab_tabular_data_viewer_extension.svg)](https://www.npmjs.com/package/jupyterlab_tabular_data_viewer_extension)
+[![PyPI version](https://img.shields.io/pypi/v/jupyterlab-tabular-data-viewer-extension.svg)](https://pypi.org/project/jupyterlab-tabular-data-viewer-extension/)
 [![Total PyPI downloads](https://static.pepy.tech/badge/jupyterlab-tabular-data-viewer-extension)](https://pepy.tech/project/jupyterlab-tabular-data-viewer-extension)
-![JL4 Ready](https://img.shields.io/badge/Jupyterlab%204-ready-blue)
+[![JupyterLab 4](https://img.shields.io/badge/JupyterLab-4-orange.svg)](https://jupyterlab.readthedocs.io/en/stable/)
 
 View and browse Parquet, Excel, CSV, and TSV files directly in JupyterLab. Double-click any .parquet, .xlsx, .csv, or .tsv file to open it in a simple, spreadsheet-like table view - no code required. Navigate through your data, inspect values, and explore the structure of your tabular data files with interactive column resizing and advanced filtering capabilities.
 

package/lib/index.js

@@ -73,7 +73,9 @@ const plugin = {
             },
             execute: async () => {
                 if (lastContextMenuRow) {
-                    const jsonString = JSON.stringify(lastContextMenuRow, null, 2);
+                    // Filter out internal metadata fields before copying
+                    const { __row_index__, ...rowData } = lastContextMenuRow;
+                    const jsonString = JSON.stringify(rowData, null, 2);
                     await navigator.clipboard.writeText(jsonString);
                     // console.log('Row copied to clipboard as JSON');
                     // Clean up highlight after copy

package/lib/widget.js

@@ -277,6 +277,22 @@ export class TabularDataViewer extends Widget {
     _renderHeaders() {
         this._filterRow.innerHTML = '';
         this._headerRow.innerHTML = '';
+        // Add row number column header
+        const rowNumFilterCell = document.createElement('th');
+        rowNumFilterCell.className = 'jp-TabularDataViewer-filterCell jp-TabularDataViewer-rowNumberCell';
+        this._filterRow.appendChild(rowNumFilterCell);
+        const rowNumHeaderCell = document.createElement('th');
+        rowNumHeaderCell.className = 'jp-TabularDataViewer-headerCell jp-TabularDataViewer-rowNumberCell';
+        const rowNumContent = document.createElement('div');
+        rowNumContent.className = 'jp-TabularDataViewer-headerContent';
+        const rowNumName = document.createElement('div');
+        rowNumName.className = 'jp-TabularDataViewer-columnName';
+        rowNumName.textContent = '';
+        rowNumContent.appendChild(rowNumName);
+        rowNumHeaderCell.appendChild(rowNumContent);
+        rowNumHeaderCell.style.width = '60px';
+        rowNumFilterCell.style.width = '60px';
+        this._headerRow.appendChild(rowNumHeaderCell);
         this._columns.forEach(col => {
             // Create filter cell
             const filterCell = document.createElement('th');
@@ -352,17 +368,22 @@ export class TabularDataViewer extends Widget {
             filterCell.style.width = `${columnWidth}px`;
             this._headerRow.appendChild(headerCell);
         });
-        // Set table width to sum of all column widths
-        const totalWidth = Array.from(this._columnWidths.values()).reduce((sum, w) => sum + w, 0);
+        // Set 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`;
     }
     /**
      * Render data rows
      */
     _renderData(rows) {
-        rows.forEach(row => {
+        rows.forEach((row) => {
             const tr = document.createElement('tr');
             tr.className = 'jp-TabularDataViewer-row';
+            // Add row number cell using original row index from backend
+            const rowNumCell = document.createElement('td');
+            rowNumCell.className = 'jp-TabularDataViewer-cell jp-TabularDataViewer-rowNumberCell';
+            rowNumCell.textContent = String(row['__row_index__'] || '');
+            tr.appendChild(rowNumCell);
             this._columns.forEach(col => {
                 const td = document.createElement('td');
                 td.className = 'jp-TabularDataViewer-cell';

package/package.json

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

package/src/index.ts

@@ -120,7 +120,9 @@ const plugin: JupyterFrontEndPlugin<void> = {
       },
       execute: async () => {
         if (lastContextMenuRow) {
-          const jsonString = JSON.stringify(lastContextMenuRow, null, 2);
+          // Filter out internal metadata fields before copying
+          const { __row_index__, ...rowData } = lastContextMenuRow;
+          const jsonString = JSON.stringify(rowData, null, 2);
           await navigator.clipboard.writeText(jsonString);
           // console.log('Row copied to clipboard as JSON');
 

package/src/widget.ts

@@ -308,6 +308,24 @@ export class TabularDataViewer extends Widget {
     this._filterRow.innerHTML = '';
     this._headerRow.innerHTML = '';
 
+    // Add row number column header
+    const rowNumFilterCell = document.createElement('th');
+    rowNumFilterCell.className = 'jp-TabularDataViewer-filterCell jp-TabularDataViewer-rowNumberCell';
+    this._filterRow.appendChild(rowNumFilterCell);
+
+    const rowNumHeaderCell = document.createElement('th');
+    rowNumHeaderCell.className = 'jp-TabularDataViewer-headerCell jp-TabularDataViewer-rowNumberCell';
+    const rowNumContent = document.createElement('div');
+    rowNumContent.className = 'jp-TabularDataViewer-headerContent';
+    const rowNumName = document.createElement('div');
+    rowNumName.className = 'jp-TabularDataViewer-columnName';
+    rowNumName.textContent = '';
+    rowNumContent.appendChild(rowNumName);
+    rowNumHeaderCell.appendChild(rowNumContent);
+    rowNumHeaderCell.style.width = '60px';
+    rowNumFilterCell.style.width = '60px';
+    this._headerRow.appendChild(rowNumHeaderCell);
+
     this._columns.forEach(col => {
       // Create filter cell
       const filterCell = document.createElement('th');
@@ -398,8 +416,8 @@ export class TabularDataViewer extends Widget {
       this._headerRow.appendChild(headerCell);
     });
 
-    // Set table width to sum of all column widths
-    const totalWidth = Array.from(this._columnWidths.values()).reduce((sum, w) => sum + w, 0);
+    // Set 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`;
   }
 
@@ -407,10 +425,16 @@ export class TabularDataViewer extends Widget {
    * Render data rows
    */
   private _renderData(rows: any[]): void {
-    rows.forEach(row => {
+    rows.forEach((row) => {
       const tr = document.createElement('tr');
       tr.className = 'jp-TabularDataViewer-row';
 
+      // Add row number cell using original row index from backend
+      const rowNumCell = document.createElement('td');
+      rowNumCell.className = 'jp-TabularDataViewer-cell jp-TabularDataViewer-rowNumberCell';
+      rowNumCell.textContent = String(row['__row_index__'] || '');
+      tr.appendChild(rowNumCell);
+
       this._columns.forEach(col => {
         const td = document.createElement('td');
         td.className = 'jp-TabularDataViewer-cell';

package/style/base.css

@@ -168,6 +168,18 @@
   box-sizing: border-box;
 }
 
+/* Row Number Cell */
+.jp-TabularDataViewer-rowNumberCell {
+  text-align: center;
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color2);
+  font-weight: 500;
+  user-select: none;
+  min-width: 60px;
+  max-width: 60px;
+  width: 60px;
+}
+
 .jp-TabularDataViewer-cell:last-child {
   border-right: none;
 }