0
# Data Display Components
1

2
Advanced data visualization components including data tables, trees, charts, and organizational displays with sorting, filtering, pagination, and virtualization support for optimal performance with large datasets.
3

4
## Capabilities
5

6
### Data Table Components
7

8
#### DataTable
9
Advanced data table with comprehensive features for enterprise applications.
10

11
```typescript { .api }
12
/**
13
 * Enterprise-grade data table with advanced features
14
 */
15
import DataTable from "primevue/datatable";
16
import Column from "primevue/column";
17

18
interface DataTableProps extends BaseComponentProps {
19
  value?: any[];
20
  dataKey?: string;
21
  rows?: number;
22
  first?: number;
23
  totalRecords?: number;
24
  paginator?: boolean;
25
  paginatorPosition?: "top" | "bottom" | "both";
26
  alwaysShowPaginator?: boolean;
27
  paginatorTemplate?: string;
28
  pageLinkSize?: number;
29
  rowsPerPageOptions?: number[];
30
  currentPageReportTemplate?: string;
31
  lazy?: boolean;
32
  loading?: boolean;
33
  loadingIcon?: string;
34
  sortField?: string;
35
  sortOrder?: number;
36
  defaultSortOrder?: number;
37
  multiSortMeta?: DataTableSortMeta[];
38
  sortMode?: "single" | "multiple";
39
  removableSort?: boolean;
40
  filters?: DataTableFilterMeta;
41
  filterDisplay?: "menu" | "row";
42
  filterLocale?: string;
43
  selection?: any | any[];
44
  selectionMode?: "single" | "multiple" | "checkbox" | "radiobutton";
45
  compareSelectionBy?: "equals" | "deepEquals";
46
  metaKeySelection?: boolean;
47
  contextMenu?: boolean;
48
  contextMenuSelection?: any;
49
  selectAll?: boolean;
50
  rowHover?: boolean;
51
  csvSeparator?: string;
52
  exportFilename?: string;
53
  exportFunction?: Function;
54
  resizableColumns?: boolean;
55
  columnResizeMode?: "fit" | "expand";
56
  reorderableColumns?: boolean;
57
  expandedRows?: any[];
58
  expandedRowIcon?: string;
59
  collapsedRowIcon?: string;
60
  rowGroupMode?: "subheader" | "rowspan";
61
  groupRowsBy?: string;
62
  expandableRowGroups?: boolean;
63
  expandedRowGroups?: any[];
64
  stateStorage?: "session" | "local";
65
  stateKey?: string;
66
  editMode?: "cell" | "row";
67
  editingRows?: any[];
68
  rowClass?: Function;
69
  rowStyle?: Function;
70
  scrollable?: boolean;
71
  scrollDirection?: "vertical" | "horizontal" | "both";
72
  scrollHeight?: string;
73
  virtualScrollerOptions?: VirtualScrollerOptions;
74
  frozenColumns?: any[];
75
  frozenValue?: any[];
76
  responsiveLayout?: "scroll" | "stack";
77
  breakpoint?: string;
78
  showGridlines?: boolean;
79
  stripedRows?: boolean;
80
  tableStyle?: any;
81
  tableClass?: string;
82
  size?: "small" | "large";
83
}
84
```
85

86
**Usage Example:**
87

