CODEWITHSUNDEEP
reactjsgridreact-data-grid
Agustin Baldini
Agustin Baldini

Reputation: 21

React Data Grid shows bad

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!

Upvotes: 2

Views: 2495

Answers (4)

HiLuLiT
HiLuLiT

Reputation: 553

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';

Upvotes: 0

Lex Soft
Lex Soft

Reputation: 2488

Import the CSS like so :

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

It should be fine.

Upvotes: 4

Egert Aia
Egert Aia

Reputation: 469

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.

Upvotes: 0

Learners Tube
Learners Tube

Reputation: 5

    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

Upvotes: 0

Related Questions