Last modified: August 22, 2025
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}
    />
  );
};
PropTypeDescription
propertyColumnsArrayThe properties to display as table columns.
objectTypeIdStringThe numeric ID of the type of associated object to display (e.g., 0-1 for contacts). See complete list of object IDs.
quickFilterPropertiesArrayThe 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.
associationLabelFilterBooleanWhen set to false, hides the “Association label” quick filter above the table.
searchableBooleanWhen set to false, hides the search bar above the table.
paginationBooleanWhen set to false, hides the pagination navigation below the table.
pageSizeNumberThe number of rows to include per page of results. Include the pagination property to enable users to navigate through returned results.
preFiltersArrayFilters the data by specific values of the associated records. Review the CRM data filter options for more information.
sortArrayThe 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.”