React Table Spalten fixieren: Ein umfassender Leitfaden

React Table ist ein leistungsstarkes Werkzeug zur Anzeige tabellarischer Daten, aber die Verwaltung fester Spalten kann schwierig sein. Diese Anleitung bietet einen klaren, versionspezifischen Ansatz, um Spalten beim horizontalen Scrollen stationär zu halten.

Inhaltsverzeichnis

• Verwendung von react-table-sticky für React Table v7 und höher
• Verwendung von react-table-hoc-fixed-columns für React Table v6 und niedriger

Verwendung von react-table-sticky für React Table v7 und höher

React Table v7 führte signifikante API-Änderungen ein. Für feste Spalten bietet react-table-sticky eine optimierte Lösung.

1. Installation

npm install react-table-sticky
# oder
yarn add react-table-sticky

2. Implementierung

Dieses Beispiel zeigt, wie die Spalte ‚ID‘ links fixiert wird:

import React from 'react';
import { useTable, useSticky } from 'react-table';
import { FixedColumnsTable } from 'react-table-sticky';

const data = [
  { id: 1, name: 'John Doe', age: 30, city: 'New York' },
  { id: 2, name: 'Jane Doe', age: 25, city: 'London' },
  // ... weitere Daten
];

const columns = [
  { Header: 'ID', accessor: 'id', sticky: 'left' },
  { Header: 'Name', accessor: 'name' },
  { Header: 'Alter', accessor: 'age' },
  { Header: 'Stadt', accessor: 'city' },
];

function MyTable({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data }, useSticky);

  return (
    <FixedColumnsTable {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </FixedColumnsTable>
  );
}

export default MyTable;

Die Eigenschaft sticky: 'left' in der Spaltendefinition fixiert die Spalte ‚ID‘. Verwenden Sie sticky: 'right' für rechts fixierte Spalten.

Verwendung von react-table-hoc-fixed-columns für React Table v6 und niedriger

Für ältere React Table-Versionen bietet react-table-hoc-fixed-columns eine Lösung mithilfe von Higher-Order Components (HOCs).

1. Installation

npm install react-table-hoc-fixed-columns
# oder
yarn add react-table-hoc-fixed-columns

2. Implementierung

Die Implementierung hängt von Ihrer spezifischen React Table-Version ab. Konsultieren Sie die Dokumentation der Bibliothek für detaillierte Anweisungen. Der allgemeine Ansatz beinhaltet das Einbetten Ihrer Tabellenkomponente mit dem fixedColumns HOC. Ein vereinfachtes Beispiel (siehe Dokumentation der Bibliothek für versionsspezifische Details):

import React from 'react';
import { useTable } from 'react-table';
import { fixedColumns } from 'react-table-hoc-fixed-columns';

// ... Ihre Daten- und Spaltendefinition ...

const MyTable = fixedColumns(({ getTableProps, ...rest }) => (
  <YourOriginalTableComponent {...rest} {...getTableProps()} />
));

// ... Rest Ihrer Komponente

Beziehen Sie sich immer auf die offizielle Dokumentation von react-table-sticky und react-table-hoc-fixed-columns für die genauesten und aktuellsten Informationen.