My first sample table using react-data-grid, columns are not rendered next to each other, instead they are overlapping over and over each other

Question

This is my first sample table using react-data-grid, columns are not rendered next to each other, instead they are overlapping over and over each other

Below is the very basic sample code I am trying. The code renders the table with data but renders the columns and data on top of each other like this:

Output:

ID Title 1 Task 2 Task

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}

        />
    );
  }
}

score 4 · Accepted Answer · edited Feb 24 '20 at 11:57

4

This is because the css is not working. Here is the quick solution which worked for me:

Go to path in explorer <project-name>\node_modules\react-data-grid\dist and open the react-data-grid.css file.
Copy complete css code and paste it inside your <project-name>\src\App.css file.
Refresh URL. (optional)

This worked for me.

edited Feb 24 '20 at 11:57

xiawi

1,772
4
19
21

answered Feb 24 '20 at 10:00

front-end-developer

66
2

score 2 · Answer 2 · answered Feb 28 '20 at 05:39

You need to import the CSS of react-data-grid. Usually it is located in the folder : node_modules\react-data-grid\dist. Find the actual location of this CSS file after you installed the package. If the CSS file is located in the folder I mention, just import it into your js file :

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

It should work.

score 0 · Answer 3 · answered Feb 26 '20 at 23:36

Sam issue here, all my text was appearing on top of each other, even though I could highlight empty grid and navigate through them with the arrow keys.

My solution was similar to Akanksha's but I just copied the entire

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

file to the same level as my App.css and linked to it directly in the component that is using react-data-grid.

import 'react-data-grid.css';

Hoping that would keep loading size down until its needed and prevent it from causing any odd errors by affecting other classes when I didn't expect it.

Copying the CSS file from the node_modules folder has drawback. If the package changes, we have to copy the CSS again to our destination folder. So, the better way is just use the correct import syntax like I show in my answer. — Lex Soft, Feb 28 '20 at 05:50

My first sample table using react-data-grid, columns are not rendered next to each other, instead they are overlapping over and over each other

3 Answers3