Is it possible to filter one column by multiple values

[danylboiko95]

Unfortunately, i can't find a way to filter column by setting multiple values. For example, I have a column where I have rows with such values: 'on progress', 'hold', 'unrated', 'done' and I want to see only rows where I have values 'on progress' and 'done'. How can I do it?

[gargroh]

You can write your own custom filter function

[danylboiko95]

@gargroh Did you know that you are a HERO?

[gargroh]

🎉 🎉 🎉

[rjitsu]

I'm facing this problem too, I want a multiple select filter, can anyone clearly give a clear example?

[repastran]

You can have something like - https://codesandbox.io/s/condescending-heyrovsky-cgjlx?file=/src/App.js,

can you explain whats happening here?

[Amit-Shahal]

@gargroh thank U !

[danylboiko95]

Also, I can't add filter by setting setAllFilters, maybe someone has a working example

[ironicbrew]

You need to add a custom filter function to handle the array you're passing to setFilter(), otherwise react-table will be attempting to check if rowValue == filterValues[] instead of what you want which is filterValues.includes(rowValue)

Here is how you add a custom filter function:

/* Custom filter function */
function multiSelectFilter(rows, columnIds, filterValue) {
    // Filters only if filters are selected
    return filterValue.length === 0 ? rows : rows.filter((row) => filterValue.includes(String(row.original.status)))
}

/* Columns config */
{
  Header: "Favorite Snack",
  accessor: "favoriteSnack",
  Filter: SelectColumnFilter,
  /*
  This is where you put your custom filter function
  **Note: you must pass an array to setFilter in your SelectColumnFilter for this to work
  */
  filter: multiSelectFilter
}

docs reference here

Snippet from docs for posterity:

filter: String | Function(rows: Array<Row>, columnIds: Array<ColumnId: String>, filterValue) => Rows[]
Optional
Defaults to text
The resolved function from this option will be used to filter this column's data.
If a string is passed, the function with that name will be used from either the custom filterTypes table option (if specified) or from the built-in filtering types object.
If a function is passed:
It must be memoized
It will be called directly with an array of rows to filter, an array of columnIds (being a single-element array with the column ID being filtered), and filterValue, being the current value of the filter being applied
It must return an Array of rows, being the remaining rows that have not been filtered out

Alternatively in >v7.1.0 you can use 'includesSome' as mentioned here

[emanual4real]

iconicbrew, thanks for your post; it was helpful. I've had a lot of trouble figuring this out, so maybe I can help clarify for others.

I'm using react-select so I have multiple values for each column I need to filter. To get this working, I'm using setFilter from instance and passing it to my custom filter component.

  const {
    allColumns,
    canPreviousPage,
    canNextPage,
    getTableProps,
    getTableBodyProps,
    headerGroups,
    nextPage,
    page,
    pageCount,
    prepareRow,
    previousPage,
    rows,
    setFilter,
    setPageSize,
    toggleHideColumn,
    state: { pageIndex, pageSize },
  } = instance;

        <Filter
          setFilter={setFilter}
        />

When I call setFilter, I'm passing the accessor and the values I want to filter. Here is a hardcoded example:
setFilter('Category', ['English', 'Chat']);

In columns, I'm using a custom filter for the Category field.

  {
    Header: 'Category',
    accessor: 'Category',
    filter: multiSelectFilter,
    show: false,
  },

Lastly, my custom filter which is mostly from the previous post. Since I'm using columnIds in the filter, it should work for my other fields as well.

function multiSelectFilter(rows, columnIds, filterValue) {
  return filterValue.length === 0
    ? rows
    : rows.filter((row) =>
        filterValue.includes(String(row.original[columnIds])),
      );
}

[NUKSI911]

I came across the same issue and my solution was setting the value for each filter id to a regular expression then assigning a function to the filter property in the column.

{
Header: 'Gender',
accessor:'gender',
Cell: StatusLabel ,
disableFilters:false,
filter:(rows,columnId,filterValue)=>{
return rows.filter(row=>{
return filterValue.test(row.values[columnId])
})

},

}

Note: the regular expression was compounded for each new value-added to the id.

// my func for item selection //
const handleItemSelection = (id, filterStr) => {
if (
filterArr.find(
(item) => item.id === id && String(item.value).includes(filterStr)
)
) {
let filter = filterArr.find((item) => item.id === id);

  let splitedFilter = filter.value.source.split("|");
  let tempFilterArr = filterArr.filter((item) => item.id !== id);
  splitedFilter = splitedFilter.filter((item) => item !== filterStr);

  if (splitedFilter.length > 0) {
    filter.value = RegExp(splitedFilter.join("|"), "g");
    setFilterArr([...tempFilterArr, filter]);
    return;
  } else {
    setFilterArr([...tempFilterArr]);
    return;
  }
} else if (
  filterArr.find(
    (item) => item.id === id && !String(item.value).includes(filterStr)
  )
) {
  let filter = filterArr.find((item) => item.id === id);
  let splitedFilter = filter.value.source + "|" + filterStr;
  filter.value = RegExp(splitedFilter, "g");
  let tempFilterArr = filterArr.filter((item) => item.id !== id);
  return setFilterArr([...tempFilterArr, filter]);
}
return setFilterArr([...filterArr, { id, value: RegExp(filterStr, "g") }]);

};

[eddyhdzg]

With Typescript

export function multiSelectFilter<T extends object>(
  rows: Row<T>[],
  columnId: keyof T,
  filterValue: string[]
) {
  return filterValue.length === 0
    ? rows
    : rows.filter((row) =>
        filterValue.includes(String(row.original[columnId]))
      );
}

Usage

 {
    id: "price",
    Header: "Price",
    accessor: "price",
    filter: multiSelectFilter,
},

[vincerubinetti]

It seems like the schema of this has changed since you wrote this. Either that or it's a difference because I'm using a createColumnHelper().accessor() filterFn to define it. Here's what I did to update it:

const multiSelectFilter: FilterFnOption<Datum> = (
  row,
  columnId,
  filterValue: string[],
) => {
  if (!filterValue.length) return true;
  const rowValue = row.getValue(columnId);
  return !!filterValue.find((option) => option === rowValue);
};

Where Datum is the type of my row.

[ornakash]

Works perfectly. thanks

[jezreelrivera]

I hope it serves
https://paragon-openedx.netlify.app/components/datatable/tablefilters/

[sahmed007]

This looks 1000x easier to use with many built-in examples. Gonna try it out.