React Data Grid shows bad

Question

I have a problem with ReactDataGrid component. I have already installed react-data-grid. The code is the same as in the reac grid's web:

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;

and i get: Result

Thank you!

Your code is same as docs and It doesn’t need to import style manually, so you can check that css loads in network tab of browser or you can re-install package. — Hamid Shoja, Feb 13 '20 at 17:53

score 4 · Answer 1 · answered Feb 27 '20 at 12:25

4

Import the CSS like so :

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

It should be fine.

answered Feb 27 '20 at 12:25

Lex Soft

2,308
2
13
13

score 0 · Answer 2 · answered Feb 13 '20 at 18:10

0

    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

the answer is in the above code this above code is working

answered Feb 13 '20 at 18:10

Learners Tube

5
2

it seems that the problem is my project. I run the same code in codesandbox and it works fine, but in my project it does not :( – Agustin Baldini Feb 13 '20 at 18:37
try to make use the inspect element and find where is the problem – Learners Tube Feb 14 '20 at 19:09
or try to debug the thing using divide and conquer strategy – Learners Tube Feb 14 '20 at 19:09
hello! i downgrade the react-data-grid version and now it works fine! Thank you! – Agustin Baldini Feb 15 '20 at 14:21

score 0 · Answer 3 · answered Feb 19 '20 at 07:42

0

You don't really need to downgrade. The issue is that the css is not being imported. If you can import css from node-modules, it'll work. Workaround for me was I took the whole css and we are now self-maintaining the css, making changes when needed.

answered Feb 19 '20 at 07:42

Egert Aia

459
2
12

score 0 · Answer 4 · answered Nov 19 '20 at 09:40

0

I couldn't load the css either, I got around this by including

import ReactDataGrid from 'react-data-grid/dist/react-data-grid.min.js';

instead of

import ReactDataGrid from 'react-data-grid';

answered Nov 19 '20 at 09:40

HiLuLiT

433
4
7

React Data Grid shows bad

4 Answers4