Anleitung zur Spaltengröße

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

• spaltengröße
• spaltengröße-performant

API zur Spaltengrößenanpassung

Die Funktion zur Spaltengrößenanpassung ermöglicht es Ihnen, optional die Breite jeder Spalte einschließlich minimaler und maximaler Breiten festzulegen. Sie ermöglicht Ihnen und Ihren Benutzern auch die dynamische Änderung der Breite aller Spalten nach Belieben, z. B. durch Ziehen der Spaltenüberschriften.

Spalten erhalten standardmäßig die folgenden Messoptionen

export const defaultColumnSizing = {
  size: 150,
  minSize: 20,
  maxSize: Number.MAX_SAFE_INTEGER,
}

export const defaultColumnSizing = {
  size: 150,
  minSize: 20,
  maxSize: Number.MAX_SAFE_INTEGER,
}

Diese Standardwerte können sowohl durch tableOptions.defaultColumn als auch durch individuelle Spaltendefinitionen überschrieben werden, in dieser Reihenfolge.

const columns = [
  {
    accessorKey: 'col1',
    size: 270, //set column size for this column
  },
  //...
]

const table = useReactTable({
  //override default column sizing
  defaultColumn: {
    size: 200, //starting column size
    minSize: 50, //enforced during column resizing
    maxSize: 500, //enforced during column resizing
  },
})

const columns = [
  {
    accessorKey: 'col1',
    size: 270, //set column size for this column
  },
  //...
]

const table = useReactTable({
  //override default column sizing
  defaultColumn: {
    size: 200, //starting column size
    minSize: 50, //enforced during column resizing
    maxSize: 500, //enforced during column resizing
  },
})

Die Spaltengrößen („sizes“) werden im Tabellenzustand als Zahlen gespeichert und normalerweise als Pixelwerte interpretiert. Sie können diese Spaltengrößenwerte jedoch so mit Ihren CSS-Stilen verknüpfen, wie Sie es für richtig halten.

Als Headless-Utility ist die Tabellenlogik für die Spaltengrößenanpassung eigentlich nur eine Sammlung von Zuständen, die Sie nach Belieben auf Ihre eigenen Layouts anwenden können (unser obiges Beispiel implementiert zwei Stile dieser Logik). Sie können diese Breitenmessungen auf verschiedene Weise anwenden

• semantische table-Elemente oder alle Elemente, die im CSS-Modus einer Tabelle angezeigt werden
• div/span-Elemente oder alle Elemente, die in einem Nicht-Tabellen-CSS-Modus angezeigt werden
  • Blockebenelemente mit festen Breiten
  • Absolut positionierte Elemente mit festen Breiten
  • Flexbox-positionierte Elemente mit variablen Breiten
  • Grid-positionierte Elemente mit variablen Breiten
• Wirklich jeder Layout-Mechanismus, der Zellbreiten in eine Tabellenstruktur interpolieren kann.

Jansatz dieser Ansätze hat eigene Vor- und Nachteile, die meist Meinungen einer UI/Komponentenbibliothek oder eines Designsystems sind, glücklicherweise nicht Ihre 😉.

TanStack Table bietet integrierte Zustände und APIs zur Spaltenneuberechnung, mit denen Sie die Spaltenneuberechnung einfach in Ihrer Tabellen-UI mit verschiedenen Optionen für Benutzerfreundlichkeit und Leistung implementieren können.

Standardmäßig gibt die API column.getCanResize() für alle Spalten standardmäßig true zurück. Sie können jedoch entweder die Spaltenneuberechnung für alle Spalten mit der Tabellenoption enableColumnResizing deaktivieren oder die Spaltenneuberechnung für einzelne Spalten mit der Spaltenoption enableResizing deaktivieren.

const columns = [
  {
    accessorKey: 'id',
    enableResizing: false, //disable resizing for just this column
    size: 200, //starting column size
  },
  //...
]

const columns = [
  {
    accessorKey: 'id',
    enableResizing: false, //disable resizing for just this column
    size: 200, //starting column size
  },
  //...
]

Standardmäßig ist der Spaltenneuberechnungsmodus auf "onEnd" eingestellt. Das bedeutet, dass die API column.getSize() die neue Spaltengröße erst zurückgibt, wenn der Benutzer die Spalte fertig neu berechnet (gezogen) hat. Normalerweise wird ein kleiner UI-Indikator angezeigt, während der Benutzer die Spalte neu berechnet.

Im React TanStack Table Adapter kann es schwierig sein, Spaltenneuberechnungen mit 60 Bildern pro Sekunde zu rendern, abhängig von der Komplexität Ihrer Tabelle oder Webseite. Der Spaltenneuberechnungsmodus "onEnd" kann eine gute Standardoption sein, um Ruckeln oder Verzögerungen zu vermeiden, während der Benutzer Spalten neu berechnet. Das heißt nicht, dass Sie keine Spaltenneuberechnungen mit 60 Bildern pro Sekunde mit TanStack React Table erreichen können, aber Sie müssen möglicherweise zusätzliche Memoisation oder andere Leistungsoptimierungen durchführen, um dies zu erreichen.

