CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-dash--table

An interactive table component designed for viewing, editing, and exploring large datasets in Dash applications.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

dropdowns-interactive.mddocs/

Dropdowns and Interactive Elements

Overview

Dash Table supports sophisticated dropdown menus within cells, comprehensive tooltip systems, and advanced user input validation. These interactive elements enhance user experience and provide rich data entry capabilities.

Dropdown System

Basic Dropdown Configuration

/**
 * Column-based dropdown configuration
 */
interface DropdownConfig {
  /** Column ID to dropdown definition mapping */
  [columnId: string]: {
    /** Whether dropdown value can be cleared */
    clearable?: boolean;
    
    /** Dropdown option definitions */
    options: Array<{
      /** Display text */
      label: string;
      
      /** Actual value stored in data */
      value: string | number | boolean;
    }>;
  };
}

# Basic dropdown setup
DataTable(
  columns=[
    {"name": "Status", "id": "status", "presentation": "dropdown"},
    {"name": "Category", "id": "category", "presentation": "dropdown"}
  ],
  
  dropdown={
    'status': {
      'clearable': True,
      'options': [
        {'label': 'Active', 'value': 'active'},
        {'label': 'Inactive', 'value': 'inactive'},
        {'label': 'Pending', 'value': 'pending'}
      ]
    },
    'category': {
      'clearable': False,  # Must select a value
      'options': [
        {'label': 'Electronics', 'value': 'electronics'},
        {'label': 'Clothing', 'value': 'clothing'},
        {'label': 'Books', 'value': 'books'}
      ]
    }
  }
)

Conditional Dropdowns

/**
 * Conditional dropdown configuration based on other cell values
 */
interface ConditionalDropdown {
  /** Condition for when to show this dropdown */
  if: {
    /** Column ID to match */
    column_id?: string;
    
    /** Filter query condition */
    filter_query?: string;
  };
  
  /** Whether values can be cleared */
  clearable?: boolean;
  
  /** Options for this conditional dropdown */
  options: Array<{
    label: string;
    value: string | number | boolean;
  }>;
}

# Conditional dropdowns based on other column values
DataTable(
  dropdown_conditional=[
    # Different city options based on country
    {
      'if': {
        'column_id': 'city',
        'filter_query': '{country} = "USA"'
      },
      'options': [
        {'label': 'New York', 'value': 'new_york'},
        {'label': 'Los Angeles', 'value': 'los_angeles'},
        {'label': 'Chicago', 'value': 'chicago'}
      ]
    },
    {
      'if': {
        'column_id': 'city',
        'filter_query': '{country} = "Canada"'
      },
      'options': [
        {'label': 'Toronto', 'value': 'toronto'},
        {'label': 'Vancouver', 'value': 'vancouver'},
        {'label': 'Montreal', 'value': 'montreal'}
      ]
    },
    
    # Different priority options based on category
    {
      'if': {
        'column_id': 'priority',
        'filter_query': '{category} = "urgent"'
      },
      'options': [
        {'label': 'Critical', 'value': 'critical'},
        {'label': 'High', 'value': 'high'}
      ]
    }
  ]
)

Row-Specific Dropdowns

/**
 * Row-by-row dropdown customization
 */
interface DropdownData {
  /** Column ID to dropdown definition mapping for this row */
  [columnId: string]: {
    clearable?: boolean;
    options: Array<{
      label: string;
      value: string | number | boolean;
    }>;
  };
}

# Individual dropdown options per row
DataTable(
  data=[
    {"name": "John", "role": "manager", "permissions": "admin"},
    {"name": "Jane", "role": "developer", "permissions": "user"},
    {"name": "Bob", "role": "intern", "permissions": "read"}
  ],
  
  dropdown_data=[
    # Row 0: Manager gets full permission options
    {
      'permissions': {
        'options': [
          {'label': 'Admin', 'value': 'admin'},
          {'label': 'Editor', 'value': 'editor'},
          {'label': 'User', 'value': 'user'}
        ]
      }
    },
    # Row 1: Developer gets limited options
    {
      'permissions': {
        'options': [
          {'label': 'Editor', 'value': 'editor'},
          {'label': 'User', 'value': 'user'}
        ]
      }
    },
    # Row 2: Intern gets minimal options
    {
      'permissions': {
        'options': [
          {'label': 'Read Only', 'value': 'read'},
          {'label': 'User', 'value': 'user'}
        ]
      }
    }
  ]
)

