[Table] Context from a wrapper around Column is lost when the column header renders

Aperta
  • Qualcosa non va?
#10,632 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
52/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start with the minimal Table/Column reproduction using react-aria-components 1.21.1, @tanstack/react-table 9.2.4, and React 19.3.0, then trace how RAC collects and renders Column header content. Confirm the failure of useHeaderContext() and investigate whether the provider can remain available or whether a renderer API is needed. Done means the header context works through Column rendering, or a documented way exists to pass the collected header instance explicitly.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Description

I am integrating TanStack Table v9's createTableHook with React Aria Components Table. TanStack’s hook factory can register header components that use a context hook such as useHeaderContext() to access the current TanStack header's state.

This works when the registered component is rendered in the normal React tree. It fails when used as the content of a React Aria Column: RAC collects the column definitions and renders their header content through its collection machinery, outside the wrapper’s context provider.

This seems related to #7049: “Context set in collection item node not propagating”, which describes the same general context-propagation problem. This report is a concrete Table/Column integration case.

Minimal example

A simplified TanStack hook registers a component that reads the current header from context:

const { useAppTable, useHeaderContext } = createTableHook({
  features,
  headerComponents: {
    SortableHeader: () => {
      const header = useHeaderContext();

      return (
        <Column
          id={header.id}
          allowsSorting={header.column.getCanSort()}
        >
          <FlexRender header={header} />
        </Column>
      );
    },
  },
});

The app wraps that component in TanStack’s header provider:

<table.AppTable>
  <Table>
    <TableHeader>
      {headers.map((header) => (
        <table.AppHeader header={header} key={header.id}>
          {(appHeader) => <appHeader.SortableHeader />}
        </table.AppHeader>
      ))}
    </TableHeader>
    {/* rows */}
  </Table>
</table.AppTable>

At runtime, useHeaderContext() throws:

useHeaderContext must be used within an AppHeader or AppFooter component.

Passing the header explicitly instead of reading it from context works around the problem:

<Column id={header.id} allowsSorting={header.column.getCanSort()}>
  <FlexRender header={header} />
</Column>

Expected behavior

A React context provider around a Column’s rendered header content would remain available to that content, or RAC would provide an API for passing the collected column/header instance to the renderer without relying on context.

Actual behavior

The provider appears to wrap the JSX returned for the column, but the content rendered by RAC’s collection-based table header does not receive that context.

Environment

  • react-aria-components: 1.21.1
  • @tanstack/react-table: 9.2.4
  • React: 19.3.0
Lingua principale
TypeScript
Stelle
16k
Fork
1.6k
Merge medio
3g 9h
PR unite (30g)
45

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di adobe/react-spectrum

Tutte le issue di adobe/react-spectrum

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.