88
```vue
89
<template>
90
  <DataTable 
91
    :value="products" 
92
    :paginator="true" 
93
    :rows="10"
94
    :filters="filters"
95
    filterDisplay="menu"
96
    :loading="loading"
97
    dataKey="id"
98
    :globalFilterFields="['name', 'category', 'representative.name']"
99
  >
100
    <template #header>
101
      <div class="flex justify-content-between">
102
        <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined />
103
        <IconField iconPosition="left">
104
          <InputIcon>
105
            <i class="pi pi-search" />
106
          </InputIcon>
107
          <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
108
        </IconField>
109
      </div>
110
    </template>
111
    
112
    <Column field="name" header="Name" sortable style="min-width: 12rem">
113
      <template #body="{ data }">
114
        {{ data.name }}
115
      </template>
116
      <template #filter="{ filterModel }">
117
        <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
118
      </template>
119
    </Column>
120
    
121
    <Column field="category" header="Category" sortable filterMenuStyle="width: 14rem">
122
      <template #body="{ data }">
123
        <Tag :value="data.category" :severity="getSeverity(data)" />
124
      </template>
125
      <template #filter="{ filterModel }">
126
        <MultiSelect 
127
          v-model="filterModel.value" 
128
          :options="categories" 
129
          placeholder="Any" 
130
          class="p-column-filter" 
131
        />
132
      </template>
133
    </Column>
134
    
135
    <Column field="price" header="Price" sortable dataType="numeric">
136
      <template #body="{ data }">
137
        {{ formatCurrency(data.price) }}
138
      </template>
139
    </Column>
140
  </DataTable>
141
</template>
142

143
<script setup>
144
import { ref, onMounted } from 'vue';
145
import { FilterMatchMode, FilterOperator } from 'primevue/api';
146
import DataTable from 'primevue/datatable';
147
import Column from 'primevue/column';
148

149
const products = ref([]);
150
const filters = ref({
151
  'global': { value: null, matchMode: FilterMatchMode.CONTAINS },
152
  'name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
153
  'category': { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
154
});
155
</script>
156
```
157

158
#### Column
159
Column definition component for DataTable with sorting, filtering, and templating.
160

161
```typescript { .api }
162
/**
163
 * Column definition for DataTable
164
 */
165
import Column from "primevue/column";
166

167
interface ColumnProps extends BaseComponentProps {
168
  columnKey?: string;
169
  field?: string;
170
  sortField?: string;
171
  filterField?: string;
172
  dataType?: "text" | "numeric" | "date";
173
  sortable?: boolean;
174
  header?: string;
175
  footer?: string;
176
  style?: any;
177
  class?: string;
178
  headerStyle?: any;
179
  headerClass?: string;
180
  bodyStyle?: any;
181
  bodyClass?: string;
182
  footerStyle?: any;
183
  footerClass?: string;
184
  showFilterMenu?: boolean;
185
  showFilterOperator?: boolean;
186
  showClearButton?: boolean;
187
  showApplyButton?: boolean;
188
  showFilterMatchModes?: boolean;
189
  showAddButton?: boolean;
190
  filterMatchModeOptions?: FilterMatchModeOptions[];
191
  maxConstraints?: number;
192
  excludeGlobalFilter?: boolean;
193
  filterHeaderClass?: string;
194
  filterHeaderStyle?: any;
195
  filterMenuClass?: string;
196
  filterMenuStyle?: any;
197
  selectionMode?: "single" | "multiple";
198
  expander?: boolean;
199
  colspan?: number;
200
  rowspan?: number;
201
  rowReorder?: boolean;
202
  rowReorderIcon?: string;
203
  reorderableColumn?: boolean;
204
  rowEditor?: boolean;
205
  frozen?: boolean;
206
  alignFrozen?: "left" | "right";
207
  exportable?: boolean;
208
  exportHeader?: string;
209
  exportFooter?: string;
210
  filterMatchMode?: string;
211
  hidden?: boolean;
212
}
213
```
214

215
#### TreeTable
216
Tree structure displayed in table format with hierarchical data support.
217

