Data Display Components

/**
 * Advanced data table component
 * @param props - DataTable configuration options
 * @returns JSX element
 */
function DataTable<T = any>(props: DataTableProps<T>): JSX.Element;

interface DataTableProps<T = any> {
  /** Array of data objects to display */
  value?: T[];
  /** Table columns configuration */
  columns?: ColumnProps[];
  /** Enable pagination */
  paginator?: boolean;
  /** Number of rows per page */
  rows?: number;
  /** Total number of records (for lazy loading) */
  totalRecords?: number;
  /** Lazy loading enabled */
  lazy?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Default sort field */
  sortField?: string;
  /** Default sort order */
  sortOrder?: 1 | -1;
  /** Multiple sort enabled */
  multiSortMeta?: SortMeta[];
  /** Enable global filtering */
  globalFilter?: string;
  /** Selection value(s) */
  selection?: T | T[];
  /** Selection mode */
  selectionMode?: 'single' | 'multiple' | 'checkbox' | 'radiobutton';
  /** Row selection change handler */
  onSelectionChange?: (e: DataTableSelectionChangeEvent<T>) => void;
  /** Row data key for selection tracking */
  dataKey?: string;
  /** Rows per page options */
  rowsPerPageOptions?: number[];
  /** Page change handler */
  onPage?: (e: DataTablePageEvent) => void;
  /** Sort change handler */
  onSort?: (e: DataTableSortEvent) => void;
  /** Filter change handler */
  onFilter?: (e: DataTableFilterEvent) => void;
  /** Row edit save handler */
  onRowEditComplete?: (e: DataTableRowEditCompleteEvent<T>) => void;
  /** Empty message when no data */
  emptyMessage?: string;
  /** Show grid lines */
  showGridlines?: boolean;
  /** Striped rows */
  stripedRows?: boolean;
  /** Responsive layout */
  responsiveLayout?: 'stack' | 'scroll';
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

interface DataTableSelectionChangeEvent<T = any> {
  originalEvent: React.SyntheticEvent;
  value: T | T[];
}

interface DataTablePageEvent {
  first: number;
  rows: number;
  page: number;
  pageCount: number;
}

interface DataTableSortEvent {
  sortField: string;
  sortOrder: 1 | -1;
  multiSortMeta: SortMeta[];
}

interface SortMeta {
  field: string;
  order: 1 | -1;
}

import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";

// Basic data table
<DataTable value={products}>
  <Column field="name" header="Name" />
  <Column field="price" header="Price" />
  <Column field="category" header="Category" />
</DataTable>

// With pagination and selection
<DataTable 
  value={users} 
  paginator 
  rows={10}
  selection={selectedUsers}
  onSelectionChange={(e) => setSelectedUsers(e.value)}
  selectionMode="checkbox"
>
  <Column selectionMode="multiple" />
  <Column field="name" header="Name" sortable />
  <Column field="email" header="Email" />
</DataTable>

/**
 * DataTable column component
 * @param props - Column configuration options
 * @returns JSX element
 */
function Column(props: ColumnProps): JSX.Element;

interface ColumnProps {
  /** Field name for data binding */
  field?: string;
  /** Column header text */
  header?: React.ReactNode;
  /** Column footer text */
  footer?: React.ReactNode;
  /** Enable sorting for this column */
  sortable?: boolean;
  /** Enable filtering for this column */
  filter?: boolean;
  /** Filter element type */
  filterElement?: React.ReactNode;
  /** Filter field (if different from field) */
  filterField?: string;
  /** Filter match mode */
  filterMatchMode?: string;
  /** Custom body template function */
  body?: (data: any, options: ColumnBodyOptions) => React.ReactNode;
  /** Custom header template function */
  headerTemplate?: (options: ColumnHeaderOptions) => React.ReactNode;
  /** Selection mode for this column */
  selectionMode?: 'single' | 'multiple';
  /** Row editor controls */
  rowEditor?: boolean;
  /** Expandable row toggle */
  expander?: boolean;
  /** Column width */
  style?: React.CSSProperties;
  /** Column CSS class */
  className?: string;
  /** Header CSS class */
  headerClassName?: string;
  /** Body CSS class */
  bodyClassName?: string;
}

interface ColumnBodyOptions {
  column: ColumnProps;
  field: string;
  rowData: any;
  rowIndex: number;
  props: any;
}

interface ColumnHeaderOptions {
  column: ColumnProps;
  props: any;
}

/**
 * Hierarchical tree component
 * @param props - Tree configuration options
 * @returns JSX element
 */
function Tree(props: TreeProps): JSX.Element;

interface TreeProps {
  /** Tree data array */
  value?: TreeNode[];
  /** Selection value(s) */
  selection?: TreeNode | TreeNode[] | string | string[];
  /** Selection change handler */
  onSelectionChange?: (e: TreeSelectionChangeEvent) => void;
  /** Selection mode */
  selectionMode?: 'single' | 'multiple' | 'checkbox';
  /** Expanded keys object */
  expandedKeys?: { [key: string]: boolean };
  /** Expansion change handler */
  onToggle?: (e: TreeExpandedKeysChangeEvent) => void;
  /** Node template function */
  nodeTemplate?: (node: TreeNode, options: any) => React.ReactNode;
  /** Enable drag and drop */
  dragdropScope?: string;
  /** Node key field name */
  nodeKey?: string;
  /** Filter enabled */
  filter?: boolean;
  /** Filter mode */
  filterMode?: 'lenient' | 'strict';
  /** Filter placeholder */
  filterPlaceholder?: string;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

interface TreeNode {
  key?: string;
  label?: string;
  data?: any;
  icon?: string;
  children?: TreeNode[];
  leaf?: boolean;
  expanded?: boolean;
  type?: string;
  parent?: TreeNode;
  partialSelected?: boolean;
}

interface TreeSelectionChangeEvent {
  originalEvent: React.SyntheticEvent;
  value: TreeNode | TreeNode[] | string | string[];
}

interface TreeExpandedKeysChangeEvent {
  originalEvent: React.SyntheticEvent;
  value: { [key: string]: boolean };
}

/**
 * Flexible data display component
 * @param props - DataView configuration options
 * @returns JSX element
 */
function DataView<T = any>(props: DataViewProps<T>): JSX.Element;

interface DataViewProps<T = any> {
  /** Data array to display */
  value?: T[];
  /** Current layout mode */
  layout?: 'list' | 'grid';
  /** Item template function */
  itemTemplate?: (data: T, layout: 'list' | 'grid') => React.ReactNode;
  /** Header content */
  header?: React.ReactNode;
  /** Footer content */
  footer?: React.ReactNode;
  /** Enable pagination */
  paginator?: boolean;
  /** Number of rows per page */
  rows?: number;
  /** Page change handler */
  onPage?: (e: DataViewPageEvent) => void;
  /** Sort field */
  sortField?: string;
  /** Sort order */
  sortOrder?: 1 | -1;
  /** Lazy loading enabled */
  lazy?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Empty message */
  emptyMessage?: string;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

interface DataViewPageEvent {
  first: number;
  rows: number;
}

/**
 * Virtual scrolling component
 * @param props - VirtualScroller configuration options
 * @returns JSX element
 */
function VirtualScroller<T = any>(props: VirtualScrollerProps<T>): JSX.Element;

interface VirtualScrollerProps<T = any> {
  /** Array of items to virtualize */
  items?: T[];
  /** Height of each item */
  itemSize?: number | number[];
  /** Scroll direction */
  orientation?: 'vertical' | 'horizontal' | 'both';
  /** Number of items to render */
  numToleratedItems?: number;
  /** Lazy loading handler */
  onLazyLoad?: (e: VirtualScrollerLazyEvent) => void;
  /** Item template function */
  itemTemplate?: (item: T, options: VirtualScrollerTemplateOptions) => React.ReactNode;
  /** Loading template */
  loadingTemplate?: (options: VirtualScrollerTemplateOptions) => React.ReactNode;
  /** Show loading indicator */
  showLoader?: boolean;
  /** Lazy loading enabled */
  lazy?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Scroll height */
  scrollHeight?: string;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

interface VirtualScrollerLazyEvent {
  first: number;
  last: number;
}

interface VirtualScrollerTemplateOptions {
  index: number;
  count: number;
  first: boolean;
  last: boolean;
  even: boolean;
  odd: boolean;
}

/**
 * Tree-structured table component
 * @param props - TreeTable configuration options
 * @returns JSX element
 */
function TreeTable(props: TreeTableProps): JSX.Element;

interface TreeTableProps {
  /** Tree data array */
  value?: TreeNode[];
  /** Table columns */
  columns?: ColumnProps[];
  /** Selection value(s) */
  selection?: TreeNode | TreeNode[];
  /** Selection change handler */
  onSelectionChange?: (e: TreeTableSelectionChangeEvent) => void;
  /** Selection mode */
  selectionMode?: 'single' | 'multiple' | 'checkbox';
  /** Expanded keys */
  expandedKeys?: { [key: string]: boolean };
  /** Toggle handler */
  onToggle?: (e: TreeTableExpandedKeysChangeEvent) => void;
  /** Enable pagination */
  paginator?: boolean;
  /** Rows per page */
  rows?: number;
  /** Loading state */
  loading?: boolean;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

interface TreeTableSelectionChangeEvent {
  originalEvent: React.SyntheticEvent;
  value: TreeNode | TreeNode[];
}

interface TreeTableExpandedKeysChangeEvent {
  originalEvent: React.SyntheticEvent;
  value: { [key: string]: boolean };
}

/**
 * Pagination component
 * @param props - Paginator configuration options
 * @returns JSX element
 */
function Paginator(props: PaginatorProps): JSX.Element;

interface PaginatorProps {
  /** Total number of records */
  totalRecords?: number;
  /** Number of rows per page */
  rows?: number;
  /** Index of first record */
  first?: number;
  /** Page change handler */
  onPageChange?: (e: PaginatorPageChangeEvent) => void;
  /** Rows per page options */
  rowsPerPageOptions?: number[];
  /** Template for left content */
  leftContent?: React.ReactNode;
  /** Template for right content */
  rightContent?: React.ReactNode;
  /** Custom page link template */
  template?: string;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

interface PaginatorPageChangeEvent {
  first: number;
  rows: number;
  page: number;
  pageCount: number;
}

/**
 * Organization chart component
 * @param props - OrganizationChart configuration options
 * @returns JSX element
 */
function OrganizationChart(props: OrganizationChartProps): JSX.Element;

interface OrganizationChartProps {
  /** Hierarchical data */
  value?: OrganizationChartNode[];
  /** Selection value(s) */
  selection?: OrganizationChartNode | OrganizationChartNode[];
  /** Selection change handler */
  onSelectionChange?: (e: OrganizationChartSelectionChangeEvent) => void;
  /** Selection mode */
  selectionMode?: 'single' | 'multiple';
  /** Node template function */
  nodeTemplate?: (node: OrganizationChartNode) => React.ReactNode;
  /** CSS class name */
  className?: string;
  /** Passthrough options */
  pt?: PassThroughOptions;
}

interface OrganizationChartNode {
  label?: string;
  type?: string;
  className?: string;
  style?: React.CSSProperties;
  expanded?: boolean;
  children?: OrganizationChartNode[];
  data?: any;
  selectable?: boolean;
}

interface OrganizationChartSelectionChangeEvent {
  originalEvent: React.SyntheticEvent;
  data: OrganizationChartNode | OrganizationChartNode[];
}

/**
 * Card component for content grouping
 * @param props - Card configuration options
 * @returns JSX element
 */
function Card(props: CardProps): JSX.Element;

interface CardProps {
  /** Header content */
  header?: React.ReactNode;
  /** Title content */
  title?: React.ReactNode;
  /** Subtitle content */
  subTitle?: React.ReactNode;
  /** Footer content */
  footer?: React.ReactNode;
  /** Card body content */
  children?: React.ReactNode;
  /** CSS class name */
  className?: string;
  /** Inline styles */
  style?: React.CSSProperties;
  /** Passthrough options for DOM customization */
  pt?: CardPassThroughOptions;
}

/**
 * Carousel component for content slideshow
 * @param props - Carousel configuration options
 * @returns JSX element
 */
function Carousel(props: CarouselProps): JSX.Element;

interface CarouselProps<T = any> {
  /** Array of items to display */
  value?: T[];
  /** Template function for rendering items */
  itemTemplate?: (item: T, options: any) => React.ReactNode;
  /** Number of items per page */
  numVisible?: number;
  /** Number of items to scroll */
  numScroll?: number;
  /** Index of the first item */
  page?: number;
  /** Orientation of scrolling */
  orientation?: 'horizontal' | 'vertical';
  /** Whether scrolling is infinite */
  circular?: boolean;
  /** Whether to display navigation buttons */
  showNavigators?: boolean;
  /** Whether to display indicator dots */
  showIndicators?: boolean;
  /** Auto play interval in milliseconds */
  autoplayInterval?: number;
  /** Responsive options */
  responsiveOptions?: CarouselResponsiveOption[];
  /** Page change event handler */
  onPageChange?: (e: CarouselPageChangeEvent) => void;
  /** CSS class name */
  className?: string;
  /** Inline styles */
  style?: React.CSSProperties;
  /** Passthrough options for DOM customization */
  pt?: CarouselPassThroughOptions;
}

interface CarouselResponsiveOption {
  breakpoint: string;
  numVisible: number;
  numScroll: number;
}

interface CarouselPageChangeEvent {
  page: number;
}

/**
 * Chart component for data visualization
 * @param props - Chart configuration options
 * @returns JSX element
 */
function Chart(props: ChartProps): JSX.Element;

interface ChartProps {
  /** Chart type */
  type?: 'pie' | 'doughnut' | 'line' | 'bar' | 'radar' | 'polarArea' | 'bubble' | 'scatter';
  /** Chart data */
  data?: any;
  /** Chart options */
  options?: any;
  /** Plugins array */
  plugins?: any[];
  /** Width of the chart */
  width?: string;
  /** Height of the chart */
  height?: string;
  /** CSS class name */
  className?: string;
  /** Inline styles */
  style?: React.CSSProperties;
}

/**
 * Image component with preview functionality
 * @param props - Image configuration options
 * @returns JSX element
 */
function Image(props: ImageProps): JSX.Element;

interface ImageProps {
  /** Image source URL */
  src?: string;
  /** Alternative text */
  alt?: string;
  /** Image width */
  width?: string;
  /** Image height */
  height?: string;
  /** Enable preview mode */
  preview?: boolean;
  /** CSS class name */
  className?: string;
  /** Inline styles */
  style?: React.CSSProperties;
  /** Image CSS class */
  imageClassName?: string;
  /** Image inline styles */
  imageStyle?: React.CSSProperties;
  /** Show event handler for preview */
  onShow?: () => void;
  /** Hide event handler for preview */
  onHide?: () => void;
  /** Passthrough options for DOM customization */
  pt?: ImagePassThroughOptions;
}

/**
 * Timeline component for chronological display
 * @param props - Timeline configuration options
 * @returns JSX element
 */
function Timeline(props: TimelineProps): JSX.Element;

interface TimelineProps<T = any> {
  /** Array of timeline items */
  value?: T[];
  /** Position of content relative to timeline line */
  align?: 'left' | 'right' | 'alternate' | 'top' | 'bottom';
  /** Layout orientation */
  layout?: 'vertical' | 'horizontal';
  /** Content template function */
  content?: (item: T, index: number) => React.ReactNode;
  /** Opposite content template */
  opposite?: (item: T, index: number) => React.ReactNode;
  /** Marker template */
  marker?: (item: T, index: number) => React.ReactNode;
  /** CSS class name */
  className?: string;
  /** Inline styles */
  style?: React.CSSProperties;
  /** Passthrough options for DOM customization */
  pt?: TimelinePassThroughOptions;
}