0
# Data Display Components
1

2
High-performance components for displaying structured data including virtualized lists, data tables, and user representation elements optimized for large datasets and responsive layouts.
3

4
## Capabilities
5

6
### DetailsList
7

8
High-performance data table component with sorting, filtering, selection, and virtualization support for displaying large datasets.
9

10
```typescript { .api }
11
/**
12
 * High-performance data table with virtualization and selection support
13
 */
14
function DetailsList(props: IDetailsListProps): JSX.Element;
15

16
interface IDetailsList {
17
  /** Force update of the list */
18
  forceUpdate(): void;
19
  /** Focus on a specific item by index */
20
  focusIndex(index: number): void;
21
}
22

23
interface IDetailsListProps {
24
  /** Reference to access component methods */
25
  componentRef?: IRefObject<IDetailsList>;
26
  /** Array of data items to display */
27
  items: any[];
28
  /** Column definitions for the table */
29
  columns: IColumn[];
30
  /** Group definitions for hierarchical data */
31
  groups?: IGroup[];
32
  /** Properties for group rendering */
33
  groupProps?: IDetailsGroupRenderProps;
34
  /** Selection manager instance */
35
  selection?: ISelection;
36
  /** Selection mode (none, single, multiple) */
37
  selectionMode?: SelectionMode;
38
  /** Layout mode for columns */
39
  layoutMode?: DetailsListLayoutMode;
40
  /** Whether to use compact row spacing */
41
  compact?: boolean;
42
  /** Whether the header is visible */
43
  isHeaderVisible?: boolean;
44
  /** Whether virtualization is enabled */
45
  enableShimmer?: boolean;
46
  /** Shimmer lines count */
47
  shimmerLines?: number;
48
  /** Checkbox visibility mode */
49
  checkboxVisibility?: CheckboxVisibility;
50
  /** Constraint mode for column sizing */
51
  constrainMode?: ConstrainMode;
52
  /** Unique key for force re-render */
53
  setKey?: string;
54
  /** Initial focused index */
55
  initialFocusedIndex?: number;
56
  /** Whether to disable selection on click */
57
  disableSelectionZone?: boolean;
58
  /** Whether to preserve selection on empty click */
59
  selectionPreservedOnEmptyClick?: boolean;
60
  /** Aria label for the list */
61
  ariaLabel?: string;
62
  /** Aria labelledby for the list */
63
  ariaLabelledBy?: string;
64
  /** Role for the list */
65
  role?: string;
66
  /** Row element type */
67
  rowElementEventMap?: { [eventName: string]: (context: IDetailsRowProps, ev?: any) => void };
68
  /** Whether to use reduced row renderer */
69
  useReducedRowRenderer?: boolean;
70
  /** Custom render function for missing items */
71
  onRenderMissingItem?: (index?: number, rowProps?: IDetailsRowProps) => React.ReactNode;
72
  /** Custom render function for item column */
73
  onRenderItemColumn?: (item?: any, index?: number, column?: IColumn) => React.ReactNode;
74
  /** Custom render function for row */
75
  onRenderRow?: IDetailsListProps["onRenderRow"];
76
  /** Custom render function for details header */
77
  onRenderDetailsHeader?: IRenderFunction<IDetailsHeaderProps>;
78
  /** Custom render function for details footer */
79
  onRenderDetailsFooter?: IRenderFunction<IDetailsFooterProps>;
80
  /** Callback fired when item is invoked (double-click or enter) */
81
  onItemInvoked?: (item?: any, index?: number, ev?: Event) => void;
82
  /** Callback fired when item context menu is invoked */
83
  onItemContextMenu?: (item?: any, index?: number, ev?: Event) => void | boolean;
84
  /** Callback fired when column header is clicked */
85
  onColumnHeaderClick?: (ev?: React.MouseEvent<HTMLElement>, column?: IColumn) => void;
86
  /** Callback fired when column header context menu is invoked */
87
  onColumnHeaderContextMenu?: (column?: IColumn, ev?: React.MouseEvent<HTMLElement>) => void;
88
  /** Callback fired when should update focus */
89
  onShouldVirtualize?: (props: IListProps) => boolean;
90
  /** Callback fired when active item changes */
91
  onActiveItemChanged?: (item?: any, index?: number, ev?: React.FocusEvent<HTMLElement>) => void;
92
  /** Callback fired when column resize starts */
93
  onColumnResize?: (column?: IColumn, newWidth?: number, columnIndex?: number) => void;
94
  /** Custom styles */
95
  styles?: IStyleFunctionOrObject<IDetailsListStyleProps, IDetailsListStyles>;
96
  /** Theme provided by higher-order component */
97
  theme?: ITheme;
98
  /** Additional CSS class */
99
  className?: string;
100
  /** List properties for virtualization */
101
  listProps?: IListProps;
102
  /** Group properties */
103
  groupProps?: IDetailsGroupRenderProps;
104
  /** Drag drop helper for reordering */
105
  dragDropEvents?: IDragDropEvents;
106
  /** Viewport for virtualization */
107
  viewport?: IViewport;
108
  /** Minimum rows to render */
109
  minimumPixelsForDrag?: number;
110
  /** Compact mode */
111
  compact?: boolean;
112
}
113

114
interface IColumn {
115
  /** Unique key for the column */
116
  key: string;
117
  /** Display name for the column header */
118
  name: string;
119
  /** Field name in the data item */
120
  fieldName?: string;
121
  /** Minimum width in pixels */
122
  minWidth: number;
123
  /** Maximum width in pixels */
124
  maxWidth?: number;
125
  /** Current width in pixels */
126
  currentWidth?: number;
127
  /** Whether the column is resizable */
128
  isResizable?: boolean;
129
  /** Whether the column is sortable */
130
  isSorted?: boolean;
131
  /** Whether the column is sorted descending */
132
  isSortedDescending?: boolean;
133
  /** Whether the column is filtered */
134
  isFiltered?: boolean;
135
  /** Whether this column serves as row header */
136
  isRowHeader?: boolean;
137
  /** Whether the column content can wrap */
138
  isMultiline?: boolean;
139
  /** Whether the column is grouped */
140
  isGrouped?: boolean;
141
  /** Whether the column has padding */
142
  isPadded?: boolean;
143
  /** Icon name for the column header */
144
  iconName?: string;
145
  /** Icon class name for the column header */
146
  iconClassName?: string;
147
  /** Column actions mode */
148
  columnActionsMode?: ColumnActionsMode;
149
  /** Header class name */
150
  headerClassName?: string;
151
  /** Custom render function for column header */
152
  onRenderHeader?: IRenderFunction<IDetailsColumnProps>;
153
  /** Custom render function for column content */
154
  onRender?: (item?: any, index?: number, column?: IColumn) => React.ReactNode;
155
  /** Callback fired when column header is clicked */
156
  onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;
157
  /** Callback fired when column header context menu is invoked */
158
  onColumnContextMenu?: (column?: IColumn, ev?: React.MouseEvent<HTMLElement>) => void;
159
  /** Callback fired when column is resized */
160
  onColumnResize?: (width?: number) => void;
161
  /** Filter aria label */
162
  filterAriaLabel?: string;
163
  /** Sort aria label */
164
  sortAscendingAriaLabel?: string;
165
  /** Sort aria label for descending */
166
  sortDescendingAriaLabel?: string;
167
  /** Group aria label */
168
  groupAriaLabel?: string;
169
  /** Aria label for the column */
170
  ariaLabel?: string;
171
  /** Additional data for the column */
172
  data?: any;
173
  /** Calculated width */
174
  calculatedWidth?: number;
175
}
176

177
enum DetailsListLayoutMode {
178
  fixedColumns = 0,
179
  justified = 1
180
}
181

182
enum ColumnActionsMode {
183
  disabled = 0,
184
  clickable = 1,
185
  hasDropdown = 2
186
}
187

188
enum ConstrainMode {
189
  unconstrained = 0,
190
  horizontalConstrained = 1
191
}
192

193
enum CheckboxVisibility {
194
  onHover = 0,
195
  always = 1,
196
  hidden = 2
197
}
198

199
enum SelectionMode {
200
  none = 0,
201
  single = 1,
202
  multiple = 2
203
}
204
```
205

