How do I filter for values after they are rendered?

[salvobonsma]

This is my column definition:

type Match = {
    key: string,
    compLevel: "qm" | "ef" | "qf" | "sf" | "f",
    startTime: number
    redScore: number,
    blueScore: number,
    friendlyScore: number,
    opponentScore: number,
    friendlyAlliance: boolean,
    status: MatchStatus,
}

One of those columns render differently from what the values are internally.

cell: ({row}) => {
            const compLevelText = {
                "qm": "Qualifications",
                "ef": "Elimination Finals",
                "qf": "Quarter Finals",
                "sf": "Semifinals",
                "f": "Finals"
            }[row.getValue("compLevel") as "qm" | "ef" | "qf" | "sf" | "f"];

            return <div className={"ml-4"}>{compLevelText}</div>;
        },

When I filter, it filters the values before they were changed. How would I filter for the values after they were changed (ex: filtering for matches at the competition level of "Qualifications")?

[salvobonsma]

#2429