> ## 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: 5c8aa572-5c81-4a0c-b728-1ae81cbddb4e
---

# CrmAssociationTable

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

The `CrmAssociationTable` component renders a table of associated records with optional filtering, sorting, and search methods. You'll specify the type of records that you want to appear along with the properties to display as columns.

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

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

const Extension = () => {
  return (
    <CrmAssociationTable
      objectTypeId="0-3"
      propertyColumns={["dealname", "amount", "description"]}
      quickFilterProperties={["createdate"]}
      pageSize={10}
      preFilters={[
        {
          operator: "EQ",
          property: "dealstage",
          value: "contractsent",
        },
      ]}
      sort={[
        {
          direction: 1,
          columnName: "amount",
        },
      ]}
      searchable={true}
      pagination={true}
    />
  );
};
```

## Props

| Prop                     | Type    | Description                                                                                                                                                                                                                                                                                          |
| ------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `associationLabelFilter` | Boolean | When set to `false`, hides the "Association label" quick filter above the table.                                                                                                                                                                                                                     |
| `objectTypeId`           | 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-ids) of object IDs.                                                                                                                         |
| `pageSize`               | Number  | The number of rows to include per page of results. Include the `pagination` property to enable users to navigate through returned results.                                                                                                                                                           |
| `pagination`             | Boolean | When set to `false`, hides the pagination navigation below the table.                                                                                                                                                                                                                                |
| `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.                                                             |
| `propertyColumns`        | Array   | The properties to display as table columns.                                                                                                                                                                                                                                                          |
| `quickFilterProperties`  | Array   | The properties that appear as filters above the table. When included, the "Association label" quick filter will always display. See note below for more details on this prop.                                                                                                                        |
| `searchable`             | Boolean | When set to `false`, hides the search bar above the table.                                                                                                                                                                                                                                           |
| `sort`                   | Array   | The default sorting behavior for the table. In each sort object in the array, you'll specify the following:<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> |

<Warning>
  **Please note:**

  For `quickFilterProperties`:

  * By default, four quick filters will display automatically depending on the object type.
  * **Contacts (`0-1`):** `[ 'hubspot_owner_id', 'createdate', 'hs_lead_status', 'notes_last_updated' ]`
  * **Companies (`0-2`):** `[ 'hubspot_owner_id', 'hs_lead_status', 'notes_last_updated', 'createdate' ]`
  * **Deals (`0-3`):** `[ 'hubspot_owner_id', 'closedate', 'createdate', 'dealstage' ]`
  * **Tickets (`0-5`):** `[ 'hubspot_owner_id', 'createdate', 'hs_pipeline_stage', 'hs_lastactivitydate' ]`
  * Custom objects do not have default quick filters.
  * An empty array (`[]`) will remove any default quick filters except for "Association label."
</Warning>

## Related components

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