React Data Grid показывает плохо

Question

У меня проблема с компонентом ReactDataGrid. Я уже установил реагирующую сетку данных. Код такой же, как в сети REA c:

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' },
  { key: 'count', name: 'Count' }];

const rows = [{ id: 0, title: 'row1', count: 20 }, { id: 1, title: 'row1', count: 40 }, { id: 2, title: 'row1', count: 60 }];


class App extends React.Component {
  render() {
    return (
      <ReactDataGrid
        columns={columns}
        rowGetter={i => rows[i]}
        rowsCount={3}
        minHeight={150} />
    )
  }
}

export default App;

, и я получаю: Результат

Спасибо!

Answer 1

Импортируйте CSS примерно так:

import 'react-data-grid/dist/react-data-grid.css';

Все должно быть в порядке.

Answer 2

Вам не нужно понижать рейтинг. Проблема в том, что css не импортируется. Если вы можете импортировать css из узловых модулей, это будет работать. Обходной путь для меня состоял в том, что я взял все css, и теперь мы самостоятельно поддерживаем css, внося изменения при необходимости.

Answer 3

    import React from "react";
    import ReactDOM from "react-dom";
    import ReactDataGrid from "react-data-grid";

    const columns = [
      { key: "id", name: "ID", editable: true },
      { key: "title", name: "Title", editable: true },
      { key: "count", name: "Count", editable: true }
    ];

    const rows = [
      { id: 0, title: "row1", count: 20 },
      { id: 1, title: "row1", count: 40 },
      { id: 2, title: "row1", count: 60 }
    ];

    class App extends React.Component {
      render() {
        return (
          <ReactDataGrid
            columns={columns}
            rowGetter={i => rows[i]}
            rowsCount={3}
            minHeight={150}
            enableCellSelect={true}
          />
        );
      }
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

https://codesandbox.io/s/rdg-cell-editing-h8bnr

ответ в коде выше, этот код работает