0
# Component Libraries
1

2
Dash provides three comprehensive component libraries that enable building rich interactive web applications. These libraries include interactive components (dcc), HTML elements (html), and data tables (dash_table).
3

4
## Capabilities
5

6
### Dash Core Components (dcc)
7

8
Interactive components for user input, data visualization, and application control.
9

10
```python { .api }
11
# Graph visualization
12
class Graph(Component):
13
    def __init__(
14
        self,
15
        id: str = None,
16
        figure: Dict[str, Any] = None,
17
        config: Dict[str, Any] = None,
18
        responsive: Union[bool, str] = 'auto',
19
        clickData: Dict[str, Any] = None,
20
        hoverData: Dict[str, Any] = None,
21
        selectedData: Dict[str, Any] = None,
22
        **kwargs
23
    ): ...
24

25
# Input controls
26
class Dropdown(Component):
27
    def __init__(
28
        self,
29
        id: str = None,
30
        options: List[Dict[str, Any]] = None,
31
        value: Union[str, int, List] = None,
32
        multi: bool = False,
33
        searchable: bool = True,
34
        clearable: bool = True,
35
        placeholder: str = None,
36
        **kwargs
37
    ): ...
38

39
class Input(Component):
40
    def __init__(
41
        self,
42
        id: str = None,
43
        value: Union[str, int] = None,
44
        type: str = 'text',
45
        debounce: Union[bool, int] = False,
46
        placeholder: str = None,
47
        **kwargs
48
    ): ...
49

50
class Slider(Component):
51
    def __init__(
52
        self,
53
        id: str = None,
54
        min: int = 0,
55
        max: int = 100,
56
        step: int = 1,
57
        value: int = None,
58
        marks: Dict[int, Any] = None,
59
        tooltip: Dict[str, Any] = None,
60
        **kwargs
61
    ): ...
62

63
# Selection components
64
class Checklist(Component):
65
    def __init__(
66
        self,
67
        id: str = None,
68
        options: List[Dict[str, Any]] = None,
69
        value: List = None,
70
        inline: bool = False,
71
        **kwargs
72
    ): ...
73

74
class RadioItems(Component):
75
    def __init__(
76
        self,
77
        id: str = None,
78
        options: List[Dict[str, Any]] = None,
79
        value: Union[str, int] = None,
80
        inline: bool = False,
81
        **kwargs
82
    ): ...
83

84
# Date and time
85
class DatePickerSingle(Component):
86
    def __init__(
87
        self,
88
        id: str = None,
89
        date: str = None,
90
        min_date_allowed: str = None,
91
        max_date_allowed: str = None,
92
        display_format: str = 'YYYY-MM-DD',
93
        **kwargs
94
    ): ...
95

96
# Utility components
97
class Store(Component):
98
    def __init__(
99
        self,
100
        id: str = None,
101
        data: Any = None,
102
        storage_type: str = 'memory',
103
        clear_data: bool = False,
104
        **kwargs
105
    ): ...
106

107
class Location(Component):
108
    def __init__(
109
        self,
110
        id: str = None,
111
        pathname: str = None,
112
        search: str = None,
113
        hash: str = None,
114
        href: str = None,
115
        **kwargs
116
    ): ...
117

118
class Interval(Component):
119
    def __init__(
120
        self,
121
        id: str = None,
122
        interval: int = 1000,
123
        n_intervals: int = 0,
124
        max_intervals: int = -1,
125
        disabled: bool = False,
126
        **kwargs
127
    ): ...
128
```
129

130
### Dash HTML Components (html)
131

132
Standard HTML elements as Dash components with consistent properties and event handling.
133

