jupyterlab_tabular_data_viewer_extension 1.2.14 → 1.2.17

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/widget.js

@@ -261,7 +261,9 @@ export class TabularDataViewer extends Widget {
             if (reset) {
                 this._totalRows = response.totalRows;
             }
-            this._renderData(response.data);
+            // Calculate starting row number (1-indexed)
+            const startingRowNumber = this._data.length - response.data.length + 1;
+            this._renderData(response.data, startingRowNumber);
             this._updateStatusBar();
         }
         catch (error) {
@@ -277,6 +279,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 +370,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 => {
+    _renderData(rows, startingRowNumber = 1) {
+        rows.forEach((row, index) => {
             const tr = document.createElement('tr');
             tr.className = 'jp-TabularDataViewer-row';
+            // Add row number cell
+            const rowNumCell = document.createElement('td');
+            rowNumCell.className = 'jp-TabularDataViewer-cell jp-TabularDataViewer-rowNumberCell';
+            rowNumCell.textContent = String(startingRowNumber + 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.17",
     "description": "Jupyterlab extension to browse tabular data files (Parquet, Excel, CSV, TSV) with filtering and sorting capabilities",
     "keywords": [
         "jupyter",

package/src/widget.ts

@@ -292,7 +292,9 @@ export class TabularDataViewer extends Widget {
         this._totalRows = response.totalRows;
       }
 
-      this._renderData(response.data);
+      // Calculate starting row number (1-indexed)
+      const startingRowNumber = this._data.length - response.data.length + 1;
+      this._renderData(response.data, startingRowNumber);
       this._updateStatusBar();
     } catch (error) {
       this._showError(`Failed to load data: ${error}`);
@@ -308,6 +310,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,19 +418,25 @@ 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`;
   }
 
   /**
    * Render data rows
    */
-  private _renderData(rows: any[]): void {
-    rows.forEach(row => {
+  private _renderData(rows: any[], startingRowNumber: number = 1): void {
+    rows.forEach((row, index) => {
       const tr = document.createElement('tr');
       tr.className = 'jp-TabularDataViewer-row';
 
+      // Add row number cell
+      const rowNumCell = document.createElement('td');
+      rowNumCell.className = 'jp-TabularDataViewer-cell jp-TabularDataViewer-rowNumberCell';
+      rowNumCell.textContent = String(startingRowNumber + 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;
 }