React-data-grid: Grid borders are not visible

[tedjames]

WHICH VERSION OF REACT ARE YOU USING?

Officially Supported:
[ ] v0.14.x

Community Supported:
[x] v15.0.x

WHICH BROWSER ARE YOU USING?

Officially Supported:
[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[x] Chrome

Should work:
[ ] Firefox
[ ] Safari

---

I'm submitting a ...

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

Current behavior
Grid borders are not showing:

Expected/desired behavior
Grid borders should look like this:

Reproduction of the problem
Here is the code that's rendering the associated component:

import React, { Component } from 'react'
import ReactDataGrid from 'react-data-grid'

export default class OrdersSheetView extends Component {
  constructor(props) {
    super(props);

    this._columns = [
      {
        key: 'poNumber',
        name: 'PO Number',
        width: 120,
        sortable: true,
        editable: true,
        resizable: true,
      },
      {
        key: 'dueDate',
        name: 'Due Date',
        width: 120,
        sortable: true,
        editable: true,
        resizable: true,
      },
      {
        key: 'status',
        name: 'Order Status',
        width: 300,
        sortable: true,
        editable: true,
        resizable: true,
      },
      {
        key: 'packagingStatus',
        name: 'Packaging Status',
        sortable: true,
        editable: true,
        resizable: true,
      },
      {
        key: 'customerName',
        name: 'Customer Name',
        width: 300,
        sortable: true,
        editable: true,
        resizable: true,
      },
      {
        key: 'submittedOn',
        name: 'Submitted On',
        width: 200,
        sortable: true,
        editable: true,
        resizable: true,
      }
    ];

    let originalRows = [
      {
        "poNumber": 412516,
        "dueDate": "11/07/2016",
        "pkgDueDate": "11/07/2016",
        "status": "New",
        "packagingStatus": "New",
        "customerName": "Ross Stores",
        "submittedOn": "11/07/2016",
      },
      {
        "poNumber": 413673,
        "dueDate": "11/07/2016",
        "pkgDueDate": "11/07/2016",
        "status": "Pending Revision",
        "packagingStatus": "New",
        "customerName": "Ross Stores",
        "submittedOn": "11/07/2016",
      },
      {
        "poNumber": 461422,
        "dueDate": "11/07/2016",
        "pkgDueDate": "11/07/2016",
        "status": "New",
        "packagingStatus": "New",
        "customerName": "Ross Stores",
        "submittedOn": "11/07/2016",
      },
      {
        "poNumber": 461612,
        "dueDate": "12/17/2016",
        "pkgDueDate": "12/10/2016",
        "status": "New",
        "packagingStatus": "New",
        "customerName": "Big Lots",
        "submittedOn": "12/02/2016",
      },
      {
        "poNumber": 420457,
        "dueDate": "11/27/2016",
        "pkgDueDate": "11/13/2016",
        "status": "New",
        "packagingStatus": "New",
        "customerName": "Burlington",
        "submittedOn": "11/02/2016",
      }
    ];

    let rows = [ ...originalRows ]
    this.state = ({ originalRows, rows });
  }

  handleGridSort(sortColumn, sortDirection) {
    const comparer = (a, b) => {
      if (sortDirection === 'ASC') {
        return (a[sortColumn] > b[sortColumn]) ? 1 : -1;
      } else if (sortDirection === 'DESC') {
        return (a[sortColumn] < b[sortColumn]) ? 1 : -1;
      }
    };

    const rows = sortDirection === 'NONE' ? this.state.originalRows.slice(0) : this.state.rows.sort(comparer);

    this.setState({ rows });
  }

  handleRowUpdate({ rowIdx, updated }) {
    let rows = this.state.rows;
    Object.assign(rows[rowIdx], updated);
    this.setState({ rows: rows });
  }


  rowGetter(i) {
    return this.state.rows[i];
  }

  render() {
    return (
      <div style={{ width: "100%" }}>
        <ReactDataGrid
          enableCellSelect={true}
          onGridSort={this.handleGridSort.bind(this)}
          columns={this._columns}
          rowGetter={this.rowGetter.bind(this)}
          rowsCount={this.state.rows.length}
          onRowUpdated={this.handleRowUpdate.bind(this)}
        />
      </div>
    );
  }
}

[brian-gates]

This occurs in the jsfiddle example as well.

https://jsfiddle.net/k7tfnw1n/2/

[alxlu]

I'm seeing this issue too. Also, it seems to be sized improperly so it is adding horizontal and vertical scrollbars for the grid and vertical scrollbars in the headers.

[vilozio]

Adding bootstrap.min.css from react-data-grid-examples fixes this bug temporarily.
I also found the dependence on bootstrap css in GroupedColumnButton in react-data-grid-addons package :disappointed:, it is really needed to somehow fix this link to examples from stand-alone packages.

UPDATED: this code solved my problem

*,:before,:after {
  box-sizing: border-box;
}

[armved]

I have the same problem

[mettjus]

I had the same issue, when not including bootstrap. It was also impossible to perform column resizing, being the handle hidden by the next header cell.
While being effective, I realise @vilozio solution could be a little too invasive (styling *, :before, :after could produce unexpected behaviour).
I found the following to be enough in my case:

.react-grid-HeaderCell,
.react-grid-Cell {
    box-sizing: border-box;
}

[hyeminHwang]

@mettjus Thanks! It works perfectly!!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[steamhammer]

I had the same issue, when not including bootstrap. It was also impossible to perform column resizing, being the handle hidden by the next header cell.
While being effective, I realise @vilozio solution could be a little too invasive (styling *, :before, :after could produce unexpected behaviour).
I found the following to be enough in my case:

.react-grid-HeaderCell,
.react-grid-Cell {
    box-sizing: border-box;
}

I would also suggest adding

.rdg-selected {
  box-sizing: border-box;
}

to fix selected cell mask border (that light-blue outline).

[bashbash96]

where to add
.react-grid-HeaderCell,
.react-grid-Cell {
box - sizing: border-box;
}

[steamhammer]

where to add
.react-grid-HeaderCell,
.react-grid-Cell {
box - sizing: border-box;
}

in your CSS

[Jyothijyo]

.rdg-selected {
box-sizing: border-box;
}

I Spent sometime finding the reason why resizing wasn't working. Its a good idea to put it in docs., for non-bootstarp users.

[steamhammer]

.rdg-selected {
box-sizing: border-box;
}

I Spent sometime finding the reason why resizing wasn't working. Its a good idea to put it in docs., for non-bootstarp users.

Well, it seems that ths project is a bit neglected by maintainers. So keep in mind that if you chose it for production you would need to find answers by yourself in the codebase. Documentation is partially outdated, partially incomplete. So I'd suggest you to consider alternatives if you are going to build something custom. Although, for simple cases this package works great.