Styling and Layout

/**
 * Core styling configuration for different table elements
 */
interface TableStyling {
  /** CSS styles for the outer table container */
  style_table: CSSProperties;
  
  /** CSS styles for all cells (header, data, filter) */
  style_cell: CSSProperties;
  
  /** CSS styles for data cells only */
  style_data: CSSProperties;
  
  /** CSS styles for filter cells only */
  style_filter: CSSProperties;
  
  /** CSS styles for header cells only */
  style_header: CSSProperties;
}

/**
 * CSS Properties interface (common CSS properties)
 */
interface CSSProperties {
  width?: string | number;
  height?: string | number;
  backgroundColor?: string;
  color?: string;
  textAlign?: 'left' | 'center' | 'right';
  fontSize?: string | number;
  fontWeight?: string | number;
  padding?: string | number;
  margin?: string | number;
  border?: string;
  overflow?: string;
  whiteSpace?: string;
  [key: string]: any;
}

DataTable(
  # Table container styling
  style_table={
    'height': '400px',
    'overflowY': 'auto',
    'width': '100%',
    'minWidth': '900px'
  },
  
  # All cells styling
  style_cell={
    'textAlign': 'left',
    'padding': '12px',
    'fontFamily': 'Arial, sans-serif',
    'border': '1px solid #ddd'
  },
  
  # Header-specific styling
  style_header={
    'backgroundColor': '#f8f9fa',
    'fontWeight': 'bold',
    'textAlign': 'center',
    'color': '#2c3e50'
  },
  
  # Data cells styling
  style_data={
    'backgroundColor': '#ffffff',
    'color': '#2c3e50'
  }
)

/**
 * Conditional styling for cells based on various criteria
 */
interface ConditionalCellStyle {
  /** Condition specification */
  if: {
    column_id?: string | string[];
    column_type?: 'any' | 'numeric' | 'text' | 'datetime';
  };
  /** CSS properties to apply when condition matches */
  [cssProperty: string]: any;
}

# Column-based conditional styling
DataTable(
  style_cell_conditional=[
    {
      'if': {'column_id': 'price'},
      'textAlign': 'right',
      'fontWeight': 'bold'
    },
    {
      'if': {'column_id': ['name', 'description']},
      'textAlign': 'left',
      'maxWidth': '200px',
      'overflow': 'hidden',
      'textOverflow': 'ellipsis'
    },
    {
      'if': {'column_type': 'numeric'},
      'textAlign': 'right'
    }
  ]
)

/**
 * Conditional styling for data cells with advanced conditions
 */
interface ConditionalDataStyle {
  if: {
    column_id?: string | string[];
    column_type?: 'any' | 'numeric' | 'text' | 'datetime';
    filter_query?: string;
    state?: 'active' | 'selected';
    row_index?: number | 'odd' | 'even' | number[];
    column_editable?: boolean;
  };
  [cssProperty: string]: any;
}

# Advanced data conditional styling
DataTable(
  style_data_conditional=[
    # Alternate row colors
    {
      'if': {'row_index': 'odd'},
      'backgroundColor': '#f8f9fa'
    },
    
    # Highlight selected cells
    {
      'if': {'state': 'selected'},
      'backgroundColor': '#007bff',
      'color': 'white'
    },
    
    # Style based on data values
    {
      'if': {
        'filter_query': '{status} = "active"'
      },
      'backgroundColor': '#d4edda',
      'color': '#155724'
    },
    
    # Highlight negative values
    {
      'if': {
        'filter_query': '{profit} < 0',
        'column_id': 'profit'
      },
      'backgroundColor': '#f8d7da',
      'color': '#721c24'
    },
    
    # Style editable columns differently
    {
      'if': {'column_editable': True},
      'backgroundColor': '#fff3cd'
    }
  ]
)

# Header conditional styling
DataTable(
  style_header_conditional=[
    {
      'if': {'column_id': 'priority'},
      'backgroundColor': '#ff6b6b',
      'color': 'white'
    },
    {
      'if': {'header_index': 'odd'},
      'backgroundColor': '#e9ecef'
    }
  ],
  
  # Filter conditional styling
  style_filter_conditional=[
    {
      'if': {'column_type': 'numeric'},
      'textAlign': 'center'
    }
  ]
)

/**
 * Fixed columns configuration for horizontal scrolling
 */
interface FixedColumns {
  /** Fix header columns */
  headers: boolean;
  
  /** Number of data columns to fix from left */
  data: number;
}

# Fixed columns for wide tables
DataTable(
  fixed_columns={
    'headers': True,    # Fix all operation columns (select, delete, etc.)
    'data': 2          # Fix first 2 data columns
  },
  style_table={'overflowX': 'auto'}  # Enable horizontal scrolling
)

/**
 * Fixed rows configuration for vertical scrolling
 */
interface FixedRows {
  /** Fix header rows */
  headers: boolean;
  
  /** Number of data rows to fix from top */
  data: number;
}

# Fixed rows for tall tables
DataTable(
  fixed_rows={
    'headers': True,    # Fix header and filter rows
    'data': 3          # Fix first 3 data rows
  },
  style_table={'height': '400px', 'overflowY': 'auto'}
)

/**
 * Width behavior configuration
 */
