В моем первом примере таблицы с использованием response-data-grid столбцы не отображаются рядом друг с другом, вместо этого они перекрывают друг друга

Question

Это моя первая примерная таблица, использующая реагирующую сетку данных, столбцы не отображаются рядом друг с другом, вместо этого они перекрываются друг над другом

Ниже приведен самый базовый c пример кода Я стараюсь. Код отображает таблицу с данными, но отображает столбцы и данные друг над другом, как показано ниже:

Вывод:

ID Заголовок 1 Задача 2 Задача

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}

        />
    );
  }
}

Answer 1

Это потому что css не работает. Вот быстрое решение, которое сработало для меня:

1. Go к пути в проводнике <project-name>\node_modules\react-data-grid\dist и откройте файл react-data-grid.css.
2. Скопируйте полный код css и вставьте его в файл <project-name>\src\App.css.
3. Refre sh URL. (необязательно)

Это сработало для меня.

Answer 2

Вам необходимо импортировать CSS сетки реагирующих данных. Обычно он находится в папке: node_modules \ реагировать-data-grid \ dist. Найдите фактическое местоположение этого CSS файла после установки пакета. Если файл CSS находится в указанной мной папке, просто импортируйте его в файл js:

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

Он должен работать.

Answer 3

Сэм, проблема здесь, весь мой текст появлялся поверх друг друга, хотя я мог выделить пустую сетку и перемещаться по ним с помощью клавиш со стрелками.

Мое решение было похоже на Akanksha, но я только что скопировал весь файл

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

того же уровня, что и мое приложение. css и связан с ним непосредственно в компоненте, использующем реагирующую сетку данных.

import 'react-data-grid.css';

Надеясь, что размер загрузки будет уменьшаться до тех пор, пока он не понадобится, и не будет вызывать какие-либо странные ошибки, влияя на другие классы, когда я этого не ожидал.