jupyterlab_tabular_data_viewer_extension 1.1.20 → 1.2.8

package/README.md

@@ -10,6 +10,10 @@ View and browse Parquet, Excel, CSV, and TSV files directly in JupyterLab. Doubl
 
 ![Parquet Viewer](.resources/screenshot.png)
 
+**Opening files:** Right-click any supported file and select "Tabular Data Viewer" from the "Open With" menu, or simply double-click to open with the default viewer.
+
+![Open With Menu](.resources/screenshot-menu.png)
+
 ## Features
 
 **Supported File Formats:**
@@ -36,6 +40,12 @@ View and browse Parquet, Excel, CSV, and TSV files directly in JupyterLab. Doubl
 - Multiple filters work together to narrow down results
 
 **Additional features:**
+- Column statistics modal - Hover over any column header to reveal an info icon, click it to view comprehensive statistics including data type, row counts, null values, unique counts, and type-specific metrics (numeric: min/max/mean/median/std dev/outliers using IQR×1.5; string: most common value/length stats; date: earliest/latest dates). Copy statistics as JSON with one click
+
+![Column Statistics Icon](.resources/screenshot-stats-icon.png)
+
+![Column Statistics Modal](.resources/screenshot-stats.png)
+
 - Right-click context menu on rows to copy data as JSON
 - Configurable file type support via Settings - Enable/disable Parquet, Excel, or CSV/TSV handling
 - All features work seamlessly across all supported file formats
@@ -58,10 +68,12 @@ pip uninstall jupyterlab_tabular_data_viewer_extension
 Configure file type support through JupyterLab Settings:
 
 1. Open **Settings → Settings Editor**
-2. Search for "Parquet Viewer Extension"
+2. Search for "Tabular Data Viewer Extension"
 3. Configure options:
    - **Enable Parquet files** - Default: enabled
-   - **Enable Excel files** - Default: disabled (enable to view .xlsx files)
+   - **Enable Excel files** - Default: enabled
+   - **Enable CSV files** - Default: enabled
+   - **Enable TSV files** - Default: enabled
 
 When a file type is disabled, files open with JupyterLab's default handler instead.
 

package/lib/index.js

