0
# Data Display Components
1

2
Advanced data presentation components including tables, trees, and virtual scrolling with sorting, filtering, and pagination capabilities.
3

4
## Capabilities
5

6
### DataTable
7

8
Advanced data table component with sorting, filtering, pagination, selection, and row editing capabilities.
9

10
```typescript { .api }
11
/**
12
 * Advanced data table component
13
 * @param props - DataTable configuration options
14
 * @returns JSX element
15
 */
16
function DataTable<T = any>(props: DataTableProps<T>): JSX.Element;
17

18
interface DataTableProps<T = any> {
19
  /** Array of data objects to display */
20
  value?: T[];
21
  /** Table columns configuration */
22
  columns?: ColumnProps[];
23
  /** Enable pagination */
24
  paginator?: boolean;
25
  /** Number of rows per page */
26
  rows?: number;
27
  /** Total number of records (for lazy loading) */
28
  totalRecords?: number;
29
  /** Lazy loading enabled */
30
  lazy?: boolean;
31
  /** Loading state */
32
  loading?: boolean;
33
  /** Default sort field */
34
  sortField?: string;
35
  /** Default sort order */
36
  sortOrder?: 1 | -1;
37
  /** Multiple sort enabled */
38
  multiSortMeta?: SortMeta[];
39
  /** Enable global filtering */
40
  globalFilter?: string;
41
  /** Selection value(s) */
42
  selection?: T | T[];
43
  /** Selection mode */
44
  selectionMode?: 'single' | 'multiple' | 'checkbox' | 'radiobutton';
45
  /** Row selection change handler */
46
  onSelectionChange?: (e: DataTableSelectionChangeEvent<T>) => void;
47
  /** Row data key for selection tracking */
48
  dataKey?: string;
49
  /** Rows per page options */
50
  rowsPerPageOptions?: number[];
51
  /** Page change handler */
52
  onPage?: (e: DataTablePageEvent) => void;
53
  /** Sort change handler */
54
  onSort?: (e: DataTableSortEvent) => void;
55
  /** Filter change handler */
56
  onFilter?: (e: DataTableFilterEvent) => void;
57
  /** Row edit save handler */
58
  onRowEditComplete?: (e: DataTableRowEditCompleteEvent<T>) => void;
59
  /** Empty message when no data */
60
  emptyMessage?: string;
61
  /** Show grid lines */
62
  showGridlines?: boolean;
63
  /** Striped rows */
64
  stripedRows?: boolean;
65
  /** Responsive layout */
66
  responsiveLayout?: 'stack' | 'scroll';
67
  /** CSS class name */
68
  className?: string;
69
  /** Passthrough options */
70
  pt?: PassThroughOptions;
71
}
72

73
interface DataTableSelectionChangeEvent<T = any> {
74
  originalEvent: React.SyntheticEvent;
75
  value: T | T[];
76
}
77

78
interface DataTablePageEvent {
79
  first: number;
80
  rows: number;
81
  page: number;
82
  pageCount: number;
83
}
84

85
interface DataTableSortEvent {
86
  sortField: string;
87
  sortOrder: 1 | -1;
88
  multiSortMeta: SortMeta[];
89
}
90

91
interface SortMeta {
92
  field: string;
93
  order: 1 | -1;
94
}
95
```
96

97
**Usage Examples:**
98

99
```typescript
100
import { DataTable } from "primereact/datatable";
101
import { Column } from "primereact/column";
102

103
// Basic data table
104
<DataTable value={products}>
105
  <Column field="name" header="Name" />
106
  <Column field="price" header="Price" />
107
  <Column field="category" header="Category" />
108
</DataTable>
109

110
// With pagination and selection
111
<DataTable 
112
  value={users} 
113
  paginator 
114
  rows={10}
115
  selection={selectedUsers}
116
  onSelectionChange={(e) => setSelectedUsers(e.value)}
117
  selectionMode="checkbox"
118
>
119
  <Column selectionMode="multiple" />
120
  <Column field="name" header="Name" sortable />
121
  <Column field="email" header="Email" />
122
</DataTable>
123
```
124

125
### Column
126

127
Column component for DataTable that defines field mapping, display formatting, and column-specific features.
128