134
```python { .api }
135
# Layout components
136
class Div(Component):
137
    def __init__(
138
        self,
139
        children: Any = None,
140
        id: str = None,
141
        className: str = None,
142
        style: Dict[str, Any] = None,
143
        n_clicks: int = None,
144
        **kwargs
145
    ): ...
146

147
class H1(Component):
148
    def __init__(
149
        self,
150
        children: Any = None,
151
        id: str = None,
152
        className: str = None,
153
        style: Dict[str, Any] = None,
154
        **kwargs
155
    ): ...
156

157
class P(Component):
158
    def __init__(
159
        self,
160
        children: Any = None,
161
        id: str = None,
162
        className: str = None,
163
        style: Dict[str, Any] = None,
164
        **kwargs
165
    ): ...
166

167
# Interactive elements
168
class Button(Component):
169
    def __init__(
170
        self,
171
        children: Any = None,
172
        id: str = None,
173
        n_clicks: int = None,
174
        n_clicks_timestamp: int = None,
175
        disabled: bool = False,
176
        type: str = 'button',
177
        **kwargs
178
    ): ...
179

180
class A(Component):
181
    def __init__(
182
        self,
183
        children: Any = None,
184
        id: str = None,
185
        href: str = None,
186
        target: str = None,
187
        n_clicks: int = None,
188
        **kwargs
189
    ): ...
190

191
# Form elements
192
class Form(Component):
193
    def __init__(
194
        self,
195
        children: Any = None,
196
        id: str = None,
197
        action: str = None,
198
        method: str = None,
199
        **kwargs
200
    ): ...
201

202
class Select(Component):
203
    def __init__(
204
        self,
205
        children: Any = None,
206
        id: str = None,
207
        value: str = None,
208
        multiple: bool = False,
209
        **kwargs
210
    ): ...
211

212
# Table elements
213
class Table(Component):
214
    def __init__(
215
        self,
216
        children: Any = None,
217
        id: str = None,
218
        className: str = None,
219
        style: Dict[str, Any] = None,
220
        **kwargs
221
    ): ...
222

223
class Tr(Component): ...
224
class Th(Component): ...
225
class Td(Component): ...
226
```
227

228
### Dash DataTable
229

230
Advanced interactive data table with editing, filtering, sorting, and styling capabilities.
231

232
```python { .api }
233
class DataTable(Component):
234
    def __init__(
235
        self,
236
        id: str = None,
237
        data: List[Dict[str, Any]] = None,
238
        columns: List[Dict[str, Any]] = None,
239
        editable: bool = False,
240
        filter_action: str = 'none',
241
        sort_action: str = 'none',
242
        page_action: str = 'native',
243
        page_current: int = 0,
244
        page_size: int = 250,
245
        row_selectable: Union[str, bool] = False,
246
        selected_rows: List[int] = None,
247
        active_cell: Dict[str, Any] = None,
248
        style_table: Dict[str, Any] = None,
249
        style_cell: Dict[str, Any] = None,
250
        style_data: Dict[str, Any] = None,
251
        style_header: Dict[str, Any] = None,
252
        style_cell_conditional: List[Dict] = None,
253
        style_data_conditional: List[Dict] = None,
254
        **kwargs
255
    ): ...
256

257
# Formatting utilities
258
class Format:
259
    def __init__(self, **kwargs): ...
260
    def align(self, value: str) -> 'Format': ...
261
    def precision(self, value: int) -> 'Format': ...
262
    def scheme(self, value: str) -> 'Format': ...
263

264
def money(decimals: int = 2, sign: str = 'default') -> Format: ...
265
def percentage(decimals: int = 1, rounded: bool = False) -> Format: ...
266
```
267

268
### Component Base Properties
269

270
Common properties inherited by all components from the base Component class.
271

272
```python { .api }
273
class Component:
274
    """Base component class with common properties."""
275
    
276
    def __init__(
277
        self,
278
        id: Union[str, Dict] = None,
279
        children: Any = None,
280
        className: str = None,
281
        style: Dict[str, Any] = None,
282
        n_clicks: int = None,
283
        n_clicks_timestamp: int = None,
284
        **kwargs
285
    ): ...
286
```
287

288
## Usage Examples
289

290
### Interactive Dashboard
291

