> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown. # IAttributeFilterCustomComponentProps - Package: [@gooddata/sdk-ui-filters](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/index.md) - Kind: interface - Source: https://github.com/gooddata/gooddata-ui-sdk/blob/rel/11.64/libs/sdk-ui-filters/src/AttributeFilter/types.ts These customization properties allow you to specify custom components that the AttributeFilter component will use for rendering different parts. **Signature:** ```typescript export interface IAttributeFilterCustomComponentProps ``` ## Remarks IMPORTANT: while this interface is marked as public, you also need to heed the maturity annotations on each Customization properties,that are at this moment beta level. ## Properties | Property | Modifiers | Type | Description | | --- | --- | --- | --- | | [DropdownActionsComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropsdropdownactionscomponent) | | ComponentType<[IAttributeFilterDropdownActionsProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterdropdownactionsprops/index.md)> | **_(BETA)_** _(Optional)_ Customize attribute filter dropdown actions component. | | [DropdownBodyComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropsdropdownbodycomponent) | | ComponentType<[IAttributeFilterDropdownBodyProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterdropdownbodyprops/index.md)> | **_(BETA)_** _(Optional)_ Customize attribute filter dropdown body component. | | [DropdownButtonComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropsdropdownbuttoncomponent) | | ComponentType<[IAttributeFilterDropdownButtonProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterdropdownbuttonprops/index.md)> | **_(BETA)_** _(Optional)_ Customize attribute filter dropdown button component. | | [ElementsSearchBarComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropselementssearchbarcomponent) | | ComponentType<[IAttributeFilterElementsSearchBarProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterelementssearchbarprops/index.md)> | **_(BETA)_** _(Optional)_ Customize attribute filter search bar component. | | [ElementsSelectActionsComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropselementsselectactionscomponent) | | ComponentType<[IAttributeFilterElementsActionsProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterelementsactionsprops/index.md)> | **_(BETA)_** _(Optional)_ Customize attribute filter elements select action component (Select all checkbox) | | [ElementsSelectComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropselementsselectcomponent) | | ComponentType<[IAttributeFilterElementsSelectProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterelementsselectprops/index.md)> | **_(BETA)_** _(Optional)_ Customize attribute filter elements select component. | | [ElementsSelectErrorComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropselementsselecterrorcomponent) | | ComponentType<[IAttributeFilterElementsSelectErrorProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterelementsselecterrorprops/index.md)> | **_(BETA)_** _(Optional)_ Customize attribute filter elements select error component. | | [ElementsSelectItemComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropselementsselectitemcomponent) | | ComponentType<[IAttributeFilterElementsSelectItemProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterelementsselectitemprops/index.md)> | **_(BETA)_** _(Optional)_ Customize attribute filter elements select item component. | | [ElementsSelectLoadingComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropselementsselectloadingcomponent) | | ComponentType<[IAttributeFilterElementsSelectLoadingProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterelementsselectloadingprops/index.md)> | **_(BETA)_** _(Optional)_ Customize attribute filter elements select loading component. | | [EmptyResultComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropsemptyresultcomponent) | | ComponentType<[IAttributeFilterEmptyResultProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilteremptyresultprops/index.md)> | **_(BETA)_** _(Optional)_ Customize attribute filter empty result component. | | [ErrorComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropserrorcomponent) | | ComponentType<[IAttributeFilterErrorProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltererrorprops/index.md)> | **_(BETA)_** _(Optional)_ Customize attribute filter with a component to be rendered if initialization fails. | | [FilterMenuComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropsfiltermenucomponent) | | ComponentType<[IFilterMenuProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.ifiltermenuprops/index.md)> | **_(ALPHA)_** _(Optional)_ Customize filter mode menu component. | | [LoadingComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropsloadingcomponent) | | ComponentType<[IAttributeFilterLoadingProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterloadingprops/index.md)> | **_(BETA)_** _(Optional)_ Customize attribute filter with a component to be rendered if attribute filter is loading. Note that this will be rendered only during the initialization of the attribute filter. | | [StatusBarComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropsstatusbarcomponent) | | ComponentType<[IAttributeFilterStatusBarProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefilterstatusbarprops/index.md)> | **_(BETA)_** _(Optional)_ Customize attribute filter status bar component. | | [TextFilterBodyComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iattributefiltercustomcomponentprops/index.md#iattributefiltercustomcomponentpropstextfilterbodycomponent) | | ComponentType<[ITextFilterBodyProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.itextfilterbodyprops/index.md)> | **_(ALPHA)_** _(Optional)_ Customize text filter body component. | ## Property details ### IAttributeFilterCustomComponentProps.DropdownActionsComponent > **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize attribute filter dropdown actions component. **Signature:** ```typescript DropdownActionsComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [AttributeFilterDropdownActions()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterdropdownactions/index.md) will be used. ### IAttributeFilterCustomComponentProps.DropdownBodyComponent > **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize attribute filter dropdown body component. **Signature:** ```typescript DropdownBodyComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [AttributeFilterDropdownBody()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterdropdownbody/index.md) will be used. ### IAttributeFilterCustomComponentProps.DropdownButtonComponent > **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize attribute filter dropdown button component. **Signature:** ```typescript DropdownButtonComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [AttributeFilterDropdownButton()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterdropdownbutton/index.md) or [AttributeFilterSimpleDropdownButton()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefiltersimpledropdownbutton/index.md) will be used. ### IAttributeFilterCustomComponentProps.ElementsSearchBarComponent > **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize attribute filter search bar component. **Signature:** ```typescript ElementsSearchBarComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [AttributeFilterElementsSearchBar()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterelementssearchbar/index.md) will be used. ### IAttributeFilterCustomComponentProps.ElementsSelectActionsComponent > **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize attribute filter elements select action component (Select all checkbox) **Signature:** ```typescript ElementsSelectActionsComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [AttributeFilterElementsActions()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterelementsactions/index.md) will be used. ### IAttributeFilterCustomComponentProps.ElementsSelectComponent > **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize attribute filter elements select component. **Signature:** ```typescript ElementsSelectComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [AttributeFilterElementsSelect()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterelementsselect/index.md) will be used. ### IAttributeFilterCustomComponentProps.ElementsSelectErrorComponent > **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize attribute filter elements select error component. **Signature:** ```typescript ElementsSelectErrorComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [AttributeFilterElementsSelectError()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterelementsselecterror/index.md) will be used. ### IAttributeFilterCustomComponentProps.ElementsSelectItemComponent > **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize attribute filter elements select item component. **Signature:** ```typescript ElementsSelectItemComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [AttributeFilterElementsSelectItem()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterelementsselectitem/index.md) will be used. ### IAttributeFilterCustomComponentProps.ElementsSelectLoadingComponent > **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize attribute filter elements select loading component. **Signature:** ```typescript ElementsSelectLoadingComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [AttributeFilterElementsSelectLoading()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterelementsselectloading/index.md) will be used. ### IAttributeFilterCustomComponentProps.EmptyResultComponent > **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize attribute filter empty result component. **Signature:** ```typescript EmptyResultComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [AttributeFilterEmptyResult()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilteremptyresult/index.md) will be used. ### IAttributeFilterCustomComponentProps.ErrorComponent > **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize attribute filter with a component to be rendered if initialization fails. **Signature:** ```typescript ErrorComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [AttributeFilterError()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefiltererror/index.md) will be used. ### IAttributeFilterCustomComponentProps.FilterMenuComponent > **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize filter mode menu component. **Signature:** ```typescript FilterMenuComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [FilterMenu()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.filtermenu/index.md) will be used. ### IAttributeFilterCustomComponentProps.LoadingComponent > **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize attribute filter with a component to be rendered if attribute filter is loading. Note that this will be rendered only during the initialization of the attribute filter. **Signature:** ```typescript LoadingComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [AttributeFilterLoading()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterloading/index.md) will be used. ### IAttributeFilterCustomComponentProps.StatusBarComponent > **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize attribute filter status bar component. **Signature:** ```typescript StatusBarComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [AttributeFilterStatusBar()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.attributefilterstatusbar/index.md) will be used. ### IAttributeFilterCustomComponentProps.TextFilterBodyComponent > **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md). > Customize text filter body component. **Signature:** ```typescript TextFilterBodyComponent?: ComponentType; ``` #### Remarks - If not provided, the default implementation [TextFilterBody()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.textfilterbody/index.md) will be used.