129
```typescript { .api }
130
/**
131
 * DataTable column component
132
 * @param props - Column configuration options
133
 * @returns JSX element
134
 */
135
function Column(props: ColumnProps): JSX.Element;
136

137
interface ColumnProps {
138
  /** Field name for data binding */
139
  field?: string;
140
  /** Column header text */
141
  header?: React.ReactNode;
142
  /** Column footer text */
143
  footer?: React.ReactNode;
144
  /** Enable sorting for this column */
145
  sortable?: boolean;
146
  /** Enable filtering for this column */
147
  filter?: boolean;
148
  /** Filter element type */
149
  filterElement?: React.ReactNode;
150
  /** Filter field (if different from field) */
151
  filterField?: string;
152
  /** Filter match mode */
153
  filterMatchMode?: string;
154
  /** Custom body template function */
155
  body?: (data: any, options: ColumnBodyOptions) => React.ReactNode;
156
  /** Custom header template function */
157
  headerTemplate?: (options: ColumnHeaderOptions) => React.ReactNode;
158
  /** Selection mode for this column */
159
  selectionMode?: 'single' | 'multiple';
160
  /** Row editor controls */
161
  rowEditor?: boolean;
162
  /** Expandable row toggle */
163
  expander?: boolean;
164
  /** Column width */
165
  style?: React.CSSProperties;
166
  /** Column CSS class */
167
  className?: string;
168
  /** Header CSS class */
169
  headerClassName?: string;
170
  /** Body CSS class */
171
  bodyClassName?: string;
172
}
173

174
interface ColumnBodyOptions {
175
  column: ColumnProps;
176
  field: string;
177
  rowData: any;
178
  rowIndex: number;
179
  props: any;
180
}
181

182
interface ColumnHeaderOptions {
183
  column: ColumnProps;
184
  props: any;
185
}
186
```
187

188
### Tree
189

190
Hierarchical tree component for displaying and managing tree-structured data with selection and expansion.
191

192
```typescript { .api }
193
/**
194
 * Hierarchical tree component
195
 * @param props - Tree configuration options
196
 * @returns JSX element
197
 */
198
function Tree(props: TreeProps): JSX.Element;
199

200
interface TreeProps {
201
  /** Tree data array */
202
  value?: TreeNode[];
203
  /** Selection value(s) */
204
  selection?: TreeNode | TreeNode[] | string | string[];
205
  /** Selection change handler */
206
  onSelectionChange?: (e: TreeSelectionChangeEvent) => void;
207
  /** Selection mode */
208
  selectionMode?: 'single' | 'multiple' | 'checkbox';
209
  /** Expanded keys object */
210
  expandedKeys?: { [key: string]: boolean };
211
  /** Expansion change handler */
212
  onToggle?: (e: TreeExpandedKeysChangeEvent) => void;
213
  /** Node template function */
214
  nodeTemplate?: (node: TreeNode, options: any) => React.ReactNode;
215
  /** Enable drag and drop */
216
  dragdropScope?: string;
217
  /** Node key field name */
218
  nodeKey?: string;
219
  /** Filter enabled */
220
  filter?: boolean;
221
  /** Filter mode */
222
  filterMode?: 'lenient' | 'strict';
223
  /** Filter placeholder */
224
  filterPlaceholder?: string;
225
  /** CSS class name */
226
  className?: string;
227
  /** Passthrough options */
228
  pt?: PassThroughOptions;
229
}
230

231
interface TreeNode {
232
  key?: string;
233
  label?: string;
234
  data?: any;
235
  icon?: string;
236
  children?: TreeNode[];
237
  leaf?: boolean;
238
  expanded?: boolean;
239
  type?: string;
240
  parent?: TreeNode;
241
  partialSelected?: boolean;
242
}
243

244
interface TreeSelectionChangeEvent {
245
  originalEvent: React.SyntheticEvent;
246
  value: TreeNode | TreeNode[] | string | string[];
247
}
248

249
interface TreeExpandedKeysChangeEvent {
250
  originalEvent: React.SyntheticEvent;
251
  value: { [key: string]: boolean };
252
}
253
```
254

255
### DataView
256

257
Flexible data display component with customizable layouts and built-in pagination support.
258

