> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-platform-docs-release.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>