Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Order + filter with formatted data

Ouverte
#5,045 4 commentaires 4 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
35/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
react, typescript
Domaine
frontend

Piste de recherche

Commencez par le CodeSandbox lié et comparez les définitions des colonnes en utilisant cell, accessorFn, getValue, ainsi que le comportement du tri et du filtrage dans react-table 8.9.3. Suivez la manière dont les valeurs d’origine et formatées sont exposées pour chaque opération, puis vérifiez que le cas reproduit peut trier selon la date ou le nombre d’origine tout en filtrant selon sa valeur d’affichage formatée.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

Describe the bug

i need to transform the data to show to the user.

Eg from YYYY-MM-DD to DD/MM/YYYY,
from usd 10.99 to usd 10,99.

Anyway, to order i need to use de original data ( a date or decimal number), to filter i need to use the transformed data or both.
dont exist a property in the row with columnId to return the transformed data (row.original, row.getValue and row.renderValue just return the original data).

i tried to pass the transformed data thru accessorFn: row => formatDate(row.field), but with this approach, i lose the original data in order function, and ordering with transformatted data gives me a wrong ordenation.

how to solve this problem?

Your minimal, reproducible example

https://codesandbox.io/s/nice-ishizaka-s2n6mw?file=/src/App.tsx

Steps to reproduce

create a row
{
header: "name",
accessorKey: "nameKey",
cell: ({getValue}) => formatDate(getValue())
},
// this option i lose the formatted data to filter
or
{
header: "name",
id: 'nameKey',
accessorFn: row => formatDate(row.date),
},
// this option i lose the original data to order

const formatDate = (date: string | Date, format?: string) => {

// console.log("date", date)
format = format || 'dd/MM/yyyy';

return dateFormat(toDate(date), format);

};

Expected behavior

order by original data and filter by transformed data

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

all Operating System and Browsers

react-table version

8.9.3

TypeScript version

5.2.2

Additional context

No response

Terms & Code of Conduct
  • I agree to follow this project's Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Langage dominant
TypeScript
Étoiles
28.5k
Forks
3.6k
Merge moyen
1 j 3 h
PR mergées (30 j)
22

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/table

Toutes les issues de TanStack/table

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.