Tooltip System

Basic Tooltip Configuration

/**
 * Column-based tooltip configuration
 */
interface TooltipConfig {
  /** Column ID to tooltip definition mapping */
  [columnId: string]: string | {
    /** Tooltip display value */
    value: string;
    
    /** Content type */
    type?: 'text' | 'markdown';
    
    /** Where to show tooltip */
    use_with?: 'both' | 'data' | 'header';
    
    /** Custom delay in milliseconds */
    delay?: number;
    
    /** Custom duration in milliseconds */
    duration?: number;
  };
}

# Basic column tooltips
DataTable(
  tooltip={
    'price': 'Current market price in USD',
    'stock': 'Available inventory units',
    'description': {
      'value': 'Detailed **product description** with *formatting*',
      'type': 'markdown',
      'use_with': 'data'
    }
  },
  
  # Global tooltip timing
  tooltip_delay=500,     # 500ms delay before showing
  tooltip_duration=3000  # Show for 3 seconds
)

Conditional Tooltips

/**
 * Conditional tooltip configuration
 */
interface ConditionalTooltip {
  /** Condition for when to show this tooltip */
  if: {
    column_id?: string;
    filter_query?: string;
    row_index?: number | 'odd' | 'even';
  };
  
  /** Tooltip content */
  value: string;
  
  /** Content type */
  type?: 'text' | 'markdown';
  
  /** Custom timing */
  delay?: number;
  duration?: number;
}

# Conditional tooltips based on data values
DataTable(
  tooltip_conditional=[
    # Warning tooltip for low stock
    {
      'if': {
        'filter_query': '{stock} < 10',
        'column_id': 'stock'
      },
      'value': '⚠️ **Low Stock Alert**\n\nThis item is running low. Consider reordering.',
      'type': 'markdown',
      'duration': 5000
    },
    
    # Help tooltip for complex fields
    {
      'if': {'column_id': 'formula'},
      'value': 'Use Excel-like formulas: =SUM(A1:A10), =AVERAGE(B:B)',
      'type': 'text'
    },
    
    # Row-specific tooltips
    {
      'if': {'row_index': 0},
      'value': 'This is the header row with special formatting',
      'type': 'text'
    }
  ]
)

Row-Specific Tooltips

# Individual tooltips per cell
DataTable(
  tooltip_data=[
    # Row 0 tooltips
    {
      'name': 'CEO - Company founder',
      'salary': {'value': 'Base salary excluding bonuses', 'type': 'text'}
    },
    # Row 1 tooltips
    {
      'name': 'CTO - Technical lead',
      'salary': 'Includes stock options value'
    }
  ]
)

Header Tooltips

/**
 * Header-specific tooltip configuration
 */
interface HeaderTooltip {
  [columnId: string]: string | {
    value: string;
    type?: 'text' | 'markdown';
    delay?: number;
    duration?: number;
  } | Array<string | {
    value: string;
    type?: 'text' | 'markdown';
    delay?: number;
    duration?: number;
  } | null>;
}

# Header tooltips for column explanations
DataTable(
  tooltip_header={
    'revenue': 'Total revenue for the fiscal year',
    'profit_margin': {
      'value': '**Profit Margin Calculation**\n\n(Revenue - Costs) / Revenue × 100',
      'type': 'markdown'
    },
    # Multi-header rows
    'quarterly_sales': [
      'Q1-Q4 Sales Data',  # First header row
      null,                # No tooltip for second row
      'Includes all revenue streams'  # Third header row
    ]
  }
)

Input Validation and Interactive Behavior

Advanced Validation Configuration

