Solvedreact data grid Grid borders are not visible


Officially Supported:
[ ] v0.14.x
Community Supported:
[x] v15.0.x


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

Current behavior
Grid borders are not showing:
screenshot at jan 27 18-52-00

Expected/desired behavior
Grid borders should look like this:
screenshot at jan 27 18-59-21

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) {

    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%" }}>
13 Answers

✔️Accepted Answer

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 😞, 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;

Other Answers:

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-Cell {
    box-sizing: border-box;

Related Issues:

react data grid Chrome v70 breaks horizontal scrolling (reproducible in adazzle demo grids)
Hey guys the thing is that Row style uses an experimental css inline property contain: layout by rem...
react data grid Grid borders are not visible
Adding bootstrap.min.css from react-data-grid-examples fixes this bug temporarily ...
react data grid TypeError: Cannot read property 'length' of undefined DataGrid src/DataGrid.tsx:247
try Yes it works thank you Not even a mention of rows prop in documentation that seems outdated btw ...
gatsby Error: ENOSPC: System limit for number of file watchers reached, watch '/home/foldername/abcrypto/static'
It’s hitting your system's file watchers limit Try echo fs.inotify.max_user_watches=524288 | sudo te...
react RFClarification: why is setState asynchronous?
So here’s a few thoughts This is not a complete response by any means but maybe this is still more h...
react Preventing rerenders with React.memo and useContext hook.
This is working as designed There is a longer discussion about this in #14110 if you're curious ...
styled components [v4.0.0] Types: Could not find a declaration file for module 'styled-components/native'.
styled-components/native types moved to @types/styled-components-react-native. there are no types fo...
expo Error: fsevents unavailable (this watcher can only be used on Darwin)
Possible solution: I had installed watchman via npm install -g watchman but apparently this installs...
create react app Error: EPERM: operation not permitted, mkdir 'C:\Users\Vaidehi' TypeError: Cannot read property 'get' of undefined
Try installing it globally first using the command npm install -g create-react-app And then you can ...
react React Fire: Modernizing React DOM
I love every of these points except the className change For latest status see an update from June 5...
react starter kit How to call child component method from parent?
For example you can use Refs to Components approach like so: Demo:
react How should we set up apps for HMR now that Fast Refresh replaces react-hot-loader?
Okay here goes What Is Fast Refresh? It's a reimplementation of hot reloading with full support from...
ant motion 模版代码下载下来导入到dva搭建的项目里面,启动时报错(npm start)
开启 JavaScript 就可以了 你好,我下载的Home项目引入到项目工程里面,为了方便,我全部放到了components下面,引入和基本流程没有问题。在家里的win10上面启动没有报错,在win...
react navigation screenIsActive prop / componentDidFocus event for TabNavigator items
It probably makes sense to add lifecycle hooks to screens In one of my Tabs i need to load Data from...
next.js Module not found: Can't resolve 'fs'
Update for modern Next.js (9.4+) You can safely use fs within getStaticProps or getServerSideProps n...
react pdf Failed to load PDF file
@saadpasta @MichaelBlanchet I reckon you are using create-react-app as a boilerplate ? Add/change th...
react swipeable views lazy loading is useless right now
Normally React wants to keep the UI consistent with what you told it to render Lazy loading should m...
ant design How to set 100% of height layout
This works for me: <Layout style={{height:100vh}}> I am a newbie I base on Meteor JS How to set 100%...
ant design Each record in table should have a unique key prop,or set rowKey to an unique primary key.
@ahmetkuslular The error message is pretty explicit your data set must contain items with a key prop...
react Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
You're exporting a React element not a component Change to Alternatively at the call site change <Co...
react Trigger simulated input value change for React 16 (after react-dom 15.6.0 updated)?
After some research of react source code I got a hack method for react 16: NOTICE: JUST A HACK ...
material ui Module not found: Can't resolve 'material-ui-icons/Menu' Martial Next
For anyone else experiencing this issue: npm install @material-ui/icons
gatsby Testing Site with Gatsby Develop from Local LAN
You can also use gatsby develop -H Summary I've searched as best I could ...
react navigation Send data back from child screen?
@itswaze You can do something along these lines to pass back from the child screen ...
react navigation How to goBack from nested StackNavigator?
@dhruvparmar372 According to the NOTE in the doc a navigator's navigation prop may not have the help...
react joyride The engine "node" is incompatible with this module. Expected version ">=6.0.0".
If you use yarn try yarn --ignore-engines after yarnpkg/yarn@b880d40 lands in (probably) 15.2. ...
amplify js Uncaught ReferenceError: global is not defined in latest Angular 6 RC
Just for reference I have passed through this issue with adding these lines on my index.html head: ...
react navigation Best pattern for a 'Save' button in the header
Try setting your component instance's handleSave function as a navigation state parameter after the ...
lottie react native Could not find
you are right there is also something else your other build.gradle file add maven url 'https://maven...
react slingshot How to add favicon to /dist?
I only needed this: In webpack.config.*.js files Seems trivial but is difficult How to add a favicon...
enzyme Where do I put setupTests file
Hey @iiison jest will handle requiring the file for each test if you tell it where this file lives ...
expo exp build:android fails
This works exp start Cancel ctrl c then do exp build:android. Running exp build:android errors fails...
gatsby Unknown type "ContentfulFixed". Did you mean "ContentfulBlogPost", "ContentfulContentType", or "ContentfulBlogPostEdge"?
For those having the same error ERROR #85901 GRAPHQL I'm trying to fetch my blogs from contentful an...
react TypeError: func.apply is not a function / Uncaught TypeError: destroy is not a function
TypeError: destroy is not a function This is the real error and indicates that you're returning a va...
create react app npx create-react-app is not working
I solved this using the following command npm uninstall -g create-react-app then npm install -g crea...
enzyme Assertion based on attribute or get attribute from element.
Ohhh @ljharb it works thanks I don't require a filter it works with prop because I only have one ima...
formik Recommended way to set initialValues from async api call
@dem0nbruce Just have a default value for user so you will always have an object as initialValues. ...
enzyme How to change a checkbox value using simulate api?
@bboysathish calling .simulate('change') doesn't change the value though - have you tried .simulate(...
react hook form How to submit the form outside the form
For those who come across this issue like I did and found it didn't quite address the question ...
react Hooks don't work with yarn link
Workaround: I find it easier than some webpack setup or using yet another package manager (yapm? yan...
react navigation Reset to nested route, "There is no route defined for..."
A quick workaround (not heavily tested): set the key property to null on your action. ...
sheetjs How to simply export a Worksheet to xlsx?
There are two issues: each object is mapped to a row so if you want a row with name John and city Se...
arc Fixing the linebreak-style eslint error for Windows
You can also run npm run lint -- --fix to get rid of current CRLF You might also be interested on a ...
enzyme Node v10.0.0 error Found incompatible module, upath@1.0.4: The engine "node" is incompatible with this module. Expected version ">=4 <=9"
@kahboom @jhbsk Here is a trick I learned recently: Find in yarn.lock and remove it manually Just th...
emotion TS2322: Property 'css' does not exist...
For Emotion 11 use the following configuration in your tsconfig.json until TypeScript 4.1 comes out:...
react Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>
Just do what the warning suggests: Browsers need the <tbody> tag If it is not in your code then the ...
react Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
My library and the create-react-app are relative to each other and I am using npm link Did you read ...
react Devtools V4: Where is Highlight Updates?
Highlight Updates was very useful not that much for fixing performance problems (the new Profiler is...
create react app Document how to add React Bootstrap
Here's how I got React Bootstrap working at (Create React...