259
```typescript { .api }
260
/**
261
 * Flexible data display component
262
 * @param props - DataView configuration options
263
 * @returns JSX element
264
 */
265
function DataView<T = any>(props: DataViewProps<T>): JSX.Element;
266

267
interface DataViewProps<T = any> {
268
  /** Data array to display */
269
  value?: T[];
270
  /** Current layout mode */
271
  layout?: 'list' | 'grid';
272
  /** Item template function */
273
  itemTemplate?: (data: T, layout: 'list' | 'grid') => React.ReactNode;
274
  /** Header content */
275
  header?: React.ReactNode;
276
  /** Footer content */
277
  footer?: React.ReactNode;
278
  /** Enable pagination */
279
  paginator?: boolean;
280
  /** Number of rows per page */
281
  rows?: number;
282
  /** Page change handler */
283
  onPage?: (e: DataViewPageEvent) => void;
284
  /** Sort field */
285
  sortField?: string;
286
  /** Sort order */
287
  sortOrder?: 1 | -1;
288
  /** Lazy loading enabled */
289
  lazy?: boolean;
290
  /** Loading state */
291
  loading?: boolean;
292
  /** Empty message */
293
  emptyMessage?: string;
294
  /** CSS class name */
295
  className?: string;
296
  /** Passthrough options */
297
  pt?: PassThroughOptions;
298
}
299

300
interface DataViewPageEvent {
301
  first: number;
302
  rows: number;
303
}
304
```
305

306
### VirtualScroller
307

308
Virtual scrolling component for efficiently rendering large datasets by only displaying visible items.
309

310
```typescript { .api }
311
/**
312
 * Virtual scrolling component
313
 * @param props - VirtualScroller configuration options
314
 * @returns JSX element
315
 */
316
function VirtualScroller<T = any>(props: VirtualScrollerProps<T>): JSX.Element;
317

318
interface VirtualScrollerProps<T = any> {
319
  /** Array of items to virtualize */
320
  items?: T[];
321
  /** Height of each item */
322
  itemSize?: number | number[];
323
  /** Scroll direction */
324
  orientation?: 'vertical' | 'horizontal' | 'both';
325
  /** Number of items to render */
326
  numToleratedItems?: number;
327
  /** Lazy loading handler */
328
  onLazyLoad?: (e: VirtualScrollerLazyEvent) => void;
329
  /** Item template function */
330
  itemTemplate?: (item: T, options: VirtualScrollerTemplateOptions) => React.ReactNode;
331
  /** Loading template */
332
  loadingTemplate?: (options: VirtualScrollerTemplateOptions) => React.ReactNode;
333
  /** Show loading indicator */
334
  showLoader?: boolean;
335
  /** Lazy loading enabled */
336
  lazy?: boolean;
337
  /** Loading state */
338
  loading?: boolean;
339
  /** Scroll height */
340
  scrollHeight?: string;
341
  /** CSS class name */
342
  className?: string;
343
  /** Passthrough options */
344
  pt?: PassThroughOptions;
345
}
346

347
interface VirtualScrollerLazyEvent {
348
  first: number;
349
  last: number;
350
}
351

352
interface VirtualScrollerTemplateOptions {
353
  index: number;
354
  count: number;
355
  first: boolean;
356
  last: boolean;
357
  even: boolean;
358
  odd: boolean;
359
}
360
```
361

362
### TreeTable
363

364
Tree-structured table component combining hierarchical data display with table features.
365

366
```typescript { .api }
367
/**
368
 * Tree-structured table component
369
 * @param props - TreeTable configuration options
370
 * @returns JSX element
371
 */
372
function TreeTable(props: TreeTableProps): JSX.Element;
373

374
interface TreeTableProps {
375
  /** Tree data array */
376
  value?: TreeNode[];
377
  /** Table columns */
378
  columns?: ColumnProps[];
379
  /** Selection value(s) */
380
  selection?: TreeNode | TreeNode[];
381
  /** Selection change handler */
382
  onSelectionChange?: (e: TreeTableSelectionChangeEvent) => void;
383
  /** Selection mode */
384
  selectionMode?: 'single' | 'multiple' | 'checkbox';
385
  /** Expanded keys */
386
  expandedKeys?: { [key: string]: boolean };
387
  /** Toggle handler */
388
  onToggle?: (e: TreeTableExpandedKeysChangeEvent) => void;
389
  /** Enable pagination */
390
  paginator?: boolean;
391
  /** Rows per page */
392
  rows?: number;
393
  /** Loading state */
394
  loading?: boolean;
395
  /** CSS class name */
396
  className?: string;
397
  /** Passthrough options */
398
  pt?: PassThroughOptions;
399
}
400

401
interface TreeTableSelectionChangeEvent {
402
  originalEvent: React.SyntheticEvent;
403
  value: TreeNode | TreeNode[];
404
}
405

406
interface TreeTableExpandedKeysChangeEvent {
407
  originalEvent: React.SyntheticEvent;
408
  value: { [key: string]: boolean };
409
}
410
```
411