# Comprehensive interactive table with validation
DataTable(
  data=[
    {"product": "Widget A", "price": 29.99, "category": "electronics", "active": True}
  ],
  
  columns=[
    {
      "name": "Product", 
      "id": "product", 
      "type": "text",
      "validation": {"allow_null": False}
    },
    {
      "name": "Price", 
      "id": "price", 
      "type": "numeric",
      "presentation": "input",
      "on_change": {"action": "coerce", "failure": "reject"}
    },
    {
      "name": "Category", 
      "id": "category", 
      "presentation": "dropdown"
    },
    {
      "name": "Active", 
      "id": "active", 
      "presentation": "dropdown"
    }
  ],
  
  # Dropdown configurations
  dropdown={
    'category': {
      'clearable': True,
      'options': [
        {'label': 'Electronics', 'value': 'electronics'},
        {'label': 'Clothing', 'value': 'clothing'},
        {'label': 'Home & Garden', 'value': 'home_garden'}
      ]
    },
    'active': {
      'clearable': False,
      'options': [
        {'label': 'Yes', 'value': True},
        {'label': 'No', 'value': False}
      ]
    }
  },
  
  # Comprehensive tooltip system
  tooltip={
    'price': {
      'value': 'Enter price in USD. System will validate numeric input.',
      'type': 'text',
      'use_with': 'both'
    }
  },
  
  tooltip_conditional=[
    {
      'if': {
        'filter_query': '{price} > 100',
        'column_id': 'price'
      },
      'value': '💰 **Premium Product**\n\nThis is a high-value item.',
      'type': 'markdown'
    }
  ],
  
  # Interactive features
  editable=True,
  cell_selectable=True,
  tooltip_delay=300,
  tooltip_duration=4000
)

Complete Interactive Elements Example

# Full-featured interactive table
DataTable(
  id='interactive-elements-demo',
  
  data=[
    {
      "employee": "Alice Johnson",
      "department": "sales", 
      "region": "north",
      "performance": "excellent",
      "salary": 65000,
      "active": True
    },
    {
      "employee": "Bob Smith",
      "department": "engineering", 
      "region": "west",
      "performance": "good",
      "salary": 85000,
      "active": True
    }
  ],
  
  columns=[
    {"name": "Employee", "id": "employee", "type": "text"},
    {"name": "Department", "id": "department", "presentation": "dropdown"},
    {"name": "Region", "id": "region", "presentation": "dropdown"},
    {"name": "Performance", "id": "performance", "presentation": "dropdown"},
    {"name": "Salary", "id": "salary", "type": "numeric"},
    {"name": "Active", "id": "active", "presentation": "dropdown"}
  ],
  
  # Basic dropdowns
  dropdown={
    'department': {
      'options': [
        {'label': 'Sales', 'value': 'sales'},
        {'label': 'Engineering', 'value': 'engineering'},
        {'label': 'Marketing', 'value': 'marketing'}
      ]
    },
    'performance': {
      'options': [
        {'label': 'Excellent', 'value': 'excellent'},
        {'label': 'Good', 'value': 'good'},
        {'label': 'Needs Improvement', 'value': 'needs_improvement'}
      ]
    },
    'active': {
      'clearable': False,
      'options': [
        {'label': 'Active', 'value': True},
        {'label': 'Inactive', 'value': False}
      ]
    }
  },
  
  # Conditional dropdowns (region based on department)
  dropdown_conditional=[
    {
      'if': {
        'column_id': 'region',
        'filter_query': '{department} = "sales"'
      },
      'options': [
        {'label': 'North', 'value': 'north'},
        {'label': 'South', 'value': 'south'},
        {'label': 'East', 'value': 'east'},
        {'label': 'West', 'value': 'west'}
      ]
    },
    {
      'if': {
        'column_id': 'region',
        'filter_query': '{department} = "engineering"'
      },
      'options': [
        {'label': 'West Coast', 'value': 'west'},
        {'label': 'East Coast', 'value': 'east'}
      ]
    }
  ],
  
  # Comprehensive tooltips
  tooltip={
    'salary': 'Annual base salary in USD',
    'performance': {
      'value': '**Performance Rating Scale:**\n- Excellent: Exceeds expectations\n- Good: Meets expectations\n- Needs Improvement: Below expectations',
      'type': 'markdown'
    }
  },
  
  tooltip_conditional=[
    {
      'if': {
        'filter_query': '{salary} > 80000',
        'column_id': 'salary'
      },
      'value': '💼 Senior Level Compensation',
      'type': 'text'
    }
  ],
  
  # Enable editing and interaction
  editable=True,
  cell_selectable=True,
  row_selectable="single",
  
  # Tooltip timing
  tooltip_delay=400,
  tooltip_duration=3500
)

Install with Tessl CLI

npx tessl i tessl/npm-dash--table

docs

data-management.md

dropdowns-interactive.md

export-data-ops.md

formatting-localization.md

index.md

interactive-features.md

styling-layout.md

tile.json