Content Components

class Table:
    """
    Enhanced table component with Bootstrap styling.
    
    Args:
        children: Table content (thead, tbody, tr, td elements)
        id (str): Component identifier for callbacks
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        striped (bool): Add zebra-striping to table rows
        bordered (bool): Add borders to all table cells
        borderless (bool): Remove all borders
        hover (bool): Enable hover effect on table rows
        dark (bool): Dark table theme
        size (str): Table size - "sm" for compact table
        responsive (bool|str): Make table responsive - True or breakpoint ("sm", "md", "lg", "xl", "xxl")
        color (str): Table color theme
    """
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 striped=False, bordered=False, borderless=False, hover=False,
                 dark=False, size=None, responsive=False, color=None, **kwargs): ...
    
    @classmethod
    def from_dataframe(cls, df, float_format=None, columns=None, header=True,
                      index=False, index_label=None, date_format=None, **table_kwargs):
        """
        Generate a Table component from a pandas DataFrame.
        
        Args:
            df (pandas.DataFrame): DataFrame to render as table
            float_format (str): Format string for floating point numbers
            columns (list): Column subset to include
            header (bool|list|dict): Include column headers, or custom headers
            index (bool): Include row index as column
            index_label (str): Label for index column
            date_format (str): Format string for datetime objects
            **table_kwargs: Additional arguments passed to Table component
            
        Returns:
            Table: Configured table component with DataFrame data
        """
        ...

class Accordion:
    """
    Accordion component for collapsible content panels.
    
    Args:
        children: AccordionItem components
        id (str): Component identifier for callbacks
        active_item (str|list): ID(s) of active accordion items
        always_open (bool): Allow multiple items to be open simultaneously
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        flush (bool): Remove borders for seamless appearance
    """
    def __init__(self, children=None, id=None, active_item=None, always_open=False,
                 style=None, class_name=None, flush=False, **kwargs): ...

class AccordionItem:
    """
    Individual accordion item with header and collapsible content.
    
    Args:
        children: Item content (collapsed by default)
        title (str|component): Item header/title
        item_id (str): Unique identifier for this item
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
    """
    def __init__(self, children=None, title=None, item_id=None, id=None,
                 style=None, class_name=None, **kwargs): ...

class ListGroup:
    """
    List group component for displaying content series.
    
    Args:
        children: ListGroupItem components
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        flush (bool): Remove borders and rounded corners
        horizontal (bool|str): Display items horizontally - True or breakpoint
        numbered (bool): Add numbers to list items
    """
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 flush=False, horizontal=False, numbered=False, **kwargs): ...

class ListGroupItem:
    """
    Individual item for list groups.
    
    Args:
        children: Item content
        id (str): Component identifier for callbacks
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        active (bool): Active state styling
        disabled (bool): Disabled state styling
        color (str): Item color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"
        action (bool): Enable hover/focus states for interactive items
        href (str): Make item a link
        external_link (bool): Open link in new tab
        target (str): Link target
        n_clicks (int): Number of clicks (for callbacks)
    """
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 active=False, disabled=False, color=None, action=False,
                 href=None, external_link=False, target=None, n_clicks=0, **kwargs): ...

class Carousel:
    """
    Carousel component for cycling through content slides.
    
    Args:
        items (list): List of carousel item dictionaries with "key", "src", "header", "caption" keys
        id (str): Component identifier for callbacks
        active_index (int): Index of currently active slide
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        controls (bool): Show previous/next navigation controls
        indicators (bool): Show slide indicators
        interval (int|bool): Auto-advance interval in milliseconds (False = no auto-advance)
        ride (str): Auto-start behavior - "carousel" (auto-start) or False
        variant (str): Carousel variant - "dark" for dark variant
        fade (bool): Use fade transition instead of slide
    """
    def __init__(self, items=None, id=None, active_index=0, style=None, class_name=None,
                 controls=True, indicators=True, interval=5000, ride="carousel",
                 variant=None, fade=False, **kwargs): ...

class Placeholder:
    """
    Placeholder component for loading states and skeleton screens.
    
    Args:
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        color (str): Placeholder color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"
        size (str): Placeholder size - "xs", "sm", "lg"
        animation (str): Animation type - "glow" or "wave"
        width (str|int): Placeholder width (CSS value or percentage)
        height (str|int): Placeholder height
    """
    def __init__(self, id=None, style=None, class_name=None, color=None, size=None,
                 animation="glow", width=None, height=None, **kwargs): ...

import dash_bootstrap_components as dbc
from dash import html

