Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Custom sortingFn not being run when row key is undefined

Offen
  • Stimmt etwas nicht?
#5,653 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
typescript
Bereich
frontend

Rechercherichtung

Beginne mit der verknüpften CodeSandbox-Reproduktion und dem Sortierungspfad von getSortedRowModel und vergleiche Spalten, deren Zeilen den abgerufenen Schlüssel nicht enthalten, mit der statischen Spalte. Als erledigt gilt, wenn die benutzerdefinierte sortingFn beim Ändern der Sortierrichtung für diese Spalten aufgerufen wird und eine Abdeckung für den Fall mit zwei Zeilen und undefined-key vorhanden ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

TanStack Table version

8.19.2

Framework/Library version

Vue 3.4.31

Describe the bug and the steps to reproduce it

I was debating whether to even post this issue or not, since it's such a narrow edge case and is mostly inconsequential. But here it is.

My custom sortingFn is was not being run when changing the sort direction of certain columns. I was adding things to the sort func to handle the order of nullish values, and it wasn't having any effect because the function wasn't even being run. Luckily this isn't super important, as the sortUndefined met my needs in this case, but I still think this is a bug.

I can't nail down the exact conditions that cause this, but I think this happens when:

  • there are only 2 rows
  • one of the rows object doesn't have the key that is being sorted by

See the reproducible example. Look at the console logs while clicking on the different columns. The first static column triggers the sorting func. The other two columns do not, unless you add a third row or define the key for the other row.

Reproducible example code for posterity 
<template>
  <table>
    <thead>
      <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
        <th
          v-for="header in headerGroup.headers"
          :key="header.id"
          :colSpan="header.colSpan"
          @click="header.column.getToggleSortingHandler()?.($event)"
        >
          <FlexRender
            :render="header.column.columnDef.header"
            :props="header.getContext()"
          />
          <span v-if="header.column.getIsSorted() === 'desc'"> v</span>
          <span v-else-if="header.column.getIsSorted() === 'asc'"> ^</span>
          <span v-else> -</span>
        </th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="row in table.getRowModel().rows" :key="row.id">
        <td v-for="cell in row.getVisibleCells()" :key="cell.id">
          <FlexRender
            :render="cell.column.columnDef.cell"
            :props="cell.getContext()"
          />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts">
type Cell = Record<string, unknown>;

export type Cols<Rows extends Cell[] = Cell[]> = {
  key: Extract<keyof Rows[number], string>;
  name: string;
}[];
</script>

<script setup lang="ts" generic="Rows extends Cell[]">
import { computed } from "vue";
import {
  createColumnHelper,
  FlexRender,
  getCoreRowModel,
  getFacetedMinMaxValues,
  getFacetedRowModel,
  getFacetedUniqueValues,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useVueTable,
  type Row as TanstackRow,
} from "@tanstack/vue-table";
import type { SortingFn } from "@tanstack/vue-table";

type Props = {
  cols: Cols<Rows>;
  rows: Rows;
};

const props = defineProps<Props>();

type Row = Rows[number];

const columnHelper = createColumnHelper<Row>();

const sortingFunction: SortingFn<Row> = (
  a: TanstackRow<Row>,
  b: TanstackRow<Row>,
) => {
  console.log("sort");
  if (a < b) return -1;
  if (a > b) return 1;
  return 0;
};

const columns = computed(() =>
  props.cols.map((col) =>
    columnHelper.accessor((row: Row) => row[col.key], {
      id: col.key,
      header: col.name,
      enableSorting: true,
      sortingFn: sortingFunction,
    }),
  ),
);

const table = useVueTable({
  get data() {
    return props.rows;
  },
  get columns() {
    return columns.value;
  },
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getFacetedRowModel: getFacetedRowModel(),
  getFacetedUniqueValues: getFacetedUniqueValues(),
  getFacetedMinMaxValues: getFacetedMinMaxValues(),
  initialState: {
    pagination: {
      pageIndex: 0,
      pageSize: 999999,
    },
  },
});
</script>

<script setup lang="ts">
import AppTable from "./components/AppTable.vue";

const rows = [
  { static: "test", abc: 123 },
  { static: "test", def: 456 },
  // { static: "test", abc: 789 },
];

const cols = [
  { key: "static", name: "Static" },
  { key: "abc", name: "ABC" },
  { key: "def", name: "DEF" },
];
</script>

<template>
  <AppTable :rows="rows" :cols="cols" />
</template>
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://codesandbox.io/p/devbox/tanstack-table-sorting-bug-782h9d

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

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.

sortUndefined met my needs here, but I was also able to force the sortingFn to run by making sure every row being returned from get data() { return props.rows; } has every col key defined:

const _rows = computed(() => {
  /** row with all possible object keys at least defined */
  const blankRow = Object.fromEntries(props.cols.map((col) => [col.key, ""]));

  return props.rows.map((row) => ({
    /** start with blank row */
    ...cloneDeep(blankRow), // lodash cloneDeep
    /** add actual row data */
    ...row,
  }));
});
Vorherrschende Sprache
TypeScript
Sterne
28.5k
Forks
3.6k
Ø Merge
1 T. 14 Std.
Gemergte PRs (30 T.)
4

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/table

Alle Issues in TanStack/table

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.