skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

fuzzy-ranking

Rank, filter, and sort fuzzy string matches using @tanstack/match-sorter-utils.

28.4k|3.6k|Updated Oct 20, 2016
Search Tags:#sorting#ranking#typeScript#tanstack table#fuzzy search#Filtering#match-sorter
One-click install
npx skills add https://github.com/TanStack/table --skill fuzzy-ranking
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fuzzy-ranking
Source: https://github.com/TanStack/table/tree/main/packages/match-sorter-utils/skills/fuzzy-ranking
Command: npx skills add https://github.com/TanStack/table --skill fuzzy-ranking

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/match-sorter-utils.

What problem does it solve?

Fuzzy search implementations often mix ranking, filtering, and sorting into one step, causing incorrect pass decisions, wasted recomputation, and reversed sort order. This Skill shows how to use rankItem, RankingInfo.passed, and compareItems correctly, including wiring fuzzy filters into TanStack Table filter metadata.

Core Features & Use Cases

  • Ranked fuzzy matching: Call rankItem once per value, filter on info.passed, and order results with compareItems using thresholds, rankings constants, and min/max bounds.
  • Object field ranking: Rank objects through accessor functions with per-accessor thresholds and ranking bounds, plus diacritics handling.
  • Table integration: Store RankingInfo as Table filterMeta via addMeta and metaHelper, then sort rows with compareItems in a custom sortFn.
  • Use Case: Build a global fuzzy search over a React Table where typing a query filters rows by relevance and keeps the best matches sorted at the top without recomputing ranks on every comparison.

Quick Start

Rank an array of strings against a search query with rankItem, keep only entries whose info.passed is true, and sort them with compareItems.

Frequently Asked Questions about fuzzy-ranking

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I rank fuzzy search results in JavaScript?▼

Use rankItem from @tanstack/match-sorter-utils to compute a RankingInfo for each value against the query, filter entries where info.passed is true, then sort the survivors with compareItems. This keeps ranking, filtering, and sorting as separate steps.

How to add fuzzy filtering to TanStack Table?▼

Define a filterFn that calls rankItem and stores the result with addMeta({ itemRank }), register the meta shape via metaHelper, and set globalFilterFn to your fuzzy filter. A companion sortFn reads row.columnFiltersMeta and orders rows with compareItems.

Why does my fuzzy filter include irrelevant matches?▼

Checking the numeric rank instead of the passed flag lets sub-threshold matches through, since ranks below the threshold can still be nonzero. Always test rankItem(value, query).passed to respect the configured threshold.

Can rankItem search multiple fields of an object?▼

Yes, pass accessors in the options, such as functions returning item.name and item.email. Each accessor can define its own threshold plus minRanking and maxRanking bounds.

Why is fuzzy sorting slow or inconsistent in my table?▼

Recomputing rankItem inside the comparator on every sort invocation is expensive and can use different options than the filter step. Retain the RankingInfo from filtering and pass the stored values to compareItems instead.

Related Skills

Explore More Software Engineering Skills→
ly0o0oly0o0o
1

write-guance-dql

Generates a single-line Guance Cloud classic-mode search string from user inputs.

Community
Intermediate
oakossoakoss
1

tanstack-table

Build accessible data tables with TanStack Table and React Aria Components.

Official
Intermediate
TanStackTanStack
28.3k

filtering

Implement client-side column and global filtering in TanStack Table v9.

Official
Intermediate
aliyunaliyun
17

hologres-knowledge-base

Build Hologres knowledge bases with vector and full-text indexes.

Official
Advanced