@@ -34,9 +34,7 @@ const plugin = {
     autoStart: true,
     requires: [ISettingRegistry],
     activate: async (app, settingRegistry) => {
-        // console.log(
-        //   'JupyterLab extension jupyterlab_tabular_data_viewer_extension is activated!'
-        // );
+        console.log('JupyterLab extension jupyterlab_tabular_data_viewer_extension is activated!');
         const { docRegistry, commands, contextMenu } = app;
         // Track last right-clicked row for context menu
         let lastContextMenuRow = null;

package/lib/modal.d.ts

@@ -0,0 +1,33 @@
+import { Widget } from '@lumino/widgets';
+import { IColumnStats } from './request';
+/**
+ * Modal dialog widget for displaying column statistics
+ */
+export declare class ColumnStatsModal extends Widget {
+    private _stats;
+    constructor(stats: IColumnStats);
+    /**
+     * Render the modal content
+     */
+    private _render;
+    /**
+     * Format number with thousands separator
+     */
+    private _formatNumber;
+    /**
+     * Copy statistics as JSON to clipboard
+     */
+    private _copyStatsAsJson;
+    /**
+     * Setup event listeners for closing the modal
+     */
+    private _setupEventListeners;
+    /**
+     * Show the modal
+     */
+    show(): void;
+    /**
+     * Close and dispose the modal
+     */
+    close(): void;
+}

package/lib/modal.js

@@ -0,0 +1,201 @@
+import { Widget } from '@lumino/widgets';
+/**
+ * Modal dialog widget for displaying column statistics
+ */
+export class ColumnStatsModal extends Widget {
+    constructor(stats) {
+        super();
+        this._stats = stats;
+        this.addClass('jp-ColumnStatsModal');
+        this._render();
+        this._setupEventListeners();
+    }
+    /**
+     * Render the modal content
+     */
+    _render() {
+        const content = document.createElement('div');
+        content.className = 'jp-ColumnStatsModal-content';
+        // Header with column name and close button
+        const header = document.createElement('div');
+        header.className = 'jp-ColumnStatsModal-header';
+        const title = document.createElement('h3');
+        title.textContent = `Column: ${this._stats.column_name}`;
+        const closeBtn = document.createElement('button');
+        closeBtn.className = 'jp-ColumnStatsModal-close';
+        closeBtn.textContent = '×';
+        closeBtn.onclick = () => this.close();
+        header.appendChild(title);
+        header.appendChild(closeBtn);
+        content.appendChild(header);
+        // Copy JSON button
+        const copySection = document.createElement('div');
+        copySection.className = 'jp-ColumnStatsModal-copy';
+        const copyBtn = document.createElement('button');
+        copyBtn.className = 'jp-ColumnStatsModal-copyButton';
+        copyBtn.textContent = 'Copy Stats as JSON';
+        copyBtn.onclick = () => this._copyStatsAsJson();
+        copySection.appendChild(copyBtn);
+        content.appendChild(copySection);
+        // Data type
+        const typeDiv = document.createElement('div');
+        typeDiv.className = 'jp-ColumnStatsModal-type';
+        typeDiv.textContent = `Type: ${this._stats.data_type}`;
+        content.appendChild(typeDiv);
+        // Data Summary section
+        const summarySection = document.createElement('div');
+        summarySection.className = 'jp-ColumnStatsModal-section';
+        const summaryTitle = document.createElement('h4');
+        summaryTitle.textContent = 'Data Summary';
+        summarySection.appendChild(summaryTitle);
+        const summaryList = document.createElement('ul');
+        summaryList.innerHTML = `
+      <li>Total rows: ${this._formatNumber(this._stats.total_rows)}</li>
+      <li>Non-null: ${this._formatNumber(this._stats.non_null_count)} (${this._stats.non_null_percentage}%)</li>
+      <li>Null: ${this._formatNumber(this._stats.null_count)} (${this._stats.null_percentage}%)</li>
+      <li>Unique values: ${this._formatNumber(this._stats.unique_count)} (${this._stats.unique_percentage}%)</li>
+    `;
+        summarySection.appendChild(summaryList);
+        content.appendChild(summarySection);
+        // Numeric statistics
+        if (this._stats.data_type === 'int' || this._stats.data_type === 'float') {
+            const numericSection = document.createElement('div');
+            numericSection.className = 'jp-ColumnStatsModal-section';
+            const numericTitle = document.createElement('h4');
+            numericTitle.textContent = 'Numeric Statistics';
+            numericSection.appendChild(numericTitle);
+            const numericList = document.createElement('ul');
+            const items = [];
+            if (this._stats.min_value !== undefined) {
+                items.push(`Min: ${this._formatNumber(this._stats.min_value)}`);
+            }
+            if (this._stats.max_value !== undefined) {
+                items.push(`Max: ${this._formatNumber(this._stats.max_value)}`);
+            }
+            if (this._stats.mean !== undefined) {
+                items.push(`Mean: ${this._formatNumber(this._stats.mean)}`);
+            }
+            if (this._stats.median !== undefined) {
+                items.push(`Median: ${this._formatNumber(this._stats.median)}`);
+            }
+            if (this._stats.std_dev !== undefined) {
+                items.push(`Std Dev: ${this._formatNumber(this._stats.std_dev)}`);
+            }
+            if (this._stats.outlier_count !== undefined) {
+                items.push(`Outliers (IQR×1.5): ${this._formatNumber(this._stats.outlier_count)} (${this._stats.outlier_percentage}%)`);
+            }
+            numericList.innerHTML = items.map(item => `<li>${item}</li>`).join('');
+            numericSection.appendChild(numericList);
+            content.appendChild(numericSection);
+        }
+        // String statistics
+        if (this._stats.data_type === 'string') {
+            const stringSection = document.createElement('div');
+            stringSection.className = 'jp-ColumnStatsModal-section';
+            const stringTitle = document.createElement('h4');
+            stringTitle.textContent = 'String Statistics';
+            stringSection.appendChild(stringTitle);
+            const stringList = document.createElement('ul');
+            const items = [];
+            if (this._stats.most_common_value !== undefined) {
+                items.push(`Most common: "${this._stats.most_common_value}" (${this._stats.most_common_count})`);
+            }
+            if (this._stats.min_length !== undefined) {
+                items.push(`Min length: ${this._stats.min_length} characters`);
+            }
+            if (this._stats.max_length !== undefined) {
+                items.push(`Max length: ${this._stats.max_length} characters`);
+            }
+            if (this._stats.avg_length !== undefined) {
+                items.push(`Avg length: ${this._formatNumber(this._stats.avg_length)} characters`);
+            }
+            stringList.innerHTML = items.map(item => `<li>${item}</li>`).join('');
+            stringSection.appendChild(stringList);
+            content.appendChild(stringSection);
+        }
+        // Date/datetime statistics
+        if (this._stats.data_type === 'date' || this._stats.data_type === 'datetime') {
+            const dateSection = document.createElement('div');
+            dateSection.className = 'jp-ColumnStatsModal-section';
+            const dateTitle = document.createElement('h4');
+            dateTitle.textContent = 'Date Range';
+            dateSection.appendChild(dateTitle);
+            const dateList = document.createElement('ul');
+            const items = [];
+            if (this._stats.earliest_date) {
+                items.push(`Earliest: ${this._stats.earliest_date}`);
+            }
+            if (this._stats.latest_date) {
+                items.push(`Latest: ${this._stats.latest_date}`);
+            }
+            if (this._stats.date_range_days !== undefined) {
+                items.push(`Span: ${this._formatNumber(this._stats.date_range_days)} days`);
+            }
+            dateList.innerHTML = items.map(item => `<li>${item}</li>`).join('');
+            dateSection.appendChild(dateList);
+            content.appendChild(dateSection);
+        }
+        this.node.appendChild(content);
+    }
+    /**
+     * Format number with thousands separator
+     */
+    _formatNumber(num) {
+        return num.toLocaleString(undefined, { maximumFractionDigits: 2 });
+    }
+    /**
+     * Copy statistics as JSON to clipboard
+     */
+    async _copyStatsAsJson() {
+        try {
+            const json = JSON.stringify(this._stats, null, 2);
+            await navigator.clipboard.writeText(json);
+            // Provide visual feedback
+            const btn = this.node.querySelector('.jp-ColumnStatsModal-copyButton');
+            if (btn) {
+                const originalText = btn.textContent;
+                btn.textContent = 'Copied!';
+                setTimeout(() => {
+                    btn.textContent = originalText;
+                }, 2000);
+            }
+        }
+        catch (error) {
+            console.error('Failed to copy stats to clipboard:', error);
+        }
+    }
+    /**
+     * Setup event listeners for closing the modal
+     */
+    _setupEventListeners() {
+        // Close on ESC key
+        const handleKeydown = (event) => {
+            if (event.key === 'Escape') {
+                this.close();
+            }
+        };
+        document.addEventListener('keydown', handleKeydown);
+        this.disposed.connect(() => {
+            document.removeEventListener('keydown', handleKeydown);
+        });
+        // Close on backdrop click
+        this.node.addEventListener('click', (event) => {
+            if (event.target === this.node) {
+                this.close();
+            }
+        });
+    }
+    /**
+     * Show the modal
+     */
+    show() {
+        Widget.attach(this, document.body);
+        this.node.focus();
+    }
+    /**
+     * Close and dispose the modal
+     */
+    close() {
+        this.dispose();
+    }
+}

package/lib/request.d.ts

@@ -6,3 +6,42 @@
  * @returns The response body interpreted as JSON
  */
 export declare function requestAPI<T>(endPoint?: string, init?: RequestInit): Promise<T>;
+/**
+ * Column statistics interface
+ */
+export interface IColumnStats {
+    column_name: string;
+    data_type: string;
+    total_rows: number;
+    non_null_count: number;
+    non_null_percentage: number;
+    null_count: number;
+    null_percentage: number;
+    unique_count: number;
+    unique_percentage: number;
+    min_value?: number;
+    max_value?: number;
+    mean?: number;
+    median?: number;
+    std_dev?: number;
+    outlier_count?: number;
+    outlier_percentage?: number;
+    outlier_lower_bound?: number;
+    outlier_upper_bound?: number;
+    most_common_value?: string;
+    most_common_count?: number;
+    min_length?: number;
+    max_length?: number;
+    avg_length?: number;
+    earliest_date?: string;
+    latest_date?: string;
+    date_range_days?: number;
+}
+/**
+ * Fetch column statistics from the backend
+ *
+ * @param filePath Path to the data file
+ * @param columnName Name of column to analyze
+ * @returns Column statistics
+ */
+export declare function fetchColumnStats(filePath: string, columnName: string): Promise<IColumnStats>;

package/lib/request.js

@@ -33,3 +33,19 @@ export async function requestAPI(endPoint = '', init = {}) {
     }
     return data;
 }
+/**
+ * Fetch column statistics from the backend
+ *
+ * @param filePath Path to the data file
+ * @param columnName Name of column to analyze
+ * @returns Column statistics
+ */
+export async function fetchColumnStats(filePath, columnName) {
+    return requestAPI('column-stats', {
+        method: 'POST',
+        body: JSON.stringify({
+            path: filePath,
+            columnName: columnName
+        })
+    });
+}

package/lib/widget.d.ts

@@ -100,6 +100,10 @@ export declare class TabularDataViewer extends Widget {
      * Toggle sort on a column
      */
     private _toggleSort;
+    /**
+     * Show column statistics modal
+     */
+    private _showColumnStats;
     /**
      * Update sort indicators in column headers
      */

package/lib/widget.js

@@ -1,5 +1,6 @@
 import { Widget } from '@lumino/widgets';
-import { requestAPI } from './request';
+import { requestAPI, fetchColumnStats } from './request';
+import { ColumnStatsModal } from './modal';
 /**
  * Parquet viewer widget
  */
@@ -307,6 +308,17 @@ export class TabularDataViewer extends Widget {
             const nameSpan = document.createElement('div');
             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 = '🛈';
+            infoIcon.title = 'Show column statistics';
+            infoIcon.addEventListener('click', async (e) => {
+                e.preventDefault();
+                e.stopPropagation(); // Prevent sort from triggering
+                await this._showColumnStats(col.name);
+            });
+            nameSpan.appendChild(infoIcon);
             const typeSpan = document.createElement('div');
             typeSpan.className = 'jp-TabularDataViewer-columnType';
             typeSpan.textContent = this._simplifyType(col.type);
@@ -536,6 +548,22 @@ export class TabularDataViewer extends Widget {
         this._updateSortIndicators();
         this._loadData(true);
     }
+    /**
+     * Show column statistics modal
+     */
+    async _showColumnStats(columnName) {
+        try {
+            // Show loading indicator (we could add a spinner here)
+            const stats = await fetchColumnStats(this._filePath, columnName);
+            const modal = new ColumnStatsModal(stats);
+            modal.show();
+        }
+        catch (error) {
+            console.error('Failed to load column statistics:', error);
+            // Could show an error message to user
+            alert(`Failed to load statistics for column "${columnName}": ${error}`);
+        }
+    }
     /**
      * Update sort indicators in column headers
      */

package/package.json

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

package/src/index.ts

@@ -73,9 +73,9 @@ const plugin: JupyterFrontEndPlugin<void> = {
   autoStart: true,
   requires: [ISettingRegistry],
   activate: async (app: JupyterFrontEnd, settingRegistry: ISettingRegistry) => {
-    // console.log(
-    //   'JupyterLab extension jupyterlab_tabular_data_viewer_extension is activated!'
-    // );
+    console.log(
+      'JupyterLab extension jupyterlab_tabular_data_viewer_extension is activated!'
+    );
 
     const { docRegistry, commands, contextMenu } = app;
 

package/src/modal.ts

@@ -0,0 +1,229 @@
+import { Widget } from '@lumino/widgets';
+import { IColumnStats } from './request';
+
+/**
+ * Modal dialog widget for displaying column statistics
+ */
+export class ColumnStatsModal extends Widget {
+  private _stats: IColumnStats;
+
+  constructor(stats: IColumnStats) {
+    super();
+    this._stats = stats;
+    this.addClass('jp-ColumnStatsModal');
+    this._render();
+    this._setupEventListeners();
+  }
+
+  /**
+   * Render the modal content
+   */
+  private _render(): void {
+    const content = document.createElement('div');
+    content.className = 'jp-ColumnStatsModal-content';
+
+    // Header with column name and close button
+    const header = document.createElement('div');
+    header.className = 'jp-ColumnStatsModal-header';
+    const title = document.createElement('h3');
+    title.textContent = `Column: ${this._stats.column_name}`;
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'jp-ColumnStatsModal-close';
+    closeBtn.textContent = '×';
+    closeBtn.onclick = () => this.close();
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+    content.appendChild(header);
+
+    // Copy JSON button
+    const copySection = document.createElement('div');
+    copySection.className = 'jp-ColumnStatsModal-copy';
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'jp-ColumnStatsModal-copyButton';
+    copyBtn.textContent = 'Copy Stats as JSON';
+    copyBtn.onclick = () => this._copyStatsAsJson();
+    copySection.appendChild(copyBtn);
+    content.appendChild(copySection);
+
+    // Data type
+    const typeDiv = document.createElement('div');
+    typeDiv.className = 'jp-ColumnStatsModal-type';
+    typeDiv.textContent = `Type: ${this._stats.data_type}`;
+    content.appendChild(typeDiv);
+
+    // Data Summary section
+    const summarySection = document.createElement('div');
+    summarySection.className = 'jp-ColumnStatsModal-section';
+    const summaryTitle = document.createElement('h4');
+    summaryTitle.textContent = 'Data Summary';
+    summarySection.appendChild(summaryTitle);
+
+    const summaryList = document.createElement('ul');
+    summaryList.innerHTML = `
+      <li>Total rows: ${this._formatNumber(this._stats.total_rows)}</li>
+      <li>Non-null: ${this._formatNumber(this._stats.non_null_count)} (${this._stats.non_null_percentage}%)</li>
+      <li>Null: ${this._formatNumber(this._stats.null_count)} (${this._stats.null_percentage}%)</li>
+      <li>Unique values: ${this._formatNumber(this._stats.unique_count)} (${this._stats.unique_percentage}%)</li>
+    `;
+    summarySection.appendChild(summaryList);
+    content.appendChild(summarySection);
+
+    // Numeric statistics
+    if (this._stats.data_type === 'int' || this._stats.data_type === 'float') {
+      const numericSection = document.createElement('div');
+      numericSection.className = 'jp-ColumnStatsModal-section';
+      const numericTitle = document.createElement('h4');
+      numericTitle.textContent = 'Numeric Statistics';
+      numericSection.appendChild(numericTitle);
+
+      const numericList = document.createElement('ul');
+      const items: string[] = [];
+
+      if (this._stats.min_value !== undefined) {
+        items.push(`Min: ${this._formatNumber(this._stats.min_value)}`);
+      }
+      if (this._stats.max_value !== undefined) {
+        items.push(`Max: ${this._formatNumber(this._stats.max_value)}`);
+      }
+      if (this._stats.mean !== undefined) {
+        items.push(`Mean: ${this._formatNumber(this._stats.mean)}`);
+      }
+      if (this._stats.median !== undefined) {
+        items.push(`Median: ${this._formatNumber(this._stats.median)}`);
+      }
+      if (this._stats.std_dev !== undefined) {
+        items.push(`Std Dev: ${this._formatNumber(this._stats.std_dev)}`);
+      }
+      if (this._stats.outlier_count !== undefined) {
+        items.push(`Outliers (IQR×1.5): ${this._formatNumber(this._stats.outlier_count)} (${this._stats.outlier_percentage}%)`);
+      }
+
+      numericList.innerHTML = items.map(item => `<li>${item}</li>`).join('');
+      numericSection.appendChild(numericList);
+      content.appendChild(numericSection);
+    }
+
+    // String statistics
+    if (this._stats.data_type === 'string') {
+      const stringSection = document.createElement('div');
+      stringSection.className = 'jp-ColumnStatsModal-section';
+      const stringTitle = document.createElement('h4');
+      stringTitle.textContent = 'String Statistics';
+      stringSection.appendChild(stringTitle);
+
+      const stringList = document.createElement('ul');
+      const items: string[] = [];
+
+      if (this._stats.most_common_value !== undefined) {
+        items.push(`Most common: "${this._stats.most_common_value}" (${this._stats.most_common_count})`);
+      }
+      if (this._stats.min_length !== undefined) {
+        items.push(`Min length: ${this._stats.min_length} characters`);
+      }
+      if (this._stats.max_length !== undefined) {
+        items.push(`Max length: ${this._stats.max_length} characters`);
+      }
+      if (this._stats.avg_length !== undefined) {
+        items.push(`Avg length: ${this._formatNumber(this._stats.avg_length)} characters`);
+      }
+
+      stringList.innerHTML = items.map(item => `<li>${item}</li>`).join('');
+      stringSection.appendChild(stringList);
+      content.appendChild(stringSection);
+    }
+
+    // Date/datetime statistics
+    if (this._stats.data_type === 'date' || this._stats.data_type === 'datetime') {
+      const dateSection = document.createElement('div');
+      dateSection.className = 'jp-ColumnStatsModal-section';
+      const dateTitle = document.createElement('h4');
+      dateTitle.textContent = 'Date Range';
+      dateSection.appendChild(dateTitle);
+
+      const dateList = document.createElement('ul');
+      const items: string[] = [];
+
+      if (this._stats.earliest_date) {
+        items.push(`Earliest: ${this._stats.earliest_date}`);
+      }
+      if (this._stats.latest_date) {
+        items.push(`Latest: ${this._stats.latest_date}`);
+      }
+      if (this._stats.date_range_days !== undefined) {
+        items.push(`Span: ${this._formatNumber(this._stats.date_range_days)} days`);
+      }
+
+      dateList.innerHTML = items.map(item => `<li>${item}</li>`).join('');
+      dateSection.appendChild(dateList);
+      content.appendChild(dateSection);
+    }
+
+    this.node.appendChild(content);
+  }
+
+  /**
+   * Format number with thousands separator
+   */
+  private _formatNumber(num: number): string {
+    return num.toLocaleString(undefined, { maximumFractionDigits: 2 });
+  }
+
+  /**
+   * Copy statistics as JSON to clipboard
+   */
+  private async _copyStatsAsJson(): Promise<void> {
+    try {
+      const json = JSON.stringify(this._stats, null, 2);
+      await navigator.clipboard.writeText(json);
+      // Provide visual feedback
+      const btn = this.node.querySelector('.jp-ColumnStatsModal-copyButton');
+      if (btn) {
+        const originalText = btn.textContent;
+        btn.textContent = 'Copied!';
+        setTimeout(() => {
+          btn.textContent = originalText;
+        }, 2000);
+      }
+    } catch (error) {
+      console.error('Failed to copy stats to clipboard:', error);
+    }
+  }
+
+  /**
+   * Setup event listeners for closing the modal
+   */
+  private _setupEventListeners(): void {
+    // Close on ESC key
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        this.close();
+      }
+    };
+    document.addEventListener('keydown', handleKeydown);
+    this.disposed.connect(() => {
+      document.removeEventListener('keydown', handleKeydown);
+    });
+
+    // Close on backdrop click
+    this.node.addEventListener('click', (event: MouseEvent) => {
+      if (event.target === this.node) {
+        this.close();
+      }
+    });
+  }
+
+  /**
+   * Show the modal
+   */
+  show(): void {
+    Widget.attach(this, document.body);
+    this.node.focus();
+  }
+
+  /**
+   * Close and dispose the modal
+   */
+  close(): void {
+    this.dispose();
+  }
+}

package/src/request.ts

@@ -44,3 +44,58 @@ export async function requestAPI<T>(
 
   return data;
 }
+
+/**
+ * Column statistics interface
+ */
+export interface IColumnStats {
+  column_name: string;
+  data_type: string;
+  total_rows: number;
+  non_null_count: number;
+  non_null_percentage: number;
+  null_count: number;
+  null_percentage: number;
+  unique_count: number;
+  unique_percentage: number;
+  // Numeric stats
+  min_value?: number;
+  max_value?: number;
+  mean?: number;
+  median?: number;
+  std_dev?: number;
+  outlier_count?: number;
+  outlier_percentage?: number;
+  outlier_lower_bound?: number;
+  outlier_upper_bound?: number;
+  // String stats
+  most_common_value?: string;
+  most_common_count?: number;
+  min_length?: number;
+  max_length?: number;
+  avg_length?: number;
+  // Date stats
+  earliest_date?: string;
+  latest_date?: string;
+  date_range_days?: number;
+}
+
+/**
+ * Fetch column statistics from the backend
+ *
+ * @param filePath Path to the data file
+ * @param columnName Name of column to analyze
+ * @returns Column statistics
+ */
+export async function fetchColumnStats(
+  filePath: string,
+  columnName: string
+): Promise<IColumnStats> {
+  return requestAPI<IColumnStats>('column-stats', {
+    method: 'POST',
+    body: JSON.stringify({
+      path: filePath,
+      columnName: columnName
+    })
+  });
+}

package/src/widget.ts

@@ -1,5 +1,6 @@
 import { Widget } from '@lumino/widgets';
-import { requestAPI } from './request';
+import { requestAPI, fetchColumnStats } from './request';
+import { ColumnStatsModal } from './modal';
 
 /**
  * Column metadata interface
@@ -346,6 +347,18 @@ 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 = '🛈';
+      infoIcon.title = 'Show column statistics';
+      infoIcon.addEventListener('click', async (e: MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation(); // Prevent sort from triggering
+        await this._showColumnStats(col.name);
+      });
+      nameSpan.appendChild(infoIcon);
+
       const typeSpan = document.createElement('div');
       typeSpan.className = 'jp-TabularDataViewer-columnType';
       typeSpan.textContent = this._simplifyType(col.type);
@@ -666,6 +679,22 @@ export class TabularDataViewer extends Widget {
     this._loadData(true);
   }
 
+  /**
+   * Show column statistics modal
+   */
+  private async _showColumnStats(columnName: string): Promise<void> {
+    try {
+      // Show loading indicator (we could add a spinner here)
+      const stats = await fetchColumnStats(this._filePath, columnName);
+      const modal = new ColumnStatsModal(stats);
+      modal.show();
+    } catch (error) {
+      console.error('Failed to load column statistics:', error);
+      // Could show an error message to user
+      alert(`Failed to load statistics for column "${columnName}": ${error}`);
+    }
+  }
+
   /**
    * Update sort indicators in column headers
    */

package/style/base.css

@@ -19,7 +19,8 @@
 }
 
 .jp-TabularDataViewer-table {
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
   table-layout: fixed;
   font-family: var(--jp-code-font-family);
   font-size: var(--jp-code-font-size);
@@ -44,8 +45,10 @@
 .jp-TabularDataViewer-filterCell {
   padding: 4px 8px;
   border-bottom: 1px solid var(--jp-border-color1);
-  border-right: 1px solid var(--jp-border-color2);
+  border-right: 1px solid var(--jp-border-color0);
   box-sizing: border-box;
+  background-color: var(--jp-layout-color2);
+  position: relative;
 }
 
 .jp-TabularDataViewer-filterCell:last-child {
@@ -57,7 +60,7 @@
   padding: 4px 6px;
   border: 1px solid var(--jp-border-color2);
   border-radius: 2px;
-  background-color: var(--jp-input-background);
+  background-color: var(--jp-layout-color0);
   color: var(--jp-ui-font-color1);
   font-family: var(--jp-ui-font-family);
   font-size: var(--jp-ui-font-size1);
@@ -85,7 +88,7 @@
   text-align: left;
   font-weight: 600;
   border-bottom: 2px solid var(--jp-border-color1);
-  border-right: 1px solid var(--jp-border-color2);
+  border-right: 1px solid var(--jp-border-color0);
   background-color: var(--jp-layout-color2);
   position: relative;
   min-width: 120px;
@@ -156,6 +159,7 @@
 .jp-TabularDataViewer-cell {
   padding: 6px 12px;
   border-right: 1px solid var(--jp-border-color2);
+  border-bottom: 1px solid var(--jp-border-color2);
   color: var(--jp-ui-font-color1);
   word-break: break-word;
   max-width: 400px;
@@ -245,7 +249,7 @@
 }
 
 [data-jp-theme-light='false'] .jp-TabularDataViewer-filterInput {
-  background-color: var(--jp-input-background);
+  background-color: var(--jp-layout-color0);
   color: var(--jp-ui-font-color0);
 }
 
@@ -267,3 +271,147 @@
 .jp-TabularDataViewer-container::-webkit-scrollbar-thumb:hover {
   background: var(--jp-border-color1);
 }
+
+/* Column Info Icon */
+.jp-TabularDataViewer-infoIcon {
+  margin-left: 6px;
+  font-size: 16px;
+  color: transparent;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  user-select: none;
+}
+
+.jp-TabularDataViewer-headerCell:hover .jp-TabularDataViewer-infoIcon {
+  color: var(--jp-brand-color1) !important;
+}
+
+.jp-TabularDataViewer-infoIcon:hover {
+  color: var(--jp-brand-color1) !important;
+}
+
+/* Column Statistics Modal */
+.jp-ColumnStatsModal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+
+.jp-ColumnStatsModal-content {
+  background-color: var(--jp-layout-color1);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  max-width: 500px;
+  max-height: 80vh;
+  overflow-y: auto;
+  padding: 20px;
+  color: var(--jp-ui-font-color1);
+  font-family: var(--jp-ui-font-family);
+}
+
+.jp-ColumnStatsModal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid var(--jp-border-color1);
+}
+
+.jp-ColumnStatsModal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-ColumnStatsModal-close {
+  background: none;
+  border: none;
+  font-size: 28px;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--jp-ui-font-color2);
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.jp-ColumnStatsModal-close:hover {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-ColumnStatsModal-copy {
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+.jp-ColumnStatsModal-copyButton {
+  background-color: var(--jp-brand-color1);
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--jp-ui-font-family);
+  transition: background-color 0.2s ease;
+}
+
+.jp-ColumnStatsModal-copyButton:hover {
+  background-color: var(--jp-brand-color2);
+}
+
+.jp-ColumnStatsModal-copyButton:active {
+  background-color: var(--jp-brand-color3);
+}
+
+.jp-ColumnStatsModal-type {
+  font-size: 14px;
+  color: var(--jp-ui-font-color2);
+  margin-bottom: 20px;
+  font-style: italic;
+}
+
+.jp-ColumnStatsModal-section {
+  margin-bottom: 20px;
+}
+
+.jp-ColumnStatsModal-section h4 {
+  margin: 0 0 8px 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-ColumnStatsModal-section ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.jp-ColumnStatsModal-section li {
+  padding: 4px 0;
+  font-size: 14px;
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-ColumnStatsModal-section li::before {
+  content: '• ';
+  color: var(--jp-brand-color1);
+  font-weight: bold;
+  margin-right: 8px;
+}