Dropdown Filter

[shmbar]

Hi

How can I implement the Dropdown filter component on one of the columns in my table when the columns are dynamic?
I'm following the example in the documentation but the example is relevant when the columns are static.

Your help is appreciated.

[liamoshea]

I am also trying to understand how to do this.

I also tried creating a class to handle the filter logic and state while exposing the filterElement, instantiating a new filter as I map each column, and providing the filterElement from the instantiated class to the column as props. This kind of worked, but unfortunately a component instantiated this way is not mounted and so I was unable to use the state correctly.

I also attempted to create a custom column which would handle the filter logic and state, and whenever the dynamic column required a dropdown I use the custom column instead. The custom column returns a Column component modified to fit the filter. However it appears custom columns in this manner are not supported, and the filter does not render in the table (but the column does). I tested this by returning a Column with a search filter (which requires no configuration beyond specifying filter = true as a prop) and the filter did not render.

Any help or direction on this issue would be greatly appreciated as this is a large blocker on my current project.

Custom Filter Class

Code: Select all

import React from 'react'
import { MultiSelect } from 'primereact/multiselect';

class DropDownFilter extends React.Component {
  constructor(props) {
    super(props);
    this.multiSelRef = React.createRef();
    
    this.state = {
      selectedOptions: null,
    }
  }


  onOptionsChange = (e) => {
    this.props.dt.current.filter(e.value, this.props.field, 'in');
    this.setState({ selectedOptions: e.value })
  }


  filterElement = () => {
    return (
      <React.Fragment>
        <MultiSelect
          value={this.state.selectedOptions}
          options={this.props.options}
          onChange={this.onOptionsChange}
          optionLabel="option"
          optionValue="option"
          className="p-column-filter"
        />
      </React.Fragment>
    )
  }

  render() {
    return (null)
  }

Using Custom Filter Class when mapping columns

Code: Select all

...

   const newFilter = new DropDownFilter({ dt: dt, field: field, options: options })

      return (
        <Column key={field} field={field} header={field} filter filterElement={newFilter.filterElement()} />
      )
      
  ...

Custom Column Component

Code: Select all

import React, { useState, useEffect } from 'react'
import { Column } from 'primereact/column';
export default function CustomColumn(props) {

  return (
    <Column field={props.field} header={props.field} filter  />
  )
}

Using Custom Column in Data Table

Code: Select all

return(
<div className="datatable-filter-demo">
      <div className="card">
        <DataTable ref={dt} value={tableData} paginator rows={10}
          className="p-datatable-customers"
          emptyMessage="No customers found."
          stateStorage="custom" customSaveState={onCustomSaveState} customRestoreState={onCustomRestoreState}
        >

          <CustomColumn field={field}/>

        </DataTable>
      </div>
    </div>
  )

[mert.sincan]

Hi,

Sorry for the delayed response! Is the problem still happening?

Best Regards,