> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Group Details

> Group Details — CometChat documentation.

`CometChatDetails` is a component that provides additional information and settings related to a specific group.

The details screen includes the following elements and functionalities:

1. Group Information: It displays details about the user. This includes his/her profile picture, name, status, and other relevant information.
2. Group Chat Features: It provides additional functionalities for managing the group. This includes options to add or remove participants, assign roles or permissions, and view group-related information.
3. Group Actions: This offers actions related to the group, such as leaving the group, or deleting the group.

## Properties

### Group

You can view details of this particular group

| Name | Type | Description |
| - | - | - |
| group | [CometChat.Group](/sdk/javascript/create-group#group-class) | View details of this particular CometChat group |

### Title

Title for the component

| Name | Type | Description |
| - | - | - |
| title | string | Heading text for the component |

### Asset URLs

Custom asset URL used for graphical representation

| Name | Type | Description |
| - | - | - |
| privateGroupIcon | string | Asset URL for the icon representing private groups |
| protectedGroupIcon | string | Asset URL for the icon representing password protected groups |
| closeButtonIconURL | string | Asset URL for the close icon |

### Data / Templates

Pre-defined structure to serve as a starting point to create the details component.

| Name | Type | Description |
| - | - | - |
| data | [CometChatDetailsTemplate](/web-shared/detailstemplate) | Data model that serve as a starting point of the details component for a particular user |

### Custom view

UI component created and customised by the developer to meet your design or functional requirements.

| Name | Type | Description |
| - | - | - |
| subtitleView | Function as PropType\<(user?: CometChat.User) => ViewType> | User-defined component to customise the secondary text shown in the default user profile. |
| customProfileView | Function as PropType\<(user?: CometChat.User) => ViewType> | User-defined component to customise user profile view. |

### Toggle profile view

Switch to hide or show the default user profile.

| Name | Type | Description |
| - | - | - |
| hideProfile | boolean | When set to true, the user profile view will be hidden |

### Function callbacks

Functions that can be invoked by the user in response to a specific event or condition.

| Name | Type | Description |
| - | - | - |
| onClose | Function as PropType\<() => void> | Override the method that is invoked when user clicks on the close icon. |
| onError | Function as PropType\<(error: CometChat.CometChatException) => void> | Override the method that is invoked when an error is encountered within the details component |

### Configurations

| Name | Type | Description |
| - | - | - |
| groupMembersConfiguration | [GroupMembersConfiguration](/web-shared/group-members-configuration) | Configurable properties of the `CometChatGroupMembers` component |
| addMembersConfiguration | [AddMembersConfiguration](/web-shared/add-members-configuration) | Configurable properties of the `CometChatAddMembers` component |
| bannedMembersConfiguration | [BannedMembersConfiguration](/web-shared/banned-members-configuration) | Configurable properties of the `CometChatBannedMembers` component |
| transferOwnershipConfiguration | [TransferOwnershipConfiguration](/web-shared/transfer-ownership-configuration) | Configurable properties of the `CometChatTransferOwnership` component |

### Style

Styling properties and values of all the child components

| Name | Type | Description |
| - | - | - |
| avatarStyle | [AvatarStyle](/web-elements/avatar#avatar-style) | Styling properties and values of the [Avatar](/web-elements/avatar) component |
| statusIndicatorStyle | [StatusIndicator](/web-elements/status-indicator) | Styling properties and values of the [StatusIndicator](/web-elements/status-indicator) component |
| listItemStyle | [ListItemStyle](/web-elements/list-item#listitemstyle) | Styling properties and values of the [ListItem](/web-elements/list-item) component |
| leaveDialogStyle | [ConfirmDialogStyle](/web-elements/confirm-dialog#confirmdialogstyle) | Styling properties and values of the [ConfirmDialog](/web-elements/confirm-dialog) component |
| detailsStyle | [DetailsStyle](/web-shared/detailsstyle) | Styling properties and values of the [Details](/ui-kit/vue/group-details) component |

## Usage

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    //Group with guid=hello_group
    const GUID = "hello_group";
    const groupName = "Hello Group!";
    const groupType = CometChat.GROUP_TYPE.PUBLIC;
    const password = "";

    var group = new CometChat.Group(GUID, groupName, groupType, password);

    //Pass the user object to the details component
    <CometChatDetails [group]="group"></CometChatDetails>
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.