412
### Paginator
413

414
Standalone pagination component for navigating through pages of data.
415

416
```typescript { .api }
417
/**
418
 * Pagination component
419
 * @param props - Paginator configuration options
420
 * @returns JSX element
421
 */
422
function Paginator(props: PaginatorProps): JSX.Element;
423

424
interface PaginatorProps {
425
  /** Total number of records */
426
  totalRecords?: number;
427
  /** Number of rows per page */
428
  rows?: number;
429
  /** Index of first record */
430
  first?: number;
431
  /** Page change handler */
432
  onPageChange?: (e: PaginatorPageChangeEvent) => void;
433
  /** Rows per page options */
434
  rowsPerPageOptions?: number[];
435
  /** Template for left content */
436
  leftContent?: React.ReactNode;
437
  /** Template for right content */
438
  rightContent?: React.ReactNode;
439
  /** Custom page link template */
440
  template?: string;
441
  /** CSS class name */
442
  className?: string;
443
  /** Passthrough options */
444
  pt?: PassThroughOptions;
445
}
446

447
interface PaginatorPageChangeEvent {
448
  first: number;
449
  rows: number;
450
  page: number;
451
  pageCount: number;
452
}
453
```
454

455
### OrganizationChart
456

457
Organizational hierarchy chart component for displaying hierarchical relationships.
458

459
```typescript { .api }
460
/**
461
 * Organization chart component
462
 * @param props - OrganizationChart configuration options
463
 * @returns JSX element
464
 */
465
function OrganizationChart(props: OrganizationChartProps): JSX.Element;
466

467
interface OrganizationChartProps {
468
  /** Hierarchical data */
469
  value?: OrganizationChartNode[];
470
  /** Selection value(s) */
471
  selection?: OrganizationChartNode | OrganizationChartNode[];
472
  /** Selection change handler */
473
  onSelectionChange?: (e: OrganizationChartSelectionChangeEvent) => void;
474
  /** Selection mode */
475
  selectionMode?: 'single' | 'multiple';
476
  /** Node template function */
477
  nodeTemplate?: (node: OrganizationChartNode) => React.ReactNode;
478
  /** CSS class name */
479
  className?: string;
480
  /** Passthrough options */
481
  pt?: PassThroughOptions;
482
}
483

484
interface OrganizationChartNode {
485
  label?: string;
486
  type?: string;
487
  className?: string;
488
  style?: React.CSSProperties;
489
  expanded?: boolean;
490
  children?: OrganizationChartNode[];
491
  data?: any;
492
  selectable?: boolean;
493
}
494

495
interface OrganizationChartSelectionChangeEvent {
496
  originalEvent: React.SyntheticEvent;
497
  data: OrganizationChartNode | OrganizationChartNode[];
498
}
499
```
500

501
### Card
502

503
Container component for grouping related content with optional header, body, and footer sections.
504

505
```typescript { .api }
506
/**
507
 * Card component for content grouping
508
 * @param props - Card configuration options
509
 * @returns JSX element
510
 */
511
function Card(props: CardProps): JSX.Element;
512

513
interface CardProps {
514
  /** Header content */
515
  header?: React.ReactNode;
516
  /** Title content */
517
  title?: React.ReactNode;
518
  /** Subtitle content */
519
  subTitle?: React.ReactNode;
520
  /** Footer content */
521
  footer?: React.ReactNode;
522
  /** Card body content */
523
  children?: React.ReactNode;
524
  /** CSS class name */
525
  className?: string;
526
  /** Inline styles */
527
  style?: React.CSSProperties;
528
  /** Passthrough options for DOM customization */
529
  pt?: CardPassThroughOptions;
530
}
531
```
532

533
### Carousel
534

535
Carousel component for displaying content in a cyclic slideshow format.
536