206
**Usage Examples:**
207

208
```typescript
209
import React, { useState, useMemo } from "react";
210
import { 
211
  DetailsList, 
212
  IColumn, 
213
  DetailsListLayoutMode,
214
  SelectionMode,
215
  Selection 
216
} from "office-ui-fabric-react";
217

218
interface IItem {
219
  key: string;
220
  name: string;
221
  email: string;
222
  department: string;
223
  status: string;
224
  lastActive: Date;
225
}
226

227
function BasicDetailsList() {
228
  const items: IItem[] = [
229
    { 
230
      key: "1", 
231
      name: "John Doe", 
232
      email: "john@example.com", 
233
      department: "Engineering", 
234
      status: "Active",
235
      lastActive: new Date("2023-12-01")
236
    },
237
    { 
238
      key: "2", 
239
      name: "Jane Smith", 
240
      email: "jane@example.com", 
241
      department: "Design", 
242
      status: "Away",
243
      lastActive: new Date("2023-11-28")
244
    },
245
    { 
246
      key: "3", 
247
      name: "Bob Johnson", 
248
      email: "bob@example.com", 
249
      department: "Marketing", 
250
      status: "Active",
251
      lastActive: new Date("2023-12-02")
252
    }
253
  ];
254

255
  const columns: IColumn[] = [
256
    {
257
      key: "name",
258
      name: "Name",
259
      fieldName: "name",
260
      minWidth: 150,
261
      maxWidth: 300,
262
      isResizable: true,
263
      isRowHeader: true,
264
      isSorted: true,
265
      isSortedDescending: false,
266
      onColumnClick: (ev, column) => {
267
        console.log("Sort by name", column);
268
      }
269
    },
270
    {
271
      key: "email",
272
      name: "Email",
273
      fieldName: "email",
274
      minWidth: 200,
275
      maxWidth: 400,
276
      isResizable: true,
277
      onRender: (item: IItem) => {
278
        return <a href={`mailto:${item.email}`}>{item.email}</a>;
279
      }
280
    },
281
    {
282
      key: "department",
283
      name: "Department",
284
      fieldName: "department",
285
      minWidth: 120,
286
      maxWidth: 200,
287
      isResizable: true
288
    },
289
    {
290
      key: "status",
291
      name: "Status",
292
      fieldName: "status",
293
      minWidth: 80,
294
      maxWidth: 120,
295
      onRender: (item: IItem) => {
296
        const statusColor = item.status === "Active" ? "#107C10" : "#FF8C00";
297
        return (
298
          <span style={{ color: statusColor, fontWeight: 600 }}>
299
            {item.status}
300
          </span>
301
        );
302
      }
303
    },
304
    {
305
      key: "lastActive",
306
      name: "Last Active",
307
      fieldName: "lastActive",
308
      minWidth: 120,
309
      maxWidth: 180,
310
      onRender: (item: IItem) => {
311
        return item.lastActive.toLocaleDateString();
312
      }
313
    }
314
  ];
315

316
  return (
317
    <DetailsList
318
      items={items}
319
      columns={columns}
320
      setKey="set"
321
      layoutMode={DetailsListLayoutMode.justified}
322
      selectionMode={SelectionMode.multiple}
323
      onItemInvoked={(item) => console.log("Item invoked:", item)}
324
      ariaLabel="Employee list"
325
    />
326
  );
327
}
328

329
function SelectableDetailsList() {
330
  const [items] = useState<IItem[]>([
331
    // ... same items as above
332
  ]);
333
  
334
  const [selectedItems, setSelectedItems] = useState<IItem[]>([]);
335

336
  const selection: Selection = useMemo(() => {
337
    return new Selection({
338
      onSelectionChanged: () => {
339
        setSelectedItems(selection.getSelection() as IItem[]);
340
      }
341
    });
342
  }, []);
343

344
  const columns: IColumn[] = [
345
    // ... same columns as above
346
  ];
347

348
  return (
349
    <div>
350
      <div style={{ marginBottom: 10 }}>
351
        Selected items: {selectedItems.length}
352
      </div>
353
      
354
      <DetailsList
355
        items={items}
356
        columns={columns}
357
        setKey="set"
358
        layoutMode={DetailsListLayoutMode.justified}
359
        selection={selection}
360
        selectionPreservedOnEmptyClick
361
        ariaLabel="Selectable employee list"
362
      />
363
    </div>
364
  );
365
}
366
```
367