# Basic HTML table
basic_table = dbc.Table([
    html.Thead([
        html.Tr([
            html.Th("Name"),
            html.Th("Age"),
            html.Th("City"),
        ])
    ]),
    html.Tbody([
        html.Tr([
            html.Td("Alice"),
            html.Td("25"),
            html.Td("New York"),
        ]),
        html.Tr([
            html.Td("Bob"),
            html.Td("30"),
            html.Td("San Francisco"),
        ]),
        html.Tr([
            html.Td("Charlie"),
            html.Td("35"),
            html.Td("Chicago"),
        ]),
    ])
], striped=True, hover=True, responsive=True)

import pandas as pd
import dash_bootstrap_components as dbc

# Create sample DataFrame
df = pd.DataFrame({
    'Name': ['Alice', 'Bob', 'Charlie', 'Diana'],
    'Age': [25, 30, 35, 28],
    'City': ['New York', 'San Francisco', 'Chicago', 'Boston'],
    'Salary': [75000.50, 85000.75, 95000.00, 70000.25],
    'Start Date': pd.to_datetime(['2020-01-15', '2019-03-22', '2018-07-10', '2021-05-03'])
})

# Generate table from DataFrame
dataframe_table = dbc.Table.from_dataframe(
    df,
    striped=True,
    bordered=True,
    hover=True,
    responsive=True,
    size="sm",
    float_format="{:,.2f}".format,
    date_format="%Y-%m-%d"
)

# Table with custom headers
custom_headers_table = dbc.Table.from_dataframe(
    df,
    header={'Name': 'Full Name', 'Salary': 'Annual Salary'},
    columns=['Name', 'Age', 'Salary'],
    striped=True,
    hover=True
)

# Table with index
indexed_table = dbc.Table.from_dataframe(
    df,
    index=True,
    index_label="Employee ID",
    bordered=True,
    color="primary"
)

from dash import callback, Input, Output

# Basic accordion
accordion = dbc.Accordion([
    dbc.AccordionItem([
        html.P("This is the content for the first accordion item."),
        html.P("It can contain multiple paragraphs and other HTML elements."),
    ], title="First Item", item_id="item-1"),
    dbc.AccordionItem([
        html.P("This is the content for the second accordion item."),
        dbc.Alert("You can include other Bootstrap components!", color="info"),
    ], title="Second Item", item_id="item-2"),
    dbc.AccordionItem([
        html.P("This is the content for the third accordion item."),
        dbc.Button("Button inside accordion", color="primary"),
    ], title="Third Item", item_id="item-3"),
], id="accordion", active_item="item-1")

# Interactive accordion with callback
interactive_accordion = html.Div([
    accordion,
    html.Div(id="accordion-output", className="mt-3"),
])

@callback(
    Output("accordion-output", "children"),
    [Input("accordion", "active_item")]
)
def update_accordion_output(active_item):
    if active_item:
        return f"Currently active item: {active_item}"
    return "No item is currently active"

# Basic list group
list_group = dbc.ListGroup([
    dbc.ListGroupItem("Simple list item"),
    dbc.ListGroupItem("Another list item"),
    dbc.ListGroupItem("A third list item", active=True),
    dbc.ListGroupItem("Disabled item", disabled=True),
])

# Actionable list group
actionable_list = dbc.ListGroup([
    dbc.ListGroupItem("Clickable item", id="item-1", action=True, n_clicks=0),
    dbc.ListGroupItem("Another clickable item", id="item-2", action=True, n_clicks=0),
    dbc.ListGroupItem("Link item", href="/page", action=True),
    dbc.ListGroupItem("External link", href="https://example.com", external_link=True, action=True),
])

# Colored list group
colored_list = dbc.ListGroup([
    dbc.ListGroupItem("Primary item", color="primary"),
    dbc.ListGroupItem("Success item", color="success"),
    dbc.ListGroupItem("Warning item", color="warning"),
    dbc.ListGroupItem("Danger item", color="danger"),
    dbc.ListGroupItem("Info item", color="info"),
])

# Numbered list group
numbered_list = dbc.ListGroup([
    dbc.ListGroupItem("First numbered item"),
    dbc.ListGroupItem("Second numbered item"),
    dbc.ListGroupItem("Third numbered item"),
], numbered=True)

from dash import callback, Input, Output

# Image carousel
carousel_items = [
    {
        "key": "1",
        "src": "/static/images/slide1.jpg",
        "header": "First Slide",
        "caption": "Description for the first slide.",
    },
    {
        "key": "2", 
        "src": "/static/images/slide2.jpg",
        "header": "Second Slide",
        "caption": "Description for the second slide.",
    },
    {
        "key": "3",
        "src": "/static/images/slide3.jpg", 
        "header": "Third Slide",
        "caption": "Description for the third slide.",
    },
]

