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 ponent:

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',
  },
];

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 ponent:

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',
  },
];

• javascript
• reactjs
• function
• react-table

Share Improve this question Follow asked Dec 22, 2020 at 11:04 Hafiz Muhammad BilalHafiz Muhammad Bilal 31533 silver badges1717 bronze badges 2

• can you share minimal working example . – Chandan Commented Dec 22, 2020 at 13:42
• Code is distributed in multiple files so it would be very tough to share a working example. I just want to ask how can we filter with exact value instead of substring in setFilter method. – Hafiz Muhammad Bilal Commented Dec 22, 2020 at 14:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Try

{ id: 'your_column_id', accessor: 'your_accessor', filter: 'equals', }

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)
 }

for tanstack/react-table v8 just add in column definition:

{
  accessorKey: "test",
  header: "test",
  filterFn: "equals",
},