interface WidthConfig {
  /** Control table width behavior */
  fill_width: boolean;
}

# Responsive width behavior
DataTable(
  fill_width=True,     # Table grows to fill available space
  # fill_width=False   # Table width equals content width
  
  style_table={
    'width': '100%',
    'minWidth': '600px'  # Minimum width for readability
  }
)

# List-style appearance without column borders
DataTable(
  style_as_list_view=True,  # Remove borders between columns
  
  style_cell={
    'padding': '8px 16px',
    'border': 'none'
  },
  
  style_data={
    'borderBottom': '1px solid #eee'
  }
)

/**
 * Custom CSS rule injection for advanced styling beyond built-in properties
 */
interface CSSRule {
  /** CSS selector targeting table elements */
  selector: string;
  
  /** CSS rule content to apply */
  rule: string;
}

/**
 * CSS injection configuration
 */
interface CSSConfig {
  /** Array of custom CSS rules to inject */
  css: CSSRule[];
}

# Custom CSS for advanced styling
DataTable(
  css=[
    {
      'selector': '.dash-table-container',
      'rule': 'font-family: "Helvetica Neue", Arial, sans-serif'
    },
    {
      'selector': '.dash-cell.focused',
      'rule': 'background-color: #e3f2fd !important; border: 2px solid #2196f3'
    },
    {
      'selector': '.dash-header',
      'rule': 'text-transform: uppercase; letter-spacing: 0.5px'
    },
    {
      'selector': '.dash-spreadsheet',
      'rule': 'border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1)'
    }
  ]
)

/**
 * Markdown cell behavior configuration
 */
interface MarkdownOptions {
  /** Link target behavior for markdown links */
  link_target: '_blank' | '_parent' | '_self' | '_top' | string;
  
  /** Allow HTML in markdown cells (security consideration) */
  html: boolean;
}

# Configure markdown cell behavior
DataTable(
  columns=[
    {
      "name": "Description", 
      "id": "desc", 
      "type": "text",
      "presentation": "markdown"  # Enable markdown rendering
    }
  ],
  
  markdown_options={
    'link_target': '_blank',  # Open links in new tab (default)
    'html': False            # Disable HTML for security (default)
  },
  
  # Warning: Enabling HTML creates XSS vulnerability if content is untrusted
  # markdown_options={'html': True}  # Only if content is trusted
)

# Enable virtualization for large datasets
DataTable(
  virtualization=True,  # Use virtual scrolling for performance
  
  # Important: virtualization requires fixed dimensions
  style_table={
    'height': '400px',
    'width': '800px'
  },
  
  # Column widths should be consistent
  style_cell={'width': '150px'},
  
  # Row heights should be consistent
  style_data={'height': '40px'}
)

# Comprehensive styling example
DataTable(
  id='styled-table',
  data=[
    {"product": "Widget A", "price": 29.99, "stock": 150, "status": "active"},
    {"product": "Widget B", "price": 19.99, "stock": 0, "status": "inactive"},
    {"product": "Widget C", "price": 39.99, "stock": 75, "status": "active"}
  ],
  columns=[
    {"name": "Product", "id": "product"},
    {"name": "Price", "id": "price", "type": "numeric"},
    {"name": "Stock", "id": "stock", "type": "numeric"},
    {"name": "Status", "id": "status"}
  ],
  
  # Table container styling
  style_table={
    'height': '300px',
    'overflowY': 'auto',
    'border': '1px solid #ddd',
    'borderRadius': '8px'
  },
  
  # Base cell styling
  style_cell={
    'textAlign': 'left',
    'padding': '12px 16px',
    'fontFamily': 'system-ui, -apple-system, sans-serif',
    'fontSize': '14px'
  },
  
  # Header styling
  style_header={
    'backgroundColor': '#2c3e50',
    'color': 'white',
    'fontWeight': '600',
    'textAlign': 'center',
    'textTransform': 'uppercase',
    'letterSpacing': '0.5px'
  },
  
  # Data cell styling
  style_data={
    'backgroundColor': 'white',
    'border': 'none',
    'borderBottom': '1px solid #eee'
  },
  
  # Conditional styling
  style_cell_conditional=[
    # Right-align numeric columns
    {
      'if': {'column_type': 'numeric'},
      'textAlign': 'right',
      'fontVariantNumeric': 'tabular-nums'
    }
  ],
  
  style_data_conditional=[
    # Alternate row colors
    {
      'if': {'row_index': 'odd'},
      'backgroundColor': '#f8f9fa'
    },
    
    # Highlight out of stock items
    {
      'if': {
        'filter_query': '{stock} = 0',
        'column_id': 'stock'
      },
      'backgroundColor': '#ffebee',
      'color': '#c62828',
      'fontWeight': 'bold'
    },
    
    # Style inactive status
    {
      'if': {
        'filter_query': '{status} = "inactive"',
        'column_id': 'status'
      },
      'backgroundColor': '#ffecb3',
      'color': '#ef6c00'
    },
    
    # Highlight selected rows
    {
      'if': {'state': 'selected'},
      'backgroundColor': '#e3f2fd',
      'border': '1px solid #2196f3'
    }
  ],
  
  # Responsive layout
  fill_width=True,
  
  # Enable row selection for demonstration
  row_selectable="multi"
)