carousel = dbc.Carousel(
    items=carousel_items,
    id="carousel",
    controls=True,
    indicators=True,
    interval=3000,
    variant="dark",
)

# Interactive carousel with output
carousel_with_output = html.Div([
    carousel,
    html.Div(id="carousel-output", className="mt-3"),
])

@callback(
    Output("carousel-output", "children"),
    [Input("carousel", "active_index")]
)
def display_active_slide(active_index):
    return f"Currently displaying slide {active_index + 1}"

# Placeholder content for loading states
placeholder_content = html.Div([
    html.H4("Loading Content..."),
    dbc.Placeholder(width="75%", className="mb-2"),
    dbc.Placeholder(width="50%", className="mb-2"),
    dbc.Placeholder(width="25%", className="mb-4"),
    
    dbc.Card([
        dbc.CardBody([
            dbc.Placeholder(width="100%", size="lg", className="mb-3"),
            dbc.Placeholder(width="75%", className="mb-2"),
            dbc.Placeholder(width="50%", className="mb-2"),
            dbc.Placeholder(width="25%", animation="wave"),
        ])
    ]),
])

# Skeleton table placeholder
table_skeleton = dbc.Table([
    html.Thead([
        html.Tr([
            html.Th(dbc.Placeholder(width="80%")),
            html.Th(dbc.Placeholder(width="60%")),
            html.Th(dbc.Placeholder(width="70%")),
        ])
    ]),
    html.Tbody([
        html.Tr([
            html.Td(dbc.Placeholder(width="70%")),
            html.Td(dbc.Placeholder(width="50%")),
            html.Td(dbc.Placeholder(width="60%")),
        ]) for _ in range(5)
    ])
], striped=True)

# Complex content layout combining multiple components
content_layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardHeader("Data Overview"),
                dbc.CardBody([
                    dbc.Table.from_dataframe(
                        df.head(3),
                        striped=True,
                        hover=True,
                        size="sm"
                    )
                ])
            ])
        ], width=8),
        dbc.Col([
            dbc.Card([
                dbc.CardHeader("Quick Actions"),
                dbc.CardBody([
                    dbc.ListGroup([
                        dbc.ListGroupItem("View Reports", action=True, href="/reports"),
                        dbc.ListGroupItem("Export Data", action=True, id="export-btn"),
                        dbc.ListGroupItem("Settings", action=True, href="/settings"),
                    ], flush=True)
                ])
            ])
        ], width=4),
    ], className="mb-4"),
    
    dbc.Row([
        dbc.Col([
            dbc.Accordion([
                dbc.AccordionItem([
                    html.P("Detailed analysis and insights go here."),
                    dbc.Table([
                        html.Tbody([
                            html.Tr([html.Td("Metric 1"), html.Td("Value 1")]),
                            html.Tr([html.Td("Metric 2"), html.Td("Value 2")]),
                            html.Tr([html.Td("Metric 3"), html.Td("Value 3")]),
                        ])
                    ], size="sm")
                ], title="Analysis Details", item_id="analysis"),
                dbc.AccordionItem([
                    html.P("Configuration options and settings."),
                    dbc.ListGroup([
                        dbc.ListGroupItem("Option 1", color="light"),
                        dbc.ListGroupItem("Option 2", color="light"),
                        dbc.ListGroupItem("Option 3", color="light"),
                    ])
                ], title="Configuration", item_id="config"),
            ], active_item="analysis")
        ])
    ])
])

from dash import callback, Input, Output, State, dash_table

# Interactive table with action buttons
interactive_table_data = df.to_dict('records')

interactive_content = html.Div([
    html.Div([
        dbc.Button("Add Row", id="add-row-btn", color="success", className="me-2"),
        dbc.Button("Delete Selected", id="delete-btn", color="danger"),
    ], className="mb-3"),
    
    # Using dash DataTable for more interactivity
    dash_table.DataTable(
        id="interactive-table",
        data=interactive_table_data,
        columns=[{"name": col, "id": col} for col in df.columns],
        editable=True,
        row_deletable=True,
        row_selectable="multi",
        selected_rows=[],
        style_cell={'textAlign': 'left'},
        style_table={'overflowX': 'auto'},
        style_header={'backgroundColor': 'rgb(230, 230, 230)', 'fontWeight': 'bold'},
        style_data_conditional=[
            {
                'if': {'row_index': 'odd'},
                'backgroundColor': 'rgb(248, 248, 248)'
            }
        ],
    ),
    
    html.Div(id="table-output", className="mt-3"),
])