Dropdowns and Interactive Elements

/**
 * 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 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-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'}
        ]
      }
    }
  ]
)

/**
 * 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 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'
    }
  ]
)

# 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-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
    ]
  }
)

# 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
)

# 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
)