Solvedreact data grid Grid borders are not visible

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:
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) {
    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>
    );
  }
}
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-HeaderCell,
.react-grid-Cell {
    box-sizing: border-box;
}

Related Issues:

12
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...
10
react data grid Grid borders are not visible
Adding bootstrap.min.css from react-data-grid-examples fixes this bug temporarily ...
8
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 ...
3557
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...
1975
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...
1745
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 ...
782
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...
746
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...
730
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 ...
611
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...
595
react starter kit How to call child component method from parent?
For example you can use Refs to Components approach like so: Demo: https://jsfiddle.net/frenzzy/z9c4...
561
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...
521
ant motion 模版代码下载下来导入到dva搭建的项目里面,启动时报错(npm start)
开启 JavaScript 就可以了 你好,我下载的Home项目引入到项目工程里面,为了方便,我全部放到了components下面,引入和基本流程没有问题。在家里的win10上面启动没有报错,在win...
517
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...
469
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...
469
react pdf Failed to load PDF file
@saadpasta @MichaelBlanchet I reckon you are using create-react-app as a boilerplate ? Add/change th...
442
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...
431
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%...
413
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...
413
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...
411
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 ...
397
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 https://www.npmjs.com/packag...
392
gatsby Testing Site with Gatsby Develop from Local LAN
You can also use gatsby develop -H 0.0.0.0 Summary I've searched as best I could ...
364
react navigation Send data back from child screen?
@itswaze You can do something along these lines to pass back from the child screen ...
358
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...
338
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. ...
328
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: ...
317
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 ...
316
lottie react native Could not find com.android.support:appcompat-v7:26.1.0.
you are right there is also something else your other build.gradle file add maven url 'https://maven...
309
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...
308
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 ...
306
expo exp build:android fails
This works exp start Cancel ctrl c then do exp build:android. Running exp build:android errors fails...
305
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...
301
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...
285
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...
265
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...
265
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. ...
264
enzyme How to change a checkbox value using simulate api?
@bboysathish calling .simulate('change') doesn't change the value though - have you tried .simulate(...
255
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 ...
248
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...
248
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. ...
246
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...
241
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 ...
240
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...
220
emotion TS2322: Property 'css' does not exist...
For Emotion 11 use the following configuration in your tsconfig.json until TypeScript 4.1 comes out:...
214
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 ...
210
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 ...
210
react Devtools V4: Where is Highlight Updates?
Highlight Updates was very useful not that much for fixing performance problems (the new Profiler is...
206
create react app Document how to add React Bootstrap
Here's how I got React Bootstrap working at https://github.com/manavsehgal/react-eshop (Create React...