A powerful, interactive table component for Streamlit with advanced visualization features including data bar charts, David Hum charts, range charts, fixed-scale range charts, and custom text display capabilities. Supports both single-level and multi-level (pd.MultiIndex) column headers.

• Clickable cells with return values
• Custom styling support
• Responsive design with configurable heights
• Multi-level column headers via pd.MultiIndex (fully backward compatible with single-level headers)

• Visual representation of numeric values
• Customizable min/max ranges
• Recommended value markers with custom colors
• Hover tooltips showing actual vs. recommended values
• Support for both positive and negative values

• Percentage-based visualizations
• Exception highlighting for non-numeric values
• Customizable color schemes

• Clean band design for long/short‑term ranges with a current marker
• Palette options (muted, professional, warm/cool, grayscale) for accessibility
• Optional text display when current is outside both ranges (below or above)

• Fixed min/max scale across all rows for consistent comparison
• Auto-generated tick marks (7 ticks: 3 left, midpoint, 3 right)
• Three customizable dots per row with individual colors
• Midpoint reference line for easy visualization
• Perfect for comparing values across rows on the same scale

• Column width customization
• Hidden column support via CSS
• Flexible styling functions
• Comprehensive configuration options

pip install clickable-table

import streamlit as st
from clickable_table import clickable_table
import pandas as pd

# Sample data
data = {
    'Metric': ['Revenue', 'Growth', 'Score'],
    'Value': [1000, 50, 80],
    'Target': [1200, 60, 90]
}

df = pd.DataFrame(data)

# Create the clickable table
return_value = clickable_table(
    df=df,
    key="example"
)

if return_value:
    st.json(return_value)

The component supports pd.MultiIndex columns out of the box. Group headers automatically span their sub-columns, and all visualization features (data bars, charts, hidden columns, click handling) work identically.

import pandas as pd

# Create a DataFrame with multi-level column headers
columns = pd.MultiIndex.from_tuples([
    ('Revenue', 'Actual'),
    ('Revenue', '% Change'),
    ('Margin', 'Value'),
    ('Margin', 'Target'),
])

df = pd.DataFrame(
    [[1000, 5.2, 0.35, 0.40],
     [1200, 8.1, 0.38, 0.42]],
    index=['Q1', 'Q2'],
    columns=columns,
)

return_value = clickable_table(
    df=df,
    idx_col_name='Quarter',
    key="multi_index_example"
)

Column indices (col_idx, recommended_idx, etc.) work the same way as single-level headers — they reference the position in the bottom-level header row, including the index column at position 0.

See example_single_index.py and example_multi_index.py for full working examples with all chart types.

data_bar_columns = [
    {
        'col_idx': 1,  # Column index
        'min': -100,   # Minimum value
        'max': 100,    # Maximum value
        'recommended_idx': 2,  # Column with recommended value
        'line_color': '#000000'  # Custom marker color
    }
]

clickable_table(
    df=df,
    data_bar_columns=data_bar_columns,
    key="advanced"
)

range_chart = [
    {
        'col_idx': 5,  # Range chart column
        'long_term_high_idx': 1,    # Long term high values
        'long_term_low_idx': 2,     # Long term low values
        'short_term_high_idx': 3,   # Short term high values
        'short_term_low_idx': 4,    # Short term low values
        'current_idx': 5,           # Current values
        'long_term_color': 'blue',  # Long term dot color
        'short_term_color': 'green', # Short term dot color
        'current_color': 'red',     # Current value dot color
        'low_text': '⚠️ Below Range', # Text when current < both lows
        'high_text': '⚠️ Above Range' # Text when current > both highs
    }
]

clickable_table(
    df=df,
    range_chart=range_chart,
    key="range_example"
)

david_hum_columns = [
    {
        'col_idx': 3,  # Column index
        'min': 0,      # Minimum value
        'max': 100,    # Maximum value
        'exception_col_color': "yellow"  # Color for non-numeric values
    }
]

clickable_table(
    df=df,
    david_hum_columns=david_hum_columns,
    key="david_hum_example"
)

