Search code examples
vue.jsprimevue

PrimeVue Passthrough Options


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' } 
      }"
    >

Solution

  • 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' } 
          }"
        >