368
### List
369

370
Virtualized list component optimized for displaying large datasets with efficient rendering and scrolling.
371

372
```typescript { .api }
373
/**
374
 * Virtualized list component for large datasets
375
 */
376
function List<T>(props: IListProps<T>): JSX.Element;
377

378
interface IList {
379
  /** Force update of the list */
380
  forceUpdate(): void;
381
  /** Scroll to a specific index */
382
  scrollToIndex(index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void;
383
  /** Focus on a specific index */
384
  focusIndex(index: number, forceIntoFirstElement?: boolean, measureItem?: (itemIndex: number) => number): void;
385
  /** Get the current scroll position */
386
  getStartItemIndexInView(measureItem?: (itemIndex: number) => number): number;
387
}
388

389
interface IListProps<T = any> {
390
  /** Reference to access component methods */
391
  componentRef?: IRefObject<IList>;
392
  /** Array of items to render */
393
  items?: T[];
394
  /** Function to render each item */
395
  onRenderCell: (item?: T, index?: number, isScrolling?: boolean) => React.ReactNode;
396
  /** Function to get a unique key for each item */
397
  getKey?: (item: T, index?: number) => string;
398
  /** Initial focused index */
399
  initialFocusedIndex?: number;
400
  /** Class name for the list */
401
  className?: string;
402
  /** Role for accessibility */
403
  role?: string;
404
  /** Whether the list should start updates */
405
  startIndex?: number;
406
  /** Whether to render all items (disable virtualization) */
407
  renderCount?: number;
408
  /** Item height in pixels (for fixed height items) */
409
  getItemCountForPage?: (visibleRect?: IRectangle, allItems?: T[]) => number;
410
  /** Function to get page height */
411
  getPageHeight?: (visibleRect?: IRectangle, allItems?: T[], itemIndex?: number) => number;
412
  /** Page key for render optimization */
413
  usePageCache?: boolean;
414
  /** Custom render function for page */
415
  onRenderPage?: (pageProps: IPageProps, defaultRender?: IRenderFunction<IPageProps>) => React.ReactNode;
416
  /** Function to measure item height dynamically */
417
  getPageSpecification?: (itemIndex?: number, visibleRect?: IRectangle) => IPageSpecification;
418
  /** Callback fired when the rendered range changes */
419
  onPagesUpdated?: (pages: IPage[]) => void;
420
  /** Callback fired when items are rendered */
421
  onShouldVirtualize?: (props: IListProps) => boolean;
422
  /** Custom styles */
423
  styles?: IStyleFunctionOrObject<IListStyleProps, IListStyles>;
424
  /** Theme provided by higher-order component */
425
  theme?: ITheme;
426
  /** Version for cache invalidation */
427
  version?: {};
428
  /** Items per page */
429
  renderedWindowsAhead?: number;
430
  /** Items per page behind */
431
  renderedWindowsBehind?: number;
432
  /** Ignore scroll events */
433
  ignoreScrollingState?: boolean;
434
}
435

436
enum ScrollToMode {
437
  auto = 0,
438
  top = 1,
439
  bottom = 2,
440
  center = 3
441
}
442
```
443

