0
# Data Display Components
1
2
Components for displaying data including tables, lists, images, avatars, and progress indicators for creating informative user interfaces.
3
4
## Capabilities
5
6
### Table Components
7
8
Comprehensive table system for displaying structured data with styling and interaction features.
9
10
```python { .api }
11
def Table(
12
children=None, # Table content (thead, tbody, tfoot)
13
striped=False, # Alternate row colors
14
highlightOnHover=False, # Highlight rows on hover
15
withBorder=False, # Add table border
16
withColumnBorders=False, # Add column borders
17
captionSide="top", # "top" | "bottom"
18
fontSize="sm", # Table font size
19
**kwargs
20
):
21
"""
22
Main table container component.
23
24
Parameters:
25
- children: Table sections (TableThead, TableTbody, etc.)
26
- striped: Alternate row background colors
27
- highlightOnHover: Highlight rows on mouse hover
28
- withBorder: Add outer border
29
- withColumnBorders: Add vertical column borders
30
- captionSide: Caption position
31
- fontSize: Text size for table
32
"""
33
34
def TableThead(
35
children=None, # Table header rows
36
**kwargs
37
):
38
"""
39
Table header section.
40
41
Parameters:
42
- children: TableTr components with TableTh cells
43
"""
44
45
def TableTbody(
46
children=None, # Table body rows
47
**kwargs
48
):
49
"""
50
Table body section.
51
52
Parameters:
53
- children: TableTr components with TableTd cells
54
"""
55
56
def TableTfoot(
57
children=None, # Table footer rows
58
**kwargs
59
):
60
"""
61
Table footer section.
62
63
Parameters:
64
- children: TableTr components
65
"""
66
67
def TableTr(
68
children=None, # Table cells
69
**kwargs
70
):
71
"""
72
Table row component.
73
74
Parameters:
75
- children: TableTh or TableTd components
76
"""
77
78
def TableTh(
79
children=None, # Header cell content
80
**kwargs
81
):
82
"""
83
Table header cell.
84
85
Parameters:
86
- children: Cell content
87
"""
88
89
def TableTd(
90
children=None, # Data cell content
91
**kwargs
92
):
93
"""
94
Table data cell.
95
96
Parameters:
97
- children: Cell content
98
"""
99
100
def TableCaption(
101
children=None, # Caption text
102
**kwargs
103
):
104
"""
105
Table caption component.
106
107
Parameters:
108
- children: Caption content
109
"""
110
111
def TableScrollContainer(
112
children=None, # Table component
113
minWidth=None, # Minimum width before scrolling
114
**kwargs
115
):
116
"""
117
Scrollable container for tables.
118
119
Parameters:
120
- children: Table component
121
- minWidth: Minimum width to trigger horizontal scroll
122
"""
123
```
124
125
### Avatar and Image Components
126
127
Components for displaying user avatars, images, and visual content.
128
129
```python { .api }
130
def Avatar(
131
children=None, # Avatar content (initials/icon)
132
src=None, # Image source URL
133
alt="", # Alt text
134
size="md", # Avatar size
135
radius="sm", # Border radius
136
color="blue", # Background color
137
**kwargs
138
):
139
"""
140
User avatar component with fallback support.
141
142
Parameters:
143
- children: Fallback content (initials, icon)
144
- src: Avatar image URL
145
- alt: Image alt text
146
- size: Avatar size
147
- radius: Border radius
148
- color: Background color for fallback
149
"""
150
151
def AvatarGroup(
152
children=None, # Avatar components
153
spacing="sm", # Space between avatars
154
**kwargs
155
):
156
"""
157
Group of overlapping avatars.
158
159
Parameters:
160
- children: List of Avatar components
161
- spacing: Overlap spacing (negative values create overlap)
162
"""
163
164
def Image(
165
src=None, # Image source URL
166
alt="", # Alt text
167
width=None, # Image width
168
height=None, # Image height
169
fit="cover", # Object fit behavior
170
radius="sm", # Border radius
171
fallbackSrc=None, # Fallback image URL
172
**kwargs
173
):
174
"""
175
Responsive image component with fallback support.
176
177
Parameters:
178
- src: Image source URL
179
- alt: Alternative text
180
- width: Image width
181
- height: Image height
182
- fit: CSS object-fit property
183
- radius: Border radius
184
- fallbackSrc: Fallback image if src fails
185
"""
186
187
def BackgroundImage(
188
children=None, # Overlay content
189
src=None, # Background image URL
190
radius="sm", # Border radius
191
**kwargs
192
):
193
"""
194
Container with background image.
195
196
Parameters:
197
- children: Content to overlay on image
198
- src: Background image URL
199
- radius: Border radius
200
"""
201
```
202
203
### Progress and Loading Components
204
205
Components for showing progress, loading states, and status indicators.
206
207
```python { .api }
208
def Progress(
209
value=0, # Progress value (0-100)
210
color="blue", # Progress color
211
size="md", # Progress bar size
212
radius="sm", # Border radius
213
striped=False, # Striped animation
214
animate=False, # Animate stripes
215
label=None, # Progress label
216
**kwargs
217
):
218
"""
219
Linear progress bar component.
220
221
Parameters:
222
- value: Progress percentage (0-100)
223
- color: Progress bar color
224
- size: Bar thickness
225
- radius: Border radius
226
- striped: Show striped pattern
227
- animate: Animate stripes
228
- label: Text label overlay
229
"""
230
231
def RingProgress(
232
sections=[], # Progress sections
233
size=120, # Ring diameter
234
thickness=12, # Ring thickness
235
roundCaps=False, # Round line caps
236
label=None, # Center label
237
**kwargs
238
):
239
"""
240
Circular progress ring component.
241
242
Parameters:
243
- sections: List of progress sections with value and color
244
- size: Ring diameter in pixels
245
- thickness: Ring thickness
246
- roundCaps: Use rounded line caps
247
- label: Content in center of ring
248
"""
249
250
def SemiCircleProgress(
251
value=0, # Progress value (0-100)
252
color="blue", # Progress color
253
size=200, # Component size
254
thickness=12, # Arc thickness
255
label=None, # Center label
256
**kwargs
257
):
258
"""
259
Semi-circular progress component.
260
261
Parameters:
262
- value: Progress percentage (0-100)
263
- color: Progress arc color
264
- size: Component diameter
265
- thickness: Arc thickness
266
- label: Center label content
267
"""
268
269
def Loader(
270
color="blue", # Loader color
271
size="md", # Loader size
272
variant="oval", # Loader animation type
273
**kwargs
274
):
275
"""
276
Loading spinner component.
277
278
Parameters:
279
- color: Spinner color
280
- size: Spinner size
281
- variant: Animation style ("oval", "bars", "dots")
282
"""
283
284
def LoadingOverlay(
285
visible=False, # Overlay visibility
286
overlayBlur=2, # Background blur amount
287
loaderProps=None, # Loader configuration
288
**kwargs
289
):
290
"""
291
Full overlay with loading spinner.
292
293
Parameters:
294
- visible: Whether overlay is shown
295
- overlayBlur: Background blur intensity
296
- loaderProps: Properties for internal Loader component
297
"""
298
299
def Skeleton(
300
height="auto", # Skeleton height
301
width="100%", # Skeleton width
302
radius="sm", # Border radius
303
animate=True, # Animate placeholder
304
**kwargs
305
):
306
"""
307
Loading placeholder skeleton.
308
309
Parameters:
310
- height: Skeleton height
311
- width: Skeleton width
312
- radius: Border radius
313
- animate: Show shimmer animation
314
"""
315
```
316
317
### Alert and Status Components
318
319
Components for displaying alerts, badges, and status information.
320
321
```python { .api }
322
def Alert(
323
children=None, # Alert content
324
title=None, # Alert title
325
color="blue", # Alert color theme
326
variant="light", # "light" | "filled" | "outline"
327
radius="sm", # Border radius
328
icon=None, # Alert icon
329
withCloseButton=False, # Show close button
330
**kwargs
331
):
332
"""
333
Alert message component.
334
335
Parameters:
336
- children: Alert message content
337
- title: Alert title text
338
- color: Color theme
339
- variant: Alert style
340
- radius: Border radius
341
- icon: Icon element
342
- withCloseButton: Show dismissal button
343
"""
344
345
def Badge(
346
children=None, # Badge content
347
color="blue", # Badge color
348
variant="light", # "light" | "filled" | "outline" | "dot"
349
size="md", # Badge size
350
radius="xl", # Border radius
351
leftSection=None, # Left side content
352
rightSection=None, # Right side content
353
**kwargs
354
):
355
"""
356
Status badge component.
357
358
Parameters:
359
- children: Badge text content
360
- color: Badge color theme
361
- variant: Badge style
362
- size: Badge size
363
- radius: Border radius
364
- leftSection: Content on left side
365
- rightSection: Content on right side
366
"""
367
368
def Indicator(
369
children=None, # Content to indicate
370
color="red", # Indicator color
371
size=10, # Indicator size
372
radius="xl", # Border radius
373
disabled=False, # Hide indicator
374
position="top-end", # Indicator position
375
offset=5, # Position offset
376
**kwargs
377
):
378
"""
379
Notification indicator component.
380
381
Parameters:
382
- children: Content to wrap with indicator
383
- color: Indicator dot color
384
- size: Indicator size
385
- radius: Border radius
386
- disabled: Hide indicator dot
387
- position: Indicator position relative to content
388
- offset: Position offset in pixels
389
"""
390
```
391
392
### List Components
393
394
Components for displaying lists of items with consistent formatting.
395
396
```python { .api }
397
def List(
398
children=None, # List items
399
type="unordered", # "ordered" | "unordered"
400
withPadding=False, # Add internal padding
401
size="sm", # List font size
402
spacing="sm", # Space between items
403
center=False, # Center list items
404
icon=None, # Custom bullet icon
405
**kwargs
406
):
407
"""
408
List container component.
409
410
Parameters:
411
- children: ListItem components
412
- type: List type (ordered/unordered)
413
- withPadding: Add padding around list
414
- size: Font size
415
- spacing: Space between items
416
- center: Center-align items
417
- icon: Custom bullet icon
418
"""
419
420
def ListItem(
421
children=None, # Item content
422
icon=None, # Item-specific icon
423
**kwargs
424
):
425
"""
426
Individual list item.
427
428
Parameters:
429
- children: Item content
430
- icon: Override list icon for this item
431
"""
432
```
433
434
### Scrollable Areas
435
436
Component for creating custom scrollable regions.
437
438
```python { .api }
439
def ScrollArea(
440
children=None, # Scrollable content
441
h=None, # Container height
442
mah=None, # Maximum height
443
type="hover", # "hover" | "scroll" | "always" | "never"
444
offsetScrollbars=False, # Offset content from scrollbars
445
scrollbarSize=12, # Scrollbar thickness
446
**kwargs
447
):
448
"""
449
Custom scrollable area component.
450
451
Parameters:
452
- children: Content to make scrollable
453
- h: Fixed height
454
- mah: Maximum height
455
- type: Scrollbar visibility behavior
456
- offsetScrollbars: Offset content to prevent layout shift
457
- scrollbarSize: Scrollbar thickness in pixels
458
"""
459
```
460
461
## Usage Examples
462
463
### Data Table
464
465
```python
466
import dash_mantine_components as dmc
467
468
table = dmc.TableScrollContainer([
469
dmc.Table([
470
dmc.TableThead([
471
dmc.TableTr([
472
dmc.TableTh("Name"),
473
dmc.TableTh("Email"),
474
dmc.TableTh("Status"),
475
dmc.TableTh("Actions")
476
])
477
]),
478
dmc.TableTbody([
479
dmc.TableTr([
480
dmc.TableTd("John Doe"),
481
dmc.TableTd("john@example.com"),
482
dmc.TableTd([
483
dmc.Badge("Active", color="green", variant="light")
484
]),
485
dmc.TableTd([
486
dmc.ActionIcon("✏️", variant="subtle"),
487
dmc.ActionIcon("🗑️", variant="subtle", color="red")
488
])
489
]),
490
dmc.TableTr([
491
dmc.TableTd("Jane Smith"),
492
dmc.TableTd("jane@example.com"),
493
dmc.TableTd([
494
dmc.Badge("Inactive", color="gray", variant="light")
495
]),
496
dmc.TableTd([
497
dmc.ActionIcon("✏️", variant="subtle"),
498
dmc.ActionIcon("🗑️", variant="subtle", color="red")
499
])
500
])
501
])
502
], striped=True, highlightOnHover=True)
503
], minWidth=600)
504
```
505
506
### Progress Indicators
507
508
```python
509
progress_demo = dmc.Stack([
510
dmc.Text("Linear Progress", weight=500),
511
dmc.Progress(value=65, color="blue", size="lg"),
512
513
dmc.Text("Ring Progress", weight=500, mt="md"),
514
dmc.RingProgress(
515
sections=[
516
{"value": 40, "color": "cyan"},
517
{"value": 25, "color": "orange"},
518
{"value": 15, "color": "grape"}
519
],
520
label=dmc.Text("80%", ta="center", weight=700)
521
),
522
523
dmc.Text("Loading States", weight=500, mt="md"),
524
dmc.Group([
525
dmc.Loader(variant="oval"),
526
dmc.Loader(variant="bars", color="orange"),
527
dmc.Loader(variant="dots", color="grape")
528
])
529
])
530
```
531
532
### Content Display
533
534
```python
535
content = dmc.Stack([
536
dmc.Group([
537
dmc.Avatar("JD", color="blue", size="lg"),
538
dmc.Stack([
539
dmc.Text("John Doe", weight=500),
540
dmc.Text("Software Developer", size="sm", c="dimmed")
541
], spacing="xs")
542
]),
543
544
dmc.Alert(
545
"This is an informational alert with an icon.",
546
title="Information",
547
color="blue",
548
icon="ℹ️"
549
),
550
551
dmc.List([
552
dmc.ListItem("First item"),
553
dmc.ListItem("Second item"),
554
dmc.ListItem("Third item")
555
], type="ordered")
556
])
557
```