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.
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 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 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:
|
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.”