Erweiterte Leistungstipps zur Spaltenneuberechnung werden weiter unten besprochen.

Wenn Sie den Spaltenneuberechnungsmodus auf "onChange" ändern möchten, um sofortige Spaltenneuberechnungs-Renderings zu erhalten, können Sie dies mit der Tabellenoption columnResizeMode tun.

const table = useReactTable({
  //...
  columnResizeMode: 'onChange', //change column resize mode to "onChange"
})

const table = useReactTable({
  //...
  columnResizeMode: 'onChange', //change column resize mode to "onChange"
})

Standardmäßig geht TanStack Table davon aus, dass das Tabellenmarkup von links nach rechts angeordnet ist. Für Rechts-nach-Links-Layouts müssen Sie möglicherweise die Spaltenneuberechnungsrichtung auf "rtl" ändern.

const table = useReactTable({
  //...
  columnResizeDirection: 'rtl', //change column resize direction to "rtl" for certain locales
})

const table = useReactTable({
  //...
  columnResizeDirection: 'rtl', //change column resize direction to "rtl" for certain locales
})

Es gibt einige wirklich praktische APIs, die Sie verwenden können, um Ihre Spaltenneuberechnungs-Drag-Interaktionen mit Ihrer UI zu verbinden.

Um die Größe einer Spalte auf die Spaltenkopf-, Daten- oder Fußzeilenzellen anzuwenden, können Sie die folgenden APIs verwenden

header.getSize()
column.getSize()
cell.column.getSize()

header.getSize()
column.getSize()
cell.column.getSize()

Wie Sie diese Größenstile auf Ihr Markup anwenden, bleibt Ihnen überlassen. Es ist jedoch ziemlich üblich, entweder CSS-Variablen oder Inline-Stile zu verwenden, um die Spaltengrößen anzuwenden.

<th
  key={header.id}
  colSpan={header.colSpan}
  style={{ width: `${header.getSize()}px` }}
>

<th
  key={header.id}
  colSpan={header.colSpan}
  style={{ width: `${header.getSize()}px` }}
>

Wie im Abschnitt Erweiterte Leistung bei der Spaltenneuberechnung erläutert, sollten Sie jedoch in Erwägung ziehen, CSS-Variablen zu verwenden, um Spaltengrößen auf Ihr Markup anzuwenden.

TanStack Table bietet einen vorgefertigten Ereignisbehandlungsmechanismus, um Ihre Drag-Interaktionen einfach zu implementieren. Diese Ereignisbehandlungsmechanismen sind nur Komfortfunktionen, die andere interne APIs aufrufen, um den Spaltengrößenstatus zu aktualisieren und die Tabelle neu zu rendern. Verwenden Sie header.getResizeHandler(), um Ihre Spaltenneuberechnungs-Drag-Interaktionen für Maus- und Touch-Ereignisse zu verbinden.

<ColumnResizeHandle
  onMouseDown={header.getResizeHandler()} //for desktop
  onTouchStart={header.getResizeHandler()} //for mobile
/>

<ColumnResizeHandle
  onMouseDown={header.getResizeHandler()} //for desktop
  onTouchStart={header.getResizeHandler()} //for mobile
/>

TanStack Table verfolgt ein Zustandsobjekt namens columnSizingInfo, das Sie verwenden können, um eine UI für den Spaltenneuberechnungsindikator zu rendern.

<ColumnResizeIndicator
  style={{
    transform: header.column.getIsResizing()
      ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
      : '',
  }}
/>

<ColumnResizeIndicator
  style={{
    transform: header.column.getIsResizing()
      ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
      : '',
  }}
/>

Wenn Sie große oder komplexe Tabellen erstellen (und React verwenden 😉), stellen Sie möglicherweise fest, dass Ihre Benutzer bei der Neuberechnung von Spalten Leistungseinbußen erfahren, wenn Sie Ihrer Renderlogik keine ordnungsgemäße Memoisation hinzufügen.

Wir haben ein performantes Spaltenneuberechnungsbeispiel erstellt, das zeigt, wie Spaltenneuberechnungen mit 60 Bildern pro Sekunde mit einer komplexen Tabelle erzielt werden, die sonst möglicherweise langsame Renderings aufweist. Es wird empfohlen, sich dieses Beispiel anzusehen, um zu sehen, wie es gemacht wird. Dies sind jedoch die grundlegenden Dinge, die Sie beachten sollten:

1. Verwenden Sie column.getSize() nicht bei jeder Kopfzeile und jeder Datenzelle. Berechnen Sie stattdessen alle Spaltenbreiten einmal im Voraus, memoisiert!
2. Memoisiert Ihren Tabellenkörper, während die Neuberechnung im Gange ist.
3. Verwenden Sie CSS-Variablen, um Spaltenbreiten an Ihre Tabellenzellen zu kommunizieren.

Wenn Sie diese Schritte befolgen, sollten Sie deutliche Leistungsverbesserungen bei der Neuberechnung von Spalten erzielen.

Wenn Sie kein React verwenden und stattdessen die Svelte-, Vue- oder Solid-Adapter verwenden, müssen Sie sich möglicherweise nicht so viele Sorgen machen, aber ähnliche Prinzipien gelten.