fixed_scale_range_chart = [
    {
        'col_idx': 16,              # Column index where chart will be rendered
        'min': -1.5,                 # Fixed minimum value for entire table
        'max': 1.5,                  # Fixed maximum value for entire table
        'dot1_idx': 13,              # Column index for first dot
        'dot2_idx': 14,              # Column index for second dot
        'dot3_idx': 15,              # Column index for third dot
        'dot1_color': '#EF4444',     # Color for first dot (optional, default: '#9CA3AF')
        'dot2_color': '#6B7280',     # Color for second dot (optional, default: '#9CA3AF')
        'dot3_color': '#D1D5DB',     # Color for third dot (optional, default: '#9CA3AF')
        'line_color': '#D1D5DB',     # Color for the grey line (optional, default: '#D1D5DB')
        'line_height': 2,            # Height of line in pixels (optional, default: 2)
        'tick_marks': True           # Show tick marks (optional, default: True)
    }
]

clickable_table(
    df=df,
    fixed_scale_range_chart=fixed_scale_range_chart,
    key="fixed_scale_example"
)

# Custom column widths
column_width = ['100px', '150px', '200px']

# Hide specific columns
hidden_columns = [2, 4]  # Column indices to hide

# Rounded or square bar edges
bar_rounded = True  # True for rounded edges, False for square edges

clickable_table(
    df=df,
    column_width=column_width,
    hidden_columns=hidden_columns,
    hidden_column_class="hide-column",
    bar_rounded=bar_rounded,
    key="custom_example"
)

The range chart component now supports displaying custom text when the current value falls below both the short-term and long-term low thresholds. This is useful for highlighting values that are outside the expected range.

The text will be displayed when:

current < short_term_low AND current < long_term_low

Add the low_text parameter to your range chart configuration:

range_chart = [
    {
        'col_idx': 5,
        'long_term_high_idx': 1,
        'long_term_low_idx': 2,
        'short_term_high_idx': 3,
        'short_term_low_idx': 4,
        'current_idx': 5,
        'long_term_color': 'blue',
        'short_term_color': 'green',
        'current_color': 'red',
        'low_text': '⚠️ Below Range'  # Text to display
    }
]

• When text is displayed: The entire range chart (dots and lines) is replaced by the text
• When text is not displayed: The normal range chart with dots and lines is shown
• Styling: The text appears with a warning-style appearance (red text, light red background, border)
• Supports both below-range (low_text) and above-range (high_text) messages

The component includes built-in CSS classes that you can customize:

• .range-chart-text: Styles for the range chart warning text
• .range-chart-cell: Ensures proper positioning for range chart elements
• .fixed-scale-range-chart-cell: Styles for fixed-scale range chart cells
• .hide-column: Hides columns when applied

You can control whether bars have rounded or square edges using the bar_rounded parameter:

# Rounded edges (default)
clickable_table(df=df, bar_rounded=True, key="example")

# Square edges
clickable_table(df=df, bar_rounded=False, key="example")

This affects:

• Data bar charts
• David Hum charts
• Range chart bands and markers
• Fixed-scale range chart dots and line

• example.py — comprehensive demo of all features (single-level headers)
• example_single_index.py — single-level column headers with all chart types
• example_multi_index.py — pd.MultiIndex column headers with all chart types

To develop locally:

1. Set _RELEASE = False in __init__.py
2. Run npm start in the frontend directory
3. The component will use localhost:3000 for development

• ✨ NEW: Multi-level column headers via pd.MultiIndex — group headers with colspan properly span their sub-columns
• All features (data bars, David Hum, range charts, fixed-scale charts, hidden columns, click handling) work with both single-level and multi-level headers
• Zero-width column hiding for multi-level headers ensures correct grid alignment
• Added example_single_index.py and example_multi_index.py

• Complete visual refresh: rounded bars, centered axis, softer palette
• Range chart redesigned to bands + current marker; palette options
• Recommendation marker clarity: medium‑gray connector and marker, overlap‑aware text
• Consistent data bars across columns; improved negative/positive styling
• ✨ NEW: Fixed-scale range charts with auto-generated tick marks
• ✨ NEW: Configurable bar edge styling (rounded/square) via bar_rounded parameter
• ✨ NEW: Midpoint reference line in fixed-scale range charts
• ✨ NEW: Three customizable dots per row in fixed-scale range charts
• Docs and screenshots updated

• Range chart text display when values are above thresholds

• ✨ NEW: Range chart text display when values are below thresholds
• 🔧 Fixed deprecated applymap warnings
• 🐛 Resolved Arrow conversion issues
• 📚 Enhanced documentation and examples

• 🎨 Custom line colors for data bar charts
• 🔍 Hover tooltips with actual vs. target values
• 📊 Column-specific styling support

• Python >= 3.7
• Streamlit >= 0.63
• pandas
• React (for development)

This project is licensed under the MIT License - see the LICENSE file for details.

Contributions are welcome! Please feel free to submit a Pull Request.