218
```typescript { .api }
219
/**
220
 * Tree structure in table format
221
 */
222
import TreeTable from "primevue/treetable";
223

224
interface TreeTableProps extends BaseComponentProps {
225
  value?: TreeNode[];
226
  expandedKeys?: object;
227
  selectionKeys?: any;
228
  selectionMode?: "single" | "multiple" | "checkbox";
229
  metaKeySelection?: boolean;
230
  rows?: number;
231
  first?: number;
232
  totalRecords?: number;
233
  paginator?: boolean;
234
  paginatorPosition?: "top" | "bottom" | "both";
235
  alwaysShowPaginator?: boolean;
236
  paginatorTemplate?: string;
237
  pageLinkSize?: number;
238
  rowsPerPageOptions?: number[];
239
  currentPageReportTemplate?: string;
240
  lazy?: boolean;
241
  loading?: boolean;
242
  loadingIcon?: string;
243
  rowHover?: boolean;
244
  autoLayout?: boolean;
245
  sortField?: string;
246
  sortOrder?: number;
247
  defaultSortOrder?: number;
248
  multiSortMeta?: TreeTableSortMeta[];
249
  sortMode?: "single" | "multiple";
250
  removableSort?: boolean;
251
  filters?: object;
252
  filterMode?: "lenient" | "strict";
253
  filterLocale?: string;
254
  resizableColumns?: boolean;
255
  columnResizeMode?: "fit" | "expand";
256
  indentation?: number;
257
  showGridlines?: boolean;
258
  scrollable?: boolean;
259
  scrollDirection?: "vertical" | "horizontal" | "both";
260
  scrollHeight?: string;
261
  frozenColumns?: any[];
262
  responsiveLayout?: "scroll" | "stack";
263
  size?: "small" | "large";
264
}
265
```
266

267
### List and Tree Components
268

269
#### Tree
270
Hierarchical tree structure with selection, filtering, and lazy loading.
271

272
```typescript { .api }
273
/**
274
 * Hierarchical tree component with full feature set
275
 */
276
import Tree from "primevue/tree";
277

278
interface TreeProps extends BaseComponentProps {
279
  value?: TreeNode[];
280
  expandedKeys?: object;
281
  selectionKeys?: any;
282
  selectionMode?: "single" | "multiple" | "checkbox";
283
  metaKeySelection?: boolean;
284
  loading?: boolean;
285
  loadingIcon?: string;
286
  filter?: boolean;
287
  filterBy?: string;
288
  filterMode?: "lenient" | "strict";
289
  filterPlaceholder?: string;
290
  filterLocale?: string;
291
  scrollHeight?: string;
292
  level?: number;
293
}
294
```
295

296
**Usage Example:**
297

298
```vue
299
<template>
300
  <Tree 
301
    :value="nodes" 
302
    :expandedKeys="expandedKeys"
303
    :selectionKeys="selectedKeys"
304
    selectionMode="checkbox"
305
    :filter="true"
306
    filterPlaceholder="Search..."
307
    class="w-full md:w-30rem"
308
  />
309
</template>
310

311
<script setup>
312
import { ref, onMounted } from 'vue';
313
import Tree from 'primevue/tree';
314

315
const nodes = ref([]);
316
const expandedKeys = ref({});
317
const selectedKeys = ref({});
318

319
onMounted(() => {
320
  nodes.value = [
321
    {
322
      key: '0',
323
      label: 'Documents',
324
      data: 'Documents Folder',
325
      icon: 'pi pi-fw pi-inbox',
326
      children: [
327
        {
328
          key: '0-0',
329
          label: 'Work',
330
          data: 'Work Folder',
331
          icon: 'pi pi-fw pi-cog',
332
          children: [
333
            { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
334
            { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
335
          ]
336
        }
337
      ]
338
    }
339
  ];
340
});
341
</script>
342
```
343

344
#### OrderList
345
Reorderable list with drag-drop and button controls.
346

347
```typescript { .api }
348
/**
349
 * Reorderable list component
350
 */
351
import OrderList from "primevue/orderlist";
352

353
interface OrderListProps extends BaseComponentProps {
354
  modelValue?: any[];
355
  selection?: any[];
356
  dataKey?: string;
357
  listStyle?: any;
358
  responsive?: boolean;
359
  breakpoint?: string;
360
  stripedRows?: boolean;
361
  showSourceControls?: boolean;
362
  showTargetControls?: boolean;
363
  metaKeySelection?: boolean;
364
  autoOptionFocus?: boolean;
365
  focusOnHover?: boolean;
366
  tabindex?: number;
367
}
368
```
369

370
#### PickList
371
Dual list for transferring items between source and target collections.
372

