0
# Content Components
1
2
Tables, accordions, lists, carousels, and other content display components for organizing and presenting information.
3
4
## Capabilities
5
6
### Table
7
8
Enhanced table component with Bootstrap styling and pandas DataFrame integration.
9
10
```python { .api }
11
class Table:
12
"""
13
Enhanced table component with Bootstrap styling.
14
15
Args:
16
children: Table content (thead, tbody, tr, td elements)
17
id (str): Component identifier for callbacks
18
style (dict): Inline CSS styles
19
class_name (str): Additional CSS classes
20
striped (bool): Add zebra-striping to table rows
21
bordered (bool): Add borders to all table cells
22
borderless (bool): Remove all borders
23
hover (bool): Enable hover effect on table rows
24
dark (bool): Dark table theme
25
size (str): Table size - "sm" for compact table
26
responsive (bool|str): Make table responsive - True or breakpoint ("sm", "md", "lg", "xl", "xxl")
27
color (str): Table color theme
28
"""
29
def __init__(self, children=None, id=None, style=None, class_name=None,
30
striped=False, bordered=False, borderless=False, hover=False,
31
dark=False, size=None, responsive=False, color=None, **kwargs): ...
32
33
@classmethod
34
def from_dataframe(cls, df, float_format=None, columns=None, header=True,
35
index=False, index_label=None, date_format=None, **table_kwargs):
36
"""
37
Generate a Table component from a pandas DataFrame.
38
39
Args:
40
df (pandas.DataFrame): DataFrame to render as table
41
float_format (str): Format string for floating point numbers
42
columns (list): Column subset to include
43
header (bool|list|dict): Include column headers, or custom headers
44
index (bool): Include row index as column
45
index_label (str): Label for index column
46
date_format (str): Format string for datetime objects
47
**table_kwargs: Additional arguments passed to Table component
48
49
Returns:
50
Table: Configured table component with DataFrame data
51
"""
52
...
53
```
54
55
### Accordion
56
57
Collapsible content panels organized as an expandable list.
58
59
```python { .api }
60
class Accordion:
61
"""
62
Accordion component for collapsible content panels.
63
64
Args:
65
children: AccordionItem components
66
id (str): Component identifier for callbacks
67
active_item (str|list): ID(s) of active accordion items
68
always_open (bool): Allow multiple items to be open simultaneously
69
style (dict): Inline CSS styles
70
class_name (str): Additional CSS classes
71
flush (bool): Remove borders for seamless appearance
72
"""
73
def __init__(self, children=None, id=None, active_item=None, always_open=False,
74
style=None, class_name=None, flush=False, **kwargs): ...
75
```
76
77
### AccordionItem
78
79
Individual item component for use within Accordion.
80
81
```python { .api }
82
class AccordionItem:
83
"""
84
Individual accordion item with header and collapsible content.
85
86
Args:
87
children: Item content (collapsed by default)
88
title (str|component): Item header/title
89
item_id (str): Unique identifier for this item
90
id (str): Component identifier
91
style (dict): Inline CSS styles
92
class_name (str): Additional CSS classes
93
"""
94
def __init__(self, children=None, title=None, item_id=None, id=None,
95
style=None, class_name=None, **kwargs): ...
96
```
97
98
### ListGroup
99
100
Styled list component for displaying series of content.
101
102
```python { .api }
103
class ListGroup:
104
"""
105
List group component for displaying content series.
106
107
Args:
108
children: ListGroupItem components
109
id (str): Component identifier
110
style (dict): Inline CSS styles
111
class_name (str): Additional CSS classes
112
flush (bool): Remove borders and rounded corners
113
horizontal (bool|str): Display items horizontally - True or breakpoint
114
numbered (bool): Add numbers to list items
115
"""
116
def __init__(self, children=None, id=None, style=None, class_name=None,
117
flush=False, horizontal=False, numbered=False, **kwargs): ...
118
```
119
120
### ListGroupItem
121
122
Individual item component for use within ListGroup.
123
124
```python { .api }
125
class ListGroupItem:
126
"""
127
Individual item for list groups.
128
129
Args:
130
children: Item content
131
id (str): Component identifier for callbacks
132
style (dict): Inline CSS styles
133
class_name (str): Additional CSS classes
134
active (bool): Active state styling
135
disabled (bool): Disabled state styling
136
color (str): Item color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"
137
action (bool): Enable hover/focus states for interactive items
138
href (str): Make item a link
139
external_link (bool): Open link in new tab
140
target (str): Link target
141
n_clicks (int): Number of clicks (for callbacks)
142
"""
143
def __init__(self, children=None, id=None, style=None, class_name=None,
144
active=False, disabled=False, color=None, action=False,
145
href=None, external_link=False, target=None, n_clicks=0, **kwargs): ...
146
```
147
148
### Carousel
149
150
Image and content carousel component with navigation controls.
151
152
```python { .api }
153
class Carousel:
154
"""
155
Carousel component for cycling through content slides.
156
157
Args:
158
items (list): List of carousel item dictionaries with "key", "src", "header", "caption" keys
159
id (str): Component identifier for callbacks
160
active_index (int): Index of currently active slide
161
style (dict): Inline CSS styles
162
class_name (str): Additional CSS classes
163
controls (bool): Show previous/next navigation controls
164
indicators (bool): Show slide indicators
165
interval (int|bool): Auto-advance interval in milliseconds (False = no auto-advance)
166
ride (str): Auto-start behavior - "carousel" (auto-start) or False
167
variant (str): Carousel variant - "dark" for dark variant
168
fade (bool): Use fade transition instead of slide
169
"""
170
def __init__(self, items=None, id=None, active_index=0, style=None, class_name=None,
171
controls=True, indicators=True, interval=5000, ride="carousel",
172
variant=None, fade=False, **kwargs): ...
173
```
174
175
### Placeholder
176
177
Loading placeholder component with animated placeholders.
178
179
```python { .api }
180
class Placeholder:
181
"""
182
Placeholder component for loading states and skeleton screens.
183
184
Args:
185
id (str): Component identifier
186
style (dict): Inline CSS styles
187
class_name (str): Additional CSS classes
188
color (str): Placeholder color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"
189
size (str): Placeholder size - "xs", "sm", "lg"
190
animation (str): Animation type - "glow" or "wave"
191
width (str|int): Placeholder width (CSS value or percentage)
192
height (str|int): Placeholder height
193
"""
194
def __init__(self, id=None, style=None, class_name=None, color=None, size=None,
195
animation="glow", width=None, height=None, **kwargs): ...
196
```
197
198
## Usage Examples
199
200
### Basic Table
201
202
```python
203
import dash_bootstrap_components as dbc
204
from dash import html
205
206
# Basic HTML table
207
basic_table = dbc.Table([
208
html.Thead([
209
html.Tr([
210
html.Th("Name"),
211
html.Th("Age"),
212
html.Th("City"),
213
])
214
]),
215
html.Tbody([
216
html.Tr([
217
html.Td("Alice"),
218
html.Td("25"),
219
html.Td("New York"),
220
]),
221
html.Tr([
222
html.Td("Bob"),
223
html.Td("30"),
224
html.Td("San Francisco"),
225
]),
226
html.Tr([
227
html.Td("Charlie"),
228
html.Td("35"),
229
html.Td("Chicago"),
230
]),
231
])
232
], striped=True, hover=True, responsive=True)
233
```
234
235
### Table from DataFrame
236
237
```python
238
import pandas as pd
239
import dash_bootstrap_components as dbc
240
241
# Create sample DataFrame
242
df = pd.DataFrame({
243
'Name': ['Alice', 'Bob', 'Charlie', 'Diana'],
244
'Age': [25, 30, 35, 28],
245
'City': ['New York', 'San Francisco', 'Chicago', 'Boston'],
246
'Salary': [75000.50, 85000.75, 95000.00, 70000.25],
247
'Start Date': pd.to_datetime(['2020-01-15', '2019-03-22', '2018-07-10', '2021-05-03'])
248
})
249
250
# Generate table from DataFrame
251
dataframe_table = dbc.Table.from_dataframe(
252
df,
253
striped=True,
254
bordered=True,
255
hover=True,
256
responsive=True,
257
size="sm",
258
float_format="{:,.2f}".format,
259
date_format="%Y-%m-%d"
260
)
261
262
# Table with custom headers
263
custom_headers_table = dbc.Table.from_dataframe(
264
df,
265
header={'Name': 'Full Name', 'Salary': 'Annual Salary'},
266
columns=['Name', 'Age', 'Salary'],
267
striped=True,
268
hover=True
269
)
270
271
# Table with index
272
indexed_table = dbc.Table.from_dataframe(
273
df,
274
index=True,
275
index_label="Employee ID",
276
bordered=True,
277
color="primary"
278
)
279
```
280
281
### Accordion
282
283
```python
284
from dash import callback, Input, Output
285
286
# Basic accordion
287
accordion = dbc.Accordion([
288
dbc.AccordionItem([
289
html.P("This is the content for the first accordion item."),
290
html.P("It can contain multiple paragraphs and other HTML elements."),
291
], title="First Item", item_id="item-1"),
292
dbc.AccordionItem([
293
html.P("This is the content for the second accordion item."),
294
dbc.Alert("You can include other Bootstrap components!", color="info"),
295
], title="Second Item", item_id="item-2"),
296
dbc.AccordionItem([
297
html.P("This is the content for the third accordion item."),
298
dbc.Button("Button inside accordion", color="primary"),
299
], title="Third Item", item_id="item-3"),
300
], id="accordion", active_item="item-1")
301
302
# Interactive accordion with callback
303
interactive_accordion = html.Div([
304
accordion,
305
html.Div(id="accordion-output", className="mt-3"),
306
])
307
308
@callback(
309
Output("accordion-output", "children"),
310
[Input("accordion", "active_item")]
311
)
312
def update_accordion_output(active_item):
313
if active_item:
314
return f"Currently active item: {active_item}"
315
return "No item is currently active"
316
```
317
318
### List Group
319
320
```python
321
# Basic list group
322
list_group = dbc.ListGroup([
323
dbc.ListGroupItem("Simple list item"),
324
dbc.ListGroupItem("Another list item"),
325
dbc.ListGroupItem("A third list item", active=True),
326
dbc.ListGroupItem("Disabled item", disabled=True),
327
])
328
329
# Actionable list group
330
actionable_list = dbc.ListGroup([
331
dbc.ListGroupItem("Clickable item", id="item-1", action=True, n_clicks=0),
332
dbc.ListGroupItem("Another clickable item", id="item-2", action=True, n_clicks=0),
333
dbc.ListGroupItem("Link item", href="/page", action=True),
334
dbc.ListGroupItem("External link", href="https://example.com", external_link=True, action=True),
335
])
336
337
# Colored list group
338
colored_list = dbc.ListGroup([
339
dbc.ListGroupItem("Primary item", color="primary"),
340
dbc.ListGroupItem("Success item", color="success"),
341
dbc.ListGroupItem("Warning item", color="warning"),
342
dbc.ListGroupItem("Danger item", color="danger"),
343
dbc.ListGroupItem("Info item", color="info"),
344
])
345
346
# Numbered list group
347
numbered_list = dbc.ListGroup([
348
dbc.ListGroupItem("First numbered item"),
349
dbc.ListGroupItem("Second numbered item"),
350
dbc.ListGroupItem("Third numbered item"),
351
], numbered=True)
352
```
353
354
### Carousel
355
356
```python
357
from dash import callback, Input, Output
358
359
# Image carousel
360
carousel_items = [
361
{
362
"key": "1",
363
"src": "/static/images/slide1.jpg",
364
"header": "First Slide",
365
"caption": "Description for the first slide.",
366
},
367
{
368
"key": "2",
369
"src": "/static/images/slide2.jpg",
370
"header": "Second Slide",
371
"caption": "Description for the second slide.",
372
},
373
{
374
"key": "3",
375
"src": "/static/images/slide3.jpg",
376
"header": "Third Slide",
377
"caption": "Description for the third slide.",
378
},
379
]
380
381
carousel = dbc.Carousel(
382
items=carousel_items,
383
id="carousel",
384
controls=True,
385
indicators=True,
386
interval=3000,
387
variant="dark",
388
)
389
390
# Interactive carousel with output
391
carousel_with_output = html.Div([
392
carousel,
393
html.Div(id="carousel-output", className="mt-3"),
394
])
395
396
@callback(
397
Output("carousel-output", "children"),
398
[Input("carousel", "active_index")]
399
)
400
def display_active_slide(active_index):
401
return f"Currently displaying slide {active_index + 1}"
402
```
403
404
### Placeholders for Loading States
405
406
```python
407
# Placeholder content for loading states
408
placeholder_content = html.Div([
409
html.H4("Loading Content..."),
410
dbc.Placeholder(width="75%", className="mb-2"),
411
dbc.Placeholder(width="50%", className="mb-2"),
412
dbc.Placeholder(width="25%", className="mb-4"),
413
414
dbc.Card([
415
dbc.CardBody([
416
dbc.Placeholder(width="100%", size="lg", className="mb-3"),
417
dbc.Placeholder(width="75%", className="mb-2"),
418
dbc.Placeholder(width="50%", className="mb-2"),
419
dbc.Placeholder(width="25%", animation="wave"),
420
])
421
]),
422
])
423
424
# Skeleton table placeholder
425
table_skeleton = dbc.Table([
426
html.Thead([
427
html.Tr([
428
html.Th(dbc.Placeholder(width="80%")),
429
html.Th(dbc.Placeholder(width="60%")),
430
html.Th(dbc.Placeholder(width="70%")),
431
])
432
]),
433
html.Tbody([
434
html.Tr([
435
html.Td(dbc.Placeholder(width="70%")),
436
html.Td(dbc.Placeholder(width="50%")),
437
html.Td(dbc.Placeholder(width="60%")),
438
]) for _ in range(5)
439
])
440
], striped=True)
441
```
442
443
### Advanced Content Layout
444
445
```python
446
# Complex content layout combining multiple components
447
content_layout = dbc.Container([
448
dbc.Row([
449
dbc.Col([
450
dbc.Card([
451
dbc.CardHeader("Data Overview"),
452
dbc.CardBody([
453
dbc.Table.from_dataframe(
454
df.head(3),
455
striped=True,
456
hover=True,
457
size="sm"
458
)
459
])
460
])
461
], width=8),
462
dbc.Col([
463
dbc.Card([
464
dbc.CardHeader("Quick Actions"),
465
dbc.CardBody([
466
dbc.ListGroup([
467
dbc.ListGroupItem("View Reports", action=True, href="/reports"),
468
dbc.ListGroupItem("Export Data", action=True, id="export-btn"),
469
dbc.ListGroupItem("Settings", action=True, href="/settings"),
470
], flush=True)
471
])
472
])
473
], width=4),
474
], className="mb-4"),
475
476
dbc.Row([
477
dbc.Col([
478
dbc.Accordion([
479
dbc.AccordionItem([
480
html.P("Detailed analysis and insights go here."),
481
dbc.Table([
482
html.Tbody([
483
html.Tr([html.Td("Metric 1"), html.Td("Value 1")]),
484
html.Tr([html.Td("Metric 2"), html.Td("Value 2")]),
485
html.Tr([html.Td("Metric 3"), html.Td("Value 3")]),
486
])
487
], size="sm")
488
], title="Analysis Details", item_id="analysis"),
489
dbc.AccordionItem([
490
html.P("Configuration options and settings."),
491
dbc.ListGroup([
492
dbc.ListGroupItem("Option 1", color="light"),
493
dbc.ListGroupItem("Option 2", color="light"),
494
dbc.ListGroupItem("Option 3", color="light"),
495
])
496
], title="Configuration", item_id="config"),
497
], active_item="analysis")
498
])
499
])
500
])
501
```
502
503
### Responsive Table with Action Buttons
504
505
```python
506
from dash import callback, Input, Output, State, dash_table
507
508
# Interactive table with action buttons
509
interactive_table_data = df.to_dict('records')
510
511
interactive_content = html.Div([
512
html.Div([
513
dbc.Button("Add Row", id="add-row-btn", color="success", className="me-2"),
514
dbc.Button("Delete Selected", id="delete-btn", color="danger"),
515
], className="mb-3"),
516
517
# Using dash DataTable for more interactivity
518
dash_table.DataTable(
519
id="interactive-table",
520
data=interactive_table_data,
521
columns=[{"name": col, "id": col} for col in df.columns],
522
editable=True,
523
row_deletable=True,
524
row_selectable="multi",
525
selected_rows=[],
526
style_cell={'textAlign': 'left'},
527
style_table={'overflowX': 'auto'},
528
style_header={'backgroundColor': 'rgb(230, 230, 230)', 'fontWeight': 'bold'},
529
style_data_conditional=[
530
{
531
'if': {'row_index': 'odd'},
532
'backgroundColor': 'rgb(248, 248, 248)'
533
}
534
],
535
),
536
537
html.Div(id="table-output", className="mt-3"),
538
])
539
```