Stellen Sie die Spaltenbreite mit der React-Table-Bibliothek ein

1. Passen Sie die Spaltenbreite mit der react-table-Bibliothek an
2. Verwenden Sie die Methode .getHeaderProps(), um die Spaltenbreite mit der Bibliothek react-table anzugeben

React ist das beliebteste Framework zum Erstellen von Front-End-Anwendungen. Es ist normal, dass moderne Apps viele Informationen enthalten; Das Organisieren von Rohdaten in Tabellen kann die umfangreichen Informationen leichter verdaulich machen.

Die react-table-Bibliothek stellt die notwendige Logik bereit, um Tabellen in React zu erstellen. Die Benutzeroberfläche der Tabelle müssen Sie jedoch selbst erstellen.

In diesem Artikel möchten wir zeigen, wie Benutzer das Aussehen von Tabellen anpassen können, zum Beispiel die Breite der Spalte anpassen.

Passen Sie die Spaltenbreite mit der react-table-Bibliothek an

react-table ist eine Headless-UI-Bibliothek zum Erstellen von Tabellen in React. Es bietet nur Logik, nicht die eigentliche Benutzeroberfläche.

React-Entwickler können den useTable-Hook aus der react-table-Bibliothek verwenden, um eine Tabelle basierend auf Rohdaten und Spalteninformationen zu erstellen.

Werfen wir einen Blick auf diese Table-Komponente:

function Table({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th
                {...column.getHeaderProps({
                  style: {
                    minWidth: 200,
                    width: 250,
                    border: "1px solid black"
                  }
                })}
              >
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

Es ist ein einfaches Beispiel einer Tabelle, die mit dem useTable-Hook erstellt wurde. Darin haben wir HTML-Elemente zum Gestalten von Tabellen verwendet.

Auf der obersten Ebene befindet sich die HTML-Komponente <table>. Wir haben auch <thead>, <tr>, <th> und andere Elemente.

Wenn Sie den Code selbst überprüfen möchten, können Sie dies auf CodeSandbox tun.

Verwenden Sie die Methode .getHeaderProps(), um die Spaltenbreite mit der Bibliothek react-table anzugeben

Wenn Sie eine Tabelle mit einem Hook useTable() erstellen lassen, müssen Sie die UI-Elemente selbst definieren. Hier kommt das <th>-HTML ins Spiel.

Es definiert eine Kopfzeile für die Tabelle. Mit anderen Worten: Beschriften Sie die Zelle ganz oben in der Spalte.

Im obigen Beispiel haben wir die Methode .getHeaderProps() mit einem Argument verwendet: einem Stilobjekt, das die Standardstile für das Element <th> überschreibt.

Schauen wir uns den eigentlichen Code an:

<th
    {...column.getHeaderProps({
                              style: {
                              minWidth: 200,
                              width: 250,
                              border: "1px solid black"
                  }
                })}
              >

Dies ist der einfachste Weg, um die Spaltenbreite beim Erstellen von Tabellen mit der react-table-Bibliothek anzugeben. In diesem Fall haben wir die Parameter minWidth und width angegeben, um die Spaltengrösse anzupassen.

In Wirklichkeit können Sie jede CSS-Eigenschaft anwenden, solange sie als Objekt formatiert ist.

Wenn Sie beispielsweise die Eigenschaft min-width als Inline-Stil anwenden möchten, wird sie zu minWidth. Dies geschieht, weil alle Stile als Objekt formatiert werden müssen.

Sie können den Code auschecken und versuchen, ihn auf CodeSandbox selbst zu bearbeiten.