> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: e33ecc39-38fb-4cbb-aa6b-3ea3c464be14
---

# CrmAssociationPivot

> Learn about the AssociationPivot component for use in UI extensions.

export const Tag = ({children, type = 'default', className = ''}) => {
  return <span className={`tag tag-${type} ${className}`.trim()}>
      {children}
    </span>;
};

The `CrmAssociationPivot` component is a CRM data component that renders a list of associated records organized by their assigned [association label](https://knowledge.hubspot.com/object-settings/create-and-use-association-labels). You'll specify the type of records that you want to appear along with table attributes such as pagination, sorting, and more. You can either return all labels or specify the labels to return.

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/ui-ext-components-associationspivot.png" alt="ui-ext-components-associationspivot" />
</Frame>

```jsx theme={null}
import { CrmAssociationPivot } from "@hubspot/ui-extensions/crm";

const Extension = () => {
  return (
    <CrmAssociationPivot
      objectTypeId="0-1"
      associationLabels={["CEO", "CEO of subsidiary", "Co-founder"]}
      maxAssociations={10}
      preFilters={[
        {
          operator: "NOT_IN",
          property: "dealstage",
          values: ["closedwon"],
        },
      ]}
      sort={[
        {
          columnName: "createdate",
          direction: -1,
        },
      ]}
    />
  );
};
```

## Props

| Prop                                            | Type   | Description                                                                                                                                                                                                                                                                                                                      |
| ----------------------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `objectTypeId` <Tag type="error">Required</Tag> | String | The numeric ID of the type of associated object to display (e.g., `0-1` for contacts). See [complete list](/guides/crm/understanding-the-crm#object-type-id) of object IDs.                                                                                                                                                      |
| `associationLabels`                             | Array  | Filters results by specific association labels. By default, all association labels will appear.                                                                                                                                                                                                                                  |
| `maxAssociations`                               | Number | The number of items to return in each association label group before displaying a "Show more" button.                                                                                                                                                                                                                            |
| `preFilters`                                    | Array  | Filters the data by specific values of the associated records. Review the [CRM data filter options](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/overview#filtering-data) for more information.                                                                                         |
| `sort`                                          | Array  | The default sorting behavior for the table. In the array, you'll include an object for the column you want to sort by, which specifies:<ul><li>`columnName`: the column to sort by.</li><li>`direction`: the direction to sort by. Can be either `1` (ascending) or `-1` (descending). By default, order is ascending.</li></ul> |

## Related components

* [CrmAssociationPropertyList](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-association-property-list)
* [CrmAssociationTable](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-association-table)
* [CrmReport](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-report)