Unable to use select filter to view empty cells

[fgs-dbudwin]

Describe the bug (required)
I have a table with optional values in a column. Sometimes, the cells are blank. I am using a select filter since there are fixed options for the cell, say "", "Foo", and "Bar". It would be beneficial to use the select filter to view which cells have no value in them for the given column.

Provide an example via Codesandbox! (required)
I forked this Codesandbox from the Filtering example and simplified it a tad:
https://codesandbox.io/s/quizzical-allen-u7y68

Steps To Reproduce (required)

1. Open provided Codesandbox link (https://codesandbox.io/s/quizzical-allen-u7y68)
2. Use the select filter to choose the option that is empty
3. Notice how it behaves as if "All" was selected.

Expected behavior (Recommended)
I would like to view the cells that contain empty values for the column.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Firefox
• Version 74.0 64-but

[tannerlinsley]

Because select boxes and their options are something that is done is user-land and is not part of react-table's API, I've converted this into a discussion/question. This is actually something that is not related to React Table and is just a React Question in general.

[fgs-dbudwin]

I'm pretty new to the React ecosystem...

Do I need to do something like implement my own setFilter function to pass into SelectColumnFilter? Looking at the API I'm not sure how else I can get it to respect empty cells.

[tannerlinsley]

You could even write your own filter component that does exactly what you want.

[blavonne]

Thanks. You said "it's not table problem" and I made some simple js-tests. I forgot that ['any string'].includes('') is always TRUE.
So the solution is to make custom filterFn which can handle empty strings separately. And here is my Fn:

function filterStr(row, id, filterValues) {
	const rowValue = row.getValue(id);

	for (let i = 0; i < filterValues.length; i++) {
		const curFilter = filterValues[i];

		if (curFilter === '') {
			if (curFilter === rowValue)
				return true;
		}
		else {
			if (rowValue.toString().toLowerCase().trim().includes(curFilter.toString().toLowerCase().trim()))
				return true;
		}
	}

	return false;
}

[Ne3emi]

same thing here

[manojgahlot-in]

@tannerlinsley @fgs-dbudwin

any solution implemented for this ?? We are facing a similar issue where we are unable to filter with blank value.

Thank You !!

[erickbrenes]

I'd say you could change the empty string values '' to a space ' ' or null in the makeDate.js file or map over the data after it's creation to change the values.

status: statusChance > 0.66 ? "Foo" : statusChance > 0.33 ? "Bar" : " " - now your filter will work.

That worked for me.

[blavonne]

See my comment above #2098 (reply in thread)