I'm trying to add classes to the pcFilterApplyButton but this (see last line below) isn't doing the trick. I noticed in the documentation (https://primevue.org/datatable/) under the API tab that the pcFilterApplyButton is type 'any' and not 'ColumnPassThroughOptionType' like the other options I've used here, so I figured the syntax is a bit different. What am I getting wrong with how I've implemented the last line of my :pt object here? I do not see that 'filter-apply-button' class appear on my apply button.
<Column
field="submittedAt"
filterField="submittedAt"
dataType="date"
:showFilterOperator="false"
sortable
header="Submitted Date"
headerClass="table-header cursor-pointer hover:bg-gray-200 pl-0 pr-0 lg:pr-1 lg:pl-1"
bodyClass="table-box text-center pl-0 pr-0 lg:pr-1 lg:pl-1"
filterMenuClass="filter-modal card bg-white shadow-lg py-2 px-4"
:pt="{
columnHeaderContent: 'flex justify-center items-center',
columnTitle: 'order-2 p-2',
sort: 'order-1 pl-2',
filter: 'filter-icon order-3',
pcColumnFilterButton:
'filter-button relative inline-flex items-center justify-center w-8 h-8 inset-0 bg-transparent rounded-full hover:bg-white hover:border-4 hover:border-white',
filterMenuIcon: 'relative z-10',
filterButtonBar: 'filter-button-bar flex justify-between py-2',
pcFilterApplyButton: { class: 'filter-apply-button' }
}"
>
All it took was a minor change to the last line, swap class for root:
<Column
field="submittedAt"
filterField="submittedAt"
dataType="date"
:showFilterOperator="false"
sortable
header="Submitted Date"
headerClass="table-header cursor-pointer hover:bg-gray-200 pl-0 pr-0 lg:pr-1 lg:pl-1"
bodyClass="table-box text-center pl-0 pr-0 lg:pr-1 lg:pl-1"
filterMenuClass="filter-modal card bg-white shadow-lg py-2 px-4"
:pt="{
columnHeaderContent: 'flex justify-center items-center',
columnTitle: 'order-2 p-2',
sort: 'order-1 pl-2',
filter: 'filter-icon order-3',
pcColumnFilterButton:
'filter-button relative inline-flex items-center justify-center w-8 h-8 inset-0 bg-transparent rounded-full hover:bg-white hover:border-4 hover:border-white',
filterMenuIcon: 'relative z-10',
filterButtonBar: 'filter-button-bar flex justify-between py-2',
pcFilterApplyButton: { root: 'filter-apply-button' }
}"
>