444
### GroupedList
445

446
Hierarchical list component with expandable groups for organizing related data items.
447

448
```typescript { .api }
449
/**
450
 * Hierarchical list with expandable groups
451
 */
452
function GroupedList(props: IGroupedListProps): JSX.Element;
453

454
interface IGroupedList {
455
  /** Force update of the list */
456
  forceUpdate(): void;
457
  /** Toggle group expansion */
458
  toggleCollapseAll(allCollapsed: boolean): void;
459
}
460

461
interface IGroupedListProps {
462
  /** Reference to access component methods */
463
  componentRef?: IRefObject<IGroupedList>;
464
  /** Array of items to display */
465
  items: any[];
466
  /** Function to render each item */
467
  onRenderCell: (nestingDepth?: number, item?: any, itemIndex?: number) => React.ReactNode;
468
  /** Selection manager */
469
  selection?: ISelection;
470
  /** Selection mode */
471
  selectionMode?: SelectionMode;
472
  /** Group definitions */
473
  groups?: IGroup[];
474
  /** Whether to show empty groups */
475
  showEmptyGroups?: boolean;
476
  /** Compact mode */
477
  compact?: boolean;
478
  /** Properties for drag and drop */
479
  dragDropEvents?: IDragDropEvents;
480
  /** Properties for group headers */
481
  groupProps?: IGroupRenderProps;
482
  /** Custom render function for group header */
483
  onRenderGroupHeader?: (props?: IGroupDividerProps) => React.ReactNode;
484
  /** Custom render function for group footer */
485
  onRenderGroupFooter?: (props?: IGroupDividerProps) => React.ReactNode;
486
  /** Function to get group key */
487
  getGroupKey?: (group: IGroup, index: number) => string;
488
  /** Callback fired when group header is clicked */
489
  onGroupHeaderClick?: (group?: IGroup) => void;
490
  /** Callback fired when group expand state changes */
491
  onGroupExpandStateChanged?: (isSomeGroupExpanded?: boolean) => void;
492
  /** Custom styles */
493
  styles?: IStyleFunctionOrObject<IGroupedListStyleProps, IGroupedListStyles>;
494
  /** Theme provided by higher-order component */
495
  theme?: ITheme;
496
  /** Additional CSS class */
497
  className?: string;
498
  /** List properties */
499
  listProps?: IListProps;
500
  /** Use page cache */
501
  usePageCache?: boolean;
502
  /** Callback fired when should virtualize */
503
  onShouldVirtualize?: (props: IListProps) => boolean;
504
}
505

506
interface IGroup {
507
  /** Unique key for the group */
508
  key: string;
509
  /** Display name for the group */
510
  name: string;
511
  /** Start index in the items array */
512
  startIndex: number;
513
  /** Number of items in the group */
514
  count: number;
515
  /** Nesting level */
516
  level?: number;
517
  /** Whether the group is collapsed */
518
  isCollapsed?: boolean;
519
  /** Whether the group shows all items */
520
  isShowingAll?: boolean;
521
  /** Whether drag and drop is enabled */
522
  isDropEnabled?: boolean;
523
  /** Additional data */
524
  data?: any;
525
  /** Child groups */
526
  children?: IGroup[];
527
  /** Whether there are more items to load */
528
  hasMoreData?: boolean;
529
  /** Color for the group */
530
  color?: string;
531
}
532
```
533