373
```typescript { .api }
374
/**
375
 * Dual list for item transfer between collections
376
 */
377
import PickList from "primevue/picklist";
378

379
interface PickListProps extends BaseComponentProps {
380
  modelValue?: any[][];
381
  selection?: any[][];
382
  dataKey?: string;
383
  listStyle?: any;
384
  metaKeySelection?: boolean;
385
  responsive?: boolean;
386
  breakpoint?: string;
387
  stripedRows?: boolean;
388
  showSourceControls?: boolean;
389
  showTargetControls?: boolean;
390
  targetHeader?: string;
391
  sourceHeader?: string;
392
  autoOptionFocus?: boolean;
393
  focusOnHover?: boolean;
394
  moveUpButtonProps?: object;
395
  moveTopButtonProps?: object;
396
  moveDownButtonProps?: object;
397
  moveBottomButtonProps?: object;
398
  moveToTargetProps?: object;
399
  moveAllToTargetProps?: object;
400
  moveToSourceProps?: object;
401
  moveAllToSourceProps?: object;
402
  tabindex?: number;
403
}
404
```
405

406
### Pagination and Data Management
407

408
#### Paginator
409
Standalone pagination component with customizable layout.
410

411
```typescript { .api }
412
/**
413
 * Standalone pagination component
414
 */
415
import Paginator from "primevue/paginator";
416

417
interface PaginatorProps extends BaseComponentProps {
418
  totalRecords?: number;
419
  rows?: number;
420
  first?: number;
421
  pageLinkSize?: number;
422
  rowsPerPageOptions?: number[];
423
  template?: string;
424
  currentPageReportTemplate?: string;
425
  alwaysShow?: boolean;
426
}
427
```
428

429
#### VirtualScroller
430
Performance virtualization for large data sets.
431

432
```typescript { .api }
433
/**
434
 * Virtual scrolling for performance with large datasets
435
 */
436
import VirtualScroller from "primevue/virtualscroller";
437

438
interface VirtualScrollerProps extends BaseComponentProps {
439
  items?: any[];
440
  itemSize?: number | number[];
441
  scrollHeight?: string;
442
  scrollWidth?: string;
443
  orientation?: "vertical" | "horizontal" | "both";
444
  numToleratedItems?: number;
445
  delay?: number;
446
  resizeDelay?: number;
447
  lazy?: boolean;
448
  disabled?: boolean;
449
  loaderDisabled?: boolean;
450
  columns?: any[];
451
  loading?: boolean;
452
  autoSize?: boolean;
453
  showSpacer?: boolean;
454
  showLoader?: boolean;
455
  tabindex?: number;
456
  inline?: boolean;
457
  step?: number;
458
}
459
```
460

461
### Visualization Components
462

463
#### Chart
464
Chart.js integration for data visualization (requires Chart.js dependency).
465

466
```typescript { .api }
467
/**
468
 * Chart.js integration component (requires chart.js dependency)
469
 */
470
import Chart from "primevue/chart";
471

472
interface ChartProps extends BaseComponentProps {
473
  type?: string;
474
  data?: object;
475
  options?: object;
476
  plugins?: any[];
477
  width?: number;
478
  height?: number;
479
  canvasProps?: object;
480
}
481
```
482

483
**Usage Example:**
484

485
```vue
486
<template>
487
  <Chart type="bar" :data="chartData" :options="chartOptions" />
488
</template>
489

490
<script setup>
491
import { ref, onMounted } from 'vue';
492
import Chart from 'primevue/chart';
493

494
const chartData = ref({});
495
const chartOptions = ref({});
496

497
onMounted(() => {
498
  chartData.value = {
499
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
500
    datasets: [
501
      {
502
        label: 'My First dataset',
503
        backgroundColor: '#42A5F5',
504
        data: [65, 59, 80, 81, 56, 55, 40]
505
      }
506
    ]
507
  };
508
  
509
  chartOptions.value = {
510
    responsive: true,
511
    maintainAspectRatio: false
512
  };
513
});
514
</script>
515
```
516

