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}

        />
    );
  }
}

Answer 1

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 complete css code and paste it inside your <project-name>\src\App.css file.
3. Refresh URL. (optional)

This worked for me.