534
### Persona
535

536
User representation component with avatar and details for displaying user information.
537

538
```typescript { .api }
539
/**
540
 * User representation component with avatar and details
541
 */
542
function Persona(props: IPersonaProps): JSX.Element;
543

544
interface IPersona {
545
  /** Current persona size */
546
  persona: IPersonaProps;
547
}
548

549
interface IPersonaProps {
550
  /** Reference to access component methods */
551
  componentRef?: IRefObject<IPersona>;
552
  /** Primary text (usually the name) */
553
  text?: string;
554
  /** Secondary text (usually title or department) */
555
  secondaryText?: string;
556
  /** Tertiary text (additional info) */
557
  tertiaryText?: string;
558
  /** Optional text (status or location) */
559
  optionalText?: string;
560
  /** URL or data URL for the avatar image */
561
  imageUrl?: string;
562
  /** Alt text for the avatar image */
563
  imageAlt?: string;
564
  /** Initials to display if no image */
565
  imageInitials?: string;
566
  /** Whether the image should cover the entire area */
567
  imageShouldFadeIn?: boolean;
568
  /** Whether the image should start visible */
569
  imageShouldStartVisible?: boolean;
570
  /** Persona size */
571
  size?: PersonaSize;
572
  /** Persona presence (online status) */
573
  presence?: PersonaPresence;
574
  /** Presence title */
575
  presenceTitle?: string;
576
  /** Colors for the presence indicator */
577
  presenceColors?: IPersonaPresenceColors;
578
  /** Coin properties for the avatar */
579
  coinProps?: IPersonaCoinProps;
580
  /** Show unknown persona coin */
581
  showUnknownPersonaCoin?: boolean;
582
  /** Whether to show the secondary text on a new line */
583
  showSecondaryText?: boolean;
584
  /** Whether to show the initials color */
585
  showInitialsUntilImageLoads?: boolean;
586
  /** Whether to hide the persona details */
587
  hidePersonaDetails?: boolean;
588
  /** Custom render function for the coin */
589
  onRenderCoin?: IRenderFunction<IPersonaCoinProps>;
590
  /** Custom render function for primary text */
591
  onRenderPrimaryText?: IRenderFunction<IPersonaProps>;
592
  /** Custom render function for secondary text */
593
  onRenderSecondaryText?: IRenderFunction<IPersonaProps>;
594
  /** Custom render function for tertiary text */
595
  onRenderTertiaryText?: IRenderFunction<IPersonaProps>;
596
  /** Custom render function for optional text */
597
  onRenderOptionalText?: IRenderFunction<IPersonaProps>;
598
  /** Allow phone number clicks */
599
  allowPhoneInitials?: boolean;
600
  /** Click handler for the persona */
601
  onClick?: (ev?: React.MouseEvent<HTMLElement>) => void;
602
  /** Context menu handler */
603
  onMouseMove?: (ev?: React.MouseEvent<HTMLElement>) => void;
604
  /** Custom styles */
605
  styles?: IStyleFunctionOrObject<IPersonaStyleProps, IPersonaStyles>;
606
  /** Theme provided by higher-order component */
607
  theme?: ITheme;
608
  /** Additional CSS class */
609
  className?: string;
610
}
611

612
enum PersonaSize {
613
  size8 = 0,
614
  size10 = 1,
615
  tiny = 1,
616
  size16 = 2,
617
  size24 = 3,
618
  size28 = 4,
619
  size32 = 5,
620
  size40 = 6,
621
  size48 = 7,
622
  size56 = 8,
623
  size72 = 9,
624
  size100 = 10,
625
  size120 = 11
626
}
627

628
enum PersonaPresence {
629
  none = 0,
630
  offline = 1,
631
  online = 2,
632
  away = 3,
633
  dnd = 4,
634
  blocked = 5,
635
  busy = 6
636
}
637
```
638

