React-data-grid: Styles/themes not applied

[mrn3]

I am using webpack, and when I set it up with the example, it is just white (no styling). How do I use styles out of the box?

Do I need to include a css file or something?

import React from 'react'
import ReactDataGrid from 'react-data-grid/addons'

var _rows = [];

for (var i = 1; i < 1000; i++) {
  _rows.push({
    id: i,
    task: 'Task ' + i,
    complete: Math.min(100, Math.round(Math.random() * 110)),
    priority : ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)],
    issueType : ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)],
    startDate: Date(2015, 3, 1),
    completeDate: Date(2015, 3, 1)
  });
}

//function to retrieve a row for a given index
var rowGetter = function(i){
  return _rows[i];
};

//Columns definition
var columns = [
  {
    key: 'id',
    name: 'ID',
    resizable : true
  },
  {
    key: 'task',
    name: 'Title',
    resizable : true
  },
  {
    key: 'priority',
    name: 'Priority',
    resizable : true
  },
  {
    key: 'issueType',
    name: 'Issue Type',
    resizable : true
  },
  {
    key: 'complete',
    name: '% Complete',
    resizable : true
  },
  {
    key: 'startDate',
    name: 'Start Date',
    resizable : true
  },
  {
    key: 'completeDate',
    name: 'Expected Complete',
    resizable : true
  }
]

class ImportCsvStudentHome extends React.Component {

  displayName: 'ImportCsvStudentHome'

  render() {
    return (
      <div>
        <ReactDataGrid
          columns={columns}
          rowGetter={rowGetter}
          rowsCount={_rows.length}
          minHeight={500} />
      </div>
    )
  }
}

export default ImportCsvStudentHome

[malonecj]

Yes, there is a themes/react-data-grid.less and a themes/react-data-grid.css file. You should use either one of these. I will add this to the documentation

[nicomfe]

any news on this?

[SupernaviX]

This themes folder doesn't include styles for the react-contextmenu extension, either. Either some default styling should be included, or it should document that the user needs to write their own.

[Darkvater]

Importing the less file doesn't work. Error message is:

"ERROR in ./~/css-loader!./~/less-loader!./src/main/webapp/less/main.less
Cannot resolve file select.less near lines:
@import './node_modules/react-select/less/select.less'!

The import should be ../ node... instead

[kzde]

In the react-data-grid.css file, is there any way to avoid importing less file? I don't want to add less-loader if my projet doesn't need it..

[diogofcunha]

All the styles come for free with react-data-grid after version 2.0.0. It just need to override the classnames you want to.

Cheers.