292
```python
293
from dash import Dash, html, dcc, callback, Input, Output
294
import plotly.express as px
295
import pandas as pd
296

297
app = Dash(__name__)
298

299
# Sample data
300
df = px.data.iris()
301

302
app.layout = html.Div([
303
    html.H1("Interactive Dashboard"),
304
    
305
    html.Div([
306
        html.Label("Select Species:"),
307
        dcc.Dropdown(
308
            id='species-dropdown',
309
            options=[{'label': species, 'value': species} 
310
                    for species in df.species.unique()],
311
            value=df.species.unique()[0]
312
        )
313
    ], style={'width': '48%', 'display': 'inline-block'}),
314
    
315
    html.Div([
316
        html.Label("Select Feature:"),
317
        dcc.RadioItems(
318
            id='feature-radio',
319
            options=[
320
                {'label': 'Sepal Length', 'value': 'sepal_length'},
321
                {'label': 'Petal Length', 'value': 'petal_length'}
322
            ],
323
            value='sepal_length'
324
        )
325
    ], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),
326
    
327
    dcc.Graph(id='scatter-plot'),
328
    
329
    html.Div(id='summary-stats')
330
])
331

332
@callback(
333
    [Output('scatter-plot', 'figure'),
334
     Output('summary-stats', 'children')],
335
    [Input('species-dropdown', 'value'),
336
     Input('feature-radio', 'value')]
337
)
338
def update_dashboard(selected_species, selected_feature):
339
    filtered_df = df[df.species == selected_species]
340
    
341
    fig = px.scatter(filtered_df, x=selected_feature, y='sepal_width',
342
                     title=f'{selected_feature} vs Sepal Width for {selected_species}')
343
    
344
    stats = html.Div([
345
        html.H3("Summary Statistics"),
346
        html.P(f"Mean {selected_feature}: {filtered_df[selected_feature].mean():.2f}"),
347
        html.P(f"Count: {len(filtered_df)}")
348
    ])
349
    
350
    return fig, stats
351
```
352

353
### Data Table with Filtering
354

355
```python
356
from dash import dash_table
357
import pandas as pd
358

359
df = pd.read_csv('data.csv')
360

361
app.layout = html.Div([
362
    html.H1("Data Explorer"),
363
    
364
    dash_table.DataTable(
365
        id='data-table',
366
        data=df.to_dict('records'),
367
        columns=[
368
            {"name": col, "id": col, "type": "numeric" if df[col].dtype in ['int64', 'float64'] else "text"}
369
            for col in df.columns
370
        ],
371
        editable=True,
372
        filter_action="native",
373
        sort_action="native",
374
        page_action="native",
375
        page_current=0,
376
        page_size=10,
377
        style_cell={'textAlign': 'left'},
378
        style_data_conditional=[
379
            {
380
                'if': {'row_index': 'odd'},
381
                'backgroundColor': 'rgb(248, 248, 248)'
382
            }
383
        ]
384
    )
385
])
386
```
387

388
### Form with Validation
389

390
```python
391
app.layout = html.Div([
392
    html.Form([
393
        html.Div([
394
            html.Label("Name:", htmlFor="name-input"),
395
            dcc.Input(id="name-input", type="text", required=True)
396
        ]),
397
        
398
        html.Div([
399
            html.Label("Email:", htmlFor="email-input"),  
400
            dcc.Input(id="email-input", type="email", required=True)
401
        ]),
402
        
403
        html.Div([
404
            html.Label("Age:", htmlFor="age-input"),
405
            dcc.Input(id="age-input", type="number", min=0, max=120)
406
        ]),
407
        
408
        html.Button("Submit", type="submit", id="submit-button")
409
    ], id="user-form"),
410
    
411
    html.Div(id="form-output")
412
])
413

414
@callback(
415
    Output('form-output', 'children'),
416
    [Input('submit-button', 'n_clicks')],
417
    [State('name-input', 'value'),
418
     State('email-input', 'value'),
419
     State('age-input', 'value')]
420
)
421
def handle_form_submission(n_clicks, name, email, age):
422
    if n_clicks:
423
        return html.Div([
424
            html.H3("Form Submitted"),
425
            html.P(f"Name: {name}"),
426
            html.P(f"Email: {email}"),
427
            html.P(f"Age: {age}")
428
        ])
429
    return "Fill out the form and click submit"
430
```
431

432
## Types
433

434
```python { .api }
435
# Core component types
436
Component = Any
437
ComponentType = Union[Component, str, int, float, List, Dict]
438
ChildrenType = Union[ComponentType, List[ComponentType]]
439

440
# Component properties
441
ComponentId = Union[str, Dict[str, Any]]
442
StyleDict = Dict[str, Any]
443
OptionsList = List[Dict[str, Any]]
444

445
# DataTable specific types
446
TableData = List[Dict[str, Any]]
447
ColumnConfig = Dict[str, Any]
448
CellCoordinates = Dict[str, Union[int, str]]
449
StyleConditional = List[Dict[str, Any]]
450

451
# Event types
452
ClickEvent = Dict[str, Any]
453
HoverEvent = Dict[str, Any]
454
SelectionEvent = Dict[str, Any]
455
```