639
### PersonaCoin
640

641
Standalone avatar component showing just the circular user image or initials portion of a Persona.
642

643
```typescript { .api }
644
/**
645
 * Standalone circular avatar component
646
 */
647
function PersonaCoin(props: IPersonaCoinProps): JSX.Element;
648

649
interface IPersonaCoin {
650
  /** Current persona coin props */
651
  persona: IPersonaCoinProps;
652
}
653

654
interface IPersonaCoinProps {
655
  /** Reference to access component methods */  
656
  componentRef?: IRefObject<IPersonaCoin>;
657
  /** Primary text for generating initials */
658
  text?: string;
659
  /** URL or data URL for the avatar image */
660
  imageUrl?: string;
661
  /** Alt text for the avatar image */
662
  imageAlt?: string;
663
  /** Custom initials override */
664
  imageInitials?: string;
665
  /** Whether the image should fade in */
666
  imageShouldFadeIn?: boolean;
667
  /** Whether the image should start visible */
668
  imageShouldStartVisible?: boolean;
669
  /** Size of the persona coin */
670
  size?: PersonaSize;
671
  /** Presence indicator */
672
  presence?: PersonaPresence;
673
  /** Title for the presence indicator */
674
  presenceTitle?: string;
675
  /** Colors for the presence indicator */
676
  presenceColors?: IPersonaPresenceColors;
677
  /** Whether to show unknown persona coin */
678
  showUnknownPersonaCoin?: boolean;
679
  /** Whether to show initials while image loads */
680
  showInitialsUntilImageLoads?: boolean;
681
  /** Custom render function for initials */
682
  onRenderInitials?: IRenderFunction<IPersonaCoinProps>;
683
  /** Custom render function for the coin */
684
  onRenderCoin?: IRenderFunction<IPersonaCoinProps>;
685
  /** Custom render function for the presence */
686
  onRenderPresence?: IRenderFunction<IPersonaCoinProps>;
687
  /** Whether to allow phone number initials */
688
  allowPhoneInitials?: boolean;
689
  /** Click handler */
690
  onClick?: (ev?: React.MouseEvent<HTMLElement>) => void;
691
  /** Mouse move handler */
692
  onMouseMove?: (ev?: React.MouseEvent<HTMLElement>) => void;
693
  /** Custom styles */
694
  styles?: IStyleFunctionOrObject<IPersonaCoinStyleProps, IPersonaCoinStyles>;
695
  /** Theme provided by higher-order component */
696
  theme?: ITheme;
697
  /** Additional CSS class */
698
  className?: string;
699
}
700
```
701

