Fuzzy search in Dash Ag Grid text filter

Dash Python
1

Hi! Today I’m sharing how I implemented a custom text filter in Dash Ag Grid that uses fuzzy search (approximate string matching):

  • Link to a sample app code (app.py + js files to include in the assets folder): Fuzzy Search in Dash Ag Grid · GitHub
  • As a fuzzy search method I used fuzzysort: GitHub - farzher/fuzzysort: Fast SublimeText-like fuzzy search for JavaScript.
  • In the assets folder, I included two files: fuzzysort.js (downloaded from here) and dashAgGridComponentFunctions.js, with code adapted from the Text Matcher example of the Dash Ag Grid docs (this one).
  • I modified the customTextMatcher js function code to use inside its conditional statements a getMatchScore function that I copied from this sample code (main.js file, lines 37-43), which calls fuzzysort.go(filterString, [data], {threshold:threshold});. The score returned by fuzzysort.go is compared agains a threshold, which returns the boolean value (True/False) that the TextMatcher in a dag filter is expecting. According to the documentation: “1 is a perfect match. 0.5 is a good match. 0 is no match.”
  • I’ve included some comments and references to the relevant docs and sources in the code.
  • Neither Fuzzy Search nor JS are my areas of expertise, so you could (and probably should) modify the threshold value and simplify the dashAgGridComponentFunctions.js code.

If this helps at least one person, I’ll be happy! :slight_smile:

4 Likes
2

This is awesome! Thanks for sharing :star_struck: