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

teaonrocks•11mo 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•11mo 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
)

teaonrocks•11mo ago

to lowercase is being called from react table's getRowModel

teaonrocks•11mo ago

teaonrocks•11mo ago

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

Gaming

Programming

React table filter type error (.toLowerCase)