702
**Usage Examples:**
703

704
```typescript
705
import React from "react";
706
import { 
707
  Persona, 
708
  PersonaCoin, 
709
  PersonaSize, 
710
  PersonaPresence 
711
} from "office-ui-fabric-react";
712

713
function BasicPersona() {
714
  return (
715
    <div>
716
      <Persona
717
        text="John Doe"
718
        secondaryText="Software Engineer"
719
        tertiaryText="Engineering Team"
720
        optionalText="Available"
721
        size={PersonaSize.size48}
722
        presence={PersonaPresence.online}
723
        imageUrl="https://example.com/avatar.jpg"
724
        imageAlt="John Doe's avatar"
725
      />
726
      
727
      <Persona
728
        text="Jane Smith"
729
        secondaryText="UX Designer"
730
        size={PersonaSize.size40}
731
        presence={PersonaPresence.away}
732
        showSecondaryText
733
      />
734
    </div>
735
  );
736
}
737

738
function PersonaCoins() {
739
  return (
740
    <div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
741
      <PersonaCoin
742
        text="Alice Johnson"
743
        size={PersonaSize.size32}
744
        presence={PersonaPresence.online}
745
      />
746
      
747
      <PersonaCoin
748
        text="Bob Wilson"
749
        size={PersonaSize.size40}
750
        presence={PersonaPresence.busy}
751
        imageUrl="https://example.com/bob.jpg"
752
      />
753
      
754
      <PersonaCoin
755
        text="Carol Brown"
756
        size={PersonaSize.size48}
757
        presence={PersonaPresence.offline}
758
      />
759
    </div>
760
  );
761
}
762
```
763

