Theo's Typesafe Cult•17mo 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•17mo 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•17mo 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•17mo ago

to lowercase is being called from react table's getRowModel

bentoOP•17mo ago

bentoOP•17mo ago

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

Gaming

Programming

React table filter type error (.toLowerCase)