[SOLVED] How to filter a value exactly equal to a given input in react-table?

Issue

I am using built-in setFilter function of react table here. Second argument is the value with which each input category will be match but not exactly. For example if we have two categories Govt and Non-govt and I have to filter Govt. But It is filtering Govt as well as Non-govt because the word Govt is present in the word Non-govt.
What should I do now?

const tableInstance = useRef(null);
  const filterTests = (criteria) => {
    if (tableInstance.current) {
      tableInstance.current.setFilter('test_category', criteria.category);
      tableInstance.current.setFilter('test_state', criteria.state);
      tableInstance.current.setFilter('test_client', criteria.client);
      tableInstance.current.setFilter('test_name', criteria.name);
    }
  };

and I’m calling filterTests table in another component:

const handleFilter = () => {
    let criteria = {};
    criteria.category = category;
    criteria.state = state;
    criteria.client = client;
    criteria.name = name;
    filterTests(criteria);
  };

My columns file’s data is:

export const columns = [
  {
    id: 'test_name',
    Header: 'NAME',
    accessor: 'name',
  },
  {
    id: 'candidate_site_blocked',

    Header: `BLOCK
CANDIDATE SITE
  REGISTERATION`,
    accessor: 'block_candidate_site_registration',
  },
  {
    id: 'admin_site_blocked',

    Header: `BLOCK
ADMIN SITE
  REGISTERATION`,
    accessor: 'block_admin_site_registration',
  },

  {
    id: 'delete_test',

    Header: '',
  },
  {
    id: 'test_category',
    accessor: 'category',
  },
  {
    id: 'test_state',
    accessor: 'state',
  },
  {
    id: 'test_client',
    accessor: 'client',
  },
];

Solution

Try this in the respective column object:

 {
    id: 'your_column_id',
    accessor: 'your_accessor',
    filter: (rows, id, filterValue) =>
      rows.filter((row) => filterValue === '' || row.values[id] === filterType)
 }

Answered By – Muhammad Zaeem Zahid

Answer Checked By – Candace Johnson (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published.