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}

        />
    );
  }
}

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}

        />
    );
  }
}

• javascript
• reactjs
• react-data-grid

Share Improve this question Follow asked Feb 21, 2020 at 20:06 Anand SubramanianAnand Subramanian 5344 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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

This worked for me.

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.

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 ponent 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.