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

there is a bug when you try sticky pin column group

Offen
#5,397 9 Kommentare 17 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

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

Rechercherichtung

Beginne mit der verknüpften StackBlitz-Reproduktion und dem React-Beispiel column-pinning-sticky. Gruppiere die Spalten firstName und lastName wie gezeigt, pinne die info-Gruppe links und rechts an und vergleiche das Sticky-Verhalten mit nicht gruppierten Spalten; als abgeschlossen gilt es, wenn das Pinnen gruppierter Spalten in beide Richtungen korrekt funktioniert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

TanStack Table version

8.13.2

Framework/Library version

18.2.0

Describe the bug and the steps to reproduce it

open https://tanstack.com/table/v8/docs/framework/react/examples/column-pinning-sticky example and group firstname and lastname

const columnHelper = createColumnHelper<Person>();

const defaultColumns: ColumnDef<Person>[] = [
  columnHelper.group({
    id: 'info',
    header: () => <span>Info</span>,
    columns: [
      {
        accessorKey: 'firstName',
        id: 'firstName',
        header: 'First Name',
        cell: (info) => info.getValue(),
        footer: (props) => props.column.id,
        size: 180,
      },
      {
        accessorFn: (row) => row.lastName,
        id: 'lastName',
        cell: (info) => info.getValue(),
        header: () => <span>Last Name</span>,
        footer: (props) => props.column.id,
        size: 180,
      },
    ],
  }),
  {
    accessorKey: 'age',
    id: 'age',
    header: 'Age',
    footer: (props) => props.column.id,
    size: 180,
  },
  {
    accessorKey: 'visits',
    id: 'visits',
    header: 'Visits',
    footer: (props) => props.column.id,
    size: 180,
  },
  {
    accessorKey: 'status',
    id: 'status',
    header: 'Status',
    footer: (props) => props.column.id,
    size: 180,
  },
  {
    accessorKey: 'progress',
    id: 'progress',
    header: 'Profile Progress',
    footer: (props) => props.column.id,
    size: 180,
  },
];

then try pin "info" group info to the left (or right).

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://stackblitz.com/edit/tanstack-table-n7umup?file=src%2Fmain.tsx

Screenshots or Videos (Optional)

image

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

None

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.
Vorherrschende Sprache
TypeScript
Sterne
28.4k
Forks
3.6k
Ø Merge
1 T. 1 Std.
Gemergte PRs (30 T.)
7

Beitragsleitfaden

Beitragsleitfaden öffnen

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.