{
"framework": "React",
"name": "PrimeReact",
"version": "9.6.5",
"tags": [
{
"name": "Accordion",
"source": {
"module": "PrimeReact",
"symbol": "Accordion"
},
"description": "Accordion groups a collection of contents in tabs.",
"doc-url": "https://primefaces.org/primereact/showcase/#/accordion",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "activeIndex",
"type": "number|number[]",
"default": "null",
"description": "Active index or indexes of the element. Use an array of numbers for multiple indexes. the \"multiple\" prop must be set to true in order to specify multiple indexes."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "multiple",
"type": "boolean",
"default": "false",
"description": "When enabled, multiple tabs can be activated at the same time."
},
{
"name": "expandIcon",
"type": "string",
"default": "pi pi-chevron-right",
"description": "Icon of a collapsed tab."
},
{
"name": "collapseIcon",
"type": "string",
"default": "pi pi-chevron-down",
"description": "Icon of an expanded tab."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onTabOpen",
"description": "Callback to invoke when a tab gets expanded.",
"arguments": [
{
"name": "originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "index",
"type": "number",
"description": "Index or indexes of the tab (number or array of numbers)."
}
]
},
{
"name": "onTabClose",
"description": "Callback to invoke when an active tab is collapsed by clicking on the header.",
"arguments": [
{
"name": "originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "index",
"type": "number",
"description": "Index of the tab."
}
]
},
{
"name": "onTabChange",
"description": "Callback to invoke when state of the accordion changes.",
"arguments": [
{
"name": "originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "index",
"type": "number",
"description": "Index of the tab."
}
]
}
]
},
{
"name": "AccordionTab",
"source": {
"module": "PrimeReact",
"symbol": "AccordionTab"
},
"description": "Accordion element consists of one or more AccordionTab elements.",
"doc-url": "https://primefaces.org/primereact/showcase/#/accordion",
"props": [
{
"name": "header",
"type": "string",
"default": "null",
"description": "Orientation of tab headers."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "Whether the tab is disabled."
},
{
"name": "headerClassName",
"type": "string",
"default": "null",
"description": "Style class of the tab header."
},
{
"name": "headerStyle",
"type": "object",
"default": "null",
"description": "Inline style of the tab header."
},
{
"name": "headerTemplate",
"type": "any",
"default": "null",
"description": "Template of the tab header."
},
{
"name": "contentClassName",
"type": "string",
"default": "null",
"description": "Style class of the tab content."
},
{
"name": "contentStyle",
"type": "object",
"default": "null",
"description": "Inline style of the tab content."
}
],
"events": []
},
{
"name": "AutoComplete",
"source": {
"module": "PrimeReact",
"symbol": "AutoComplete"
},
"description": "AutoComplete is an input component that provides real-time suggestions while being typed.",
"doc-url": "https://primefaces.org/primereact/showcase/#/autocomplete",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "any",
"default": "null",
"description": "Value of the component."
},
{
"name": "name",
"type": "string",
"default": "null",
"description": "Name of the input element."
},
{
"name": "type",
"type": "string",
"default": "text",
"description": "Type of the input element."
},
{
"name": "suggestions",
"type": "array",
"default": "null",
"description": "An array of suggestions to display."
},
{
"name": "field",
"type": "any",
"default": "null",
"description": "Field of a suggested object to resolve and display."
},
{
"name": "optionGroupLabel",
"type": "string",
"default": "null",
"description": "Property name or getter function to use as the label of an option group."
},
{
"name": "optionGroupChildren",
"type": "string",
"default": "null",
"description": "Property name or getter function that refers to the children options of option group."
},
{
"name": "forceSelection",
"type": "boolean",
"default": "false",
"description": "When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions."
},
{
"name": "autoHighlight",
"type": "boolean",
"default": "false",
"description": "When enabled, highlights the first item in the list by default."
},
{
"name": "scrollHeight",
"type": "string",
"default": "200px",
"description": "Maximum height of the suggestions panel."
},
{
"name": "dropdown",
"type": "boolean",
"default": "false",
"description": "Displays a button next to the input field when enabled."
},
{
"name": "dropdownMode",
"type": "string",
"default": "blank",
"description": "Specifies the behavior dropdown button. Default \"blank\" mode sends an empty string and \"current\" mode sends the input value."
},
{
"name": "multiple",
"type": "boolean",
"default": "false",
"description": "Specifies if multiple values can be selected."
},
{
"name": "selectionLimit",
"type": "number",
"default": "null",
"description": "Number of maximum options that can be selected."
},
{
"name": "minLength",
"type": "number",
"default": "1",
"description": "Minimum number of characters to initiate a search."
},
{
"name": "delay",
"type": "number",
"default": "300",
"description": "Delay between keystrokes to wait before sending a query."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "inputId",
"type": "string",
"default": "null",
"description": "Identifier of the input element."
},
{
"name": "inputStyle",
"type": "string",
"default": "null",
"description": "Inline style of the input field."
},
{
"name": "inputClassName",
"type": "string",
"default": "null",
"description": "Inline style of the input field."
},
{
"name": "panelClassName",
"type": "string",
"default": "null",
"description": "Style class of the overlay panel element."
},
{
"name": "panelStyle",
"type": "string",
"default": "null",
"description": "Inline style of the overlay panel element."
},
{
"name": "placeholder",
"type": "string",
"default": "null",
"description": "Hint text for the input field."
},
{
"name": "readOnly",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the input cannot be typed."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should be disabled."
},
{
"name": "maxLength",
"type": "number",
"default": "null",
"description": "Maximum number of character allows in the input field."
},
{
"name": "size",
"type": "number",
"default": "null",
"description": "Size of the input field."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "autoFocus",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should automatically get focus on load."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
},
{
"name": "ariaLabelledBy",
"type": "string",
"default": "null",
"description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
},
{
"name": "itemTemplate",
"type": "any",
"default": "null",
"description": "Template of a list item."
},
{
"name": "selectedItemTemplate",
"type": "any",
"default": "null",
"description": "Template of a selected item."
},
{
"name": "optionGroupTemplate",
"type": "any",
"default": "null",
"description": "Template of an option group item."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
},
{
"name": "dropdownIcon",
"type": "string",
"default": "pi pi-chevron-down",
"description": "Icon class of the dropdown icon."
},
{
"name": "dropdownAriaLabel",
"type": "string",
"default": "null",
"description": "ARIA label for the dropdown button. Defaults to placeholder then Locale \"choose\" label."
},
{
"name": "virtualScrollerOptions",
"type": "object",
"default": "null",
"description": "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
}
],
"events": [
{
"name": "completeMethod",
"description": "Callback to invoke to search for suggestions.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.query",
"type": "string",
"description": "Value to search with"
}
]
},
{
"name": "onChange",
"description": "Callback to invoke when autocomplete value changes.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Value of the component"
}
]
},
{
"name": "onFocus",
"description": "Callback to invoke when autocomplete gets focus.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onBlur",
"description": "Callback to invoke when autocomplete loses focus.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onSelect",
"description": "Callback to invoke when a suggestion is selected.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Value of the component"
}
]
},
{
"name": "onUnselect",
"description": "Callback to invoke when a suggestion is selected.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Value of the component"
}
]
},
{
"name": "onDropdownClick",
"description": "Callback to invoke to when dropdown button is clicked.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.query",
"type": "string",
"description": "Current value of the input field"
}
]
},
{
"name": "onClick",
"description": "Callback to invoke on click.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onDblClick",
"description": "Callback to invoke on double click.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onMouseDown",
"description": "Callback to invoke to when a mouse button is pressed.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onKeyUp",
"description": "Callback to invoke to when a key is released.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onKeyPress",
"description": "Callback to invoke to when a key is pressed.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onContextMenu",
"description": "Callback to invoke on right-click.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onClear",
"description": "Callback to invoke when input is cleared by the user.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onShow",
"description": "Callback to invoke when overlay panel becomes visible.",
"arguments": []
},
{
"name": "onHide",
"description": "Callback to invoke when overlay panel becomes hidden.",
"arguments": []
}
]
},
{
"name": "Avatar",
"source": {
"module": "PrimeReact",
"symbol": "Avatar"
},
"description": "Avatar represents people using icons, labels and images.",
"doc-url": "https://primefaces.org/primereact/showcase/#/avatar",
"props": [
{
"name": "label",
"type": "string",
"default": "null",
"description": "Defines the text to display."
},
{
"name": "icon",
"type": "string",
"default": "null",
"description": "Defines the icon to display."
},
{
"name": "image",
"type": "string",
"default": "null",
"description": "Defines the image to display."
},
{
"name": "imageAlt",
"type": "any",
"default": "null",
"description": "It specifies an alternate text for an image, if the image cannot be displayed."
},
{
"name": "imageFallback",
"type": "string",
"default": "default",
"description": "Defines a fallback image or URL if the main image fails to load. If \"default\" will fallback to label then icon."
},
{
"name": "size",
"type": "string",
"default": "null",
"description": "Size of the element, valid options are \"large\" and \"xlarge\"."
},
{
"name": "shape",
"type": "string",
"default": "square",
"description": "Shape of the element, valid options are \"square\" and \"circle\"."
},
{
"name": "template",
"type": "any",
"default": "null",
"description": "Template of the content."
}
],
"events": [
{
"name": "onImageError",
"description": "This event is triggered if an error occurs while loading an image file.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onClick",
"description": "Callback to invoke on click.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "AvatarGroup",
"source": {
"module": "PrimeReact",
"symbol": "AvatarGroup"
},
"description": "A set of Avatars can be displayed together using the AvatarGroup component.",
"doc-url": "https://primefaces.org/primereact/showcase/#/avatargroup",
"props": [],
"events": []
},
{
"name": "Badge",
"source": {
"module": "PrimeReact",
"symbol": "Badge"
},
"description": "Badge is a small status indicator for another element.",
"doc-url": "https://primefaces.org/primereact/showcase/#/badge",
"props": [
{
"name": "value",
"type": "any",
"default": "null",
"description": "Value to display inside the badge."
},
{
"name": "severity",
"type": "string",
"default": "null",
"description": "Severity type of the badge."
},
{
"name": "size",
"type": "string",
"default": "null",
"description": "Size of the badge, valid options are \"large\" and \"xlarge\"."
}
],
"events": []
},
{
"name": "BlockUI",
"source": {
"module": "PrimeReact",
"symbol": "BlockUI"
},
"description": "BlockUI can either block other components or the whole page.",
"doc-url": "https://primefaces.org/primereact/showcase/#/blockui",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "blocked",
"type": "boolean",
"default": "false",
"description": "Controls the blocked state."
},
{
"name": "fullScreen",
"type": "boolean",
"default": "false",
"description": "When enabled, the whole document gets blocked."
},
{
"name": "baseZIndex",
"type": "number",
"default": "0",
"description": "Base zIndex value to use in layering."
},
{
"name": "autoZIndex",
"type": "boolean",
"default": "true",
"description": "Whether to automatically manage layering."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "containerClassName",
"type": "string",
"default": "null",
"description": "Style class of the container element."
},
{
"name": "containerStyle",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the container element."
},
{
"name": "template",
"type": "any",
"default": "null",
"description": "Template of mask."
}
],
"events": [
{
"name": "onBlocked",
"description": "Fired when the element gets blocked.",
"arguments": []
},
{
"name": "onUnblocked",
"description": "Fired when the element gets unblocked.",
"arguments": []
}
]
},
{
"name": "BreadCrumb",
"source": {
"module": "PrimeReact",
"symbol": "BreadCrumb"
},
"description": "Breadcrumb provides contextual information about page hierarchy.",
"doc-url": "https://primefaces.org/primereact/showcase/#/breadcrumb",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "model",
"type": "MenuItem[]",
"default": "null",
"description": "An array of menuitems."
},
{
"name": "home",
"type": "MenuItem",
"default": "null",
"description": "MenuItem configuration for the home icon."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
}
],
"events": []
},
{
"name": "Button",
"source": {
"module": "PrimeReact",
"symbol": "Button"
},
"description": "Button is an extension to standard input element with icons and theming.",
"doc-url": "https://primefaces.org/primereact/showcase/#/button",
"props": [
{
"name": "label",
"type": "string",
"default": "null",
"description": "Text of the button."
},
{
"name": "icon",
"type": "any",
"default": "null",
"description": "Name of the icon or JSX.Element for icon."
},
{
"name": "iconPos",
"type": "string",
"default": "left",
"description": "Position of the icon, valid values are \"left\", \"right\", \"top\" and \"bottom\"."
},
{
"name": "badge",
"type": "string",
"default": "null",
"description": "Value of the badge."
},
{
"name": "badgeClassName",
"type": "string",
"default": "null",
"description": "Style class of the badge."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the element should be disabled."
},
{
"name": "visible",
"type": "boolean",
"default": "true",
"description": "When present, it specifies that the element should be visible."
},
{
"name": "loading",
"type": "boolean",
"default": "false",
"description": "Display loading icon of the button"
},
{
"name": "loadingIcon",
"type": "any",
"default": "null",
"description": "Name of the loading icon or JSX.Element for loading icon."
}
],
"events": []
},
{
"name": "Calendar",
"source": {
"module": "PrimeReact",
"symbol": "Calendar"
},
"description": "Calendar is a form component to work with dates.",
"doc-url": "https://primefaces.org/primereact/showcase/#/calendar",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "name",
"type": "string",
"default": "null",
"description": "Name of the input element."
},
{
"name": "value",
"type": "any",
"default": "null",
"description": "Value of the component."
},
{
"name": "visible",
"type": "boolean",
"default": "false",
"description": "Specifies the visibility of the overlay."
},
{
"name": "viewDate",
"type": "date",
"default": "null",
"description": "Date instance whose month and year are used to display the calendar."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "inline",
"type": "boolean",
"default": "false",
"description": "When enabled, displays the calendar as inline instead of an overlay."
},
{
"name": "inputId",
"type": "string",
"default": "null",
"description": "Identifier of the input element."
},
{
"name": "inputStyle",
"type": "object",
"default": "null",
"description": "Inline style of the input element."
},
{
"name": "inputClassName",
"type": "string",
"default": "null",
"description": "Style class of the input element."
},
{
"name": "required",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that an input field must be filled out before submitting the form."
},
{
"name": "readOnlyInput",
"type": "boolean",
"default": "null",
"description": "When specified, prevents entering the date manually with keyboard."
},
{
"name": "keepInvalid",
"type": "boolean",
"default": "false",
"description": "Keep invalid value when input blur."
},
{
"name": "mask",
"type": "string",
"default": "null",
"description": "Mask pattern for input element."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When specified, disables the component."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "placeholder",
"type": "string",
"default": "null",
"description": "Placeholder text for the input."
},
{
"name": "showIcon",
"type": "boolean",
"default": "false",
"description": "When enabled, displays a button with icon next to input."
},
{
"name": "icon",
"type": "string",
"default": "pi pi-calendar",
"description": "Icon of the calendar button."
},
{
"name": "showOnFocus",
"type": "boolean",
"default": "true",
"description": "When disabled, datepicker will not be visible with input focus."
},
{
"name": "numberOfMonths",
"type": "number",
"default": "1",
"description": "Number of months to display."
},
{
"name": "view",
"type": "string",
"default": "date",
"description": "Type of view to display, valid valids are \"date\" for datepicker and \"month\" for month picker."
},
{
"name": "touchUI",
"type": "boolean",
"default": "false",
"description": "When enabled, calendar overlay is displayed as optimized for touch devices."
},
{
"name": "showTime",
"type": "boolean",
"default": "false",
"description": "Whether to display timepicker."
},
{
"name": "timeOnly",
"type": "boolean",
"default": "false",
"description": "Whether to display timepicker only."
},
{
"name": "showSeconds",
"type": "boolean",
"default": "false",
"description": "Whether to show the seconds in time picker."
},
{
"name": "showMillisec",
"type": "boolean",
"default": "false",
"description": "Whether to show the milliseconds in time picker."
},
{
"name": "hourFormat",
"type": "string",
"default": "24",
"description": "Specifies 12 or 24 hour format."
},
{
"name": "locale",
"type": "string",
"default": "en",
"description": "Used to display the values of the locale object defined in the Locale API"
},
{
"name": "stepHour",
"type": "number",
"default": "1",
"description": "Hours to change per step."
},
{
"name": "stepMinute",
"type": "number",
"default": "1",
"description": "Minutes to change per step."
},
{
"name": "stepSecond",
"type": "number",
"default": "1",
"description": "Seconds to change per step."
},
{
"name": "stepMillisec",
"type": "number",
"default": "1",
"description": "Milliseconds to change per step."
},
{
"name": "shortYearCutoff",
"type": "string",
"default": "+10",
"description": "The cutoff year for determining the century for a date."
},
{
"name": "hideOnDateTimeSelect",
"type": "boolean",
"default": "false",
"description": "Whether to hide the overlay on date selection when showTime is enabled."
},
{
"name": "showWeek",
"type": "boolean",
"default": "false",
"description": "When enabled, calendar will show week numbers."
},
{
"name": "dateFormat",
"type": "string",
"default": "mm/dd/yy",
"description": "Format of the date."
},
{
"name": "panelStyle",
"type": "object",
"default": "null",
"description": "Inline style of the datetimepicker panel."
},
{
"name": "panelClassName",
"type": "string",
"default": "null",
"description": "Style class of the datetimepicker panel."
},
{
"name": "monthNavigator",
"type": "boolean",
"default": "false",
"description": "Whether the month should be rendered as a dropdown instead of text."
},
{
"name": "yearNavigator",
"type": "boolean",
"default": "false",
"description": "Whether the year should be rendered as a dropdown instead of text."
},
{
"name": "disabledDates",
"type": "array;",
"default": "null",
"description": "Array with dates to disable."
},
{
"name": "disabledDays",
"type": "array",
"default": "null",
"description": "Array with disabled weekday numbers."
},
{
"name": "minDate",
"type": "Date",
"default": "null",
"description": "The minimum selectable date."
},
{
"name": "maxDate",
"type": "Date",
"default": "null",
"description": "The maximum selectable date."
},
{
"name": "maxDateCount",
"type": "number",
"default": "null",
"description": "Maximum number of selectable dates in multiple mode."
},
{
"name": "showMinMaxRange",
"type": "boolean",
"default": "false",
"description": "Whether to allow navigation past min/max dates."
},
{
"name": "showOtherMonths",
"type": "boolean",
"default": "true",
"description": "Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option."
},
{
"name": "selectOtherMonths",
"type": "boolean",
"default": "false",
"description": "Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true."
},
{
"name": "showButtonBar",
"type": "boolean",
"default": "false",
"description": "Whether to display today and clear buttons at the footer"
},
{
"name": "todayButtonClassName",
"type": "string",
"default": "p-secondary-button",
"description": "Style class of the today button."
},
{
"name": "clearButtonClassName",
"type": "string",
"default": "p-secondary-button",
"description": "Style class of the clear button."
},
{
"name": "baseZIndex",
"type": "number",
"default": "0",
"description": "Base zIndex value to use in layering."
},
{
"name": "autoZIndex",
"type": "boolean",
"default": "true",
"description": "Whether to automatically manage layering."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
},
{
"name": "ariaLabelledBy",
"type": "string",
"default": "null",
"description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
},
{
"name": "dateTemplate",
"type": "function",
"default": "null",
"description": "Function that gets a date information and returns the cell content in datepicker."
},
{
"name": "decadeTempate",
"type": "function",
"default": "null",
"description": "Function that gets a navigator information and returns the decade selections in the panel."
},
{
"name": "monthNavigatorTemplate",
"type": "function",
"default": "null",
"description": "Function that gets a navigator information and returns the navigator element in header."
},
{
"name": "yearNavigatorTemplate",
"type": "function",
"default": "null",
"description": "Function that gets a navigator information and returns the navigator in header."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
},
{
"name": "formatDateTime",
"type": "function",
"default": "null",
"description": "Function for overriding default behavior that formats a Date to the string representation."
},
{
"name": "parseDateTime",
"type": "function",
"default": "null",
"description": "Function for overriding default behavior that parses text into the Date."
}
],
"events": [
{
"name": "onFocus",
"description": "Callback to invoke on focus event of input field.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onBlur",
"description": "Callback to invoke on blur event of input field.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onInput",
"description": "Callback to invoke on input event of input field.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onSelect",
"description": "Callback to invoke when a date is selected.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
},
{
"name": "value",
"type": "any",
"description": "Selected date"
}
]
},
{
"name": "onChange",
"description": "Callback to invoke when value changes.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
},
{
"name": "value",
"type": "any",
"description": "New date"
}
]
},
{
"name": "onTodayButtonClick",
"description": "Callback to invoke when today button is clicked.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onClearButtonClick",
"description": "Callback to invoke when clear button is clicked.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onViewDateChange",
"description": "Callback to invoke when the displayed month/year is changed.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
},
{
"name": "value",
"type": "any",
"description": "New date"
}
]
},
{
"name": "onShow",
"description": "Callback to invoke when the displayed month/year is changed.",
"arguments": []
},
{
"name": "onHide",
"description": "Callback to invoke when overlay panel or modal becomes hidden.",
"arguments": []
},
{
"name": "onVisibleChange",
"description": "Callback to invoke when visible is changed.",
"arguments": [
{
"name": "event.visible",
"type": "boolean",
"description": "Whether the overlay is visible"
},
{
"name": "event.type",
"type": "any",
"description": "Action type when the overlay is visible/hidden"
},
{
"name": "event.callback",
"type": "",
"description": "It is used to refocus the input field in some cases when the overlay is hidden."
}
]
}
]
},
{
"name": "Card",
"source": {
"module": "PrimeReact",
"symbol": "Card"
},
"description": "Card is a flexible container component.",
"doc-url": "https://primefaces.org/primereact/showcase/#/card",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "header",
"type": "any",
"default": "null",
"description": "Header of the card."
},
{
"name": "footer",
"type": "any",
"default": "null",
"description": "Footer of the card."
},
{
"name": "title",
"type": "any",
"default": "null",
"description": "Title of the card."
},
{
"name": "subTitle",
"type": "any",
"default": "null",
"description": "Secondary title of the card."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
}
],
"events": []
},
{
"name": "Carousel",
"source": {
"module": "PrimeReact",
"symbol": "Carousel"
},
"description": "Carousel is a content slider featuring various customization options.",
"doc-url": "https://primefaces.org/primereact/showcase/#/carousel",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "array",
"default": "null",
"description": "An array of objects to display."
},
{
"name": "page",
"type": "number",
"default": "null",
"description": "Index of the first item."
},
{
"name": "header",
"type": "any",
"default": "null",
"description": "Label of header."
},
{
"name": "footer",
"type": "any",
"default": "null",
"description": "Label of footer."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "itemTemplate",
"type": "function",
"default": "null",
"description": "Function that gets an item in the value and returns the content for it."
},
{
"name": "circular",
"type": "boolean",
"default": "false",
"description": "Defines if scrolling would be infinite."
},
{
"name": "showIndicators",
"type": "boolean",
"default": "true",
"description": "Whether to display indicator container."
},
{
"name": "showNavigators",
"type": "boolean",
"default": "true",
"description": "Whether to display navigation buttons in container."
},
{
"name": "autoplayInterval",
"type": "number",
"default": "null",
"description": "Time in milliseconds to scroll items automatically."
},
{
"name": "numVisible",
"type": "number",
"default": "1",
"description": "Number of items per page."
},
{
"name": "numScroll",
"type": "number",
"default": "1",
"description": "Number of items to scroll."
},
{
"name": "responsiveOptions",
"type": "any",
"default": "null",
"description": "An array of options for responsive design."
},
{
"name": "orientation",
"type": "string",
"default": "horizontal",
"description": "Specifies the layout of the component, valid values are \"horizontal\" and \"vertical\"."
},
{
"name": "verticalViewPortHeight",
"type": "string",
"default": "300px",
"description": "Height of the viewport in vertical layout."
},
{
"name": "contentClassName",
"type": "string",
"default": "null",
"description": "Style class of main content."
},
{
"name": "containerClassName",
"type": "string",
"default": "null",
"description": "Style class of the viewport container."
},
{
"name": "indicatorsContentClassName",
"type": "string",
"default": "null",
"description": "Style class of the paginator items."
}
],
"events": [
{
"name": "onPageChange",
"description": "Callback to invoke after scroll.",
"arguments": [
{
"name": "event.page",
"type": "number",
"description": "Value of the new page."
}
]
}
]
},
{
"name": "CascadeSelect",
"source": {
"module": "PrimeReact",
"symbol": "CascadeSelect"
},
"description": "CascadeSelect displays a nested structure of options.",
"doc-url": "https://primefaces.org/primereact/showcase/#/cascadeselect",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "options",
"type": "array",
"default": "null",
"description": "An array of selectitems to display as the available options."
},
{
"name": "optionLabel",
"type": "string",
"default": "null",
"description": "Property name or getter function to use as the label of an option."
},
{
"name": "optionValue",
"type": "string",
"default": "null",
"description": "Property name or getter function to use as the value of an option, defaults to the option itself when not defined."
},
{
"name": "optionGroupLabel",
"type": "string",
"default": "null",
"description": "Property name or getter function to use as the label of an option group."
},
{
"name": "optionGroupChildren",
"type": "string",
"default": "null",
"description": "Property name or getter function to retrieve the items of a group."
},
{
"name": "placeholder",
"type": "string",
"default": "null",
"description": "Default text to display when no option is selected."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should be disabled."
},
{
"name": "dataKey",
"type": "string",
"default": "null",
"description": "A property to uniquely identify an option."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "inputId",
"type": "string",
"default": "null",
"description": "Identifier of the underlying input element."
},
{
"name": "ariaLabelledBy",
"type": "string",
"default": "null",
"description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "itemTemplate",
"type": "any",
"default": "null",
"description": "The template of items."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
},
{
"name": "dropdownIcon",
"type": "string",
"default": "pi pi-chevron-down",
"description": "Icon class of the dropdown icon."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke on value change",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Original event"
},
{
"name": "event.value",
"type": "any",
"description": "Value of the checkbox"
}
]
},
{
"name": "onGroupChange",
"description": "Callback to invoke when a group changes",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Original event"
}
]
},
{
"name": "onBeforeShow",
"description": "Callback to invoke before the overlay is shown.",
"argument": []
},
{
"name": "onBeforeHide",
"description": "Callback to invoke before the overlay is hidden.",
"arguments": []
},
{
"name": "onShow",
"description": "Callback to invoke when the overlay is shown.",
"arguments": []
},
{
"name": "onHide",
"description": "Callback to invoke when the overlay is hidden.",
"arguments": []
}
]
},
{
"name": "Chart",
"source": {
"module": "PrimeReact",
"symbol": "Chart"
},
"description": "Chart components are based on Charts.js, an open source HTML5 based charting library.",
"doc-url": "https://primefaces.org/primereact/showcase/#/chart",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "type",
"type": "string",
"default": "null",
"description": "Type of the chart."
},
{
"name": "data",
"type": "any",
"default": "null",
"description": "Data to display."
},
{
"name": "options",
"type": "object",
"default": "null",
"description": "Options to customize the chart."
},
{
"name": "plugins",
"type": "array",
"default": "null",
"description": "Used to custom plugins of the chart."
},
{
"name": "width",
"type": "string",
"default": "null",
"description": "Width of the chart in non-responsive mode."
},
{
"name": "height",
"type": "string",
"default": "null",
"description": "Height of the chart in non-responsive mode."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "ariaLabel",
"type": "string",
"default": "options.plugins.title.text",
"description": " ARIA label for the chart canvas. Defaults to options.plugins.title.text if available."
}
],
"events": []
},
{
"name": "Checkbox",
"source": {
"module": "PrimeReact",
"symbol": "Checkbox"
},
"description": "Checkbox is an extension to standard checkbox element with skinning capabilities.",
"doc-url": "https://primefaces.org/primereact/showcase/#/checkbox",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "inputId",
"type": "string",
"default": "null",
"description": "Unique identifier of the inner native radiobutton."
},
{
"name": "value",
"type": "any",
"default": "null",
"description": "Value of the checkbox."
},
{
"name": "name",
"type": "string",
"default": "null",
"description": "Name of the checkbox element ."
},
{
"name": "checked",
"type": "boolean",
"default": "false",
"description": "Specifies whether a checkbox should be checked or not."
},
{
"name": "trueValue",
"type": "any",
"default": "true",
"description": "Value in checked state."
},
{
"name": "falseValue",
"type": "any",
"default": "false",
"description": "Value in unchecked state."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the element value cannot be altered."
},
{
"name": "required",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that an input field must be filled out before submitting the form."
},
{
"name": "readOnly",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the value cannot be changed."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "icon",
"type": "string",
"default": "pi pi-check",
"description": "Icon class of the checkbox icon."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke on value change",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Original event"
},
{
"name": "event.value",
"type": "any",
"description": "Value of the checkbox"
},
{
"name": "event.checked",
"type": "boolean",
"description": "Checked state as a boolean."
}
]
},
{
"name": "onMouseDown",
"description": "Callback to invoke to when a mouse button is pressed",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onContextMenu",
"description": "Callback to invoke on right-click.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "Chip",
"source": {
"module": "PrimeReact",
"symbol": "Chip"
},
"description": "Chip represents entities using icons, labels and images.",
"doc-url": "https://primefaces.org/primereact/showcase/#/chip",
"props": [
{
"name": "label",
"type": "string",
"default": "null",
"description": "Defines the text to display."
},
{
"name": "icon",
"type": "string",
"default": "null",
"description": "Defines the icon to display."
},
{
"name": "image",
"type": "string",
"default": "null",
"description": "Defines the image to display."
},
{
"name": "removable",
"type": "boolean",
"default": "false",
"description": "Whether to display a remove icon."
},
{
"name": "removeIcon",
"type": "string",
"default": "pi pi-times-circle",
"description": "Icon of the remove element."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "template",
"type": "any",
"default": "null",
"description": "Template of an item."
},
{
"name": "imageAlt",
"type": "any",
"default": "null",
"description": "It specifies an alternate text for an image, if the image cannot be displayed."
}
],
"events": [
{
"name": "onRemove",
"description": "Callback to invoke when a chip is removed.",
"arguments": [
{
"name": "originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onImageError",
"description": "This event is triggered if an error occurs while loading an image file.",
"arguments": [
{
"name": "originalEvent",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "Chips",
"source": {
"module": "PrimeReact",
"symbol": "Chips"
},
"description": "Chips is used to enter multiple values on an input field.",
"doc-url": "https://primefaces.org/primereact/showcase/#/chips",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the component."
},
{
"name": "name",
"type": "string",
"default": "null",
"description": "Name of the input field."
},
{
"name": "placeholder",
"type": "string",
"default": "null",
"description": "Advisory information to display on input."
},
{
"name": "value",
"type": "array",
"default": "null",
"description": "Value of the component."
},
{
"name": "max",
"type": "number",
"default": "null",
"description": "Maximum number of entries allowed."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the element should be disabled."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
},
{
"name": "ariaLabelledBy",
"type": "string",
"default": "null",
"description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
},
{
"name": "allowDuplicate",
"type": "boolean",
"default": "true",
"description": "Whether to allow duplicate values or not."
},
{
"name": "separator",
"type": "string",
"default": "null",
"description": "Separator char to add an item when pressed in addition to the enter key. Currently only possible value is \",\""
},
{
"name": "itemTemplate",
"type": "function",
"default": "null",
"description": "Template function to return the content of a chip."
},
{
"name": "keyfilter",
"type": "string/regex",
"default": "null",
"description": "Format definition of the keys to block."
},
{
"name": "addOnBlur",
"type": "boolean",
"default": "null",
"description": "Whether to add an item when the input loses focus."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke when a chip is added or removed.",
"arguments": [
{
"name": "originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onAdd",
"description": "Callback to invoke when a chip is added.",
"arguments": [
{
"name": "originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "value",
"type": "any",
"description": "Added item value"
}
]
},
{
"name": "onRemove",
"description": "Callback to invoke when a chip is removed.",
"arguments": [
{
"name": "originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "value",
"type": "any",
"description": "Removed item value"
}
]
},
{
"name": "onFocus",
"description": "Callback to invoke when the component gets focus.",
"arguments": [
{
"name": "originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onBlur",
"description": "Callback to invoke when the component loses focus",
"arguments": [
{
"name": "originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onKeyDown",
"description": "Callback to invoke when the key pressed.",
"arguments": [
{
"name": "originalEvent",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "ColorPicker",
"source": {
"module": "PrimeReact",
"symbol": "ColorPicker"
},
"description": "ColorPicker is an input component to select a color.",
"doc-url": "https://primefaces.org/primereact/showcase/#/colorpicker",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the component."
},
{
"name": "value",
"type": "any",
"default": "null",
"description": "Value of the component."
},
{
"name": "style",
"type": "CSSProperties",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "defaultColor",
"type": "string",
"default": "ff0000",
"description": "Default color to display when value is null."
},
{
"name": "inline",
"type": "boolean",
"default": "false",
"description": "Whether to display as an overlay or not."
},
{
"name": "format",
"type": "string",
"default": "hex",
"description": "Format to use in value binding, supported formats are \"hex\", \"rgb\" and \"hsb\"."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should be disabled."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "inputId",
"type": "string",
"default": "null",
"description": "Identifier of the focus input to match a label defined for the dropdown."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "panelStyle",
"type": "CSSProperties",
"default": "null",
"description": "Inline style of the overlay panel."
},
{
"name": "panelClassName",
"type": "string",
"default": "null",
"description": "Style class of the overlay panel."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke when confirm dialog is hidden.",
"arguments": [
{
"name": "value",
"type": "string",
"description": "Selected color value whose type depends on the format."
}
]
},
{
"name": "onShow",
"description": "Callback to invoke when overlay panel becomes visible."
},
{
"name": "onHide",
"description": "Callback to invoke when overlay panel becomes hidden."
}
]
},
{
"name": "Column",
"source": {
"module": "PrimeReact",
"symbol": "Column"
},
"description": "Column component defines various options to specify corresponding features.",
"doc-url": "https://primefaces.org/primereact/showcase/#/column",
"props": [
{
"name": "columnKey",
"type": "string",
"default": "null",
"description": "Identifier of a column if field property is not defined. Only utilized by reorderableColumns feature at the moment."
},
{
"name": "field",
"type": "string",
"default": "null",
"description": "Property of a row data."
},
{
"name": "sortField",
"type": "string",
"default": "null",
"description": "Property of a row data used for sorting, defaults to field."
},
{
"name": "filterField",
"type": "string",
"default": "null",
"description": "Property of a row data used for filtering, defaults to field."
},
{
"name": "exportField",
"type": "string",
"default": "null",
"description": "Property of a row data used for exporting, defaults to field."
},
{
"name": "exportHeader",
"type": "string",
"default": "null",
"description": "Custom export header of the column to be exported."
},
{
"name": "header",
"type": "any",
"default": "null",
"description": "Header content of the column."
},
{
"name": "body",
"type": "any",
"default": "null",
"description": "Body content of the column."
},
{
"name": "footer",
"type": "any",
"default": "null",
"description": "Footer content of the column."
},
{
"name": "sortable",
"type": "boolean",
"default": "false",
"description": "Defines if a column is sortable."
},
{
"name": "sortFunction",
"type": "function",
"default": "null",
"description": "Sort function for custom sorting."
},
{
"name": "sortableDisabled",
"type": "boolean",
"default": "false",
"description": "When enabled, the data of columns with this property cannot be sorted or changed by the user."
},
{
"name": "filter",
"type": "boolean",
"default": "false",
"description": "Defines if a column can be filtered."
},
{
"name": "filterMatchMode",
"type": "string",
"default": "null",
"description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWidth\", \"equals\", \"notEquals\", \"in\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
},
{
"name": "filterType",
"type": "string",
"default": "text",
"description": "Type of the filter input field."
},
{
"name": "filterPlaceholder",
"type": "string",
"default": "null",
"description": "Defines placeholder of the input fields."
},
{
"name": "filterMaxlength",
"type": "number",
"default": "null",
"description": "Specifies the maximum number of characters allowed in the filter element."
},
{
"name": "filterElement",
"type": "object",
"default": "null",
"description": "Element for custom filtering."
},
{
"name": "filterFunction",
"type": "function",
"default": "null",
"description": "Custom filter function."
},
{
"name": "excludeGlobalFilter",
"type": "boolean",
"default": "false",
"description": "Whether to exclude from global filtering or not."
},
{
"name": "filterHeaderStyle",
"type": "object",
"default": "null",
"description": "Inline style of the filter header."
},
{
"name": "filterHeaderClassName",
"type": "string",
"default": "null",
"description": "Style class of the filter header."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the column."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the column."
},
{
"name": "headerStyle",
"type": "object",
"default": "null",
"description": "Inline style of the header."
},
{
"name": "headerClassName",
"type": "string",
"default": "null",
"description": "Style class of the header."
},
{
"name": "headerTooltip",
"type": "any",
"default": "null",
"description": "Content of the header tooltip."
},
{
"name": "headerTooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the header tooltip, refer to the tooltip documentation for more information."
},
{
"name": "bodyStyle",
"type": "object",
"default": "null",
"description": "Inline style of the body."
},
{
"name": "bodyClassName",
"type": "string",
"default": "null",
"description": "Style class of the body."
},
{
"name": "footerStyle",
"type": "object",
"default": "null",
"description": "Inline style of the footer."
},
{
"name": "footerClassName",
"type": "string",
"default": "null",
"description": "Style class of the footer."
},
{
"name": "expander",
"type": "boolean",
"default": "false",
"description": "Displays an icon to toggle row expansion."
},
{
"name": "frozen",
"type": "boolean",
"default": "false",
"description": "Whether the column is fixed in horizontal scrolling or not."
},
{
"name": "selectionMode",
"type": "string",
"default": "null",
"description": "Defines column based selection mode, options are \"single\" and \"multiple\"."
},
{
"name": "colSpan",
"type": "number",
"default": "null",
"description": "Number of columns to span for grouping."
},
{
"name": "rowSpan",
"type": "number",
"default": "null",
"description": "Number of rows to span for grouping."
},
{
"name": "editor",
"type": "function",
"default": "null",
"description": "Function to provide the cell editor input."
},
{
"name": "cellEditValidator",
"type": "function",
"default": "null",
"description": "Validator function to validate the cell input value."
},
{
"name": "cellEditValidatorEvent",
"type": "string",
"default": "click",
"description": "Event to trigger the validation, possible values are \"click\" and \"blur\"."
},
{
"name": "onBeforeCellEditShow",
"type": "function",
"default": "null",
"description": "Callback to invoke before the cell editor is shown."
},
{
"name": "onBeforeCellEditHide",
"type": "function",
"default": "null",
"description": "Callback to invoke before the cell editor is hidden."
},
{
"name": "onCellEditInit",
"type": "function",
"default": "null",
"description": "Callback to invoke when cell edit is initiated."
},
{
"name": "onCellEditComplete",
"type": "function",
"default": "null",
"description": "Callback to execute when editor is submitted."
},
{
"name": "onCellEditCancel",
"type": "function",
"default": "null",
"description": "Callback to execute when editor is cancelled."
},
{
"name": "rowReorder",
"type": "boolean",
"default": "false",
"description": "Whether this column displays an icon to reorder the rows."
},
{
"name": "rowReorderIcon",
"type": "string",
"default": "pi pi-bars",
"description": "Icon of the drag handle to reorder rows."
},
{
"name": "rowEditor",
"type": "boolean",
"default": "false",
"description": "Displays icons to edit row."
},
{
"name": "exportable",
"type": "boolean",
"default": "true",
"description": "Defines whether the column is exported or not."
},
{
"name": "reorderable",
"type": "boolean",
"default": "true",
"description": "Used to defined reorderableColumns per column when reorderableColumns of table is enabled, defaults to value of reorderableColumns."
},
{
"name": "resizeable",
"type": "boolean",
"default": "true",
"description": "Used to defined resizeableColumns per column when resizeableColumns of table is enabled, defaults to value of resizeableColumns."
}
],
"events": [
{
"name": "onCellEditInit",
"description": "TODO",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onCellEditComplete",
"description": "TODO",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onCellEditCancel",
"description": "TODO",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "sortFunction",
"description": "TODO",
"arguments": [
{
"name": "event.field",
"type": "string",
"description": "TODO"
}
]
},
{
"name": "filterFunction",
"description": "TODO",
"arguments": [
{
"name": "event.value",
"type": "any",
"description": "TODO"
},
{
"name": "event.filter",
"type": "any",
"description": "TODO"
},
{
"name": "event.filterLocale",
"type": "string",
"description": "TODO"
}
]
},
{
"name": "cellEditValidator",
"description": "TODO",
"arguments": [
{
"name": "event.original Event",
"type": "object",
"description": "Browser Event"
}
]
},
{
"name": "cellEditValidator",
"description": "TODO",
"arguments": [
{
"name": "event.original Event",
"type": "object",
"description": "Browser Event"
}
]
},
{
"name": "cellEditValidator",
"description": "TODO",
"arguments": [
{
"name": "event.original Event",
"type": "object",
"description": "Browser Event"
}
]
},
{
"name": "onBeforeCellEditHide",
"description": "TODO",
"arguments": [
{
"name": "event.original Event",
"type": "object",
"description": "Browser Event"
}
]
},
{
"name": "onBeforeCellEditShow",
"description": "TODO",
"arguments": [
{
"name": "event.original Event",
"type": "object",
"description": "Browser Event"
}
]
}
]
},
{
"name": "ColumnGroup",
"source": {
"module": "PrimeReact",
"symbol": "ColumnGroup"
},
"description": "Columns can be grouped at header and footer sections by defining a ColumnGroup component as the headerColumnGroup and footerColumnGroup properties.",
"doc-url": "https://primefaces.org/primereact/showcase/#/columngroup",
"props": [],
"events": []
},
{
"name": "ConfirmDialog",
"source": {
"module": "PrimeReact",
"symbol": "ConfirmDialog"
},
"description": "ConfirmDialog uses a Dialog UI with confirmDialog method or tag.",
"doc-url": "https://primefaces.org/primereact/showcase/#/confirmdialog",
"props": [
{
"name": "visible",
"type": "boolean",
"default": "false",
"description": "Specifies the visibility of the confirm dialog."
},
{
"name": "message",
"type": "string",
"default": "null",
"description": "Message of the confirmation."
},
{
"name": "icon",
"type": "string",
"default": "null",
"description": "Icon to display next to the message."
},
{
"name": "acceptLabel",
"type": "string",
"default": "Yes",
"description": "Label of the accept button."
},
{
"name": "rejectLabel",
"type": "string",
"default": "No",
"description": "Label of the reject button."
},
{
"name": "acceptIcon",
"type": "string",
"default": "null",
"description": "Icon of the accept button."
},
{
"name": "rejectIcon",
"type": "string",
"default": "null",
"description": "Icon of the reject button."
},
{
"name": "acceptClassName",
"type": "string",
"default": "null",
"description": "Style class of the accept button."
},
{
"name": "rejectClassName",
"type": "string",
"default": "null",
"description": "Style class of the reject button."
},
{
"name": "footer",
"type": "any",
"default": "null",
"description": "Footer content of the confirm dialog."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
}
],
"events": [
{
"name": "accept",
"description": "Callback to execute when action is confirmed.",
"arguments": []
},
{
"name": "reject",
"description": "Callback to execute when action is rejected.",
"arguments": []
},
{
"name": "onHide",
"description": "Callback to invoke when confirm dialog is hidden.",
"arguments": [
{
"name": "result",
"type": "string",
"description": "Indicates with which selection the dialog was closed. Valid values are \"accept\", \"reject\" and undefined (outside click)."
}
]
}
]
},
{
"name": "ConfirmPopup",
"source": {
"module": "PrimeReact",
"symbol": "ConfirmPopup"
},
"description": "ConfirmPopup displays a confirmation overlay displayed relatively to its target.",
"doc-url": "https://primefaces.org/primereact/showcase/#/confirmpopup",
"props": [
{
"name": "target",
"type": "DomElement",
"default": "null",
"description": "Element to align the overlay. (Required)"
},
{
"name": "visible",
"type": "boolean",
"default": "false",
"description": "Specifies the visibility of the confirm popup."
},
{
"name": "message",
"type": "string",
"default": "null",
"description": "Message of the confirmation."
},
{
"name": "icon",
"type": "string",
"default": "null",
"description": "Icon to display next to the message."
},
{
"name": "acceptLabel",
"type": "string",
"default": "Yes",
"description": "Label of the accept button."
},
{
"name": "rejectLabel",
"type": "string",
"default": "No",
"description": "Label of the reject button."
},
{
"name": "acceptIcon",
"type": "string",
"default": "null",
"description": "Icon of the accept button."
},
{
"name": "rejectIcon",
"type": "string",
"default": "null",
"description": "Icon of the reject button."
},
{
"name": "acceptClassName",
"type": "string",
"default": "null",
"description": "Style class of the accept button."
},
{
"name": "rejectClassName",
"type": "string",
"default": "null",
"description": "Style class of the reject button."
},
{
"name": "dismissable",
"type": "boolean",
"default": "true",
"description": "Enables to hide the popup when outside is clicked."
},
{
"name": "footer",
"type": "any",
"default": "null",
"description": "Footer content of the confirm popup."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "accept",
"description": "Callback to execute when action is confirmed.",
"arguments": []
},
{
"name": "reject",
"description": "Callback to execute when action is rejected.",
"arguments": []
},
{
"name": "onHide",
"description": "Callback to invoke when confirm popup is hidden.",
"arguments": [
{
"name": "result",
"type": "string",
"description": " Indicates with which selection the popup was closed. Valid values are \"accept\", \"reject\" and undefined (outside click)."
}
]
},
{
"name": "onShow",
"description": "Callback to invoke when overlay panel becomes visible.",
"arguments": []
}
]
},
{
"name": "ContextMenu",
"source": {
"module": "PrimeReact",
"symbol": "ContextMenu"
},
"description": "ContextMenu displays an overlay menu on right click of its target.",
"doc-url": "https://primefaces.org/primereact/showcase/#/contextmenu",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "model",
"type": "array",
"default": "null",
"description": "An array of menuitems."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "global",
"type": "boolean",
"default": "false",
"description": "Attaches the menu to document instead of a particular item."
},
{
"name": "baseZIndex",
"type": "number",
"default": "0",
"description": "Base zIndex value to use in layering."
},
{
"name": "autoZIndex",
"type": "boolean",
"default": "true",
"description": "Whether to automatically manage layering."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onShow",
"description": "Callback to invoke when a popup menu is shown.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onHide",
"description": "Callback to invoke when a popup menu is hidden.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "DataScroller",
"source": {
"module": "PrimeReact",
"symbol": "DataScroller"
},
"description": "DataScroller displays data with on demand loading using scroll.",
"doc-url": "https://primefaces.org/primereact/showcase/#/datascroller",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "array",
"default": "null",
"description": "An array of objects to display."
},
{
"name": "rows",
"type": "number",
"default": "null",
"description": "Number of rows to fetch in a load event."
},
{
"name": "inline",
"type": "boolean",
"default": "false",
"description": "Defines if the event target to listen the scroll event is the element itself."
},
{
"name": "scrollHeight",
"type": "any",
"default": "null",
"description": "Max height of the content area in inline mode."
},
{
"name": "loader",
"type": "boolean",
"default": "null",
"description": "Determines whether data is loaded by a target element."
},
{
"name": "buffer",
"type": "number",
"default": "0.9",
"description": "Number of buffer size."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "itemTemplate",
"type": "function",
"default": "null",
"description": "Function that gets an item in the value and returns the content for it."
},
{
"name": "header",
"type": "any",
"default": "null",
"description": "Label of header."
},
{
"name": "footer",
"type": "any",
"default": "null",
"description": "Label of footer."
},
{
"name": "emptyMessage",
"type": "any",
"default": "No records found",
"description": "Text to display when there is no data."
}
],
"events": [
{
"name": "onLazyLoad",
"description": "Callback to invoke in lazy mode to load new data.",
"arguments": [
{
"name": "event.first",
"type": "number",
"description": "First row offset"
},
{
"name": "event.rows",
"type": "number",
"description": "Number of rows per page"
}
]
}
]
},
{
"name": "DataTable",
"source": {
"module": "PrimeReact",
"symbol": "DataTable"
},
"description": "DataTable displays data in tabular format.",
"doc-url": "https://primefaces.org/primereact/showcase/#/datatable",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "array",
"default": "null",
"description": "An array of objects to display."
},
{
"name": "header",
"type": "any",
"default": "null",
"description": "Header content of the table."
},
{
"name": "footer",
"type": "any",
"default": "null",
"description": "Footer content of the table."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "any",
"default": "null",
"description": "Style class of the component."
},
{
"name": "tableStyle",
"type": "object",
"default": "null",
"description": "Inline style of the table element."
},
{
"name": "tableClassName",
"type": "string",
"default": "null",
"description": "Style class of the table element."
},
{
"name": "paginator",
"type": "boolean",
"default": "false",
"description": "When specified as true, enables the pagination."
},
{
"name": "paginatorPosition",
"type": "string",
"default": "bottom",
"description": "Position of the paginator, options are \"top\",\"bottom\" or \"both\"."
},
{
"name": "alwaysShowPaginator",
"type": "boolean",
"default": "true",
"description": "Whether to show it even there is only one page."
},
{
"name": "paginatorClassName",
"type": "string",
"default": "null",
"description": "Style class of the paginator element."
},
{
"name": "paginatorTemplate",
"type": "string|object",
"default": "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",
"description": "Template of the paginator. For details, refer to the template section of the paginator documentation for further options."
},
{
"name": "paginatorLeft",
"type": "Element",
"default": "null",
"description": "Content for the left side of the paginator."
},
{
"name": "paginatorRight",
"type": "Element",
"default": "null",
"description": "Content for the right side of the paginator."
},
{
"name": "pageLinkSize",
"type": "number",
"default": "5",
"description": "Number of page links to display."
},
{
"name": "rowsPerPageOptions",
"type": "array",
"default": "null",
"description": "Array of integer values to display inside rows per page dropdown."
},
{
"name": "currentPageReportTemplate",
"type": "string",
"default": "({currentPage} of {totalPages})",
"description": "Template of the current page report element. Available placeholders are {currentPage}, {totalPages}, {rows}, {first}, {last} and {totalRecords}"
},
{
"name": "paginatorDropdownAppendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "first",
"type": "number",
"default": "0",
"description": "Index of the first row to be displayed."
},
{
"name": "rows",
"type": "number",
"default": "null",
"description": "Number of rows to display per page."
},
{
"name": "totalRecords",
"type": "number",
"default": "null",
"description": "Number of total records, defaults to length of value when not defined."
},
{
"name": "lazy",
"type": "boolean",
"default": "false",
"description": "Defines if data is loaded and interacted with in lazy manner."
},
{
"name": "sortField",
"type": "string",
"default": "null",
"description": "Name of the field to sort data by default."
},
{
"name": "sortOrder",
"type": "number",
"default": "null",
"description": "Order to sort the data by default."
},
{
"name": "multiSortMeta",
"type": "array",
"default": "null",
"description": "An array of SortMeta objects to sort the data by default in multiple sort mode."
},
{
"name": "sortMode",
"type": "string",
"default": "single",
"description": "Defines whether sorting works on single column or on multiple columns."
},
{
"name": "defaultSortOrder",
"type": "number",
"default": "1",
"description": "Default sort order of an unsorted column."
},
{
"name": "removableSort",
"type": "boolean",
"default": "false",
"description": "When enabled, columns can have an un-sorted state."
},
{
"name": "emptyMessage",
"type": "any",
"default": "No records found",
"description": "Text to display when there is no data."
},
{
"name": "selectionMode",
"type": "string",
"default": "null",
"description": "Specifies the selection mode, valid values are \"single\", \"multiple\", \"radiobutton\" and \"checkbox\"."
},
{
"name": "dragSelection",
"type": "boolean",
"default": "false",
"description": "When enabled, a rectangle that can be dragged can be used to make a range selection."
},
{
"name": "selection",
"type": "any",
"default": "null",
"description": "Selected row in single mode or an array of values in multiple mode."
},
{
"name": "selectionAriaLabel",
"type": "string",
"default": "null",
"description": "A field property from the row to add \"Select {field}\" and \"Unselect {field}\" ARIA labels to checkbox/radio buttons."
},
{
"name": "contextMenuSelection",
"type": "any",
"default": "null",
"description": "Selected row in single mode or an array of values in multiple mode."
},
{
"name": "compareSelectionBy",
"type": "string",
"default": "deepEquals",
"description": "Algorithm to define if a row is selected, valid values are \"equals\" that compares by reference and \"deepEquals\" that compares all fields."
},
{
"name": "dataKey",
"type": "string",
"default": "null",
"description": "A property to uniquely identify a record in data."
},
{
"name": "metaKeySelection",
"type": "boolean",
"default": "true",
"description": "Defines whether metaKey is requred or not for the selection.When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically."
},
{
"name": "selectOnEdit",
"type": "boolean",
"default": "true",
"description": "Determines whether the cell editor will be opened when clicking to select any row on Selection and Cell Edit modes."
},
{
"name": "selectionPageOnly",
"type": "boolean",
"default": "false",
"description": "When enabled with paginator and checkbox selection mode, the select all checkbox in the header will select all rows on the current page."
},
{
"name": "selectionAutoFocus",
"type": "boolean",
"default": "true",
"description": "When a selectable row is clicked on RadioButton and Checkbox selection, it automatically decides whether to focus on elements such as checkbox or radio."
},
{
"name": "headerColumnGroup",
"type": "ColumnGroup",
"default": "null",
"description": "ColumnGroup component for header."
},
{
"name": "footerColumnGroup",
"type": "ColumnGroup",
"default": "null",
"description": "ColumnGroup component for footer."
},
{
"name": "frozenHeaderColumnGroup",
"type": "ColumnGroup",
"default": "null",
"description": "ColumnGroup component for header of frozen columns."
},
{
"name": "frozenFooterColumnGroup",
"type": "ColumnGroup",
"default": "null",
"description": "ColumnGroup component for footer of frozen columns."
},
{
"name": "rowExpansionTemplate",
"type": "function",
"default": "null",
"description": "Function that receives the row data as the parameter and returns the expanded row content."
},
{
"name": "expandedRows",
"type": "array|object",
"default": "null",
"description": "A collection of rows or a map object row data keys that are expanded."
},
{
"name": "resizableColumns",
"type": "boolean",
"default": "false",
"description": "When enabled, columns can be resized using drag and drop."
},
{
"name": "columnResizeMode",
"type": "string",
"default": "fit",
"description": "Defines whether the overall table width should change on column resize, valid values are \"fit\" and \"expand\"."
},
{
"name": "reorderableColumns",
"type": "boolean",
"default": "false",
"description": "When enabled, columns can be reordered using drag and drop."
},
{
"name": "reorderableRows",
"type": "boolean",
"default": "false",
"description": "When enabled, rows can be reordered using drag and drop."
},
{
"name": "filters",
"type": "array",
"default": "null",
"description": "An array of FilterMetadata objects to provide external filters."
},
{
"name": "globalFilter",
"type": "any",
"default": "null",
"description": "Value of the global filter to use in filtering."
},
{
"name": "globalFilterMatchMode",
"type": "string",
"default": "contains",
"description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
},
{
"name": "filterDelay",
"type": "number",
"default": "300",
"description": "Delay in milliseconds before filtering the data."
},
{
"name": "filterLocale",
"type": "string",
"default": "undefined",
"description": "Locale to use in filtering. The default locale is the host environment's current locale."
},
{
"name": "scrollable",
"type": "boolean",
"default": "false",
"description": "When specified, enables horizontal and/or vertical scrolling."
},
{
"name": "scrollHeight",
"type": "string",
"default": "null",
"description": "Height of the scroll viewport."
},
{
"name": "virtualScroll",
"type": "boolean",
"default": "false",
"description": "Whether the data should be loaded on demand during scroll."
},
{
"name": "virtualScrollDelay",
"type": "number",
"default": "250",
"description": "Delay in virtual scroll before doing a call to lazy load."
},
{
"name": "virtualRowHeight",
"type": "number",
"default": "28",
"description": "Height of a row to use in calculations of virtual scrolling."
},
{
"name": "frozenWidth",
"type": "string",
"default": "null",
"description": "Width of the frozen part in scrollable DataTable."
},
{
"name": "frozenValue",
"type": "array",
"default": "null",
"description": "Items of the frozen part in scrollable DataTable."
},
{
"name": "csvSeparator",
"type": "string",
"default": ",",
"description": "Character to use as the csv separator."
},
{
"name": "exportFilename",
"type": "string",
"default": "download",
"description": "Name of the exported file."
},
{
"name": "rowGroupMode",
"type": "string",
"default": "null",
"description": "Defines the row grouping mode, valid values are \"subheader\" and \"rowgroup\"."
},
{
"name": "autoLayout",
"type": "boolean",
"default": "false",
"description": "Whether the cell widths scale according to their content or not."
},
{
"name": "rowClassName",
"type": "function",
"default": "null",
"description": "Function that takes the row data and returns an object in \"{'styleclass' : condition}\" format to define a class name for a particular row."
},
{
"name": "cellClassName",
"type": "function",
"default": "null",
"description": "Function that takes the cell data and returns an object in \"{'styleclass' : condition}\" format to define a class name for a particular cell."
},
{
"name": "rowGroupHeaderTemplate",
"type": "function",
"default": "null",
"description": "Function to provide the content of row group header."
},
{
"name": "rowGroupFooterTemplate",
"type": "function",
"default": "null",
"description": "Function to provide the content of row group footer."
},
{
"name": "loading",
"type": "boolean",
"default": "false",
"description": "Displays a loader to indicate data load is in progress."
},
{
"name": "loadingIcon",
"type": "string",
"default": "pi pi-spinner",
"description": "The icon to show while indicating data load is in progress."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "stateKey",
"type": "string",
"default": "null",
"description": "Unique identifier of a stateful table to use in state storage."
},
{
"name": "stateStorage",
"type": "string",
"default": "session",
"description": "Defines where a stateful table keeps its state, valid values are \"session\" for sessionStorage, \"local\" for localStorage and \"custom\"."
},
{
"name": "editMode",
"type": "string",
"default": "cell",
"description": "Defines editing mode, options are \"cell\" and \"row\"."
},
{
"name": "editingRows",
"type": "array|object",
"default": "null",
"description": "A collection of rows to represent the current editing data in row edit mode."
},
{
"name": "exportFunction",
"type": "function",
"default": "null",
"description": "A function to implement custom export. Need to return string value. event.data: Field data. event.rows: Column field."
},
{
"name": "expandableRowGroups",
"type": "boolean",
"default": "false",
"description": "Makes row groups toggleable, default is false."
},
{
"name": "rowHover",
"type": "boolean",
"default": "false",
"description": "When enabled, background of the rows change on hover.."
},
{
"name": "showGridlines",
"type": "boolean",
"default": "false",
"description": "Whether to show grid lines between cells."
},
{
"name": "stripedRows",
"type": "boolean",
"default": "false",
"description": "Whether to displays rows with alternating colors."
},
{
"name": "showSelectionElement",
"type": "function",
"default": "null",
"description": "Function that returns a boolean by passing the row data to decide if the radio or checkbox should be displayed per row."
},
{
"name": "showRowReorderElement",
"type": "function",
"default": "null",
"description": "Function that returns a boolean by passing the row data to decide if the row reorder element should be displayed per row."
},
{
"name": "isDataSelectable",
"type": "function",
"default": "null",
"description": "Function that returns a boolean to decide whether the data should be selectable."
},
{
"name": "customSaveState",
"type": "function",
"default": "null",
"description": "A function to implement custom saveState with stateStorage=\"custom\".state: the object to be stored."
},
{
"name": "customRestoreState",
"type": "function",
"default": "null",
"description": "A function to implement custom restoreState with stateStorage=\"custom\". Need to return state object."
}
],
"events": [
{
"name": "onSelectionChange",
"description": "Callback to invoke when selection changes.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Selection object"
}
]
},
{
"name": "onContextMenuSelectionChange",
"description": "Callback to invoke when a row selected with right click.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Selection object"
}
]
},
{
"name": "onRowToggle",
"description": "Callback to invoke when a row is toggled or collapsed.",
"arguments": [
{
"name": "event.data",
"type": "any[]",
"description": "Expanded rows"
}
]
},
{
"name": "onColumnResizeEnd",
"description": "Callback to invoke when a column is resized.",
"arguments": [
{
"name": "event.element",
"type": "object",
"description": "DOM element of the resized column."
},
{
"name": "event.column",
"type": "any",
"description": "Properties of the resized column."
},
{
"name": "event.delta",
"type": "number",
"description": "Change in column width."
}
]
},
{
"name": "onColumnResizerClick",
"description": "Callback to invoke when a resizer element is clicked.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "event.element",
"type": "object",
"description": "DOM element of the column."
},
{
"name": "event.column",
"type": "any",
"description": "Properties of the column."
}
]
},
{
"name": "onColumnResizerDoubleClick",
"description": "Callback to invoke when a resizer element is double clicked.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "event.element",
"type": "object",
"description": "DOM element of the column."
},
{
"name": "event.column",
"type": "any",
"description": "Properties of the column."
}
]
},
{
"name": "onSort",
"description": "Callback to invoke on sort.",
"arguments": [
{
"name": "event.sortField",
"type": "string",
"description": "Field to sort against."
},
{
"name": "event.sortOrder",
"type": "any",
"description": "Sort order as integer."
},
{
"name": "event.multiSortMeta",
"type": "any",
"description": "MultiSort metadata."
}
]
},
{
"name": "onPage",
"description": "Callback to invoke on pagination.",
"arguments": [
{
"name": "event.sortField",
"type": "number",
"description": "Index of the first row."
},
{
"name": "event.rows",
"type": "number",
"description": "Rows per page."
}
]
},
{
"name": "onFilter",
"description": "Callback to invoke on filtering.",
"arguments": [
{
"name": "event.filters",
"type": "any",
"description": "Collection of active filters."
}
]
},
{
"name": "onVirtualScroll",
"description": "Callback to invoke during virtual scrolling.",
"arguments": [
{
"name": "event.first",
"type": "number",
"description": "Index of the first row."
}
]
},
{
"name": "onAllRowsSelect",
"description": "Callback to invoke when all rows are selected using the header checkbox.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "event.data",
"type": "any",
"description": "Selected rows data."
},
{
"name": "event.type",
"type": "any",
"description": "Type of the selection, valid value is \"all\"."
}
]
},
{
"name": "onAllRowsUnselect",
"description": "Callback to invoke when all rows are unselected using the header checkbox.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "event.data",
"type": "any",
"description": "Unselected rows data."
},
{
"name": "event.type",
"type": "any",
"description": "Type of the selection, valid value is \"all\"."
}
]
},
{
"name": "onRowClick",
"description": "Callback to invoke when a row is clicked.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "event.data",
"type": "any",
"description": "Clicked row data"
},
{
"name": "event.index",
"type": "number",
"description": "Clicked row data index"
}
]
},
{
"name": "onRowDoubleClick",
"description": "Callback to invoke when a row is double clicked.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "event.data",
"type": "any",
"description": "Clicked row data"
},
{
"name": "event.index",
"type": "number",
"description": "Clicked row data index"
}
]
},
{
"name": "onRowMouseEnter",
"description": "Callback to invoke when a row is mouse hovered.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "event.data",
"type": "any",
"description": "Clicked row data"
},
{
"name": "event.index",
"type": "number",
"description": "Clicked row data index"
}
]
},
{
"name": "onRowMouseLeave",
"description": "Callback to invoke when a row is moused out.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "event.data",
"type": "any",
"description": "Clicked row data"
},
{
"name": "event.index",
"type": "number",
"description": "Clicked row data index"
}
]
},
{
"name": "onRowSelect",
"description": "Callback to invoke when a row is unselected.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "event.data",
"type": "any",
"description": "Selected row data."
},
{
"name": "event.type",
"type": "any",
"description": "Type of the selection, valid values are \"row\", \"radio\" or \"checkbox\"."
}
]
},
{
"name": "onRowExpand",
"description": "Callback to invoke when a row is expanded.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "event.data",
"type": "any",
"description": "Expanded row data."
}
]
},
{
"name": "onRowCollapse",
"description": "Callback to invoke when a row is collapsed.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "event.data",
"type": "any",
"description": "Collapsed row data."
}
]
},
{
"name": "onContextMenu",
"description": "Callback to invoke when a context menu is clicked.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Original event instance."
},
{
"name": "event.data",
"type": "any",
"description": "Collapsed row data."
}
]
},
{
"name": "onColReorder",
"description": "Callback to invoke when a column is reordered.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "event.dragIndex",
"type": "number",
"description": "Index of the dragged column."
},
{
"name": "event.dropIndex",
"type": "number",
"description": "Index of the dropped column."
},
{
"name": "event.columns",
"type": "object",
"description": "Columns array after reorder."
}
]
},
{
"name": "onRowReOrder",
"description": "Callback to invoke when a row is reordered.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event."
},
{
"name": "event.value",
"type": "any",
"description": "New value after reorder "
},
{
"name": "event.dragIndex",
"type": "number",
"description": "Index of the dragged row."
},
{
"name": "event.dropIndex",
"type": "number",
"description": "Index of the drop location."
}
]
},
{
"name": "onValueChange",
"description": "Callback to invoke after filtering and sorting to pass the rendered value.",
"arguments": [
{
"name": "value",
"type": "any",
"description": "Browser event."
}
]
},
{
"name": "rowEditValidator",
"description": "Callback to invoke to validate the editing row when the save icon is clicked on row editing mode.",
"arguments": [
{
"name": "data",
"type": "any",
"description": "Editing row data"
}
]
},
{
"name": "onRowEditInit",
"description": "Callback to invoke when the editing icon is clicked on row editing mode.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.data",
"type": "any",
"description": "Editing row data"
}
]
},
{
"name": "onRowEditSave",
"description": "Callback to invoke when the save icon is clicked on row editing mode.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.data",
"type": "any",
"description": "Editing row data"
}
]
},
{
"name": "onRowEditCancel",
"description": "Callback to invoke when the cancel icon is clicked on row editing mode.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.data",
"type": "any",
"description": "Editing row data"
},
{
"name": "event.index",
"type": "number",
"description": "Editing row data index"
}
]
},
{
"name": "onRowEditChange",
"description": "Callback to invoke when the row editor is programmatically shown/hidden on row editing mode.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.data",
"type": "any",
"description": "Editing rows data"
},
{
"name": "event.index",
"type": "number",
"description": "Current editing row data index"
}
]
},
{
"name": "onStateSave",
"description": "Callback to invoke table state is saved.",
"arguments": [
{
"name": "state",
"type": "object",
"description": "Table state"
}
]
},
{
"name": "onStateRestore",
"description": "Callback to invoke table state is restored.",
"arguments": [
{
"name": "state",
"type": "object",
"description": "Table state"
}
]
}
]
},
{
"name": "DataView",
"source": {
"module": "PrimeReact",
"symbol": "DataView"
},
"description": "DataView displays data in grid or list layout with pagination and sorting features.",
"doc-url": "https://primefaces.org/primereact/showcase/#/dataview",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "header",
"type": "JSX or string",
"default": "null",
"description": "Header content of the component."
},
{
"name": "footer",
"type": "JSX or string",
"default": "null",
"description": "Footer content of the component."
},
{
"name": "value",
"type": "array",
"default": "null",
"description": "An array of objects to display."
},
{
"name": "layout",
"type": "string",
"default": "list",
"description": "Layout of the items, valid values are \"list\" and \"grid\"."
},
{
"name": "dataKey",
"type": "string",
"default": "null",
"description": "A property to uniquely identify an item."
},
{
"name": "rows",
"type": "number",
"default": "null",
"description": "Number of rows to display per page."
},
{
"name": "first",
"type": "number",
"default": "0",
"description": "Index of the first record to render."
},
{
"name": "totalRecords",
"type": "number",
"default": "null",
"description": "Number of total records, defaults to length of value when not defined."
},
{
"name": "paginator",
"type": "boolean",
"default": "false",
"description": "When specified as true, enables the pagination."
},
{
"name": "paginatorPosition",
"type": "string",
"default": "bottom",
"description": "Position of the paginator, options are \"top\",\"bottom\" or \"both\"."
},
{
"name": "alwaysShowPaginator",
"type": "boolean",
"default": "true",
"description": "Whether to show it even there is only one page."
},
{
"name": "paginatorClassName",
"type": "string",
"default": "null",
"description": "Style class of the paginator element."
},
{
"name": "paginatorTemplate",
"type": "string|object",
"default": "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",
"description": "Template of the paginator. For details, refer to the template section of the paginator documentation for further options."
},
{
"name": "paginatorLeft",
"type": "Element",
"default": "null",
"description": "Content for the left side of the paginator."
},
{
"name": "paginatorRight",
"type": "Element",
"default": "null",
"description": "Content for the right side of the paginator."
},
{
"name": "pageLinkSize",
"type": "number",
"default": "5",
"description": "Number of page links to display."
},
{
"name": "rowsPerPageOptions",
"type": "array",
"default": "null",
"description": "Array of integer values to display inside rows per page dropdown."
},
{
"name": "currentPageReportTemplate",
"type": "string",
"default": "({currentPage} of {totalPages})",
"description": "Template of the current page report element."
},
{
"name": "paginatorDropdownAppendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "emptyMessage",
"type": "string",
"default": "No records found.",
"description": "Text to display when there is no data."
},
{
"name": "sortField",
"type": "string",
"default": "null",
"description": "Name of the field to sort data by default."
},
{
"name": "sortOrder",
"type": "number",
"default": "null",
"description": "Order to sort the data by default."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "lazy",
"type": "boolean",
"default": "false",
"description": "Defines if data is loaded and interacted with in lazy manner."
},
{
"name": "itemTemplate",
"type": "function",
"default": "null",
"description": "Function that gets the option along with the layout mode and returns the content."
}
],
"events": [
{
"name": "onLoad",
"description": "Callback to invoke when layout mode is changed.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "layout mode e.g. \"list\" or \"grid\""
}
]
}
]
},
{
"name": "DataViewLayoutOptions",
"source": {
"module": "PrimeReact",
"symbol": "DataViewLayoutOptions"
},
"description": "DataViewLayoutOptions is a helper component to choose between layout modes. This component is used in controlled manner to manage the state of layout orientation.",
"doc-url": "https://primefaces.org/primereact/showcase/#/dataview",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "layout",
"type": "string",
"default": "list",
"description": "Layout of the items, valid values are \"list\" and \"grid\"."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
}
],
"events": []
},
{
"name": "DeferredContent",
"source": {
"module": "PrimeReact",
"symbol": "DeferredContent"
},
"description": "DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.",
"doc-url": "https://primefaces.org/primereact/showcase/#/deferredcontent",
"props": [],
"events": [
{
"name": "onLoad",
"description": "Callback to invoke when deferred content is loaded.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "Dialog",
"source": {
"module": "PrimeReact",
"symbol": "Dialog"
},
"description": "Dialog is a container to display content in an overlay window.",
"doc-url": "https://primefaces.org/primereact/showcase/#/dialog",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "header",
"type": "any",
"default": "null",
"description": "Title content of the dialog."
},
{
"name": "footer",
"type": "any",
"default": "null",
"description": "Footer content of the dialog."
},
{
"name": "visible",
"type": "boolean",
"default": "false",
"description": "Specifies the visibility of the dialog."
},
{
"name": "position",
"type": "string",
"default": "center",
"description": "Position of the dialog, options are \"center\", \"top\", \"bottom\", \"left\", \"right\", \"top-left\", \"top-right\", \"bottom-left\" or \"bottom-right\"."
},
{
"name": "modal",
"type": "boolean",
"default": "true",
"description": "Defines if background should be blocked when dialog is displayed."
},
{
"name": "resizable",
"type": "boolean",
"default": "true",
"description": "Enables resizing of the content."
},
{
"name": "draggable",
"type": "boolean",
"default": "true",
"description": "Enables dragging to change the position using header."
},
{
"name": "minX",
"type": "number",
"default": "0",
"description": "Minimum value for the left coordinate of dialog in dragging."
},
{
"name": "minY",
"type": "number",
"default": "0",
"description": "Minimum value for the top coordinate of dialog in dragging."
},
{
"name": "keepInViewport",
"type": "boolean",
"default": "true",
"description": "Keeps dialog in the viewport."
},
{
"name": "headerStyle",
"type": "object",
"default": "null",
"description": "Style of the header section."
},
{
"name": "headerClassName",
"type": "string",
"default": "null",
"description": "Style class of the header section."
},
{
"name": "contentStyle",
"type": "object",
"default": "null",
"description": "Style of the content section."
},
{
"name": "contentClassName",
"type": "string",
"default": "null",
"description": "Style class of the content section."
},
{
"name": "closeOnEscape",
"type": "boolean",
"default": "true",
"description": "Specifies if pressing escape key should hide the dialog."
},
{
"name": "dismissableMask",
"type": "boolean",
"default": "false",
"description": "Specifies if clicking the modal background should hide the dialog."
},
{
"name": "rtl",
"type": "boolean",
"default": "false",
"description": "When enabled dialog is displayed in RTL direction."
},
{
"name": "closable",
"type": "boolean",
"default": "true",
"description": "Adds a close icon to the header to hide the dialog."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "maskClassName",
"type": "string",
"default": "null",
"description": "Style class of the mask."
},
{
"name": "showHeader",
"type": "boolean",
"default": "true",
"description": "Whether to show the header or not."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "baseZIndex",
"type": "number",
"default": "0",
"description": "Base zIndex value to use in layering."
},
{
"name": "maximizable",
"type": "boolean",
"default": "false",
"description": "Whether the dialog can be displayed full screen."
},
{
"name": "blockScroll",
"type": "boolean",
"default": "false",
"description": "Whether background scroll should be blocked when dialog is visible."
},
{
"name": "icons",
"type": "any",
"default": "null",
"description": "Custom icons template for the header."
},
{
"name": "ariaCloseIconLabel",
"type": "string",
"default": "null",
"description": "Defines a string that labels the close icon."
},
{
"name": "focusOnShow",
"type": "boolean",
"default": "true",
"description": "When enabled, first button receives focus on show."
},
{
"name": "maximized",
"type": "boolean",
"default": "false",
"description": "When enabled, the dialog is initially displayed full screen."
},
{
"name": "breakpoints",
"type": "object",
"default": "null",
"description": "Object literal to define widths per screen size."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onHide",
"description": "Callback to invoke when dialog is hidden (Required).",
"arguments": []
},
{
"name": "onShow",
"description": "Callback to invoke when dialog is showed.",
"arguments": []
},
{
"name": "onMaximize",
"description": "Callback to invoke when toggle maximize icon is clicked.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.maximized",
"type": "any",
"description": "Whether to show the dialog or not on fullscreen."
}
]
},
{
"name": "onDragStart",
"description": "Callback to invoke when dialog dragging is initiated.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onDrag",
"description": "Callback to invoke when dragging dialog.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onDragEnd",
"description": "Callback to invoke when dialog dragging is completed.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onDragEnd",
"description": "Callback to invoke when dialog dragging is completed.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onResizeStart",
"description": "Callback to invoke when dialog resizing is initiated.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onResize",
"description": "Callback to invoke while resizing dialog.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onResizeEnd",
"description": "Callback to invoke when dialog resizing is completed.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onMaskClick",
"description": "Callback to invoke when the mask is clicked.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onClick",
"description": "Callback to invoke when dialog is clicked.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "Divider",
"source": {
"module": "PrimeReact",
"symbol": "Divider"
},
"description": "Divider is used to separate contents.",
"doc-url": "https://primefaces.org/primereact/showcase/#/divider",
"props": [
{
"name": "align",
"type": "string",
"default": "null",
"description": "Alignment of the content, options are \"left\", \"center\", \"right\" for horizontal layout and \"top\", \"center\", \"bottom\" for vertical."
},
{
"name": "layout",
"type": "string",
"default": "horizontal",
"description": "Specifies the orientation, valid values are \"horizontal\" and \"vertical\"."
},
{
"name": "type",
"type": "String",
"default": "solid",
"description": "Border style type, default is \"solid\" and other options are \"dashed\" and \"dotted\"."
}
],
"events": []
},
{
"name": "Dock",
"source": {
"module": "PrimeReact",
"symbol": "Dock"
},
"description": "Dock is a navigation component consisting of menuitems.",
"doc-url": "https://primefaces.org/primereact/showcase/#/dock",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "model",
"type": "object",
"default": "null",
"description": "MenuModel instance to define the action items."
},
{
"name": "position",
"type": "string",
"default": "bottom",
"description": "Position of element. Valid values are 'bottom', 'top', 'left' and 'right'."
}
],
"events": []
},
{
"name": "Dropdown",
"source": {
"module": "PrimeReact",
"symbol": "Dropdown"
},
"description": "Dropdown is used to select an item from a collection of options.",
"doc-url": "https://primefaces.org/primereact/showcase/#/dropdown",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "name",
"type": "string",
"default": "null",
"description": "Name of the input element."
},
{
"name": "value",
"type": "any",
"default": "null",
"description": "Value of the component."
},
{
"name": "options",
"type": "array",
"default": "null",
"description": "An array of selectitems to display as the available options."
},
{
"name": "optionLabel",
"type": "string",
"default": "null",
"description": "Name of the label field of an option when arbitrary objects are used as options instead of SelectItems."
},
{
"name": "optionValue",
"type": "string",
"default": "null",
"description": "Name of the value field of an option when arbitrary objects are used as options instead of SelectItems."
},
{
"name": "optionDisabled",
"type": "function | string",
"default": "null",
"description": "Property name or getter function to use as the disabled flag of an option, defaults to false when not defined."
},
{
"name": "optionGroupLabel",
"type": "string",
"default": "null",
"description": "Property name or getter function to use as the label of an option group."
},
{
"name": "optionGroupChildren",
"type": "string",
"default": "null",
"description": "Property name or getter function that refers to the children options of option group."
},
{
"name": "valueTemplate",
"type": "any",
"default": "null",
"description": "The template of selected item."
},
{
"name": "itemTemplate",
"type": "any",
"default": "null",
"description": "The template of items."
},
{
"name": "filterTemplate",
"type": "any",
"default": "null",
"description": "The template of filter element."
},
{
"name": "optionGroupTemplate",
"type": "any",
"default": "null",
"description": "Template of an option group item."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "scrollHeight",
"type": "string",
"default": "200px",
"description": "Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value."
},
{
"name": "filter",
"type": "boolean",
"default": "false",
"description": "When specified, displays an input field to filter the items on keyup."
},
{
"name": "filterBy",
"type": "string",
"default": "label",
"description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against."
},
{
"name": "filterMatchMode",
"type": "string",
"default": "contains",
"description": "Defines how the items are filtered, valid values are \"contains\" (default), \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
},
{
"name": "filterPlaceholder",
"type": "string",
"default": "null",
"description": "Placeholder text to show when filter input is empty."
},
{
"name": "filterLocale",
"type": "string",
"default": "undefined",
"description": "Locale to use in filtering. The default locale is the host environment's current locale."
},
{
"name": "emptyMessage",
"type": "string",
"default": "No results found",
"description": "Text to display when there are no options available."
},
{
"name": "emptyFilterMessage",
"type": "any",
"default": "No results found",
"description": "Template to display when filtering does not return any results."
},
{
"name": "resetFilterOnHide",
"type": "boolean",
"default": "false",
"description": "Clears the filter value when hiding the dropdown."
},
{
"name": "editable",
"type": "boolean",
"default": "false",
"description": "When present, custom value instead of predefined options can be entered using the editable input field."
},
{
"name": "placeholder",
"type": "string",
"default": "null",
"description": "Default text to display when no option is selected."
},
{
"name": "required",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that an input field must be filled out before submitting the form."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should be disabled."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "autoFocus",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should automatically get focus on load."
},
{
"name": "filterInputAutoFocus",
"type": "boolean",
"default": "true",
"description": "When the panel is opened, it specifies that the filter input should focus automatically."
},
{
"name": "showFilterClear",
"type": "boolean",
"default": "false",
"description": "When enabled, a clear icon is displayed to clear the filtered value."
},
{
"name": "panelClassName",
"type": "string",
"default": "null",
"description": "Style class of the overlay panel element."
},
{
"name": "panelStyle",
"type": "object",
"default": "null",
"description": "Inline style of the overlay panel element."
},
{
"name": "dataKey",
"type": "string",
"default": "null",
"description": "A property to uniquely match the value in options for better performance."
},
{
"name": "inputId",
"type": "string",
"default": "null",
"description": "Identifier of the focusable input."
},
{
"name": "showClear",
"type": "boolean",
"default": "false",
"description": "When enabled, a clear icon is displayed to clear the value."
},
{
"name": "maxLength",
"type": "number",
"default": "null",
"description": "Maximum number of characters to be typed on an editable input."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
},
{
"name": "ariaLabel",
"type": "string",
"default": "false",
"description": "Used to define a string that labels the component."
},
{
"name": "ariaLabelledBy",
"type": "string",
"default": "null",
"description": "Contains the element IDs of labels."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
},
{
"name": "dropdownIcon",
"type": "string",
"default": "pi pi-chevron-down",
"description": "Icon class of the dropdown icon."
},
{
"name": "showOnFocus",
"type": "boolean",
"default": "false",
"description": "When enabled, overlay panel will be visible with input focus."
},
{
"name": "virtualScrollerOptions",
"type": "object",
"default": "null",
"description": "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke on value change",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Original event"
},
{
"name": "event.value",
"type": "any",
"description": "Value of the checkbox"
}
]
},
{
"name": "onMouseDown",
"description": "Callback to invoke to when a mouse button is pressed",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onContextMenu",
"description": "Callback to invoke on right-click",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onFocus",
"description": "Callback to invoke when the element receives focus.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onBlur",
"description": "Callback to invoke when the element loses focus.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onFilter",
"description": "Callback to invoke when the value is filtered.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Original event"
},
{
"name": "event.filter",
"type": "any",
"description": "Value of the filter input"
}
]
}
]
},
{
"name": "Editor",
"source": {
"module": "PrimeReact",
"symbol": "Editor"
},
"description": "Editor is rich text editor component based on Quill.",
"doc-url": "https://primefaces.org/primereact/showcase/#/editor",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "string",
"default": "null",
"description": "Value of the content."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the container."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the container."
},
{
"name": "placeholder",
"type": "string",
"default": "null",
"description": "Placeholder text to show when editor is empty."
},
{
"name": "readOnly",
"type": "boolean",
"default": "false",
"description": "Whether to instantiate the editor to read-only mode."
},
{
"name": "modules",
"type": "object",
"default": "null",
"description": "Modules configuration, see here for available options."
},
{
"name": "formats",
"type": "string[]",
"default": "null",
"description": "Whitelist of formats to display, see here for available options."
},
{
"name": "headerTemplate",
"type": "any",
"default": "null",
"description": "Style and modules of the toolbar."
},
{
"name": "maxLength",
"type": "number",
"default": "null",
"description": "Maximum number of characters the editor will accept."
}
],
"events": [
{
"name": "onTextChange",
"description": "Callback to invoke when text of editor changes.",
"arguments": [
{
"name": "event.delta",
"type": "any",
"description": "Browser event"
},
{
"name": "event.source",
"type": "string",
"description": "Source of change. Will be either \"user\" or \"api\"."
},
{
"name": "event.htmlValue",
"type": "string|null",
"description": "Current value as html."
},
{
"name": "event.textValue",
"type": "string",
"description": "Current value as text."
}
]
},
{
"name": "onSelectionChange",
"description": "Callback to invoke when selected text of editor changes.",
"arguments": [
{
"name": "event.range",
"type": "any",
"description": "Object with index and length keys indicating where the selection exists."
},
{
"name": "event.oldRange",
"type": "any",
"description": "Object with index and length keys indicating where the previous selection was."
},
{
"name": "event.source",
"type": "string",
"description": "Source of change. Will be either \"user\" or \"api\"."
}
]
},
{
"name": "onLoad",
"description": "Callback to invoke when the quill modules are loaded.",
"arguments": [
{
"name": "quill",
"type": "any",
"description": "Quill instance"
}
]
}
]
},
{
"name": "Fieldset",
"source": {
"module": "PrimeReact",
"symbol": "Fieldset"
},
"description": "Fieldset is a grouping component with a content toggle feature.",
"doc-url": "https://primefaces.org/primereact/showcase/#/fieldset",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "legend",
"type": "string",
"default": "null",
"description": "Header text of the fieldset."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "toggleable",
"type": "boolean",
"default": "false",
"description": "When specified, content can toggled by clicking the legend."
},
{
"name": "collapsed",
"type": "boolean",
"default": "false",
"description": "Defines the default visibility state of the content."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onCollapse",
"description": "Callback to invoke when an active tab is collapsed by clicking on the header.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onExpand",
"description": "Callback to invoke when a tab gets expanded.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onToggle",
"description": "Callback to invoke when a tab gets toggled.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "boolean",
"description": " Collapsed state as a boolean"
}
]
},
{
"name": "onClick",
"description": "Callback to invoke when fieldset is clicked.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "FileUpload",
"source": {
"module": "PrimeReact",
"symbol": "FileUpload"
},
"description": "FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.",
"doc-url": "https://primefaces.org/primereact/showcase/#/fileupload",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "name",
"type": "string",
"default": "null",
"description": "Name of the request parameter to identify the files at backend."
},
{
"name": "url",
"type": "string",
"default": "null",
"description": "Remote url to upload the files."
},
{
"name": "mode",
"type": "string",
"default": "advanced",
"description": "Defines the UI of the component, possible values are \"advanced\" and \"basic\"."
},
{
"name": "multiple",
"type": "boolean",
"default": "false",
"description": "Used to select multiple files at once from file dialog."
},
{
"name": "accept",
"type": "string",
"default": "false",
"description": "Pattern to restrict the allowed file types such as \"image/*\"."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "Disables the upload functionality."
},
{
"name": "auto",
"type": "boolean",
"default": "false",
"description": "When enabled, upload begins automatically after selection is completed."
},
{
"name": "maxFileSize",
"type": "number",
"default": "null",
"description": "Maximum file size allowed in bytes."
},
{
"name": "invalidFileSizeMessageSummary",
"type": "string",
"default": "\"{0}: Invalid file size, \"",
"description": "Summary message of the invalid fize size."
},
{
"name": "invalidFileSizeMessageDetail",
"type": "string",
"default": "\"maximum upload size is {0}.\"",
"description": "Detail message of the invalid fize size."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "withCredentials",
"type": "boolean",
"default": "false",
"description": "Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates."
},
{
"name": "previewWidth",
"type": "number",
"default": "50",
"description": "Width of the image thumbnail in pixels."
},
{
"name": "chooseLabel",
"type": "string",
"default": "null",
"description": "Label of the choose button. Defaults to global value in Locale configuration."
},
{
"name": "uploadLabel",
"type": "string",
"default": "null",
"description": "Label of the upload button. Defaults to global value in Locale configuration."
},
{
"name": "cancelLabel",
"type": "string",
"default": "null",
"description": "Label of the cancel button. Defaults to global value in Locale configuration."
},
{
"name": "chooseOptions",
"type": "object (OptionsType)",
"default": "null",
"description": "Options used to customize the choose button. These options have \"label\", \"icon\", \"className\" and \"style\" properties."
},
{
"name": "uploadOptions",
"type": "object (OptionsType)",
"default": "null",
"description": "Options used to customize the upload button. These options have \"label\", \"icon\", \"className\" and \"style\" properties."
},
{
"name": "cancelOptions",
"type": "object (OptionsType)",
"default": "null",
"description": "Options used to customize the cancel button. These options have \"label\", \"icon\", \"className\" and \"style\" properties."
},
{
"name": "customUpload",
"type": "boolean",
"default": "false",
"description": "Whether to use the default upload or a manual implementation defined in uploadHandler callback."
},
{
"name": "emptyTemplate",
"type": "any",
"default": "null",
"description": "The template of empty content in the container."
},
{
"name": "progressBarTemplate",
"type": "any",
"default": "null",
"description": "The template of progressBar content in the container."
},
{
"name": "itemTemplate",
"type": "any",
"default": "null",
"description": "The template of each item content in the container."
},
{
"name": "headerTemplate",
"type": "any",
"default": "null",
"description": "The template of the header."
},
{
"name": "headerStyle",
"type": "object",
"default": "null",
"description": "Inline style of the header."
},
{
"name": "headerClassName",
"type": "string",
"default": "null",
"description": "Style class of the header."
},
{
"name": "contentStyle",
"type": "object",
"default": "null",
"description": "Inline style of the content."
},
{
"name": "contentClassName",
"type": "string",
"default": "null",
"description": "Style class of the content."
}
],
"events": [
{
"name": "onBeforeUpload",
"description": "Callback to invoke before file upload begins to customize the request such as post parameters before the files.",
"arguments": [
{
"name": "event.xhr",
"type": "object",
"description": "XmlHttpRequest instance."
},
{
"name": "event.formData",
"type": "any",
"description": "FormData object."
}
]
},
{
"name": "onBeforeSend",
"description": "Callback to invoke before file send begins to customize the request such as adding headers.",
"arguments": [
{
"name": "event.xhr",
"type": "object",
"description": "XmlHttpRequest instance."
},
{
"name": "event.formData",
"type": "any",
"description": "FormData object."
}
]
},
{
"name": "onBeforeDrop",
"description": "Callback to invoke before files dropped. Return false from callback to prevent drop.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Original browser event."
}
]
},
{
"name": "onBeforeSelect",
"description": "Callback to invoke before files are selected. Return false from callback to prevent selection.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Original browser event."
},
{
"name": "event.target.files",
"type": "any",
"description": "List of selected files."
}
]
},
{
"name": "onUpload",
"description": "Callback to invoke when file upload is complete.",
"arguments": [
{
"name": "event.xhr",
"type": "object",
"description": "XmlHttpRequest instance."
},
{
"name": "event.files",
"type": "any",
"description": "Uploaded files."
}
]
},
{
"name": "onError",
"description": "Callback to invoke if file upload fails.",
"arguments": [
{
"name": "event.xhr",
"type": "object",
"description": "XmlHttpRequest instance."
},
{
"name": "event.files",
"type": "any",
"description": "Files that are not uploaded."
}
]
},
{
"name": "onClear",
"description": "Callback to invoke when files in queue are removed without uploading.",
"arguments": []
},
{
"name": "onSelect",
"description": "Callback to invoke when files are selected.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Original browser event."
},
{
"name": "event.files",
"type": "any",
"description": "List of selected files."
}
]
},
{
"name": "onProgress",
"description": "Callback to invoke when files are selected.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Original browser event."
},
{
"name": "event.progress",
"type": "any",
"description": "Callback to invoke when files are being uploaded."
}
]
},
{
"name": "onValidationFail",
"description": "Callback to invoke when a validation file fails.",
"arguments": [
{
"name": "file",
"type": "object",
"description": "Invalid file."
}
]
},
{
"name": "uploadHandler",
"description": "Callback to invoke in custom upload mode to upload the files manually.",
"arguments": [
{
"name": "event.files",
"type": "any",
"description": "List of selected files."
},
{
"name": "event.options",
"type": "any",
"description": "Handler options."
}
]
},
{
"name": "onRemove",
"description": "Callback to invoke when a file is removed without uploading using clear button of a file.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Original browser event."
},
{
"name": "event.file",
"type": "object",
"description": "Selected file."
}
]
}
]
},
{
"name": "Galleria",
"source": {
"module": "PrimeReact",
"symbol": "Galleria"
},
"description": "Galleria is a content gallery component.",
"doc-url": "https://primefaces.org/primereact/showcase/#/galleria",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "array",
"default": "null",
"description": "An array of objects to display."
},
{
"name": "activeIndex",
"type": "number",
"default": "0",
"description": "Index of the first item."
},
{
"name": "header",
"type": "any",
"default": "null",
"description": "Label of header."
},
{
"name": "footer",
"type": "any",
"default": "null",
"description": "Label of footer."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "item",
"type": "function",
"default": "null",
"description": "Function that gets an item in the value and returns the content for preview item."
},
{
"name": "thumbnail",
"type": "function",
"default": "null",
"description": "Function that gets an item in the value and returns the content for thumbnail item."
},
{
"name": "indicator",
"type": "function",
"default": "null",
"description": "Function that gets an item in the value and returns the content for indicator item."
},
{
"name": "caption",
"type": "function",
"default": "null",
"description": "Function that gets an item in the value and returns the content for caption item."
},
{
"name": "circular",
"type": "boolean",
"default": "false",
"description": "Defines if scrolling would be infinite."
},
{
"name": "autoPlay",
"type": "boolean",
"default": "false",
"description": "Items are displayed with a slideshow in autoPlay mode."
},
{
"name": "transitionInterval",
"type": "number",
"default": "4000",
"description": "Time in milliseconds to scroll items."
},
{
"name": "numVisible",
"type": "number",
"default": "3",
"description": "Number of items per page."
},
{
"name": "responsiveOptions",
"type": "any",
"default": "null",
"description": "An array of options for responsive design."
},
{
"name": "thumbnailsPosition",
"type": "string",
"default": "bottom",
"description": "Position of thumbnails. Valid values are \"bottom\", \"top\", \"left\" and \"right\"."
},
{
"name": "indicatorsPosition",
"type": "string",
"default": "bottom",
"description": "Position of indicators. Valid values are \"bottom\", \"top\", \"left\" and \"right\"."
},
{
"name": "verticalThumbnailViewPortHeight",
"type": "string",
"default": "300px",
"description": "Height of the viewport in vertical thumbnail."
},
{
"name": "showItemNavigators",
"type": "boolean",
"default": "false",
"description": "Whether to display navigation buttons in item container."
},
{
"name": "showThumbnailNavigators",
"type": "boolean",
"default": "true",
"description": "Whether to display navigation buttons in thumbnail container."
},
{
"name": "showThumbnails",
"type": "boolean",
"default": "true",
"description": "Whether to display thumbnail container."
},
{
"name": "showIndicators",
"type": "boolean",
"default": "false",
"description": "Whether to display indicator container."
},
{
"name": "showIndicatorsOnItem",
"type": "boolean",
"default": "false",
"description": "When enabled, indicator container is displayed on item container."
},
{
"name": "showItemNavigatorsOnHover",
"type": "boolean",
"default": "false",
"description": "Whether to display navigation buttons on item container's hover."
},
{
"name": "changeItemOnIndicatorHover",
"type": "boolean",
"default": "false",
"description": "When enabled, item is changed on indicator item's hover."
},
{
"name": "fullScreen",
"type": "boolean",
"default": "false",
"description": "Whether to display the component on fullscreen."
},
{
"name": "baseZIndex",
"type": "number",
"default": "0",
"description": "Base zIndex value to use in layering."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onItemChange",
"description": "Callback to invoke after changing item.",
"arguments": [
{
"name": "event.index",
"type": "number",
"description": "index of the new item."
}
]
},
{
"name": "onShow",
"description": "Callback to invoke when modal becomes visible.",
"arguments": []
},
{
"name": "onHide",
"description": "Callback to invoke when modal becomes hidden.",
"arguments": []
}
]
},
{
"name": "Image",
"source": {
"module": "PrimeReact",
"symbol": "Image"
},
"description": "Displays an image with preview and transformation options.",
"doc-url": "https://primefaces.org/primereact/showcase/#/image",
"props": [
{
"name": "preview",
"type": "boolean",
"default": "false",
"description": "Controls the preview functionality."
},
{
"name": "src",
"type": "string",
"default": "null",
"description": "Specifies the path to the image."
},
{
"name": "zoomSrc",
"type": "string",
"default": "null",
"description": "Zoomed image that may be different than \"src\" image."
},
{
"name": "downloadable",
"type": "boolean",
"default": "false",
"description": "Adds a download button to the preview control menu."
},
{
"name": "imageStyle",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the image element.."
},
{
"name": "imageClassName",
"type": "string",
"default": "null",
"description": "Style class of the image element."
}
],
"events": [
{
"name": "onShow",
"description": "Triggered when the preview overlay is shown.",
"arguments": []
},
{
"name": "onHide",
"description": "Triggered when the preview overlay is hidden.",
"arguments": []
},
{
"name": "onError",
"description": "Triggered when image has an error loading.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "Inplace",
"source": {
"module": "PrimeReact",
"symbol": "Inplace"
},
"description": "Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.",
"doc-url": "https://primefaces.org/primereact/showcase/#/inplace",
"props": [
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "active",
"type": "boolean",
"default": "false",
"description": "Whether the content is displayed or not."
},
{
"name": "closable",
"type": "boolean",
"default": "false",
"description": "Displays a button to switch back to display mode."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the element should be disabled."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
}
],
"events": [
{
"name": "onOpen",
"description": "Callback to invoke when inplace is opened.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onClose",
"description": "Callback to invoke when inplace is closed.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onToggle",
"description": "Callback to invoke when inplace is opened or closed.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "boolean",
"description": "active state as a boolean"
}
]
}
]
},
{
"name": "InputMask",
"source": {
"module": "PrimeReact",
"symbol": "InputMask"
},
"description": "InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.",
"doc-url": "https://primefaces.org/primereact/showcase/#/inputmask",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "string",
"default": "null",
"description": "Value of the component."
},
{
"name": "type",
"type": "string",
"default": "text",
"description": "HTML5 input type"
},
{
"name": "mask",
"type": "string",
"default": "null",
"description": "Mask pattern."
},
{
"name": "slotChar",
"type": "string",
"default": "-",
"description": "Placeholder character in mask, default is underscore."
},
{
"name": "autoClear",
"type": "boolean",
"default": "true",
"description": "Clears the incomplete value on blur."
},
{
"name": "unmask",
"type": "boolean",
"default": "false",
"description": "Defines if model sets the raw unmasked value to bound value or the formatted mask value."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "placeholder",
"type": "string",
"default": "null",
"description": "Advisory information to display on input."
},
{
"name": "size",
"type": "number",
"default": "null",
"description": "Size of the input field."
},
{
"name": "maxLength",
"type": "number",
"default": "null",
"description": "Maximum number of character allows in the input field."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Specifies tab order of the element."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the element value cannot be altered."
},
{
"name": "readOnly",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that an input field is read-only."
},
{
"name": "name",
"type": "string",
"default": "null",
"description": "Name of the input field."
},
{
"name": "required",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the element must be filled out before submitting the form."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
}
],
"events": [
{
"name": "onFocus",
"description": "Callback to invoke when input receives focus.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onBlur",
"description": "Callback to invoke when input loses focus.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onComplete",
"description": "Callback to invoke on when user completes the mask pattern.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "string",
"description": "New value of the component"
}
]
},
{
"name": "onChange",
"description": "Callback to invoke on value change.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "string",
"description": "New value of the component"
}
]
}
]
},
{
"name": "InputNumber",
"source": {
"module": "PrimeReact",
"symbol": "InputNumber"
},
"description": "InputNumber is an input component to provide numerical input.",
"doc-url": "https://primefaces.org/primereact/showcase/#/inputnumber",
"props": [
{
"name": "value",
"type": "number",
"default": "null",
"description": "Value of the component."
},
{
"name": "format",
"type": "boolean",
"default": "true",
"description": "Whether to format the value."
},
{
"name": "showButtons",
"type": "boolean",
"default": "false",
"description": "Displays spinner buttons."
},
{
"name": "buttonLayout",
"type": "string",
"default": "stacked",
"description": "Layout of the buttons, valid values are \"stacked\" (default), \"horizontal\" and \"vertical\"."
},
{
"name": "incrementButtonClassName",
"type": "string",
"default": "null",
"description": "Style class of the increment button."
},
{
"name": "decrementButtonClassName",
"type": "string",
"default": "null",
"description": "Style class of the decrement button."
},
{
"name": "incrementButtonIcon",
"type": "string",
"default": "pi pi-caret-up",
"description": "Style class of the increment button."
},
{
"name": "decrementButtonIcon",
"type": "string",
"default": "pi pi-caret-down",
"description": "Style class of the decrement button."
},
{
"name": "locale",
"type": "string",
"default": "null",
"description": "Locale to be used in formatting."
},
{
"name": "localeMatcher",
"type": "string",
"default": "best fit",
"description": "The locale matching algorithm to use. Possible values are \"lookup\" and \"best fit\"; the default is \"best fit\". See Locale Negotation for details."
},
{
"name": "mode",
"type": "string",
"default": "decimal",
"description": "Defines the behavior of the component, valid values are \"decimal\" and \"currency\"."
},
{
"name": "prefix",
"type": "string",
"default": "null",
"description": "Text to display before the value."
},
{
"name": "suffix",
"type": "string",
"default": "decimal",
"description": "Text to display after the value."
},
{
"name": "currency",
"type": "string",
"default": "null",
"description": "The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as \"USD\" for the US dollar, \"EUR\" for the euro, or \"CNY\" for the Chinese RMB. There is no default value; if the style is \"currency\", the currency property must be provided."
},
{
"name": "currencyDisplay",
"type": "string",
"default": "symbol",
"description": "How to display the currency in currency formatting. Possible values are \"symbol\" to use a localized currency symbol such as €, ü\"code\" to use the ISO currency code, \"name\" to use a localized currency name such as \"dollar\"; the default is \"symbol\"."
},
{
"name": "useGrouping",
"type": "boolean",
"default": "true",
"description": "Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators."
},
{
"name": "minFractionDigits",
"type": "number",
"default": "null",
"description": "The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information)."
},
{
"name": "maxFractionDigits",
"type": "number",
"default": "null",
"description": "The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the ISO 4217 currency code list(2 if the list doesn't provide that information)."
},
{
"name": "id",
"type": "string",
"default": "null",
"description": "Identifier of the element."
},
{
"name": "name",
"type": "string",
"default": "null",
"description": "Name of the input element."
},
{
"name": "type",
"type": "string",
"default": "text",
"description": "Type of the input element."
},
{
"name": "allowEmpty",
"type": "boolean",
"default": "true",
"description": "Determines whether the input field is empty."
},
{
"name": "step",
"type": "number",
"default": "1",
"description": "Step factor to increment/decrement the value."
},
{
"name": "min",
"type": "number",
"default": "null",
"description": "Mininum boundary value."
},
{
"name": "max",
"type": "number",
"default": "null",
"description": "Maximum boundary value."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the element should be disabled."
},
{
"name": "required",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that an input field must be filled out before submitting the form."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "autoFocus",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should automatically get focus on load."
},
{
"name": "pattern",
"type": "string",
"default": "null",
"description": "The pattern attribute specifies a regular expression that the element's value is checked against on form submission."
},
{
"name": "inputmode",
"type": "string",
"default": "null",
"description": "The inputmode attribute provides a hint to browsers for devices with onscreen keyboards to help them decide which keyboard to display."
},
{
"name": "placeholder",
"type": "string",
"default": "null",
"description": "Hint text for the input field."
},
{
"name": "readOnly",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the element should be read-only."
},
{
"name": "size",
"type": "number",
"default": "null",
"description": "Size of the input field."
},
{
"name": "maxLength",
"type": "number",
"default": "null",
"description": "Maximum number of character allows in the input field."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "inputId",
"type": "string",
"default": "null",
"description": "Identifier of the input element."
},
{
"name": "inputStyle",
"type": "string",
"default": "null",
"description": "Inline style of the input field."
},
{
"name": "inputClassName",
"type": "string",
"default": "null",
"description": "Inline style of the input field."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
},
{
"name": "ariaLabelledBy",
"type": "string",
"default": "null",
"description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
}
],
"events": [
{
"name": "onValueChange",
"description": "Callback to invoke after validation check and value change.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "number",
"description": "New value"
}
]
},
{
"name": "onChange",
"description": "Callback to invoke on value change.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "number",
"description": "New value"
}
]
},
{
"name": "onFocus",
"description": "Callback to invoke when input receives focus.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onBlur",
"description": "Callback to invoke when input loses focus.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onKeyDown",
"description": "Callback to invoke when the key pressed.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "InputSwitch",
"source": {
"module": "PrimeReact",
"symbol": "InputSwitch"
},
"description": "InputSwitch is used to select a boolean value.",
"doc-url": "https://primefaces.org/primereact/showcase/#/inputswitch",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "inputId",
"type": "string",
"default": "null",
"description": "Identifier of the input element."
},
{
"name": "name",
"type": "string",
"default": "null",
"description": "Name of the input element."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "checked",
"type": "boolean",
"default": "false",
"description": "Specifies whether a inputswitch should be checked or not."
},
{
"name": "trueValue",
"type": "any",
"default": "true",
"description": "Value in checked state."
},
{
"name": "falseValue",
"type": "any",
"default": "false",
"description": "Value in unchecked state."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should be disabled."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke on value change.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "boolean",
"description": "Checked state as a boolean."
}
]
},
{
"name": "onFocus",
"description": "Callback to invoke when the element receives focus.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onBlur",
"description": "Callback to invoke when the element loses focus.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "InputText",
"source": {
"module": "PrimeReact",
"symbol": "InputText"
},
"description": "InputText is an extension to standard input element with theming and keyfiltering.",
"doc-url": "https://primefaces.org/primereact/showcase/#/inputtext",
"props": [
{
"name": "keyfilter",
"type": "string/regex",
"default": "null",
"description": "Format definition of the keys to block."
},
{
"name": "validateOnly",
"type": "boolean",
"default": "false",
"description": "When enabled, instead of blocking keys, input is validated internally to test against the regular expression."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
}
],
"events": []
},
{
"name": "InputTextarea",
"source": {
"module": "PrimeReact",
"symbol": "InputTextarea"
},
"description": "Inputtextarea add styling and autoResize functionality to standard textarea element.",
"doc-url": "https://primefaces.org/primereact/showcase/#/inputtextarea",
"props": [
{
"name": "autoResize",
"type": "boolean",
"default": "false",
"description": "When present, height of textarea changes as being typed."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
}
],
"events": []
},
{
"name": "Knob",
"source": {
"module": "PrimeReact",
"symbol": "Knob"
},
"description": "Knob is a form component to define number inputs with a dial.",
"doc-url": "https://primefaces.org/primereact/showcase/#/knob",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "number",
"default": "null",
"description": "Value of the component."
},
{
"name": "size",
"type": "number",
"default": "100",
"description": "Size of the component in pixels."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should be disabled."
},
{
"name": "readOnly",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component value cannot be edited."
},
{
"name": "step",
"type": "number",
"default": "null",
"description": "Step factor to increment/decrement the value."
},
{
"name": "min",
"type": "number",
"default": "0",
"description": "Mininum boundary value."
},
{
"name": "max",
"type": "number",
"default": "100",
"description": "Maximum boundary value."
},
{
"name": "valueColor",
"type": "string",
"default": "null",
"description": "Background of the value."
},
{
"name": "rangeColor",
"type": "string",
"default": "null",
"description": "Background color of the range."
},
{
"name": "textColor",
"type": "string",
"default": "null",
"description": "Color of the value text."
},
{
"name": "strokeWidth",
"type": "number",
"default": "14",
"description": "Width of the knob stroke."
},
{
"name": "showValue",
"type": "boolean",
"default": "true",
"description": "Whether the show the value inside the knob."
},
{
"name": "valueTemplate",
"type": "string",
"default": "{value}",
"description": "Template string of the value."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke when the value changes.",
"arguments": [
{
"name": "value",
"type": "number",
"description": "New value"
}
]
}
]
},
{
"name": "ListBox",
"source": {
"module": "PrimeReact",
"symbol": "ListBox"
},
"description": "ListBox is used to select one or more values from a list of items.",
"doc-url": "https://primefaces.org/primereact/showcase/#/listbox",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "object",
"default": "null",
"description": "Selected value to display."
},
{
"name": "options",
"type": "array",
"default": "null",
"description": "An array of objects to display as the available options."
},
{
"name": "optionLabel",
"type": "string",
"default": "null",
"description": "Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options."
},
{
"name": "optionValue",
"type": "string",
"default": "null",
"description": "Name of the value field of an option when arbitrary objects are used as options instead of SelectItems."
},
{
"name": "optionDisabled",
"type": "function | string",
"default": "null",
"description": "Property name or getter function to use as the disabled flag of an option, defaults to false when not defined."
},
{
"name": "optionGroupLabel",
"type": "string",
"default": "null",
"description": "Property name or getter function to use as the label of an option group."
},
{
"name": "optionGroupChildren",
"type": "string",
"default": "null",
"description": "Property name or getter function that refers to the children options of option group."
},
{
"name": "itemTemplate",
"type": "any",
"default": "null",
"description": "Custom template for the items."
},
{
"name": "filterTemplate",
"type": "any",
"default": "null",
"description": "Custom template for the filter element."
},
{
"name": "emptyMessage",
"type": "string",
"default": "No results found",
"description": "Text to display when there are no options available."
},
{
"name": "emptyFilterMessage",
"type": "any",
"default": "No results found",
"description": "Template to display when filtering does not return any results."
},
{
"name": "optionGroupTemplate",
"type": "any",
"default": "null",
"description": "Template of an option group item."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "listStyle",
"type": "object",
"default": "null",
"description": "Inline style of inner list element."
},
{
"name": "listClassName",
"type": "string",
"default": "null",
"description": "Inline style class of inner list element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When specified, disables the component."
},
{
"name": "dataKey",
"type": "string",
"default": "false",
"description": "A property to uniquely match the value in options for better performance."
},
{
"name": "multiple",
"type": "boolean",
"default": "false",
"description": "When specified, allows selecting multiple values."
},
{
"name": "metaKeySelection",
"type": "boolean",
"default": "true",
"description": "Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically."
},
{
"name": "filter",
"type": "boolean",
"default": "false",
"description": "When specified, displays a filter input at header."
},
{
"name": "filterBy",
"type": "string",
"default": "label",
"description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against."
},
{
"name": "filterValue",
"type": "string",
"default": "null",
"description": "When specified, filter displays with this value."
},
{
"name": "filterMatchMode",
"type": "string",
"default": "contains",
"description": "Defines how the items are filtered, valid values are \"contains\" (default), \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
},
{
"name": "filterPlaceholder",
"type": "string",
"default": "null",
"description": "Placeholder text to show when filter input is empty."
},
{
"name": "filterLocale",
"type": "string",
"default": "undefined",
"description": "Locale to use in filtering. The default locale is the host environment's current locale."
},
{
"name": "filterInputProps",
"type": "object",
"default": "undefined",
"description": "Props for the filter input, any prop is passed implicity to the filter input element."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
},
{
"name": "virtualScrollerOptions",
"type": "object",
"default": "null",
"description": "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke when value of listbox changes.",
"arguments": [
{
"name": "event.originalValue",
"type": "object",
"description": "Browser event"
},
{
"name": "even.value",
"type": "any",
"description": "Single value or an array of values depending on the selection mode"
}
]
},
{
"name": "onFilterValueChange",
"description": "Callback to invoke when filter value changes.",
"arguments": [
{
"name": "event.originalValue",
"type": "object",
"description": "Browser event"
},
{
"name": "even.value",
"type": "any",
"description": "the filtered value"
}
]
}
]
},
{
"name": "MegaMenu",
"source": {
"module": "PrimeReact",
"symbol": "MegaMenu"
},
"description": "MegaMenu is navigation component that displays submenus together.",
"doc-url": "https://primefaces.org/primereact/showcase/#/megamenu",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "model",
"type": "array",
"default": "null",
"description": "An array of menuitems."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "orientation",
"type": "string",
"default": "horizontal",
"description": "Defines the orientation, valid values are horizontal and vertical."
},
{
"name": "start",
"type": "any",
"default": "null",
"description": "The template of starting element."
},
{
"name": "end",
"type": "any",
"default": "null",
"description": "The template of trailing element"
}
],
"events": []
},
{
"name": "Mention",
"source": {
"module": "PrimeReact",
"symbol": "Mention"
},
"description": "MegaMenu is navigation component that displays submenus together.",
"doc-url": "https://primefaces.org/primereact/showcase/#/mention",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "inputId",
"type": "string",
"default": "null",
"description": "Identifier of the input element."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "trigger",
"type": "string|array",
"default": "@",
"description": "Set trigger keyword."
},
{
"name": "suggestions",
"type": "array",
"default": "null",
"description": "Field of a suggested object to resolve and display."
},
{
"name": "inputStyle",
"type": "object",
"default": "null",
"description": "Inline style of the input field."
},
{
"name": "inputClassName",
"type": "string",
"default": "null",
"description": "Style class of the input field."
},
{
"name": "panelClassName",
"type": "string",
"default": "null",
"description": "Style class of the overlay panel element."
},
{
"name": "panelStyle",
"type": "object",
"default": "null",
"description": "Inline style of the overlay panel element."
},
{
"name": "scrollHeight",
"type": "string",
"default": "200px",
"description": "Maximum height of the suggestions panel."
},
{
"name": "autoHighlight",
"type": "boolean",
"default": "true",
"description": "When enabled, highlights the first item in the list by default."
},
{
"name": "placeholder",
"type": "boolean",
"default": "true",
"description": "Placeholder text for the input."
},
{
"name": "delay",
"type": "number",
"default": "0",
"description": "Delay between keystrokes to wait before sending a query."
},
{
"name": "headerTemplate",
"type": "any",
"default": "null",
"description": "The template of header."
},
{
"name": "footerTemplate",
"type": "any",
"default": "null",
"description": "The template of footer."
},
{
"name": "itemTemplate",
"type": "any",
"default": "null",
"description": "Custom template for the items."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke when value changes.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onFocus",
"description": "Callback to invoke when the element receives focus.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onBlur",
"description": "Callback to invoke when the element loses focus.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onShow",
"description": "Callback to invoke when overlay panel becomes visible.",
"arguments": []
},
{
"name": "onHide",
"description": "Callback to invoke when overlay panel becomes hidden.",
"arguments": []
},
{
"name": "onSearch",
"description": "Callback to invoke when search.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.trigger",
"type": "object",
"description": "Current trigger keyword."
}
]
},
{
"name": "onSelect",
"description": "Callback to invoke when selection changes.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.suggestion",
"type": "object",
"description": "Selected item"
}
]
},
{
"name": "onInput",
"description": "Callback to invoke on input event of input field.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "Menu",
"source": {
"module": "PrimeReact",
"symbol": "Menu"
},
"description": "Menu is a navigation/command component that supports dynamic and static positioning.",
"doc-url": "https://primefaces.org/primereact/showcase/#/menu",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "model",
"type": "array",
"default": "null",
"description": "An array of menuitems."
},
{
"name": "popup",
"type": "boolean",
"default": "false",
"description": "Defines if menu would displayed as a popup."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "baseZIndex",
"type": "number",
"default": "0",
"description": "Base zIndex value to use in layering."
},
{
"name": "autoZIndex",
"type": "boolean",
"default": "true",
"description": "Whether to automatically manage layering."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onShow",
"description": "Callback to invoke when a popup menu is shown.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onHide",
"description": "Callback to invoke when a popup menu is hidden.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "Menubar",
"source": {
"module": "PrimeReact",
"symbol": "Menubar"
},
"description": "Menubar is a horizontal menu component.",
"doc-url": "https://primefaces.org/primereact/showcase/#/menubar",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "model",
"type": "array",
"default": "null",
"description": "An array of menuitems."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "start",
"type": "any",
"default": "null",
"description": "The template of starting element."
},
{
"name": "end",
"type": "any",
"default": "null",
"description": "The template of trailing element"
}
],
"events": []
},
{
"name": "Message",
"source": {
"module": "PrimeReact",
"symbol": "Message"
},
"description": "Message component is useful in cases where a single message needs to be displayed related to an element such as forms.",
"doc-url": "https://primefaces.org/primereact/showcase/#/message",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "severity",
"type": "string",
"default": "null",
"description": "Severity level of the message."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Message text."
},
{
"name": "content",
"type": "element",
"default": "null",
"description": "Template of the message."
},
{
"name": "icon",
"type": "string",
"default": "Based on severity",
"description": "Icon for the message. If not set it will default to severity icon."
}
],
"events": []
},
{
"name": "Messages",
"source": {
"module": "PrimeReact",
"symbol": "Messages"
},
"description": "Messages is used to display inline messages with various severities.",
"doc-url": "https://primefaces.org/primereact/showcase/#/messages",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onRemove",
"description": "Callback to invoke when a message is removed.",
"arguments": [
{
"name": "message",
"type": "any",
"description": "Removed message"
}
]
},
{
"name": "onClick",
"description": "Callback to invoke when a message is removed.",
"arguments": [
{
"name": "message",
"type": "any",
"description": "Clicked message"
}
]
}
]
},
{
"name": "MultiSelect",
"source": {
"module": "PrimeReact",
"symbol": "MultiSelect"
},
"description": "MultiSelect is used to select multiple items from a collection.",
"doc-url": "https://primefaces.org/primereact/showcase/#/multiselect",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "name",
"type": "string",
"default": "null",
"description": "Name of the input element."
},
{
"name": "value",
"type": "array",
"default": "null",
"description": "Value of the component."
},
{
"name": "options",
"type": "array",
"default": "null",
"description": "An array of selectitems to display as the available options."
},
{
"name": "optionLabel",
"type": "string",
"default": "null",
"description": "Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options."
},
{
"name": "optionValue",
"type": "string",
"default": "null",
"description": "Property name or getter function to use as the value of an option, defaults to the option itself when not defined."
},
{
"name": "optionDisabled",
"type": "function | string",
"default": "null",
"description": "Property name or getter function to use as the disabled flag of an option, defaults to false when not defined."
},
{
"name": "optionGroupLabel",
"type": "string",
"default": "null",
"description": "Property name or getter function to use as the label of an option group."
},
{
"name": "optionGroupChildren",
"type": "string",
"default": "null",
"description": "Property name or getter function that refers to the children options of option group."
},
{
"name": "inline",
"type": "boolean",
"default": "false",
"description": "Render the items panel inline."
},
{
"name": "flex",
"type": "boolean",
"default": "false",
"description": "Use flex layout for the items panel."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "itemClassName",
"type": "string",
"default": "null",
"description": "Style class of the items."
},
{
"name": "panelClassName",
"type": "string",
"default": "null",
"description": "Style class of the overlay panel element."
},
{
"name": "panelStyle",
"type": "string",
"default": "null",
"description": "Inline style of the overlay panel element."
},
{
"name": "scrollHeight",
"type": "string",
"default": "200px",
"description": "Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value."
},
{
"name": "placeholder",
"type": "string",
"default": "null",
"description": "Label to display when there are no selections."
},
{
"name": "fixedPlaceholder",
"type": "boolean",
"default": "false",
"description": "Whether to display selected items in the label section or always display the placeholder as the default label."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should be disabled."
},
{
"name": "showClear",
"type": "boolean",
"default": "false",
"description": "When enabled, a clear icon is displayed to clear the value."
},
{
"name": "filter",
"type": "boolean",
"default": "true",
"description": "When specified, displays an input field to filter the items on keyup."
},
{
"name": "filterBy",
"type": "string",
"default": "label",
"description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against."
},
{
"name": "filterMatchMode",
"type": "string",
"default": "contains",
"description": "Defines how the items are filtered, valid values are \"contains\", (default) \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
},
{
"name": "filterPlaceholder",
"type": "string",
"default": "null",
"description": "Placeholder text to show when filter input is empty."
},
{
"name": "filterLocale",
"type": "string",
"default": "undefined",
"description": "Locale to use in filtering. The default locale is the host environment's current locale."
},
{
"name": "emptyFilterMessage",
"type": "any",
"default": "No records found",
"description": "Template to display when filtering does not return any results."
},
{
"name": "resetFilterOnHide",
"type": "boolean",
"default": "false",
"description": "Clears the filter value when hiding the dropdown."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "dataKey",
"type": "string",
"default": "null",
"description": "A property to uniquely match the value in options for better performance."
},
{
"name": "inputId",
"type": "string",
"default": "null",
"description": "Identifier of the focusable input."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
},
{
"name": "itemTemplate",
"type": "function",
"default": "null",
"description": "Function that gets the option and returns the content for it."
},
{
"name": "filterTemplate",
"type": "any",
"default": "null",
"description": "The template of filter element."
},
{
"name": "optionGroupTemplate",
"type": "any",
"default": "null",
"description": "Template of an option group item."
},
{
"name": "selectedItemTemplate",
"type": "function",
"default": "null",
"description": "Function that gets an item in the value and returns the content for it."
},
{
"name": "panelHeaderTemplate",
"type": "any",
"default": "null",
"description": "Template of the panel header."
},
{
"name": "panelFooterTemplate",
"type": "any",
"default": "null",
"description": "Template of the panel footer."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "maxSelectedLabels",
"type": "number",
"default": "3",
"description": "Decides how many selected item labels to show at most."
},
{
"name": "selectionLimit",
"type": "number",
"default": "null",
"description": "Number of maximum options that can be selected."
},
{
"name": "selectedItemsLabel",
"type": "string",
"default": "{0} items selected",
"description": "Label to display after exceeding max selected labels."
},
{
"name": "ariaLabelledBy",
"type": "string",
"default": "null",
"description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
},
{
"name": "display",
"type": "string",
"default": "comma",
"description": "Used mode to display the selected item. Valid values are 'comma' and 'chip'."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
},
{
"name": "dropdownIcon",
"type": "string",
"default": "pi pi-chevron-down",
"description": "Icon class of the dropdown icon."
},
{
"name": "virtualScrollerOptions",
"type": "object",
"default": "null",
"description": "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
},
{
"name": "showSelectAll",
"type": "boolean",
"default": "true",
"description": "Whether to show the select all checkbox inside the panel's header."
},
{
"name": "selectAll",
"type": "boolean",
"default": "false",
"description": "Whether all data is selected."
},
{
"name": "useOptionAsValue",
"type": "boolean",
"default": "false",
"description": "Defaults to the option itself as the value of an option. Overrides the optionValue prop."
},
{
"name": "overlayVisible",
"type": "boolean",
"default": "false",
"description": "Specifies the visibility of the overlay panel."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke when value changes.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Current selected values"
}
]
},
{
"name": "onFocus",
"description": "Callback to invoke when the element receives focus.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onBlur",
"description": "Callback to invoke when the element loses focus.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onShow",
"description": "Callback to invoke when overlay panel becomes visible."
},
{
"name": "onHide",
"description": "Callback to invoke when overlay panel becomes hidden."
},
{
"name": "onFilter",
"description": "Callback to invoke on filtering.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.filter",
"type": "string",
"description": "Filter value."
}
]
},
{
"name": "onSelectAll",
"description": "Callback to invoke when all data is selected.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.filter",
"type": "string",
"description": "Filter value."
}
]
}
]
},
{
"name": "MultiStateCheckbox",
"source": {
"module": "PrimeReact",
"symbol": "MultiStateCheckbox"
},
"description": "MultiStateCheckbox is used to select a state from given multiple states.",
"doc-url": "https://primefaces.org/primereact/showcase/#/multistatecheckbox",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "any",
"default": "null",
"description": "Value of the MultiStateCheckbox."
},
{
"name": "options",
"type": "array",
"default": "null",
"description": "An array to display as the available options."
},
{
"name": "optionValue",
"type": "string",
"default": "null",
"description": "Property name to use as the value of an option, defaults to the option itself when not defined."
},
{
"name": "optionLabel",
"type": "string",
"default": "null",
"description": "Property name to refer to the option label, used by screen readers only. Defaults to optionValue."
},
{
"name": "optionIcon",
"type": "string",
"default": "icon",
"description": "Property name to use as the icon of an option, defaults to the icon property."
},
{
"name": "iconTemplate",
"type": "any",
"default": "null",
"description": "Template of icon for the selected option."
},
{
"name": "dataKey",
"type": "string",
"default": "null",
"description": "A property to uniquely match the value in options for better performance."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the element value cannot be altered."
},
{
"name": "readOnly",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the value cannot be changed."
},
{
"name": "empty",
"type": "boolean",
"default": "true",
"description": "If false, the empty state is skipped in the chekbox."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke on value change",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Current Value"
}
]
}
]
},
{
"name": "OrderList",
"source": {
"module": "PrimeReact",
"symbol": "OrderList"
},
"description": "OrderList is used to sort a collection.",
"doc-url": "https://primefaces.org/primereact/showcase/#/orderlist",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "array",
"default": "null",
"description": "An array of objects to reorder."
},
{
"name": "dataKey",
"type": "string",
"default": "null",
"description": "Name of the field that uniquely identifies the a record in the data."
},
{
"name": "header",
"type": "string",
"default": "null",
"description": "Text for the caption"
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "listStyle",
"type": "string",
"default": "null",
"description": "Inline style of the list element."
},
{
"name": "dragdrop",
"type": "boolean",
"default": "false",
"description": "Whether to enable dragdrop based reordering."
},
{
"name": "dragdropScope",
"type": "string",
"default": "null",
"description": "Unique key of drag drop events to avoid conflict with other drag drop events on the page."
},
{
"name": "itemTemplate",
"type": "function",
"default": "null",
"description": "Function that gets an item in the list and returns the content for it."
},
{
"name": "filterTemplate",
"type": "any",
"default": "null",
"description": "The template of filter element."
},
{
"name": "filter",
"type": "boolean",
"default": "false",
"description": "When specified, displays an input field to filter the items on keyup."
},
{
"name": "filterBy",
"type": "string",
"default": "label",
"description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against."
},
{
"name": "filterMatchMode",
"type": "string",
"default": "contains",
"description": "Defines how the items are filtered, valid values are \"contains\" (default), \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
},
{
"name": "filterPlaceholder",
"type": "string",
"default": "null",
"description": "Placeholder text to show when filter input is empty."
},
{
"name": "filterLocale",
"type": "string",
"default": "undefined",
"description": "Locale to use in filtering. The default locale is the host environment's current locale."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke when list is reordered.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Reordered list"
}
]
},
{
"name": "onFilter",
"description": "Callback to invoke when the value is filtered.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Original event"
},
{
"name": "event.filter",
"type": "any",
"description": "Value of the filter input"
}
]
}
]
},
{
"name": "OrganizationChart",
"source": {
"module": "PrimeReact",
"symbol": "OrganizationChart"
},
"description": "OrganizationChart visualizes hierarchical organization data.",
"doc-url": "https://primefaces.org/primereact/showcase/#/organizationchart",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "array",
"default": "null",
"description": "An array of nested TreeNodes."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "selectionMode",
"type": "string",
"default": "null",
"description": "Defines the selection mode, valid values \"single\" and \"multiple\"."
},
{
"name": "selection",
"type": "any",
"default": "null",
"description": "A single treenode instance or an array to refer to the selections."
},
{
"name": "nodeTemplate",
"type": "function",
"default": "null",
"description": "Template function that gets a node as a parameter and returns a content."
}
],
"events": [
{
"name": "onNodeSelect",
"description": "Callback to invoke when a node is selected.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Selected node instance."
}
]
},
{
"name": "onNodeUnselect",
"description": "Callback to invoke when a node is unselected.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Unselected node instance."
}
]
},
{
"name": "onSelectionChange",
"description": "Callback to invoke when node selection changes.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.data",
"type": "any",
"description": "New selection."
}
]
}
]
},
{
"name": "OverlayPanel",
"source": {
"module": "PrimeReact",
"symbol": "OverlayPanel"
},
"description": "OverlayPanel is a container component that can overlay other components on page.",
"doc-url": "https://primefaces.org/primereact/showcase/#/overlaypanel",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "dismissable",
"type": "boolean",
"default": "true",
"description": "Enables to hide the overlay when outside is clicked."
},
{
"name": "showCloseIcon",
"type": "boolean",
"default": "false",
"description": "When enabled, displays a close icon at top right corner."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "ariaCloseLabel",
"type": "string",
"default": "close",
"description": "Aria label of the close icon."
},
{
"name": "breakpoints",
"type": "object",
"default": "null",
"description": "Object literal to define widths per screen size."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onShow",
"description": "Callback to invoke when overlay becomes visible.",
"arguments": []
},
{
"name": "onHide",
"description": "Callback to invoke when overlay becomes hidden.",
"arguments": []
}
]
},
{
"name": "Paginator",
"source": {
"module": "PrimeReact",
"symbol": "Paginator"
},
"description": "Paginator is a generic widget to display content in paged format.",
"doc-url": "https://primefaces.org/primereact/showcase/#/paginator",
"props": [
{
"name": "totalRecords",
"type": "number",
"default": "0",
"description": "Number of total records."
},
{
"name": "rows",
"type": "number",
"default": "0",
"description": "Data count to display per page."
},
{
"name": "first",
"type": "number",
"default": "0",
"description": "Zero-relative number of the first row to be displayed."
},
{
"name": "pageLinkSize",
"type": "number",
"default": "5",
"description": "Number of page links to display."
},
{
"name": "rowsPerPageOptions",
"type": "array",
"default": "null",
"description": "Array of integer values to display inside rows per page dropdown."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "template",
"type": "string|object",
"default": "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",
"description": "Template of the paginator."
},
{
"name": "leftContent",
"type": "any",
"default": "null",
"description": "Content to inject into the left side of the paginator."
},
{
"name": "rightContent",
"type": "any",
"default": "null",
"description": "Content to inject into the right side of the paginator."
},
{
"name": "currentPageReportTemplate",
"type": "string",
"default": "({currentPage} of {totalPages})",
"description": "Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}."
},
{
"name": "dropdownAppendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
}
],
"events": [
{
"name": "onPageChange",
"description": "Callback to invoke when page changes, the event object contains information about the new state.",
"arguments": [
{
"name": "event.page",
"type": "number",
"description": "New page number"
},
{
"name": "event.first",
"type": "number",
"description": "Index of first record"
},
{
"name": "event.rows",
"type": "number",
"description": "Number of rows to display in new page"
},
{
"name": "event.pageCount",
"type": "number",
"description": "Total number of pages"
}
]
}
]
},
{
"name": "Panel",
"source": {
"module": "PrimeReact",
"symbol": "Panel"
},
"description": "Panel is a grouping component providing with content toggle feature.",
"doc-url": "https://primefaces.org/primereact/showcase/#/panel",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "header",
"type": "any",
"default": "null",
"description": "Custom header template of the panel."
},
{
"name": "headerTemplate",
"type": "any",
"default": "null",
"description": "Header template of the panel to customize more."
},
{
"name": "toggleable",
"type": "boolean",
"default": "false",
"description": "Defines if content of panel can be expanded and collapsed."
},
{
"name": "icons",
"type": "any",
"default": "null",
"description": "Custom icons template for the header."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "collapsed",
"type": "boolean",
"default": "false",
"description": "Defines the initial state of panel content, supports one or two-way binding as well."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onCollapse",
"description": "Callback to invoke when an active tab is collapsed by clicking on the header.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onExpand",
"description": "Callback to invoke when a tab gets expanded.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onToggle",
"description": "Callback to invoke when a tab gets expanded.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "collapsed state as a boolean"
}
]
}
]
},
{
"name": "PanelMenu",
"source": {
"module": "PrimeReact",
"symbol": "PanelMenu"
},
"description": "PanelMenu is a hybrid of accordion-tree components.",
"doc-url": "https://primefaces.org/primereact/showcase/#/panelmenu",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "model",
"type": "array",
"default": "null",
"description": "An array of menuitems."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "multiple",
"type": "boolean",
"default": "false",
"description": "Whether multiple tabs can be activated at the same time or not."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": []
},
{
"name": "Password",
"source": {
"module": "PrimeReact",
"symbol": "Password"
},
"description": "Password displays strength indicator for password fields.",
"doc-url": "https://primefaces.org/primereact/showcase/#/password",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "inputId",
"type": "string",
"default": "null",
"description": "Identifier of the input element."
},
{
"name": "promptLabel",
"type": "string",
"default": "Please enter a password",
"description": "Text to prompt password entry."
},
{
"name": "weakLabel",
"type": "string",
"default": "Weak",
"description": "Text for a weak password."
},
{
"name": "mediumLabel",
"type": "string",
"default": "Medium",
"description": "Text for a medium password."
},
{
"name": "strongLabel",
"type": "string",
"default": "Strong",
"description": "Text for a strong password."
},
{
"name": "mediumRegex",
"type": "string",
"default": "{`^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).`}",
"description": "Regex for a medium level password."
},
{
"name": "strongRegex",
"type": "string",
"default": "{`^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})`}",
"description": "Regex for a strong level password."
},
{
"name": "feedback",
"type": "boolean",
"default": "true",
"description": "Whether to show the strength indicator or not."
},
{
"name": "toggleMask",
"type": "boolean",
"default": "false",
"description": "Whether to show an icon to display the password as plain text."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "header",
"type": "any",
"default": "null",
"description": "Template of panel header if \"feedback\" is enabled."
},
{
"name": "content",
"type": "any",
"default": "null",
"description": "Template of panel content if \"feedback\" is enabled."
},
{
"name": "footer",
"type": "any",
"default": "null",
"description": "Template of panel footer if \"feedback\" is enabled."
},
{
"name": "icon",
"type": "any",
"default": "null",
"description": "Template of mask icon if \"toggleMask\" is enabled."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
},
{
"name": "keyfilter",
"type": "string/regex",
"default": "null",
"description": "Format definition of the keys to block."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "inputStyle",
"type": "any",
"default": "null",
"description": "Inline style of the input field."
},
{
"name": "inputClassName",
"type": "string",
"default": "null",
"description": "Style class of the input field."
},
{
"name": "panelClassName",
"type": "string",
"default": "null",
"description": "Style class of the overlay panel element."
},
{
"name": "panelStyle",
"type": "string",
"default": "null",
"description": "Inline style of the overlay panel element."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onShow",
"description": "Callback to invoke when overlay becomes visible.",
"arguments": []
},
{
"name": "onHide",
"description": "Callback to invoke when overlay becomes hidden.",
"arguments": []
}
]
},
{
"name": "PickList",
"source": {
"module": "PrimeReact",
"symbol": "PickList"
},
"description": "PickList is used to reorder items between different lists.",
"doc-url": "https://primefaces.org/primereact/showcase/#/picklist",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "source",
"type": "array",
"default": "null",
"description": "An array of objects for the source list."
},
{
"name": "target",
"type": "array",
"default": "null",
"description": "An array of objects for the target list."
},
{
"name": "sourceHeader",
"type": "any",
"default": "null",
"description": "Template for the source list caption."
},
{
"name": "targetHeader",
"type": "any",
"default": "null",
"description": "Template for the target list caption."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "sourceStyle",
"type": "string",
"default": "null",
"description": "Inline style of the source list element."
},
{
"name": "targetStyle",
"type": "string",
"default": "null",
"description": "Inline style of the target list element."
},
{
"name": "sourceSelection",
"type": "any",
"default": "null",
"description": "Selected item in the source list."
},
{
"name": "targetSelection",
"type": "any",
"default": "null",
"description": "Selected items in the target list."
},
{
"name": "showSourceControls",
"type": "boolean",
"default": "true",
"description": "Whether to show buttons of source list."
},
{
"name": "showTargetControls",
"type": "boolean",
"default": "true",
"description": "Whether to show buttons of target list."
},
{
"name": "itemTemplate",
"type": "function",
"default": "null",
"description": "Template function that gets the options for both source and target items and returns the content for it."
},
{
"name": "sourceItemTemplate",
"type": "function",
"default": "null",
"description": "Template function that gets the options for the source items and returns the content for it."
},
{
"name": "targetItemTemplate",
"type": "function",
"default": "null",
"description": "Template function that gets the options for the target items and returns the content for it."
},
{
"name": "metaKeySelection",
"type": "boolean",
"default": "true",
"description": "Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically."
},
{
"name": "filterBy",
"type": "string",
"default": "null",
"description": "When specified displays an input field to filter the items on keyup and decides which field to search (Accepts multiple fields with a comma)."
},
{
"name": "filterMatchMode",
"type": "string",
"default": "contains",
"description": "Defines how the items are filtered, valid values are \"contains\" (default) \"startsWith\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"lt\", \"lte\", \"gt\" and \"gte\"."
},
{
"name": "filterLocale",
"type": "string",
"default": "undefined",
"description": "Locale to use in filtering. The default locale is the host environment's current locale."
},
{
"name": "sourceFilterValue",
"type": "string",
"default": "null",
"description": "Filter value in the target list."
},
{
"name": "targetFilterValue",
"type": "string",
"default": "null",
"description": "Filter value in the source list."
},
{
"name": "showSourceFilter",
"type": "boolean",
"default": "true",
"description": "Whether to show filter input for source list when filterBy is enabled."
},
{
"name": "showTargetFilter",
"type": "boolean",
"default": "true",
"description": "Whether to show filter input for target list when filterBy is enabled."
},
{
"name": "sourceFilterPlaceholder",
"type": "string",
"default": "null",
"description": "Placeholder text on source filter input."
},
{
"name": "targetFilterPlaceholder",
"type": "string",
"default": "null",
"description": "Placeholder text on target filter input."
},
{
"name": "sourceFilterTemplate",
"type": "any",
"default": "null",
"description": "Template for the source filter content."
},
{
"name": "targetFilterTemplate",
"type": "any",
"default": "null",
"description": "Template for the target filter content."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "dataKey",
"type": "string",
"default": "null",
"description": "Name of the field that uniquely identifies the a record in the data."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke when items are moved from source to target.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.source",
"type": "any",
"description": "Source list"
},
{
"name": "event.target",
"type": "any",
"description": "Target list"
}
]
},
{
"name": "onMoveToSource",
"description": "Callback to invoke when items are moved from target to source.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Moved items"
}
]
},
{
"name": "onMoveAllToSource",
"description": "Callback to invoke when all items are moved from target to source.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Moved items"
}
]
},
{
"name": "onMoveToTarget",
"description": "Callback to invoke when items are moved from source to target.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Moved items"
}
]
},
{
"name": "onMoveAllToTarget",
"description": "Callback to invoke when all items are moved from source to target.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Moved items"
}
]
},
{
"name": "onSourceSelectionChange",
"description": "Callback to invoke when items are selected within source list.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "items",
"type": "any",
"description": "Selected items array"
}
]
},
{
"name": "onTargetSelectionChange",
"description": "Callback to invoke when items are selected within target list.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "items",
"type": "any",
"description": "Selected items array"
}
]
},
{
"name": "onSourceFilterChange",
"description": "Callback to invoke when items are filtered within source list.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Filtered value"
}
]
},
{
"name": "onTargetFilterChange",
"description": "Callback to invoke when items are filtered within target list.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Filtered value"
}
]
}
]
},
{
"name": "ProgressBar",
"source": {
"module": "PrimeReact",
"symbol": "ProgressBar"
},
"description": "ProgressBar is a process status indicator.",
"doc-url": "https://primefaces.org/primereact/showcase/#/progressbar",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "number",
"default": "null",
"description": "Current value of the progress."
},
{
"name": "showValue",
"type": "boolean",
"default": "true",
"description": "Show or hide progress bar value."
},
{
"name": "unit",
"type": "string",
"default": "%",
"description": "Unit sign appended to the value."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "mode",
"type": "string",
"default": "determinate",
"description": "Defines the mode of the progress, valid values are \"determinate\" and \"indeterminate\"."
},
{
"name": "color",
"type": "string",
"default": "null",
"description": "Color for the background of the progress."
},
{
"name": "displayValueTemplate",
"type": "Element",
"default": "null",
"description": "Custom display value template"
}
],
"events": [
{
"name": "displayValueTemplate",
"description": "TODO",
"arguments": [
{
"name": "event.value",
"type": "any",
"description": "TODO"
}
]
}
]
},
{
"name": "ProgressSpinner",
"source": {
"module": "PrimeReact",
"symbol": "ProgressSpinner"
},
"description": "ProgressSpinner is a process status indicator.",
"doc-url": "https://primefaces.org/primereact/showcase/#/progressspinner",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "strokeWidth",
"type": "string",
"default": "2",
"description": "Width of the circle stroke."
},
{
"name": "fill",
"type": "string",
"default": "null",
"description": "Color for the background of the circle."
},
{
"name": "animationDuration",
"type": "string",
"default": "2s",
"description": "Duration of the rotate animation."
}
],
"events": []
},
{
"name": "RadioButton",
"source": {
"module": "PrimeReact",
"symbol": "RadioButton"
},
"description": "RadioButton is an extension to standard radio button element with skinning capabilities.",
"doc-url": "https://primefaces.org/primereact/showcase/#/radiobutton",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "inputId",
"type": "string",
"default": "null",
"description": "Unique identifier of the inner native radiobutton."
},
{
"name": "name",
"type": "string",
"default": "null",
"description": "Name of the checkbox element ."
},
{
"name": "value",
"type": "any",
"default": "null",
"description": "Value of the radiobutton."
},
{
"name": "checked",
"type": "boolean",
"default": "false",
"description": "Specifies whether a radiobutton should be checked or not."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the element value cannot be altered."
},
{
"name": "required",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that an input field must be filled out before submitting the form."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke on radio button click.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Original event"
},
{
"name": "event.value",
"type": "any",
"description": "Value of the radiobutton"
},
{
"name": "event.checked",
"type": "any",
"description": "Checked state as a boolean."
}
]
}
]
},
{
"name": "Rating",
"source": {
"module": "PrimeReact",
"symbol": "Rating"
},
"description": "Rating componentsis a star based selection input.",
"doc-url": "https://primefaces.org/primereact/showcase/#/rating",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "number",
"default": "null",
"description": "Value of the rating."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the element should be disabled."
},
{
"name": "readOnly",
"type": "boolean",
"default": "false",
"description": "When present, changing the value is not possible."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "ClassName of the component."
},
{
"name": "stars",
"type": "number",
"default": "5",
"description": "Number of stars."
},
{
"name": "cancel",
"type": "boolean",
"default": "true",
"description": "When specified a cancel icon is displayed to allow removing the value."
},
{
"name": "cancelIcon",
"type": "string",
"default": "pi pi-ban",
"description": "ClassName of the cancel icon component."
},
{
"name": "cancelIconProps",
"type": "object",
"default": "null",
"description": "Properties of the cancel icon."
},
{
"name": "onIcon",
"type": "string",
"default": "pi pi-star-fill",
"description": "ClassName of the icon on component."
},
{
"name": "offIcon",
"type": "string",
"default": "pi pi-star",
"description": "ClassName of the icon off component."
},
{
"name": "onIconProps",
"type": "object",
"default": "null",
"description": "Properties of the on icon."
},
{
"name": "offIconProps",
"type": "object",
"default": "null",
"description": "Properties of the off icon."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke on value change.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "selected value"
}
]
}
]
},
{
"name": "Ripple",
"source": {
"module": "PrimeReact",
"symbol": "Ripple"
},
"description": "Ripple component adds ripple effect to the host element.",
"doc-url": "https://primefaces.org/primereact/showcase/#/ripple",
"props": [],
"events": []
},
{
"name": "Row",
"source": {
"module": "PrimeReact",
"symbol": "Row"
},
"description": "Row is helper component for ColumnGroup",
"doc-url": "https://primefaces.org/primereact/showcase/#/row",
"props": [],
"events": []
},
{
"name": "ScrollPanel",
"source": {
"module": "PrimeReact",
"symbol": "ScrollPanel"
},
"description": "ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar.",
"doc-url": "https://primefaces.org/primereact/showcase/#/scrollpanel",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
}
],
"events": []
},
{
"name": "ScrollTop",
"source": {
"module": "PrimeReact",
"symbol": "ScrollTop"
},
"description": "ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly.",
"doc-url": "https://primefaces.org/primereact/showcase/#/scrolltop",
"props": [
{
"name": "target",
"type": "string",
"default": "window",
"description": "Target of the ScrollTop, valid values are \"window\" and \"parent\"."
},
{
"name": "threshold",
"type": "number",
"default": "400",
"description": "Defines the threshold value of the vertical scroll position of the target to toggle the visibility."
},
{
"name": "icon",
"type": "string",
"default": "pi pi-chevron-up",
"description": "Icon to display."
},
{
"name": "behavior",
"type": "string",
"default": "smooth",
"description": "Defines the scrolling behavi, \"smooth\" adds an animation and \"auto\" scrolls with a jump."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onShow",
"description": "Callback to invoke when overlay becomes visible.",
"arguments": []
},
{
"name": "onHide",
"description": "Callback to invoke when overlay becomes hidden.",
"arguments": []
}
]
},
{
"name": "SelectButton",
"source": {
"module": "PrimeReact",
"symbol": "SelectButton"
},
"description": "SelectButton is used to choose single or multiple items from a list using buttons.",
"doc-url": "https://primefaces.org/primereact/showcase/#/selectbutton",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "any",
"default": "null",
"description": "Value of the component."
},
{
"name": "options",
"type": "array",
"default": "null",
"description": "An array of objects to display as the available options."
},
{
"name": "optionLabel",
"type": "string",
"default": "null",
"description": "Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options."
},
{
"name": "optionValue",
"type": "string",
"default": "null",
"description": "Name of the value field of an option when arbitrary objects are used as options instead of SelectItems."
},
{
"name": "optionDisabled",
"type": "function | string",
"default": "null",
"description": "Property name or getter function to use as the disabled flag of an option, defaults to false when not defined."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "multiple",
"type": "boolean",
"default": "false",
"description": "When specified, allows selecting multiple values."
},
{
"name": "unselectable",
"type": "boolean",
"default": "true",
"description": "Whether selection can be cleared."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the element should be disabled."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "dataKey",
"type": "string",
"default": "null",
"description": "A property to uniquely match the value in options for better performance."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
},
{
"name": "itemTemplate",
"type": "function",
"default": "null",
"description": "Function that gets the option and returns the content."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke on value change.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Single value or an array of values that are selected."
}
]
}
]
},
{
"name": "Sidebar",
"source": {
"module": "PrimeReact",
"symbol": "Sidebar"
},
"description": "Sidebar is a panel component displayed as an overlay.",
"doc-url": "https://primefaces.org/primereact/showcase/#/sidebar",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "visible",
"type": "boolean",
"default": "false",
"description": "Specifies the visibility of the dialog."
},
{
"name": "position",
"type": "string",
"default": "left",
"description": "Specifies the position of the sidebar, valid values are \"left\" and \"right\"."
},
{
"name": "fullScreen",
"type": "boolean",
"default": "false",
"description": "Adds a close icon to the header to hide the dialog."
},
{
"name": "blockScroll",
"type": "boolean",
"default": "false",
"description": "Whether to block scrolling of the document when sidebar is active."
},
{
"name": "baseZIndex",
"type": "number",
"default": "0",
"description": "Base zIndex value to use in layering."
},
{
"name": "dismissable",
"type": "boolean",
"default": "true",
"description": "Whether to dismiss sidebar on click of the mask."
},
{
"name": "showCloseIcon",
"type": "boolean",
"default": "true",
"description": "Whether to display a close icon inside the panel."
},
{
"name": "ariaCloseLabel",
"type": "string",
"default": "close",
"description": "Aria label of the close icon."
},
{
"name": "icons",
"type": "any",
"default": "null",
"description": "Custom icons template for the header."
},
{
"name": "modal",
"type": "boolean",
"default": "true",
"description": "Whether to add a translucent overlay behind the sidebar."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "closeOnEscape",
"type": "boolean",
"default": "true",
"description": "Specifies if pressing escape key should hide the sidebar."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onHide",
"description": "Callback to invoke when sidebar gets hidden.",
"arguments": []
},
{
"name": "onShow",
"description": "Callback to invoke when sidebar gets shown.",
"arguments": []
}
]
},
{
"name": "Skeleton",
"source": {
"module": "PrimeReact",
"symbol": "Skeleton"
},
"description": "Skeleton is a placeholder to display instead of the actual content.",
"doc-url": "https://primefaces.org/primereact/showcase/#/skeleton",
"props": [
{
"name": "shape",
"type": "string",
"default": "rectangle",
"description": "Shape of the element, options are \"rectangle\" and \"circle\"."
},
{
"name": "size",
"type": "string",
"default": "null",
"description": "Size of the Circle or Square."
},
{
"name": "width",
"type": "string",
"default": "100%",
"description": "Width of the element."
},
{
"name": "height",
"type": "string",
"default": "1rem",
"description": "Height of the element."
},
{
"name": "borderRadius",
"type": "string",
"default": "null",
"description": "Border radius of the element, defaults to value from theme."
},
{
"name": "animation",
"type": "string",
"default": "wave",
"description": "Type of the animation, valid options are \"wave\" and \"none\"."
}
],
"events": []
},
{
"name": "SlideMenu",
"source": {
"module": "PrimeReact",
"symbol": "SlideMenu"
},
"description": "SlideMenu displays submenus with a slide animation.",
"doc-url": "https://primefaces.org/primereact/showcase/#/slidemenu",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "model",
"type": "array",
"default": "null",
"description": "An array of menuitems."
},
{
"name": "popup",
"type": "boolean",
"default": "false",
"description": "Defines if menu would displayed as a popup."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "easing",
"type": "string",
"default": "ease-out",
"description": "Easing animation to use for sliding."
},
{
"name": "effectDuration",
"type": "any",
"default": "250",
"description": "Duration of the sliding animation in milliseconds."
},
{
"name": "backLabel",
"type": "string",
"default": "Back",
"description": "Label of element to navigate back."
},
{
"name": "menuWidth",
"type": "number",
"default": "190",
"description": "Width of the submenus."
},
{
"name": "viewportHeight",
"type": "number",
"default": "175",
"description": "Height of the scrollable area, a scrollbar appears if a menu height is longer than this value."
},
{
"name": "baseZIndex",
"type": "number",
"default": "0",
"description": "Base zIndex value to use in layering."
},
{
"name": "autoZIndex",
"type": "boolean",
"default": "true",
"description": "Whether to automatically manage layering."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onShow",
"description": "Callback to invoke when a popup menu is shown.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onHide",
"description": "Callback to invoke when a popup menu is hidden.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onNavigate",
"description": "Callback to invoke when a menu is navigated to.",
"arguments": [
{
"name": "event.level",
"type": "number",
"description": "The menu level navigated to"
}
]
}
]
},
{
"name": "Slider",
"source": {
"module": "PrimeReact",
"symbol": "Slider"
},
"description": "Slider is a component to provide input using dragging of a handle.",
"doc-url": "https://primefaces.org/primereact/showcase/#/slider",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "number",
"default": "0",
"description": "Value of the component."
},
{
"name": "animate",
"type": "boolean",
"default": "false",
"description": "When enabled, displays an animation on click of the slider bar."
},
{
"name": "min",
"type": "number",
"default": "0",
"description": "Mininum boundary value."
},
{
"name": "max",
"type": "number",
"default": "100",
"description": "Maximum boundary value."
},
{
"name": "orientation",
"type": "string",
"default": "horizontal",
"description": "Orientation of the slider, valid values are horizontal and vertical."
},
{
"name": "step",
"type": "number",
"default": "1",
"description": "Step factor to increment/decrement the value."
},
{
"name": "range",
"type": "boolean",
"default": "false",
"description": "When speficed, allows two boundary values to be picked."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should be disabled."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke on value change via slide.",
"arguments": [
{
"name": "event.originalEvent",
"type": "any",
"description": "Slide event"
}
]
},
{
"name": "onSlideEnd",
"description": "Callback to invoke when slide ends.",
"arguments": [
{
"name": "event.originalEvent",
"type": "any",
"description": "Slide event"
},
{
"name": "event.value",
"type": "any",
"description": "New value."
}
]
}
]
},
{
"name": "SpeedDial",
"source": {
"module": "PrimeReact",
"symbol": "SpeedDial"
},
"description": "When pressed, a floating action button can display multiple primary actions that can be performed on a page.",
"doc-url": "https://primefaces.org/primereact/showcase/#/speeddial",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "model",
"type": "object",
"default": "null",
"description": "MenuModel instance to define the action items."
},
{
"name": "visible",
"type": "boolean",
"default": "false",
"description": "Specifies the visibility of the overlay."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "direction",
"type": "string",
"default": "up",
"description": "Specifies the opening direction of actions. Valid values are 'up', 'down', 'left', 'right', 'up-left', 'up-right', 'down-left' and 'down-right'"
},
{
"name": "transitionDelay",
"type": "number",
"default": "30",
"description": "Transition delay step for each action item."
},
{
"name": "type",
"type": "string",
"default": "linear",
"description": "Specifies the opening type of actions."
},
{
"name": "radius",
"type": "number",
"default": "0",
"description": "Radius for *circle types."
},
{
"name": "mask",
"type": "boolean",
"default": "false",
"description": "Whether to show a mask element behind the speeddial"
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "Whether the component is disabled."
},
{
"name": "hideOnClickOutside",
"type": "boolean",
"default": "true",
"description": "Whether the actions close when clicked outside."
},
{
"name": "buttonClassName",
"type": "string",
"default": "null",
"description": "Style class of the button element."
},
{
"name": "buttonStyle",
"type": "object",
"default": "null",
"description": "Inline style of the button element."
},
{
"name": "buttonTemplate",
"type": "any",
"default": "null",
"description": "Template of button element."
},
{
"name": "maskClassName",
"type": "string",
"default": "null",
"description": "Style class of the mask element."
},
{
"name": "maskStyle",
"type": "object",
"default": "null",
"description": "Inline style of the mask element."
},
{
"name": "showIcon",
"type": "string",
"default": "pi pi-plus",
"description": "Show icon of the button element."
},
{
"name": "hideIcon",
"type": "string",
"default": "null",
"description": "Hide icon of the button element."
},
{
"name": "rotateAnimation",
"type": "boolean",
"default": "true",
"description": "Defined to rotate showIcon when hideIcon is not present."
}
],
"events": [
{
"name": "onVisibleChange",
"description": "Fired when the visibility of element changed.",
"arguments": [
{
"name": "visible",
"type": "boolean",
"description": "Whether the actions are visible."
}
]
},
{
"name": "onClick",
"description": "Fired when the button element clicked.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event."
}
]
},
{
"name": "onShow",
"description": "Fired when the actions are visible.",
"arguments": []
},
{
"name": "onHide",
"description": "Fired when the actions are hidden.",
"arguments": []
}
]
},
{
"name": "SplitButton",
"source": {
"module": "PrimeReact",
"symbol": "SplitButton"
},
"description": "SplitButton groups a set of commands in an overlay with a default command.",
"doc-url": "https://primefaces.org/primereact/showcase/#/splitbutton",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Identifier of the component."
},
{
"name": "label",
"type": "string",
"default": "null",
"description": "Text of the button."
},
{
"name": "icon",
"type": "string",
"default": "null",
"description": "Name of the icon."
},
{
"name": "loadingIcon",
"type": "any",
"default": "null",
"description": "Name of the loading icon or JSX.Element for loading icon."
},
{
"name": "loading",
"type": "boolean",
"default": "false",
"description": "Display loading icon of the button"
},
{
"name": "model",
"type": "object",
"default": "null",
"description": "MenuModel instance to define the overlay items."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should be disabled."
},
{
"name": "visible",
"type": "boolean",
"default": "true",
"description": "When present, it specifies that the element should be visible."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "ClassName of the component."
},
{
"name": "buttonClassName",
"type": "string",
"default": "null",
"description": "ClassName of the button."
},
{
"name": "menuStyle",
"type": "string",
"default": "null",
"description": "Inline style of the overlay menu."
},
{
"name": "menuClassName",
"type": "string",
"default": "null",
"description": "ClassName class of the overlay menu."
},
{
"name": "menuButtonClassName",
"type": "string",
"default": "null",
"description": "ClassName class of menu dropdown button."
},
{
"name": "buttonProps",
"type": "object",
"default": "undefined",
"description": "Props for the main button, any prop is passed implicity to the button element."
},
{
"name": "menuButtonProps",
"type": "object",
"default": "undefined",
"description": "Props for the dropdown button, any prop is passed implicity to the dropdown button element."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
},
{
"name": "buttonTemplate",
"type": "any",
"default": "null",
"description": "Template of the default button."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
},
{
"name": "dropdownIcon",
"type": "string",
"default": "pi pi-chevron-down",
"description": "Icon class of the dropdown icon."
}
],
"events": [
{
"name": "onClick",
"description": "Callback to invoke when main button is clicked.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onShow",
"description": "Callback to invoke when overlay panel becomes visible.",
"arguments": []
},
{
"name": "onHide",
"description": "Callback to invoke when overlay panel becomes hidden.",
"arguments": []
}
]
},
{
"name": "Splitter",
"source": {
"module": "PrimeReact",
"symbol": "Splitter"
},
"description": "Splitter is utilized to separate and resize panels.",
"doc-url": "https://primefaces.org/primereact/showcase/#/splitter",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "ClassName of the component."
},
{
"name": "layout",
"type": "string",
"default": "horizontal",
"description": "Orientation of the panels, valid values are \"horizontal\" and \"vertical\"."
},
{
"name": "gutterSize",
"type": "number",
"default": "4",
"description": "Size of the divider in pixels."
},
{
"name": "stateKey",
"type": "string",
"default": "null",
"description": "Storage identifier of a stateful Splitter."
},
{
"name": "stateStorage",
"type": "string",
"default": "session",
"description": "Defines where a stateful splitter keeps its state, valid values are \"session\" for sessionStorage and \"local\" for localStorage."
}
],
"events": [
{
"name": "onResizeEnd",
"description": "Callback to invoke when resize ends.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.sizes",
"type": "number[]",
"description": "Sizes of the panels as an array"
}
]
}
]
},
{
"name": "SplitterPanel",
"source": {
"module": "PrimeReact",
"symbol": "SplitterPanel"
},
"description": "SplitterPanel is helper component for Splitter.",
"doc-url": "https://primefaces.org/primereact/showcase/#/splitter",
"props": [
{
"name": "size",
"type": "number",
"default": "null",
"description": "Size of the element relative to 100%."
},
{
"name": "minSize",
"type": "number",
"default": "null",
"description": "Minimum size of the element relative to 100%."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "ClassName of the component."
}
],
"events": []
},
{
"name": "Steps",
"source": {
"module": "PrimeReact",
"symbol": "Steps"
},
"description": "Steps component is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.",
"doc-url": "https://primefaces.org/primereact/showcase/#/steps",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "model",
"type": "array",
"default": "null",
"description": "An array of menuitems."
},
{
"name": "activeIndex",
"type": "number",
"default": "0",
"description": "Index of the active item."
},
{
"name": "readOnly",
"type": "boolean",
"default": "true",
"description": "Whether the items are clickable or not."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
}
],
"events": [
{
"name": "onSelect",
"description": "Callback to invoke when the new step is selected.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.item",
"type": "any",
"description": "Selected item instance"
},
{
"name": "event.index",
"type": "number",
"description": "Index of selected item instance"
}
]
}
]
},
{
"name": "StyleClass",
"source": {
"module": "PrimeReact",
"symbol": "StyleClass"
},
"description": "StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.",
"doc-url": "https://primefaces.org/primereact/showcase/#/styleclass",
"props": [
{
"name": "selector",
"type": "string",
"default": "null",
"description": "Selector to define the target element."
},
{
"name": "nodeRef",
"type": "any",
"default": "null",
"description": "A React reference to DOM element that need to specify."
},
{
"name": "enterClassName",
"type": "string",
"default": "null",
"description": "Style class to add when item begins to get displayed."
},
{
"name": "enterActiveClassName\t",
"type": "string",
"default": "null",
"description": "Style class to add during enter animation."
},
{
"name": "enterToClassName",
"type": "string",
"default": "null",
"description": "Style class to add when enter animation is completed."
},
{
"name": "leaveClassName",
"type": "string",
"default": "null",
"description": "Style class to add when item begins to get hidden."
},
{
"name": "leaveActiveClassName",
"type": "string",
"default": "null",
"description": "Style class to add during leave animation."
},
{
"name": "leaveToClassName",
"type": "string",
"default": "null",
"description": "Style class to add when leave animation is completed.."
},
{
"name": "hideOnOutsideClick",
"type": "boolean",
"default": "false",
"description": "Whether to trigger leave animation when outside of the element is clicked."
},
{
"name": "toggleClassName",
"type": "string",
"default": "null",
"description": "Adds or removes a class when no enter-leave animation is required."
}
],
"events": []
},
{
"name": "TabMenu",
"source": {
"module": "PrimeReact",
"symbol": "TabMenu"
},
"description": "Menu is a navigation/command component that displays items as tab headers.",
"doc-url": "https://primefaces.org/primereact/showcase/#/tabmenu",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "model",
"type": "array",
"default": "null",
"description": "An array of menuitems."
},
{
"name": "activeIndex",
"type": "number",
"default": "0",
"description": "Active index of menuitem."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
}
],
"events": [
{
"name": "onTabChange",
"description": "Callback to invoke when active tab changes.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Selected menuitem"
},
{
"name": "event.index",
"type": "number",
"description": "Index of the selected tab"
}
]
}
]
},
{
"name": "TabPanel",
"source": {
"module": "PrimeReact",
"symbol": "TabPanel"
},
"description": "TabPanel is helper component for TabView.",
"doc-url": "https://primefaces.org/primereact/showcase/#/tabview",
"props": [
{
"name": "header",
"type": "any",
"default": "null",
"description": "Orientation of tab headers."
},
{
"name": "headerTemplate",
"type": "any",
"default": "null",
"description": "Header template of the tab to customize more."
},
{
"name": "leftIcon",
"type": "string",
"default": "null",
"description": "Icons can be placed at left of a header."
},
{
"name": "rightIcon",
"type": "string",
"default": "null",
"description": "Icons can be placed at right of a header."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "Whether the tab is disabled."
},
{
"name": "headerStyle",
"type": "object",
"default": "null",
"description": "Inline style of the tab header."
},
{
"name": "headerClassName",
"type": "string",
"default": "null",
"description": "Style class of the tab header."
},
{
"name": "contentStyle",
"type": "object",
"default": "null",
"description": "Inline style of the tab content."
},
{
"name": "contentClassName",
"type": "string",
"default": "null",
"description": "Style class of the tab content."
}
],
"events": []
},
{
"name": "TabView",
"source": {
"module": "PrimeReact",
"symbol": "TabView"
},
"description": "TabView is a container component to group content with tabs.",
"doc-url": "https://primefaces.org/primereact/showcase/#/tabview",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "activeIndex",
"type": "number",
"default": "null",
"description": "Active index of the TabView."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the tabview."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the tabview."
},
{
"name": "renderActiveOnly",
"type": "boolean",
"default": "true",
"description": "Whether to render the contents of the selected tab or all tabs."
},
{
"name": "scrollable",
"type": "boolean",
"default": "false",
"description": "When enabled displays buttons at each side of the tab headers to scroll the tab list."
}
],
"events": [
{
"name": "onBeforeTabChange",
"description": "Callback to invoke before an active tab is changed. Return false to prevent tab from changing.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.index",
"type": "number",
"description": "Index of the selected tab"
}
]
},
{
"name": "onBeforeTabClose",
"description": "Callback to invoke before an active tab is close. Return false to prevent tab from closing.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.index",
"type": "number",
"description": "Index of the selected tab"
}
]
},
{
"name": "onTabChange",
"description": "Callback to invoke when an active tab is changed.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.index",
"type": "number",
"description": "Index of the selected tab"
}
]
},
{
"name": "onTabClose",
"description": "Callback to invoke when an active tab is close.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.index",
"type": "number",
"description": "Index of the selected tab"
}
]
}
]
},
{
"name": "Tag",
"source": {
"module": "PrimeReact",
"symbol": "Tag"
},
"description": "Tag component is used to categorize content.",
"doc-url": "https://primefaces.org/primereact/showcase/#/tag",
"props": [
{
"name": "value",
"type": "any",
"default": "null",
"description": "Value to display inside the tag."
},
{
"name": "severity",
"type": "string",
"default": "null",
"description": "Severity type of the tag."
},
{
"name": "rounded",
"type": "boolean",
"default": "false",
"description": "Whether the corners of the tag are rounded."
},
{
"name": "icon",
"type": "string",
"default": "null",
"description": "Icon of the tag to display next to the value."
}
],
"events": []
},
{
"name": "Terminal",
"source": {
"module": "PrimeReact",
"symbol": "Terminal"
},
"description": "Terminal is a text based user interface.",
"doc-url": "https://primefaces.org/primereact/showcase/#/terminal",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "welcomeMessage",
"type": "string",
"default": "null",
"description": "Initial text to display on terminal."
},
{
"name": "prompt",
"type": "string",
"default": "null",
"description": "Prompt text for each command."
}
],
"events": []
},
{
"name": "TieredMenu",
"source": {
"module": "PrimeReact",
"symbol": "TieredMenu"
},
"description": "TieredMenu displays submenus in nested overlays.",
"doc-url": "https://primefaces.org/primereact/showcase/#/tieredmenu",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "model",
"type": "array",
"default": "null",
"description": "An array of menuitems."
},
{
"name": "popup",
"type": "boolean",
"default": "false",
"description": "Defines if menu would displayed as a popup."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "baseZIndex",
"type": "number",
"default": "0",
"description": "Base zIndex value to use in layering."
},
{
"name": "autoZIndex",
"type": "boolean",
"default": "true",
"description": "Whether to automatically manage layering."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
}
],
"events": [
{
"name": "onShow",
"description": "Callback to invoke when a popup menu is shown.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onHide",
"description": "Callback to invoke when a popup menu is hidden.",
"arguments": [
{
"name": "event",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "Timeline",
"source": {
"module": "PrimeReact",
"symbol": "Timeline"
},
"description": "Timeline visualizes a series of chained events.",
"doc-url": "https://primefaces.org/primereact/showcase/#/timeline",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "array",
"default": "null",
"description": "An array of events to display."
},
{
"name": "align",
"type": "string",
"default": "left",
"description": "Position of the timeline bar relative to the content. Valid values are \"left\", \"right for vertical layout and \"top\", \"bottom\" for horizontal layout."
},
{
"name": "layout",
"type": "string",
"default": "vertical",
"description": "Orientation of the timeline, valid values are \"vertical\" and \"horizontal\"."
},
{
"name": "dataKey",
"type": "string",
"default": "null",
"description": "Name of the field that uniquely identifies the a record in the data."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
}
],
"events": []
},
{
"name": "Toast",
"source": {
"module": "PrimeReact",
"symbol": "Toast"
},
"description": "Toast is used to display messages in an overlay.",
"doc-url": "https://primefaces.org/primereact/showcase/#/toast",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "baseZIndex",
"type": "number",
"default": "0",
"description": "Base zIndex value to add to initial layering of PrimeReact components which start from 1000."
},
{
"name": "position",
"type": "string",
"default": "topright",
"description": "Position of the toast in viewport, valid values are \"top-right\", \"top-left\", \"bottom-left\" and \"bottom-right\"."
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "self",
"description": "DOM element instance where the component should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
}
],
"events": [
{
"name": "onRemove",
"description": "Callback to invoke when a message is removed.",
"arguments": [
{
"name": "message",
"type": "any",
"description": "Removed message"
}
]
},
{
"name": "onClick",
"description": "Callback to invoke when a message gets clicked.",
"arguments": [
{
"name": "message",
"type": "any",
"description": "Clicked message"
}
]
},
{
"name": "onShow",
"description": "Callback to invoke when message becomes visible.",
"arguments": []
},
{
"name": "onHide",
"description": "Callback to invoke when message becomes hidden.",
"arguments": []
},
{
"name": "onMouseEnter",
"description": "Callback to invoke when a message gets focus with mouse.",
"arguments": [
{
"name": "event",
"type": "MouseEvent",
"description": "Mouse Event"
}
]
},
{
"name": "onMouseLeave",
"description": "Callback to invoke when a message loses focus with mouse.",
"arguments": [
{
"name": "event",
"type": "MouseEvent",
"description": "Mouse Event"
}
]
}
]
},
{
"name": "ToggleButton",
"source": {
"module": "PrimeReact",
"symbol": "ToggleButton"
},
"description": "ToggleButton is used to select a boolean value using a button.",
"doc-url": "https://primefaces.org/primereact/showcase/#/togglebutton",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "onIcon",
"type": "string",
"default": "null",
"description": "Icon for the on state."
},
{
"name": "offIcon",
"type": "string",
"default": "null",
"description": "Icon for the off state."
},
{
"name": "onLabel",
"type": "string",
"default": "yes",
"description": "Label for the on state."
},
{
"name": "offLabel",
"type": "string",
"default": "no",
"description": "Label for the off state."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "checked",
"type": "boolean",
"default": "false",
"description": "Specifies the on/off state of the button."
},
{
"name": "tabIndex",
"type": "number",
"default": "0",
"description": "Index of the element in tabbing order."
},
{
"name": "iconPos",
"type": "string",
"default": "left",
"description": "Position of the icon, valid values are \"left\" and \"right\"."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke on value change.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Value as the checked state."
}
]
},
{
"name": "onFocus",
"description": "Callback to invoke when autocomplete gets focus.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
},
{
"name": "onBlur",
"description": "Callback to invoke when autocomplete loses focus.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
}
]
}
]
},
{
"name": "Toolbar",
"source": {
"module": "PrimeReact",
"symbol": "Toolbar"
},
"description": "Toolbar is a grouping component for buttons and other content.",
"doc-url": "https://primefaces.org/primereact/showcase/#/toolbar",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "left",
"type": "any",
"default": "null",
"description": "The template of left section."
},
{
"name": "right",
"type": "any",
"default": "null",
"description": "The template of right section"
},
{
"name": "start",
"type": "any",
"default": "null",
"description": "The template of start section."
},
{
"name": "center",
"type": "any",
"default": "null",
"description": "The template of center section."
},
{
"name": "end",
"type": "any",
"default": "null",
"description": "The template of end section."
}
],
"events": []
},
{
"name": "Tooltip",
"source": {
"module": "PrimeReact",
"symbol": "Tooltip"
},
"description": "Tooltip functionality is integrated within various PrimeReact components.",
"doc-url": "https://primefaces.org/primereact/showcase/#/tooltip",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "target",
"type": "selector or DOM element",
"default": "null",
"description": "Target element on global tooltip option."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the tooltip should be hidden."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the tooltip."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Style of the tooltip."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "position",
"type": "string",
"default": "right",
"description": "Position of the tooltip, valid values are mouse, right, left, top and bottom."
},
{
"name": "my",
"type": "string",
"default": "null",
"description": "Defines which position on the tooltip being positioned to align with the target element."
},
{
"name": "at",
"type": "string",
"default": "null",
"description": "Defines which position on the target element to align the positioned tooltip."
},
{
"name": "event",
"type": "string",
"default": "hover",
"description": "Event to show the tooltip, valid values are hover, focus, and both."
},
{
"name": "showEvent",
"type": "string",
"default": "mouseenter",
"description": "Event to show the tooltip if the event property is empty."
},
{
"name": "hideEvent",
"type": "string",
"default": "mouseleave",
"description": "Event to hide the tooltip if the event property is empty."
},
{
"name": "autoZIndex",
"type": "boolean",
"default": "true",
"description": "Whether to automatically manage layering."
},
{
"name": "baseZIndex",
"type": "number",
"default": "0",
"description": "Base zIndex value to use in layering."
},
{
"name": "mouseTrack",
"type": "boolean",
"default": "false",
"description": "Whether the tooltip will follow the mouse."
},
{
"name": "mouseTrackTop",
"type": "number",
"default": "5",
"description": "Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled."
},
{
"name": "mouseTrackLeft",
"type": "number",
"default": "5",
"description": "Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled."
},
{
"name": "showDelay",
"type": "number",
"default": "0",
"description": "Delay to show the tooltip in milliseconds."
},
{
"name": "updateDelay",
"type": "number",
"default": "0",
"description": "Delay to update the tooltip in milliseconds."
},
{
"name": "hideDelay",
"type": "number",
"default": "0",
"description": "Delay to hide the tooltip in milliseconds."
},
{
"name": "autoHide",
"type": "boolean",
"default": "true",
"description": "Whether to hide tooltip when hovering over tooltip content."
},
{
"name": "onBeforeShow",
"type": "function",
"default": "null",
"description": "Callback to invoke before the tooltip is shown."
},
{
"name": "onBeforeHide",
"type": "function",
"default": "null",
"description": "Callback to invoke before the tooltip is hidden."
},
{
"name": "onShow",
"type": "function",
"default": "null",
"description": "Callback to invoke when the tooltip is shown."
},
{
"name": "onHide",
"type": "function",
"default": "null",
"description": "Callback to invoke when the tooltip is hidden."
}
],
"events": [
{
"name": "onBeforeShow",
"description": "Callback to invoke before the tooltip is shown.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.target",
"type": "any",
"description": "Target Element."
}
]
},
{
"name": "onBeforeHide",
"description": "Callback to invoke before the tooltip is hidden.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.target",
"type": "any",
"description": "Target Element."
}
]
},
{
"name": "onShow",
"description": "Callback to invoke when the tooltip is shown.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.target",
"type": "any",
"description": "Target Element."
}
]
},
{
"name": "onHide",
"description": "Callback to invoke when the tooltip is hidden.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.target",
"type": "any",
"description": "Target Element."
}
]
}
]
},
{
"name": "Tree",
"source": {
"module": "PrimeReact",
"symbol": "Tree"
},
"description": "Tree is used to display hierarchical data.",
"doc-url": "https://primefaces.org/primereact/showcase/#/tree",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "array",
"default": "null",
"description": "An array of treenodes."
},
{
"name": "selectionMode",
"type": "string",
"default": "null",
"description": "Defines the selection mode, valid values \"single\", \"multiple\", and \"checkbox\"."
},
{
"name": "selectionKeys",
"type": "any",
"default": "null",
"description": "A single or an array of keys to control the selection state."
},
{
"name": "contextMenuSelectionKey",
"type": "any",
"default": "null",
"description": "A single key to control the selection with the context menu."
},
{
"name": "expandedKeys",
"type": "array",
"default": "null",
"description": "An array of keys to represent the state of the tree expansion state in controlled mode."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "contentStyle",
"type": "object",
"default": "null",
"description": "Inline style of the tree content."
},
{
"name": "contentClassName",
"type": "string",
"default": "null",
"description": "Style class of the tree content."
},
{
"name": "metaKeySelection",
"type": "boolean",
"default": "true",
"description": "Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically."
},
{
"name": "propagateSelectionUp",
"type": "boolean",
"default": "true",
"description": "Whether checkbox selections propagate to ancestor nodes."
},
{
"name": "propagateSelectionDown",
"type": "boolean",
"default": "true",
"description": "Whether checkbox selections propagate to descendant nodes."
},
{
"name": "loading",
"type": "boolean",
"default": "false",
"description": "Whether to display loading indicator."
},
{
"name": "loadingIcon",
"type": "string",
"default": "pi pi-spin",
"description": "Icon to display when tree is loading."
},
{
"name": "dragdropScope",
"type": "string",
"default": "false",
"description": "Unique key to enable dragdrop functionality."
},
{
"name": "header",
"type": "any",
"default": "null",
"description": "The template of header."
},
{
"name": "footer",
"type": "any",
"default": "null",
"description": "The template of footer."
},
{
"name": "ariaLabel",
"type": "string",
"default": "false",
"description": "Used to define a string that labels the component."
},
{
"name": "ariaLabelledBy",
"type": "string",
"default": "null",
"description": "Contains the element IDs of labels."
},
{
"name": "nodeTemplate",
"type": "any",
"default": "false",
"description": "Template of node element."
},
{
"name": "togglerTemplate",
"type": "any",
"default": "null",
"description": "Template of toggler element."
},
{
"name": "filterTemplate",
"type": "any",
"default": "null",
"description": "Template of filter element."
},
{
"name": "showHeader",
"type": "boolean",
"default": "true",
"description": "Whether to show the header or not."
},
{
"name": "filter",
"type": "boolean",
"default": "false",
"description": "When specified, displays an input field to filter the items."
},
{
"name": "filterValue",
"type": "string",
"default": "null",
"description": "When filtering is enabled, the value of input field."
},
{
"name": "filterBy",
"type": "string",
"default": "label",
"description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against."
},
{
"name": "filterMode",
"type": "string",
"default": "lenient",
"description": "Mode for filtering valid values are \"lenient\" and \"strict\". Default is lenient."
},
{
"name": "filterPlaceholder",
"type": "string",
"default": "null",
"description": "Placeholder text to show when filter input is empty."
},
{
"name": "filterLocale",
"type": "string",
"default": "undefined",
"description": "Locale to use in filtering. The default locale is the host environment's current locale."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should be disabled."
}
],
"events": [
{
"name": "onSelect",
"description": "Callback to invoke when a node is selected.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Unselected node instance."
}
]
},
{
"name": "onUnselect",
"description": "Callback to invoke when a node is unselected.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Expanded node instance."
}
]
},
{
"name": "onExpand",
"description": "Callback to invoke when a node is expanded.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Expanded node instance."
}
]
},
{
"name": "onCollapse",
"description": "Callback to invoke when a node is collapsed.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Collapsed node instance."
}
]
},
{
"name": "onSelectionChange",
"description": "Callback to invoke when selection changes.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Selected node key(s)."
}
]
},
{
"name": "onContextMenuSelectionChange",
"description": "Callback to invoke when selection changes with a context menu.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Selected node key."
}
]
},
{
"name": "onToggle",
"description": "Callback to invoke when a node is toggled.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Toggled node instance."
}
]
},
{
"name": "onDragDrop",
"description": "Callback to invoke when a node is toggled.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "New value after the dragdrop."
}
]
},
{
"name": "onContextMenu",
"description": "Callback to invoke when a node is selected with a context menu.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Selected node instance."
}
]
},
{
"name": "onFilterValueChange",
"description": "Callback to invoke when filter value changes.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "the filtered value"
}
]
},
{
"name": "onNodeClick",
"description": "Callback to invoke when the node is clicked.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "the current node"
}
]
},
{
"name": "onNodeDoubleClick",
"description": "Callback to invoke when the node is double-clicked.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "the current node"
}
]
}
]
},
{
"name": "TreeSelect",
"source": {
"module": "PrimeReact",
"symbol": "TreeSelect"
},
"description": "TreeSelect is a form component to choose from hierarchical data.",
"doc-url": "https://primefaces.org/primereact/showcase/#/treeselect",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "any",
"default": "null",
"description": "A single or an object of keys to control the selection state."
},
{
"name": "name",
"type": "string",
"default": "null",
"description": "Name of the input element."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the component."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the component should be disabled."
},
{
"name": "options",
"type": "array",
"default": "null",
"description": "An array of options to display."
},
{
"name": "scrollHeight",
"type": "string",
"default": "400px",
"description": "Maximum height of the options panel."
},
{
"name": "placeholder",
"type": "string",
"default": "null",
"description": "Hint text for the input field."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "inputId",
"type": "string",
"default": "null",
"description": "Identifier of the input element."
},
{
"name": "ariaLabel",
"type": "string",
"default": "null",
"description": "Used to define a string that labels the component."
},
{
"name": "ariaLabelledBy",
"type": "string",
"default": "null",
"description": "Contains the element IDs of labels."
},
{
"name": "selectionMode",
"type": "string",
"default": "null",
"description": "Defines the selection mode, valid values \"single\", \"multiple\", and \"checkbox\"."
},
{
"name": "expandedKeys",
"type": "array",
"default": "null",
"description": "An array of keys to represent the state of the tree expansion state in controlled mode."
},
{
"name": "panelClassName",
"type": "string",
"default": "null",
"description": "Style class of the overlay panel element."
},
{
"name": "panelStyle",
"type": "string",
"default": "null",
"description": "Inline style of the overlay panel element."
},
{
"name": "appendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "emptyMessage",
"type": "string",
"default": "null",
"description": "Text to display when there is no data."
},
{
"name": "display",
"type": "string",
"default": "comma",
"description": "Defines how the selected items are displayed, valid values are \"comma\" and \"chip\"."
},
{
"name": "metaKeySelection",
"type": "boolean",
"default": "true",
"description": "Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically."
},
{
"name": "valueTemplate",
"type": "any",
"default": "null",
"description": "The template of selected values."
},
{
"name": "panelHeaderTemplate",
"type": "any",
"default": "null",
"description": "The template of header."
},
{
"name": "panelFooterTemplate",
"type": "any",
"default": "null",
"description": "The template of footer."
},
{
"name": "filterTemplate",
"type": "any",
"default": "null",
"description": "The template of filter element"
},
{
"name": "transitionOptions",
"type": "object",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
},
{
"name": "dropdownIcon",
"type": "string",
"default": "pi pi-chevron-down",
"description": "Icon class of the dropdown icon."
},
{
"name": "filter",
"type": "boolean",
"default": "false",
"description": "When specified, displays an input field to filter the items."
},
{
"name": "filterValue",
"type": "string",
"default": "null",
"description": "When filtering is enabled, the value of input field."
},
{
"name": "filterBy",
"type": "string",
"default": "label",
"description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against."
},
{
"name": "filterMode",
"type": "string",
"default": "lenient",
"description": "Mode for filtering valid values are \"lenient\" and \"strict\". Default is lenient."
},
{
"name": "filterPlaceholder",
"type": "string",
"default": "null",
"description": "Placeholder text to show when filter input is empty."
},
{
"name": "filterLocale",
"type": "string",
"default": "undefined",
"description": "Locale to use in filtering. The default locale is the host environment's current locale."
},
{
"name": "filterInputAutoFocus",
"type": "boolean",
"default": "true",
"description": "When the panel is opened, it specifies that the filter input should focus automatically."
},
{
"name": "resetFilterOnHide",
"type": "boolean",
"default": "false",
"description": "Clears the filter value when hiding the dropdown."
}
],
"events": [
{
"name": "onShow",
"description": "Callback to invoke when the overlay is shown.",
"arguments": []
},
{
"name": "onHide",
"description": "Callback to invoke when the overlay is hidden.",
"arguments": []
},
{
"name": "onChange",
"description": "Callback to invoke when selection changes.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Selected node key(s)."
}
]
},
{
"name": "onToggle",
"description": "Callback to invoke when a node is toggled.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Toggled node instance."
}
]
},
{
"name": "onNodeSelect",
"description": "Callback to invoke when selection changes.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Selected node instance."
}
]
},
{
"name": "onNodeUnselect",
"description": "Callback to invoke when a node is unselected.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Unselected node instance."
}
]
},
{
"name": "onNodeExpand",
"description": "Callback to invoke when a node is expanded.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Expanded node instance."
}
]
},
{
"name": "onNodeCollapse",
"description": "Callback to invoke when a node is collapsed.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Collapsed node instance."
}
]
},
{
"name": "onFilterValueChange",
"description": "Callback to invoke when a node is collapsed.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "string",
"description": "Callback to invoke when filter value changes."
}
]
}
]
},
{
"name": "TreeTable",
"source": {
"module": "PrimeReact",
"symbol": "TreeTable"
},
"description": "TreeTable is used to display hierarchical data in tabular format.",
"doc-url": "https://primefaces.org/primereact/showcase/#/treetable",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "array",
"default": "null",
"description": "An array of treenodes to display."
},
{
"name": "header",
"type": "any",
"default": "null",
"description": "Header content of the table."
},
{
"name": "footer",
"type": "any",
"default": "null",
"description": "Footer content of the table."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "any",
"default": "null",
"description": "Style class of the component."
},
{
"name": "tableStyle",
"type": "object",
"default": "null",
"description": "Inline style of the table element."
},
{
"name": "tableClassName",
"type": "any",
"default": "null",
"description": "Style class of the table element."
},
{
"name": "expandedKeys",
"type": "array",
"default": "null",
"description": "An array of keys to represent the state of the tree expansion state in controlled mode."
},
{
"name": "paginator",
"type": "boolean",
"default": "false",
"description": "When specified as true, enables the pagination."
},
{
"name": "paginatorPosition",
"type": "string",
"default": "bottom",
"description": "Position of the paginator, options are \"top\",\"bottom\" or \"both\"."
},
{
"name": "alwaysShowPaginator",
"type": "boolean",
"default": "true",
"description": "Whether to show it even there is only one page."
},
{
"name": "paginatorClassName",
"type": "string",
"default": "null",
"description": "Style class of the paginator element."
},
{
"name": "paginatorTemplate",
"type": "string|object",
"default": "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",
"description": "Template of the paginator. For details, refer to the template section of the paginator documentation for further options."
},
{
"name": "paginatorLeft",
"type": "Element",
"default": "null",
"description": "Content for the left side of the paginator."
},
{
"name": "paginatorRight",
"type": "Element",
"default": "null",
"description": "Content for the right side of the paginator."
},
{
"name": "pageLinkSize",
"type": "number",
"default": "5",
"description": "Number of page links to display."
},
{
"name": "rowsPerPageOptions",
"type": "array",
"default": "null",
"description": "Array of integer values to display inside rows per page dropdown."
},
{
"name": "currentPageReportTemplate",
"type": "string",
"default": "({`{currentPage} of {totalPages}`})",
"description": "Template of the current page report element. Available placeholders are {currentPage}, {totalPages}, {rows}, {first}, {last} and {totalRecords}."
},
{
"name": "paginatorDropdownAppendTo",
"type": "DOM element | string",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
},
{
"name": "first",
"type": "number",
"default": "0",
"description": "Index of the first row to be displayed."
},
{
"name": "rows",
"type": "number",
"default": "null",
"description": "Number of rows to display per page."
},
{
"name": "totalRecords",
"type": "number",
"default": "null",
"description": "Number of total records, defaults to length of value when not defined."
},
{
"name": "lazy",
"type": "boolean",
"default": "false",
"description": "Defines if data is loaded and interacted with in lazy manner."
},
{
"name": "sortField",
"type": "string",
"default": "null",
"description": "Name of the field to sort data by default."
},
{
"name": "sortOrder",
"type": "number",
"default": "null",
"description": "Order to sort the data by default."
},
{
"name": "multiSortMeta",
"type": "array",
"default": "null",
"description": "An array of SortMeta objects to sort the data by default in multiple sort mode."
},
{
"name": "sortMode",
"type": "string",
"default": "single",
"description": "Defines whether sorting works on single column or on multiple columns."
},
{
"name": "defaultSortOrder",
"type": "number",
"default": "1",
"description": "Default sort order of an unsorted column."
},
{
"name": "removableSort",
"type": "boolean",
"default": "false",
"description": "When enabled, columns can have an un-sorted state."
},
{
"name": "selectionMode",
"type": "string",
"default": "null",
"description": "Defines the selection mode, valid values \"single\", \"multiple\", and \"checkbox\"."
},
{
"name": "selectionKeys",
"type": "any",
"default": "null",
"description": "A single or an array of keys to control the selection state."
},
{
"name": "contextMenuSelectionKey",
"type": "any",
"default": "null",
"description": "A single key to control the selection with the context menu."
},
{
"name": "metaKeySelection",
"type": "boolean",
"default": "true",
"description": "Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically."
},
{
"name": "selectOnEdit",
"type": "boolean",
"default": "true",
"description": "Determines whether the cell editor will be opened when clicking to select any row on Selection and Cell Edit modes."
},
{
"name": "propagateSelectionUp",
"type": "boolean",
"default": "true",
"description": "Whether checkbox selections propagate to ancestor nodes."
},
{
"name": "propagateSelectionDown",
"type": "boolean",
"default": "true",
"description": "Whether checkbox selections propagate to descendant nodes."
},
{
"name": "autoLayout",
"type": "boolean",
"default": "false",
"description": "Whether the cell widths scale according to their content or not."
},
{
"name": "rowClassName",
"type": "function",
"default": "null",
"description": "Function that takes the row data and returns an object in \"{'styleclass' : condition}\" format to define a class name for a particular row."
},
{
"name": "loading",
"type": "boolean",
"default": "false",
"description": "Displays a loader to indicate data load is in progress."
},
{
"name": "loadingIcon",
"type": "string",
"default": "pi pi-spinner",
"description": "The icon to show while indicating data load is in progress."
},
{
"name": "tabIndex",
"type": "number",
"default": "null",
"description": "Index of the element in tabbing order."
},
{
"name": "scrollable",
"type": "boolean",
"default": "false",
"description": "When specified, enables horizontal and/or vertical scrolling."
},
{
"name": "scrollHeight",
"type": "string",
"default": "null",
"description": "Height of the scroll viewport."
},
{
"name": "reorderableColumns",
"type": "boolean",
"default": "false",
"description": "When enabled, columns can be reordered using drag and drop."
},
{
"name": "filters",
"type": "array",
"default": "null",
"description": "An array of FilterMetadata objects to provide external filters."
},
{
"name": "globalFilter",
"type": "any",
"default": "null",
"description": "Value of the global filter to use in filtering."
},
{
"name": "globalFilterMatchMode",
"type": "string",
"default": "contains",
"description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
},
{
"name": "filterMode",
"type": "string",
"default": "lenient",
"description": "Mode for filtering valid values are lenient and strict. Default is lenient."
},
{
"name": "headerColumnGroup",
"type": "ColumnGroup",
"default": "null",
"description": "ColumnCroup component for header."
},
{
"name": "footerColumnGroup",
"type": "ColumnGroup",
"default": "null",
"description": "ColumnCroup component for footer."
},
{
"name": "frozenHeaderColumnGroup",
"type": "ColumnGroup",
"default": "null",
"description": "ColumnCroup component for header of frozen columns."
},
{
"name": "frozenFooterColumnGroup",
"type": "ColumnGroup",
"default": "null",
"description": "ColumnCroup component for footer of frozen columns."
},
{
"name": "frozenWidth",
"type": "string",
"default": "null",
"description": "Width of the frozen part in scrollable DataTable."
},
{
"name": "resizableColumns",
"type": "boolean",
"default": "false",
"description": "When enabled, columns can be resized using drag and drop."
},
{
"name": "columnResizeMode",
"type": "string",
"default": "fit",
"description": "Defines whether the overall table width should change on column resize, valid values are \"fit\" and \"expand\"."
},
{
"name": "emptyMessage",
"type": "string",
"default": "No records found",
"description": "Text to display when there is no data."
},
{
"name": "rowHover",
"type": "boolean",
"default": "false",
"description": "When enabled, background of the rows change on hover.."
},
{
"name": "showGridlines",
"type": "boolean",
"default": "false",
"description": "Whether to show grid lines between cells."
},
{
"name": "stripedRows",
"type": "boolean",
"default": "false",
"description": "Whether to displays rows with alternating colors."
}
],
"events": [
{
"name": "onExpand",
"description": "Callback to invoke when a node is expanded.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Expanded node instance."
}
]
},
{
"name": "onCollapse",
"description": "Callback to invoke when a node is collapsed.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Expanded node instance."
}
]
},
{
"name": "onToggle",
"description": "Callback to invoke when a node is toggled.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Toggled node instance"
}
]
},
{
"name": "onPage",
"description": "Callback to invoke on pagination.",
"arguments": [
{
"name": "event.first",
"type": "any",
"description": "Index of the first row."
},
{
"name": "event.rows",
"type": "any",
"description": "Rows per page."
}
]
},
{
"name": "onSort",
"description": "Callback to invoke on pagination.",
"arguments": [
{
"name": "event.sortField",
"type": "any",
"description": "Field to sort against."
},
{
"name": "event.sortOrder",
"type": "any",
"description": "Sort order as integer."
},
{
"name": "event.multiSortMeta",
"type": "any",
"description": "MultiSort metadata."
}
]
},
{
"name": "onFilter",
"description": "Callback to invoke when a node is selected.",
"arguments": [
{
"name": "event.filters",
"type": "any",
"description": "Collection of active filters."
}
]
},
{
"name": "onSelect",
"description": "Callback to invoke when a node is selected.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Selected node instance."
}
]
},
{
"name": "onUnselect",
"description": "Callback to invoke when a node is unselected.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "browser event"
},
{
"name": "event.node",
"type": "any",
"description": "Unselected node instance."
}
]
},
{
"name": "onRowClick",
"description": "Callback to invoke when a row is clicked.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "browser event"
},
{
"name": "event.data",
"type": "any",
"description": "Clicked row data"
}
]
},
{
"name": "onSelectionChange",
"description": "Callback to invoke when selection changes.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "browser event"
},
{
"name": "event.data",
"type": "any",
"description": "Selected node key(s)."
}
]
},
{
"name": "onContextMenuSelectionChange",
"description": "Callback to invoke when selection changes with a context menu.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Selected node key."
}
]
},
{
"name": "onColumnResizeEnd",
"description": "Callback to invoke when a column is resized.",
"arguments": [
{
"name": "event.element",
"type": "any",
"description": "DOM element of the resized column."
},
{
"name": "event.column",
"type": "any",
"description": "Properties of the resized column."
},
{
"name": "event.delta",
"type": "any",
"description": "Change in column width"
}
]
},
{
"name": "onColReorder",
"description": "Callback to invoke when a column is reordered.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.dragIndex",
"type": "any",
"description": "Index of the dragged column"
},
{
"name": "event.dropIndex",
"type": "any",
"description": "Index of the dropped column"
},
{
"name": "event.columns",
"type": "any",
"description": "Columns array after reorder."
}
]
},
{
"name": "onContextMenu",
"description": "Callback to invoke when a context menu is clicked.",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Original event instance."
},
{
"name": "event.data",
"type": "any",
"description": "Collapsed row data "
}
]
}
]
},
{
"name": "TriStateCheckbox",
"source": {
"module": "PrimeReact",
"symbol": "TriStateCheckbox"
},
"description": "TriStateCheckbox is used to select either \"true\", \"false\" or \"null\" as the value.",
"doc-url": "https://primefaces.org/primereact/showcase/#/tristatecheckbox",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "value",
"type": "any",
"default": "null",
"description": "Value of the TriStateCheckbox."
},
{
"name": "style",
"type": "string",
"default": "null",
"description": "Inline style of the element."
},
{
"name": "className",
"type": "string",
"default": "null",
"description": "Style class of the element."
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the element value cannot be altered."
},
{
"name": "readOnly",
"type": "boolean",
"default": "false",
"description": "When present, it specifies that the value cannot be changed."
},
{
"name": "tabIndex",
"type": "number",
"default": "0",
"description": "Index of the element in tabbing order."
},
{
"name": "tooltip",
"type": "any",
"default": "null",
"description": "Content of the tooltip."
},
{
"name": "tooltipOptions",
"type": "object",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
}
],
"events": [
{
"name": "onChange",
"description": "Callback to invoke on value change",
"arguments": [
{
"name": "event.originalEvent",
"type": "object",
"description": "Browser event"
},
{
"name": "event.value",
"type": "any",
"description": "Current Value"
}
]
}
]
},
{
"name": "VirtualScroller",
"source": {
"module": "PrimeReact",
"symbol": "VirtualScroller"
},
"description": "VirtualScroller is a performant approach to handle huge data efficiently.",
"doc-url": "https://primefaces.org/primereact/showcase/#/virtualscroller",
"props": [
{
"name": "id",
"type": "string",
"default": "null",
"description": "Unique identifier of the element."
},
{
"name": "style",
"type": "React.CSSProperties",
"default": "null",
"description": "Inline style of the component."
},
{
"name": "className",
"type": "any",
"default": "null",
"description": "Style class of the component."
},
{
"name": "items",
"type": "array",
"default": "null",
"description": "An array of objects to display."
},
{
"name": "itemSize",
"type": "number|[number, number]",
"default": "null",
"description": "The height/width of item according to orientation."
},
{
"name": "scrollHeight",
"type": "string",
"default": "null",
"description": "Height of the scroll viewport."
},
{
"name": "scrollWidth",
"type": "string",
"default": "null",
"description": "Width of the scroll viewport."
},
{
"name": "orientation",
"type": "string",
"default": "vertical",
"description": "The orientation of scrollbar, valid values are \"vertical\", \"horizontal\" and \"both\"."
},
{
"name": "numToleratedItems",
"type": "number",
"default": "null",
"description": "Determines how many additional elements to add to the DOM outside of the view.According to the scrolls made up and down, extra items are added in a certain algorithm in the form of multiples of this number.Default value is half the number of items shown in the view."
},
{
"name": "delay",
"type": "number",
"default": "0",
"description": "Delay in scroll before new data is loaded."
},
{
"name": "resizeDelay",
"type": "number",
"default": "10",
"description": "Delay after window's resize finishes."
},
{
"name": "lazy",
"type": "boolean",
"default": "false",
"description": "Defines if data is loaded and interacted with in lazy manner."
},
{
"name": "showLoader",
"type": "boolean",
"default": "false",
"description": "Whether to show loader."
},
{
"name": "autoSize",
"type": "boolean",
"default": "false",
"description": "Whether to dynamically change the height or width of scrollable container."
},
{
"name": "loadingTemplate",
"type": "any",
"default": "null",
"description": "The template of loader."
},
{
"name": "loaderIconTemplate",
"type": "any",
"default": "null",
"description": "The template of loader's icon."
},
{
"name": "itemTemplate",
"type": "any",
"default": "null",
"description": "The template of item."
},
{
"name": "contentTemplate",
"type": "any",
"default": "null",
"description": "The template of item's wrapper element."
}
],
"events": [
{
"name": "onScroll",
"description": "Callback to invoke when scroll position changes.",
"arguments": [
{
"name": "event",
"type": "any",
"description": "Browser event."
}
]
},
{
"name": "onScrollIndexChange",
"description": "Callback to invoke when scroll position and item's range in view changes.",
"arguments": [
{
"name": "event.first",
"type": "any",
"description": "First index of the new data range to be loaded."
},
{
"name": "event.last",
"type": "any",
"description": "Last index of the new data range to be loaded."
}
]
},
{
"name": "onLazyLoad",
"description": "Callback to invoke in lazy mode to load new data.",
"arguments": [
{
"name": "event.first",
"type": "any",
"description": "First index of the new data range to be loaded."
},
{
"name": "event.last",
"type": "any",
"description": "Last index of the new data range to be loaded."
}
]
}
]
}
]
}