Schnellstart mit React Spreadsheet

Dieses Tutorial fuhrt Sie durch die Erstellung einer React-Anwendung mit DHTMLX Spreadsheet von Grund auf.

Neues Projekt erstellen

npm create vite@latest my-spreadsheet-app -- --template react-ts
cd my-spreadsheet-app

React Spreadsheet installieren

npm install @dhtmlx/trial-react-spreadsheet

Informationen zu anderen Paketvarianten finden Sie unter Installation.

Demodaten erstellen

Erstellen Sie eine Datei src/data.ts mit Beispieldaten fur die Tabellenkalkulation:

src/data.ts

import type { SheetData } from "@dhtmlx/trial-react-spreadsheet";

export const sheets: SheetData[] = [
    {
        id: "sheet1",
        name: "Sales",
        cells: {
            A1: { value: "Product", css: "bold" },
            B1: { value: "Revenue", css: "bold", format: "currency" },
            A2: { value: "Widget" },
            B2: { value: 15000, format: "currency" },
            A3: { value: "Gadget" },
            B3: { value: 22000, format: "currency" },
            A4: { value: "Total" },
            B4: { value: "=SUM(B2:B3)", format: "currency" },
        },
    },
];

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

Komponente erstellen

Ersetzen Sie den Inhalt von src/App.tsx:

src/App.tsx

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

function App() {
    const [sheets] = useState<SheetData[]>(initialSheets);

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

export default App;

Stile hinzufugen

Aktualisieren Sie src/index.css, um ein Layout mit voller Hohe sicherzustellen:

src/index.css

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

App starten

npm run dev

Offnen Sie die in Ihrem Terminal angezeigte URL (in der Regel http://localhost:5173), um die Tabellenkalkulation anzuzeigen.

Verwandte API und Anleitungen

• Props-Referenz - Konfigurieren Sie das Verhalten der Tabellenkalkulation
• Events-Referenz - Reagieren Sie auf Benutzeraktionen
• Typen-Referenz - TypeScript-Interfaces und Enums
• Daten- und Zustandsverwaltung - Tabellendaten im Anwendungsstatus verwalten

Sie konnen auch das GitHub-Demo-Repository fur ein vollstandiges funktionierendes Beispiel erkunden.