764
## Types
765

766
```typescript { .api }
767
// Selection management interfaces
768
interface ISelection {
769
  /** Number of selected items */
770
  count: number;
771
  /** Selection mode */
772
  mode: SelectionMode;
773
  /** Function to check if item can be selected */
774
  canSelectItem: (item: any, index?: number) => boolean;
775
  /** Get all items */
776
  getItems(): any[];
777
  /** Get selected item count */
778
  getSelectedCount(): number;
779
  /** Get selected item indices */
780
  getSelectedIndices(): number[];
781
  /** Get selected items */
782
  getSelection(): any[];
783
  /** Check if all items are selected */
784
  isAllSelected(): boolean;
785
  /** Check if specific item is selected by key */
786
  isKeySelected(key: string): boolean;
787
  /** Check if specific item is selected by index */
788
  isIndexSelected(index: number): boolean;
789
  /** Set all items selected state */
790
  setAllSelected(isAllSelected: boolean): void;
791
  /** Set items collection */
792
  setItems(items: any[], shouldClear: boolean): void;
793
  /** Set selection by key */
794
  setKeySelected(key: string, isSelected: boolean, shouldAnchor: boolean): void;
795
  /** Set selection by index */
796
  setIndexSelected(index: number, isSelected: boolean, shouldAnchor: boolean): void;
797
  /** Set range selection */
798
  setRangeSelected(fromIndex: number, count: number, isSelected: boolean, shouldAnchor: boolean): void;
799
  /** Toggle all items selection */
800
  toggleAllSelected(): void;
801
  /** Toggle selection by key */
802
  toggleKeySelected(key: string): void;
803
  /** Toggle selection by index */
804
  toggleIndexSelected(index: number): void;
805
  /** Toggle range selection */
806
  toggleRangeSelected(fromIndex: number, count: number): void;
807
  /** Set change events enabled state */
808
  setChangeEvents(isEnabled: boolean, suppressChange?: boolean): void;
809
}
810

811
// Drag and drop interfaces
812
interface IDragDropEvents {
813
  /** Whether drag and drop is enabled */
814
  canDrag?: (item?: any, itemIndex?: number) => boolean;
815
  /** Whether item can be dropped on target */
816
  canDrop?: (dropContext?: IDragDropContext, dragContext?: IDragDropContext) => boolean;
817
  /** Callback when drag starts */
818
  onDragStart?: (item?: any, itemIndex?: number, selectedItems?: any[], event?: MouseEvent) => void;
819
  /** Callback when dragging over target */
820
  onDragEnter?: (item?: any, event?: DragEvent) => string;
821
  /** Callback when drag leaves target */
822
  onDragLeave?: (item?: any, event?: DragEvent) => void;
823
  /** Callback when item is dropped */
824
  onDrop?: (item?: any, event?: DragEvent) => void;
825
  /** Callback when drag ends */
826
  onDragEnd?: (item?: any, event?: DragEvent) => void;
827
}
828

829
interface IDragDropContext {
830
  /** Data being dragged */
831
  data: any;
832
  /** Index of the item being dragged */
833
  index: number;
834
  /** Type of drag operation */
835
  type: string;
836
}
837

838
// Virtualization interfaces
839
interface IViewport {
840
  /** Width of the viewport */
841
  width: number;
842
  /** Height of the viewport */
843
  height: number;
844
}
845

846
interface IRectangle {
847
  /** Left position */
848
  left: number;
849
  /** Top position */
850
  top: number;
851
  /** Width */
852
  width: number;
853
  /** Height */
854
  height: number;
855
  /** Right edge (calculated) */
856
  right?: number;
857
  /** Bottom edge (calculated) */
858
  bottom?: number;
859
}
860
```