517
#### OrganizationChart
518
Hierarchical organization structure display.
519

520
```typescript { .api }
521
/**
522
 * Organization chart for hierarchical structures
523
 */
524
import OrganizationChart from "primevue/organizationchart";
525

526
interface OrganizationChartProps extends BaseComponentProps {
527
  value?: TreeNode;
528
  selectionKeys?: object;
529
  selectionMode?: "single" | "multiple";
530
  collapsible?: boolean;
531
  collapsedKeys?: object;
532
}
533
```
534

535
#### Timeline
536
Chronological event display with customizable layout.
537

538
```typescript { .api }
539
/**
540
 * Timeline component for chronological events
541
 */
542
import Timeline from "primevue/timeline";
543

544
interface TimelineProps extends BaseComponentProps {
545
  value?: any[];
546
  align?: "left" | "right" | "alternate" | "top" | "bottom";
547
  layout?: "vertical" | "horizontal";
548
  dataKey?: string;
549
}
550
```
551

552
**Usage Example:**
553

554
```vue
555
<template>
556
  <Timeline :value="events" align="alternate">
557
    <template #marker="slotProps">
558
      <span class="custom-marker shadow-2" :style="{backgroundColor: slotProps.item.color}">
559
        <i :class="slotProps.item.icon"></i>
560
      </span>
561
    </template>
562
    <template #content="slotProps">
563
      <Card>
564
        <template #title>
565
          {{ slotProps.item.status }}
566
        </template>
567
        <template #subtitle>
568
          {{ slotProps.item.date }}
569
        </template>
570
        <template #content>
571
          <p>{{ slotProps.item.description }}</p>
572
        </template>
573
      </Card>
574
    </template>
575
  </Timeline>
576
</template>
577

578
<script setup>
579
import { ref } from 'vue';
580
import Timeline from 'primevue/timeline';
581
import Card from 'primevue/card';
582

583
const events = ref([
584
  { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
585
  { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
586
  { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
587
  { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
588
]);
589
</script>
590
```
591

592
### Data View Components
593

594
#### DataView
595
Flexible data display with list/grid layouts and sorting.
596

597
```typescript { .api }
598
/**
599
 * Flexible data display with multiple layout options
600
 */
601
import DataView from "primevue/dataview";
602

603
interface DataViewProps extends BaseComponentProps {
604
  value?: any[];
605
  layout?: "list" | "grid";
606
  rows?: number;
607
  first?: number;
608
  totalRecords?: number;
609
  paginator?: boolean;
610
  paginatorPosition?: "top" | "bottom" | "both";
611
  alwaysShowPaginator?: boolean;
612
  paginatorTemplate?: string;
613
  pageLinkSize?: number;
614
  rowsPerPageOptions?: number[];
615
  currentPageReportTemplate?: string;
616
  sortField?: string;
617
  sortOrder?: number;
618
  lazy?: boolean;
619
  loading?: boolean;
620
  loadingIcon?: string;
621
  dataKey?: string;
622
  emptyMessage?: string;
623
}
624
```
625

626
### Media Display Components
627

628
#### Carousel
629
Image and content carousel with navigation and indicator controls.
630

631
```typescript { .api }
632
/**
633
 * Carousel component for images and content with navigation
634
 */
635
import Carousel from "primevue/carousel";
636

637
interface CarouselProps extends BaseComponentProps {
638
  value?: any[];
639
  page?: number;
640
  numVisible?: number;
641
  numScroll?: number;
642
  responsiveOptions?: CarouselResponsiveOption[];
643
  orientation?: "horizontal" | "vertical";
644
  verticalViewPortHeight?: string;
645
  containerClass?: string;
646
  indicatorsClass?: string;
647
  contentClass?: string;
648
  circular?: boolean;
649
  autoplayInterval?: number;
650
  showNavigators?: boolean;
651
  showIndicators?: boolean;
652
}
653

654
interface CarouselResponsiveOption {
655
  breakpoint: string;
656
  numVisible: number;
657
  numScroll: number;
658
}
659
```
660

