Dies ist meine erste Beispieltabelle mit React-Data-Grid. Spalten werden nicht nebeneinander gerendert, sondern überlappen sich immer wieder

Unten ist der sehr grundlegende Beispielcode, den ich versuche. Der Code rendert die Tabelle mit Daten, rendert jedoch die Spalten und Daten wie folgt übereinander:

Ausgabe:

ID Titel 1 Aufgabe 2 Aufgabe

import React from 'react';
import DataGrid from 'react-data-grid';

export default class extends React.Component {
  constructor(props, context) {
    super(props, context);
    this._columns = [
      {
        key: 'id',
        name: 'ID',
        resizable: true,
        width: 40
      },
      {
        key: 'task',
        name: 'Title',
        resizable: true
      }
    ];
    this.createRows();
    this.state = null;
  }

  createRows = () => {
    const rows = [];
    for (let i = 1; i <= 2; i++) {
      rows.push({
        id: i,
        task: 'Task'
      });
    }

    this._rows = rows;
  };

  rowGetter = (i) => {
    return this._rows[i];
  };

  render() {
    return (
        <DataGrid
            columns={this._columns}
            rowGetter={this.rowGetter}
            rowsCount={this._rows.length}
            minHeight={500}
            minColumnWidth={120}

        />
    );
  }
}
5
Anand Subramanian 21 Feb. 2020 im 23:06

3 Antworten

Beste Antwort

Dies liegt daran, dass das CSS nicht funktioniert. Hier ist die schnelle Lösung, die für mich funktioniert hat:

  1. Gehen Sie im Explorer <project-name>\node_modules\react-data-grid\dist zum Pfad und öffnen Sie die Datei react-data-grid.css.
  2. Kopieren Sie den vollständigen CSS-Code und fügen Sie ihn in Ihre <project-name>\src\App.css - Datei ein.
  3. URL aktualisieren. (Optional)

Das hat bei mir funktioniert.

3
xiawi 24 Feb. 2020 im 11:57

Sam Problem hier, mein gesamter Text erschien übereinander, obwohl ich leeres Gitter markieren und mit den Pfeiltasten durch sie navigieren konnte.

Meine Lösung war ähnlich wie die von Akanksha, aber ich habe nur das Ganze kopiert

node_modules\react-data-grid\dist\react-data-grid.css

Datei auf die gleiche Ebene wie meine App.css und direkt in der Komponente verknüpft, die das React-Data-Grid verwendet.

import 'react-data-grid.css';

Ich hoffe, dass die Ladegröße so lange verringert wird, bis sie benötigt wird, und verhindert, dass sie seltsame Fehler verursacht, indem sie andere Klassen beeinflusst, wenn ich sie nicht erwartet habe.

0
saminacast 26 Feb. 2020 im 23:36

Sie müssen das CSS des React-Data-Grids importieren. Normalerweise befindet es sich im Ordner: node_modules \ react-data-grid \ dist. Suchen Sie den tatsächlichen Speicherort dieser CSS-Datei, nachdem Sie das Paket installiert haben. Wenn sich die CSS-Datei in dem von mir erwähnten Ordner befindet, importieren Sie sie einfach in Ihre js-Datei:

import React from 'react';
import DataGrid from 'react-data-grid';
import 'react-data-grid/dist/react-data-grid.css';

Es sollte funktionieren.

1
Lex Soft 28 Feb. 2020 im 05:39