Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Add delayed response/debouncing for table filtering #87

@gkiar

Description

@gkiar

Scenario

  • I have a table with ~100-1000 rows of data, with filterable=True, and plots being rendered based on the visible rows in the table -- in full about ~10-50MB.
  • When filtering, say, a percentage column, I toggle the Filter Rows button, and begin typing my query for values of: >90.5.
  • Dash issues a state-change and callback for each character, resulting in new figures being sent for >, >9, >90, >90., and >90.5, sending the entire set of figures and data each time.
  • Sometimes, this means that my desired filtering never actually gets applied since my app gets stuck handling the previous 4 callbacks.
  • This is also a large waste of bandwidth

Ideal outcome

  • I would like a debounce option for the DataTable class
  • The debounce option would prevent state-update from filtering rows by either:
    • a predefined duration (i.e. 500ms), or
    • a user specified amount of time
  • This would prevent multiple callbacks from being triggered during typing, resulting in meaningless or undesired updates
  • The debounce option could default to False, so that the standard behaviour is still live-updating, for people who would prefer that for their application.

I'm not a javascript developer (Python, mostly), but will begin to try and tackle this in src/components/DataTable.react.js if there are no developers that can prioritize it. Is there another file/place that I'll need to update (other than the usage.py demonstrating the feature)?

Thanks!
G

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions