CrmAssociationTable | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

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.

ui-ext-components-associationstable
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} /> ); };
Prop Type Description
propertyColumns Required Array The properties to display as table columns.
objectTypeId Required String The numeric ID of the type of associated object to display (e.g., 0-1 for contacts). See complete list of object IDs.
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.
associationLabelFilter Boolean When set to false, hides the "Association label" quick filter above the table.
searchable Boolean When set to false, hides the search bar above the table.
pagination Boolean When set to false, hides the pagination navigation below the table.
pageSize Number The number of rows to include per page of results. Include the pagination property to enable users to navigate through returned results.
preFilters Array Filters the data by specific values of the associated records. Review the CRM data filter options for more information.
sort Array The default sorting behavior for the table. In each sort object in the array, you'll specify the following:
  • columnName: the column to sort by.
  • direction: the direction to sort by. Can be either 1 (ascending) or -1 (descending). By default, order is ascending.

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."

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.