Spaltenreihenfolge-Leitfaden

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

• column-ordering
• column-dnd

Spaltenreihenfolge-API

Standardmäßig werden die Spalten in der Reihenfolge angeordnet, in der sie im Array columns definiert sind. Sie können die Spaltenreihenfolge jedoch manuell mit dem Status columnOrder festlegen. Andere Funktionen wie Spalten-Pinning und Gruppierung können ebenfalls die Spaltenreihenfolge beeinflussen.

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

1. Spalten-Pinning - Bei aktiviertem Pinning werden die Spalten in linke, mittlere (nicht angeheftete) und rechte angeheftete Spalten aufgeteilt.
2. Manuelle Spaltenreihenfolge - Eine manuell angegebene Spaltenreihenfolge wird angewendet.
3. Gruppierung - Wenn die Gruppierung aktiviert ist, ein Gruppierungsstatus aktiv ist und tableOptions.groupedColumnMode auf 'reorder' | 'remove' gesetzt ist, werden die gruppierten Spalten an den Anfang des Spaltenflusses verschoben.

Hinweis: Der Status columnOrder wirkt sich nur auf nicht angeheftete Spalten aus, wenn er in Verbindung mit Spalten-Pinning verwendet wird.

Wenn Sie keinen Status columnOrder angeben, verwendet TanStack Table einfach die Reihenfolge der Spalten im Array columns. Sie können jedoch ein Array von Spalten-IDs (Strings) an den Status columnOrder übergeben, um die Reihenfolge der Spalten festzulegen.

Wenn Sie nur die anfängliche Spaltenreihenfolge festlegen müssen, können Sie den Status columnOrder einfach in der Tabellenoption initialState angeben.

const table = useReactTable({
  //...
  initialState: {
    columnOrder: ['columnId1', 'columnId2', 'columnId3'],
  }
  //...
});

const table = useReactTable({
  //...
  initialState: {
    columnOrder: ['columnId1', 'columnId2', 'columnId3'],
  }
  //...
});

Hinweis: Wenn Sie die Tabellenoption state verwenden, um auch den Status columnOrder anzugeben, hat initialState keine Auswirkung. Geben Sie bestimmte Zustände nur entweder in initialState oder in state an, nicht in beiden.

Wenn Sie die Spaltenreihenfolge dynamisch ändern oder die Spaltenreihenfolge festlegen möchten, nachdem die Tabelle initialisiert wurde, können Sie den Status columnOrder wie jeden anderen Tabellenstatus verwalten.

const [columnOrder, setColumnOrder] = useState<string[]>(['columnId1', 'columnId2', 'columnId3']); //optionally initialize the column order
//...
const table = useReactTable({
  //...
  state: {
    columnOrder,
    //...
  }
  onColumnOrderChange: setColumnOrder,
  //...
});

const [columnOrder, setColumnOrder] = useState<string[]>(['columnId1', 'columnId2', 'columnId3']); //optionally initialize the column order
//...
const table = useReactTable({
  //...
  state: {
    columnOrder,
    //...
  }
  onColumnOrderChange: setColumnOrder,
  //...
});

Wenn die Tabelle eine Benutzeroberfläche hat, die es dem Benutzer ermöglicht, Spalten neu anzuordnen, können Sie die Logik wie folgt einrichten:

const [columnOrder, setColumnOrder] = useState<string[]>(columns.map(c => c.id));

//depending on your dnd solution of choice, you may or may not need state like this
const [movingColumnId, setMovingColumnId] = useState<string | null>(null);
const [targetColumnId, setTargetColumnId] = useState<string | null>(null);

//util function to splice and reorder the columnOrder array
const reorderColumn = <TData extends RowData>(
  movingColumnId: Column<TData>,
  targetColumnId: Column<TData>,
): string[] => {
  const newColumnOrder = [...columnOrder];
  newColumnOrder.splice(
    newColumnOrder.indexOf(targetColumnId),
    0,
    newColumnOrder.splice(newColumnOrder.indexOf(movingColumnId), 1)[0],
  );
  setColumnOrder(newColumnOrder);
};

const handleDragEnd = (e: DragEvent) => {
  if(!movingColumnId || !targetColumnId) return;
  setColumnOrder(reorderColumn(movingColumnId, targetColumnId));
};

//use your dnd solution of choice

const [columnOrder, setColumnOrder] = useState<string[]>(columns.map(c => c.id));

//depending on your dnd solution of choice, you may or may not need state like this
const [movingColumnId, setMovingColumnId] = useState<string | null>(null);
const [targetColumnId, setTargetColumnId] = useState<string | null>(null);

//util function to splice and reorder the columnOrder array
const reorderColumn = <TData extends RowData>(
  movingColumnId: Column<TData>,
  targetColumnId: Column<TData>,
): string[] => {
  const newColumnOrder = [...columnOrder];
  newColumnOrder.splice(
    newColumnOrder.indexOf(targetColumnId),
    0,
    newColumnOrder.splice(newColumnOrder.indexOf(movingColumnId), 1)[0],
  );
  setColumnOrder(newColumnOrder);
};

const handleDragEnd = (e: DragEvent) => {
  if(!movingColumnId || !targetColumnId) return;
  setColumnOrder(reorderColumn(movingColumnId, targetColumnId));
};

//use your dnd solution of choice

Es gibt zweifellos viele Möglichkeiten, Drag-and-Drop-Funktionen neben TanStack Table zu implementieren. Hier sind ein paar Vorschläge, damit Sie keine schlechte Erfahrung machen:

1. Versuchen Sie NICHT, "react-dnd" zu verwenden, *wenn Sie React 18 oder neuer verwenden*. React DnD war zu seiner Zeit eine wichtige Bibliothek, wird aber jetzt nicht mehr sehr oft aktualisiert und hat Inkompatibilitäten mit React 18, insbesondere im Strict Mode von React. Es ist immer noch möglich, sie zum Laufen zu bringen, aber es gibt neuere Alternativen, die besser kompatibel und aktiver gepflegt werden. Der Provider von React DnD kann auch mit anderen DnD-Lösungen, die Sie in Ihrer App ausprobieren möchten, stören und Konflikte verursachen.

2. Verwenden Sie "@dnd-kit/core". DnD Kit ist eine moderne, modulare und leichtgewichtige Drag-and-Drop-Bibliothek, die hochgradig mit dem modernen React-Ökosystem kompatibel ist und gut mit semantischem <table>-Markup funktioniert. Beide offiziellen TanStack DnD-Beispiele, Column DnD und Row DnD, verwenden jetzt DnD Kit.

3. Erwägen Sie andere DnD-Bibliotheken wie "react-beautiful-dnd", aber beachten Sie deren potenziell große Bundle-Größen, den Wartungsstatus und die Kompatibilität mit <table>-Markup.

4. Erwägen Sie die Verwendung nativer Browser-Ereignisse und Zustandsverwaltung zur Implementierung von leichten Drag-and-Drop-Funktionen. Beachten Sie jedoch, dass dieser Ansatz für mobile Benutzer möglicherweise nicht optimal ist, wenn Sie keine zusätzlichen Anstrengungen unternehmen, um ordnungsgemäße Touch-Ereignisse zu implementieren. Material React Table V2 ist ein Beispiel für eine Bibliothek, die TanStack Table nur mit Browser-Drag-and-Drop-Ereignissen wie onDragStart, onDragEnd und onDragEnter implementiert und keine weiteren Abhängigkeiten hat. Sehen Sie sich ihren Quellcode an, um zu sehen, wie es gemacht wird.