661
**Usage Example:**
662

663
```vue
664
<template>
665
  <Carousel
666
    :value="products"
667
    :numVisible="3"
668
    :numScroll="1"
669
    :responsiveOptions="responsiveOptions"
670
    circular
671
    :autoplayInterval="3000"
672
  >
673
    <template #item="slotProps">
674
      <div class="product-item">
675
        <img :src="slotProps.data.image" :alt="slotProps.data.name" />
676
        <h4>{{ slotProps.data.name }}</h4>
677
        <p>${{ slotProps.data.price }}</p>
678
      </div>
679
    </template>
680
  </Carousel>
681
</template>
682

683
<script setup>
684
import { ref } from 'vue';
685
import Carousel from 'primevue/carousel';
686

687
const products = ref([
688
  { id: 1, name: 'Product 1', image: '/images/product1.jpg', price: 99 },
689
  { id: 2, name: 'Product 2', image: '/images/product2.jpg', price: 149 },
690
  { id: 3, name: 'Product 3', image: '/images/product3.jpg', price: 199 }
691
]);
692

693
const responsiveOptions = ref([
694
  { breakpoint: '1024px', numVisible: 3, numScroll: 1 },
695
  { breakpoint: '768px', numVisible: 2, numScroll: 1 },
696
  { breakpoint: '560px', numVisible: 1, numScroll: 1 }
697
]);
698
</script>
699
```
700

701
#### Galleria
702
Advanced image gallery with thumbnails, fullscreen, and slideshow functionality.
703

704
```typescript { .api }
705
/**
706
 * Advanced image gallery with comprehensive features
707
 */
708
import Galleria from "primevue/galleria";
709

710
interface GalleriaProps extends BaseComponentProps {
711
  value?: any[];
712
  activeIndex?: number;
713
  fullScreen?: boolean;
714
  visible?: boolean;
715
  numVisible?: number;
716
  responsiveOptions?: GalleriaResponsiveOption[];
717
  showItemNavigators?: boolean;
718
  showThumbnailNavigators?: boolean;
719
  showItemNavigatorsOnHover?: boolean;
720
  changeItemOnIndicatorHover?: boolean;
721
  circular?: boolean;
722
  autoPlay?: boolean;
723
  transitionInterval?: number;
724
  showThumbnails?: boolean;
725
  thumbnailsPosition?: "bottom" | "top" | "left" | "right";
726
  verticalThumbnailViewPortHeight?: string;
727
  showIndicators?: boolean;
728
  showIndicatorsOnItem?: boolean;
729
  indicatorsPosition?: "bottom" | "top" | "left" | "right";
730
  baseZIndex?: number;
731
  maskClass?: string;
732
  containerStyle?: any;
733
  containerClass?: string;
734
}
735

736
interface GalleriaResponsiveOption {
737
  breakpoint: string;
738
  numVisible: number;
739
}
740
```
741

742
#### Image
743
Image display component with preview, zoom, and indicator functionality.
744

745
```typescript { .api }
746
/**
747
 * Image component with preview and zoom capabilities
748
 */
749
import Image from "primevue/image";
750

751
interface ImageProps extends BaseComponentProps {
752
  preview?: boolean;
753
  class?: string;
754
  style?: any;
755
  imageStyle?: any;
756
  imageClass?: string;
757
  previewButtonProps?: object;
758
  indicatorIcon?: string;
759
  previewIcon?: string;
760
  closeIcon?: string;
761
  rotateRightIcon?: string;
762
  rotateLeftIcon?: string;
763
  zoomInIcon?: string;
764
  zoomOutIcon?: string;
765
  zoomImageStyle?: any;
766
  zoomImageClass?: string;
767
}
768
```
769

770
**Usage Example:**
771

772
```vue
773
<template>
774
  <Image
775
    src="/demo/images/nature1.jpg"
776
    alt="Nature"
777
    width="250"
778
    preview
779
    imageStyle="width: 100%; height: auto;"
780
  />
781
</template>
782

783
<script setup>
784
import Image from 'primevue/image';
785
</script>
786
```
787

