React Spreadsheet in Next.js

DHTMLX Spreadsheet ist ein clientseitiges Widget, das Zugriff auf das Browser-DOM benötigt. In Next.js mit dem App Router sind Server-Komponenten der Standard, daher müssen Sie die Tabelle in eine Client-Komponente mit der Direktive "use client" einbetten.

Hinweis

Die JS-Ausgabe des React Spreadsheet-Wrappers enthält bereits ein "use client"-Banner, aber Sie benötigen die Direktive trotzdem in Ihrer eigenen Komponentendatei, die ihn importiert.

Einrichtung

Erstellen Sie ein neues Next.js-Projekt und installieren Sie React Spreadsheet:

npx create-next-app@latest my-spreadsheet-app
cd my-spreadsheet-app
npm install @dhtmlx/trial-react-spreadsheet

Eine Client-Komponente erstellen

Erstellen Sie eine neue Datei für die Tabellenkomponente mit der Direktive "use client":

src/components/SpreadsheetView.tsx

"use client";

import { useState } from "react";
import { ReactSpreadsheet, type SheetData } from "@dhtmlx/trial-react-spreadsheet";
import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css";

const initialSheets: SheetData[] = [
    {
        id: "sheet1",
        name: "Data",
        cells: {
            A1: { value: "Name", css: "bold" },
            B1: { value: "Value", css: "bold" },
            A2: { value: "Item 1" },
            B2: { value: 100 },
        },
    },
];

const styles = {
    bold: { "font-weight": "bold" },
};

export default function SpreadsheetView() {
    const [sheets] = useState<SheetData[]>(initialSheets);

    return (
        <div style={{ width: "100%", height: "100vh" }}>
            <ReactSpreadsheet sheets={sheets} styles={styles} activeSheet="sheet1" />
        </div>
    );
}

CSS-Import

Importieren Sie die CSS-Datei direkt in der Client-Komponente (wie oben gezeigt) oder in Ihrem Root-Layout:

src/app/layout.tsx

import "@dhtmlx/trial-react-spreadsheet/spreadsheet.react.css";

Container-Dimensionierung

Stellen Sie sicher, dass der Container explizite Abmessungen hat. Für eine ganzseitige Tabelle fügen Sie diese Stile zu Ihrer globalen CSS-Datei hinzu:

src/app/globals.css

html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
}

Vollständiges Beispiel

Verwenden Sie die Client-Komponente in einer Server-Seite:

src/app/page.tsx

import SpreadsheetView from "@/components/SpreadsheetView";

export default function Home() {
    return <SpreadsheetView />;
}

Verwandte API und Anleitungen

• Props-Referenz - alle Komponenten-Props mit Typen und Standardwerten
• Events-Referenz - auf Benutzeraktionen reagieren
• Grundlagen der Zustandsverwaltung - Tabellendaten im React-Zustand verwalten