Spalten-Anheftungsanleitung

Möchten Sie direkt zur Implementierung springen? Sehen Sie sich diese Beispiele an

• column-pinning
• sticky-column-pinning

• Svelte column-pinning
• Vue column-pinning

Spalten-Anheftungs-API

TanStack Table bietet Zustände und APIs, die für die Implementierung von Spalten-Anheftungsfunktionen in Ihrer Tabellen-UI hilfreich sind. Sie können die Spalten-Anheftung auf verschiedene Arten implementieren. Sie können entweder angeheftete Spalten in eigene separate Tabellen aufteilen oder alle Spalten in derselben Tabelle belassen, aber den Anheftungszustand verwenden, um die Spalten korrekt zu ordnen und Sticky-CSS zu verwenden, um die Spalten links oder rechts anzuheften.

Es gibt 3 Tabellenfunktionen, die Spalten neu anordnen können, welche in der folgenden Reihenfolge stattfinden

1. Spalten-Anheftung - Wenn angeheftet, werden Spalten in linke, mittlere (nicht angeheftete) und rechte angeheftete Spalten aufgeteilt.
2. Manuelle Spaltenreihenfolge - Eine manuell festgelegte Spaltenreihenfolge wird angewendet.
3. Gruppierung - Wenn die Gruppierung aktiviert ist, ein Gruppierungszustand aktiv ist und tableOptions.groupedColumnMode auf 'reorder' | 'remove' gesetzt ist, dann werden die gruppierten Spalten an den Anfang des Spaltenflusses neu angeordnet.

Die einzige Möglichkeit, die Reihenfolge der angehefteten Spalten zu ändern, ist im columnPinning.left und columnPinning.right Zustand selbst. Der Zustand columnOrder beeinflusst nur die Reihenfolge der nicht angehefteten ("mittleren") Spalten.

Die Verwaltung des columnPinning Zustands ist optional und normalerweise nicht notwendig, es sei denn, Sie fügen persistente Zustandsfunktionen hinzu. TanStack Table verfolgt den Zustand der Spalten-Anheftung bereits für Sie. Verwalten Sie den columnPinning Zustand wie jeden anderen Tabellenzustand, wenn Sie ihn benötigen.

const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({
  left: [],
  right: [],
});
//...
const table = useReactTable({
  //...
  state: {
    columnPinning,
    //...
  }
  onColumnPinningChange: setColumnPinning,
  //...
});

const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({
  left: [],
  right: [],
});
//...
const table = useReactTable({
  //...
  state: {
    columnPinning,
    //...
  }
  onColumnPinningChange: setColumnPinning,
  //...
});

Ein sehr häufiger Anwendungsfall ist das Standardmäßige Anheften einiger Spalten. Sie können dies tun, indem Sie entweder den columnPinning Zustand mit den angehefteten columnIds initialisieren oder die Tabellenoption initialState verwenden

const table = useReactTable({
  //...
  initialState: {
    columnPinning: {
      left: ['expand-column'],
      right: ['actions-column'],
    },
    //...
  }
  //...
});

const table = useReactTable({
  //...
  initialState: {
    columnPinning: {
      left: ['expand-column'],
      right: ['actions-column'],
    },
    //...
  }
  //...
});

Hinweis: Einige dieser APIs sind neu in v8.12.0

Es gibt eine Handvoll nützlicher Spalten-API-Methoden, die Ihnen bei der Implementierung von Spalten-Anheftungsfunktionen helfen

• column.getCanPin: Verwenden Sie diese Methode, um zu ermitteln, ob eine Spalte angeheftet werden kann.
• column.pin: Verwenden Sie diese Methode, um eine Spalte nach links oder rechts anzuheften. Oder verwenden Sie sie, um eine Spalte zu lösen.
• column.getIsPinned: Verwenden Sie diese Methode, um zu ermitteln, wo eine Spalte angeheftet ist.
• column.getStart: Verwenden Sie diese Methode, um den korrekten left CSS-Wert für eine angeheftete Spalte bereitzustellen.
• column.getAfter: Verwenden Sie diese Methode, um den korrekten right CSS-Wert für eine angeheftete Spalte bereitzustellen.
• column.getIsLastColumn: Verwenden Sie diese Methode, um zu ermitteln, ob eine Spalte die letzte Spalte in ihrer angehefteten Gruppe ist. Nützlich zum Hinzufügen eines Schattenwurfs.
• column.getIsFirstColumn: Verwenden Sie diese Methode, um zu ermitteln, ob eine Spalte die erste Spalte in ihrer angehefteten Gruppe ist. Nützlich zum Hinzufügen eines Schattenwurfs.

Wenn Sie nur Sticky-CSS zum Anheften von Spalten verwenden, können Sie die Tabelle größtenteils wie gewohnt mit den Methoden table.getHeaderGroups und row.getVisibleCells rendern.

Wenn Sie jedoch angeheftete Spalten in eigene separate Tabellen aufteilen, können Sie die Methoden table.getLeftHeaderGroups, table.getCenterHeaderGroups, table.getRightHeaderGroups, row.getLeftVisibleCells, row.getCenterVisibleCells und row.getRightVisibleCells nutzen, um nur die für die aktuelle Tabelle relevanten Spalten zu rendern.