788
#### MeterGroup
789
Visual progress display for grouped metrics and measurements.
790

791
```typescript { .api }
792
/**
793
 * Progress meter group for multiple metrics
794
 */
795
import MeterGroup from "primevue/metergroup";
796

797
interface MeterGroupProps extends BaseComponentProps {
798
  value?: MeterItem[];
799
  min?: number;
800
  max?: number;
801
  orientation?: "horizontal" | "vertical";
802
  labelPosition?: "start" | "end";
803
  labelOrientation?: "horizontal" | "vertical";
804
}
805

806
interface MeterItem {
807
  label?: string;
808
  value?: number;
809
  color?: string;
810
  icon?: string;
811
}
812
```
813

814
**Usage Example:**
815

816
```vue
817
<template>
818
  <MeterGroup :value="meterValues" />
819
</template>
820

821
<script setup>
822
import { ref } from 'vue';
823
import MeterGroup from 'primevue/metergroup';
824

825
const meterValues = ref([
826
  { label: 'CPU', value: 60, color: '#34d399' },
827
  { label: 'Memory', value: 40, color: '#fbbf24' },
828
  { label: 'Storage', value: 20, color: '#f87171' }
829
]);
830
</script>
831
```
832

833
## Types
834

835
Data display specific type definitions:
836

837
```typescript { .api }
838
// Tree node structure
839
interface TreeNode {
840
  key?: string;
841
  label?: string;
842
  data?: any;
843
  icon?: string;
844
  expandedIcon?: string;
845
  collapsedIcon?: string;
846
  children?: TreeNode[];
847
  leaf?: boolean;
848
  expanded?: boolean;
849
  type?: string;
850
  parent?: TreeNode;
851
  partialSelected?: boolean;
852
  style?: any;
853
  styleClass?: string;
854
  selectable?: boolean;
855
  loading?: boolean;
856
}
857

858
// DataTable sort metadata
859
interface DataTableSortMeta {
860
  field: string;
861
  order: number;
862
}
863

864
// DataTable filter metadata
865
interface DataTableFilterMeta {
866
  [key: string]: DataTableFilterMetaData | DataTableOperatorFilterMetaData;
867
}
868

869
interface DataTableFilterMetaData {
870
  value: any;
871
  matchMode: string;
872
}
873

874
interface DataTableOperatorFilterMetaData {
875
  operator: DataTableFilterOperator;
876
  constraints: DataTableFilterMetaData[];
877
}
878

879
// Virtual scroller options
880
interface VirtualScrollerOptions {
881
  lazy?: boolean;
882
  itemSize?: number | number[];
883
  showLoader?: boolean;
884
  loading?: boolean;
885
  delay?: number;
886
  loadingTemplate?: string;
887
  loaderIconTemplate?: string;
888
  numToleratedItems?: number;
889
}
890

891
// Filter match modes
892
enum FilterMatchMode {
893
  STARTS_WITH = 'startsWith',
894
  CONTAINS = 'contains',
895
  NOT_CONTAINS = 'notContains',
896
  ENDS_WITH = 'endsWith',
897
  EQUALS = 'equals',
898
  NOT_EQUALS = 'notEquals',
899
  LT = 'lt',
900
  LTE = 'lte',
901
  GT = 'gt',
902
  GTE = 'gte',
903
  BETWEEN = 'between',
904
  IN = 'in',
905
  IS = 'is',
906
  IS_NOT = 'isNot',
907
  BEFORE = 'before',
908
  AFTER = 'after',
909
  DATE_IS = 'dateIs',
910
  DATE_IS_NOT = 'dateIsNot',
911
  DATE_BEFORE = 'dateBefore',
912
  DATE_AFTER = 'dateAfter',
913
}
914

915
// Filter operators
916
enum FilterOperator {
917
  AND = 'and',
918
  OR = 'or'
919
}
920
```