1

I use PrimeReact DataTable and makes some custom logic especially on filter. But there is a problem i cannot figure out how to override default behavior and change filterIcon on each column

<DataTable
        filterDisplay="menu"
        reorderableColumns
        resizableColumns
        onSort={onSort}
        removableSort
        sortField={lazyParams.sortField}
        sortOrder={lazyParams.sortOrder}
        value={customers}
        lazy
        paginator
        rows={10}
        dataKey="id"
        filters={filters}
        loading={usersData?.isLoading || usersData.isFetching}
        header={headerTable}
        totalRecords={usersData?.data?.data.count}
        first={lazyParams.first}
        onPage={onPage}
        emptyMessage="Empty"
      >
        <Column
          sortable
          field="id"
          header="ID"
          filter // How to override icon and behaviour when click ?
          showFilterMenu
          showFilterMenuOptions={false}
          filterElement={(e) => activityFilterTemplateComponent(e, "id", "string")}
          filterApply={(options) => filterApplyTemplate(options, buttonRef)}
          filterClear={filterClear}
        />
</DataTable>
Dmitriy_kzn
  • 518
  • 4
  • 16

1 Answers1

0

Datatable has two icons you can override the filterIcon and filterClearIcon icon to give it your own icons.

See: https://primereact.org/datatable/#api.DataTable.props.filterIcon

See: https://primereact.org/datatable/#api.DataTable.props.filterClearIcon

Melloware
  • 10,435
  • 2
  • 32
  • 62