537
```typescript { .api }
538
/**
539
 * Carousel component for content slideshow
540
 * @param props - Carousel configuration options
541
 * @returns JSX element
542
 */
543
function Carousel(props: CarouselProps): JSX.Element;
544

545
interface CarouselProps<T = any> {
546
  /** Array of items to display */
547
  value?: T[];
548
  /** Template function for rendering items */
549
  itemTemplate?: (item: T, options: any) => React.ReactNode;
550
  /** Number of items per page */
551
  numVisible?: number;
552
  /** Number of items to scroll */
553
  numScroll?: number;
554
  /** Index of the first item */
555
  page?: number;
556
  /** Orientation of scrolling */
557
  orientation?: 'horizontal' | 'vertical';
558
  /** Whether scrolling is infinite */
559
  circular?: boolean;
560
  /** Whether to display navigation buttons */
561
  showNavigators?: boolean;
562
  /** Whether to display indicator dots */
563
  showIndicators?: boolean;
564
  /** Auto play interval in milliseconds */
565
  autoplayInterval?: number;
566
  /** Responsive options */
567
  responsiveOptions?: CarouselResponsiveOption[];
568
  /** Page change event handler */
569
  onPageChange?: (e: CarouselPageChangeEvent) => void;
570
  /** CSS class name */
571
  className?: string;
572
  /** Inline styles */
573
  style?: React.CSSProperties;
574
  /** Passthrough options for DOM customization */
575
  pt?: CarouselPassThroughOptions;
576
}
577

578
interface CarouselResponsiveOption {
579
  breakpoint: string;
580
  numVisible: number;
581
  numScroll: number;
582
}
583

584
interface CarouselPageChangeEvent {
585
  page: number;
586
}
587
```
588

589
### Chart
590

591
Chart component wrapper for Chart.js integration with PrimeReact theming.
592

593
```typescript { .api }
594
/**
595
 * Chart component for data visualization
596
 * @param props - Chart configuration options
597
 * @returns JSX element
598
 */
599
function Chart(props: ChartProps): JSX.Element;
600

601
interface ChartProps {
602
  /** Chart type */
603
  type?: 'pie' | 'doughnut' | 'line' | 'bar' | 'radar' | 'polarArea' | 'bubble' | 'scatter';
604
  /** Chart data */
605
  data?: any;
606
  /** Chart options */
607
  options?: any;
608
  /** Plugins array */
609
  plugins?: any[];
610
  /** Width of the chart */
611
  width?: string;
612
  /** Height of the chart */
613
  height?: string;
614
  /** CSS class name */
615
  className?: string;
616
  /** Inline styles */
617
  style?: React.CSSProperties;
618
}
619
```
620

621
### Image
622

623
Image component with preview, crop, and zoom capabilities.
624

625
```typescript { .api }
626
/**
627
 * Image component with preview functionality
628
 * @param props - Image configuration options
629
 * @returns JSX element
630
 */
631
function Image(props: ImageProps): JSX.Element;
632

633
interface ImageProps {
634
  /** Image source URL */
635
  src?: string;
636
  /** Alternative text */
637
  alt?: string;
638
  /** Image width */
639
  width?: string;
640
  /** Image height */
641
  height?: string;
642
  /** Enable preview mode */
643
  preview?: boolean;
644
  /** CSS class name */
645
  className?: string;
646
  /** Inline styles */
647
  style?: React.CSSProperties;
648
  /** Image CSS class */
649
  imageClassName?: string;
650
  /** Image inline styles */
651
  imageStyle?: React.CSSProperties;
652
  /** Show event handler for preview */
653
  onShow?: () => void;
654
  /** Hide event handler for preview */
655
  onHide?: () => void;
656
  /** Passthrough options for DOM customization */
657
  pt?: ImagePassThroughOptions;
658
}
659
```
660

661
### Timeline
662

663
Timeline component for displaying chronological information with custom content.
664

665
```typescript { .api }
666
/**
667
 * Timeline component for chronological display
668
 * @param props - Timeline configuration options
669
 * @returns JSX element
670
 */
671
function Timeline(props: TimelineProps): JSX.Element;
672

673
interface TimelineProps<T = any> {
674
  /** Array of timeline items */
675
  value?: T[];
676
  /** Position of content relative to timeline line */
677
  align?: 'left' | 'right' | 'alternate' | 'top' | 'bottom';
678
  /** Layout orientation */
679
  layout?: 'vertical' | 'horizontal';
680
  /** Content template function */
681
  content?: (item: T, index: number) => React.ReactNode;
682
  /** Opposite content template */
683
  opposite?: (item: T, index: number) => React.ReactNode;
684
  /** Marker template */
685
  marker?: (item: T, index: number) => React.ReactNode;
686
  /** CSS class name */
687
  className?: string;
688
  /** Inline styles */
689
  style?: React.CSSProperties;
690
  /** Passthrough options for DOM customization */
691
  pt?: TimelinePassThroughOptions;
692
}
693
```