Theo's Typesafe Cult•2y ago

React table filter type error (.toLowerCase)

<CommandItem
                    key={option.label}
                    onSelect={() => {
                      if (isSelected) {
                        selectedValues.delete(option.label);
                      } else {
                        selectedValues.add(option.label);
                      }

                      const filterValues = Array.from(selectedValues);

                      column?.setFilterValue(
                        filterValues.length ? filterValues : undefined
                      );
                    }}
                  >

<CommandItem
                    key={option.label}
                    onSelect={() => {
                      if (isSelected) {
                        selectedValues.delete(option.label);
                      } else {
                        selectedValues.add(option.label);
                      }

                      const filterValues = Array.from(selectedValues);

                      column?.setFilterValue(
                        filterValues.length ? filterValues : undefined
                      );
                    }}
                  >

Im using shadCN's task example

5 Replies

bentoOP•2y ago

adding a toString() to the end of filterValues fixes the error but it messes us the filtering as the string eg. 10A is split into "1","0","A"

JacobParis•2y ago

If you want to lowercase the elements in your array, use a map instead

filterValues.map(value => value.toLowerCase())

filterValues.map(value => value.toLowerCase())

I don't see in your code example where you're calling toLowerCase but you probably want at the end

column.setFilterValue(filterValues.length
  ? filterValues.map(value => value.toLowerCase())
  : undefined
)

column.setFilterValue(filterValues.length
  ? filterValues.map(value => value.toLowerCase())
  : undefined
)

bentoOP•2y ago

to lowercase is being called from react table's getRowModel

bentoOP•2y ago

bentoOP•2y ago

this doesnt work either... i think its being converted somewhere else

Gaming

Programming

React table filter type error (.toLowerCase)