Skip to main content
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}
    />
  );
};

​
Props

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