question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

className='-striped -highlight' not working with a fresh create-react-app APP.

See original GitHub issue

What version of React-Table are you using?

Your bug may already be fixed in the latest release. Run yarn upgrade react-table! Place your version here…

6.7.5

What bug are you experiencing, or what feature are you proposing?

Please include a detailed explanation here…

With create-react-app and default CSS, react-table v6.7.5 cannot see the effect of ‘-striped’ or ‘-highlight’

Use https://codesandbox.io/s/X6npLXPRW (by clicking the “Fork” button) to reproduce the issue.

Then paste a link to your newly forked codesandbox here…

What are the steps to reproduce the issue?

  1. npm install -g create-react-app
  2. Add ‘react-table@6.7.5’ to package.json.
  3. replace src/App.js with following code
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactTable from 'react-table';
import 'react-table/react-table.css';

class App extends Component {
  constructor() {
    super();
  }
  render() {
    const data = [
            {
                "location":"01-01",
                "amount":150
            },
            {
                "location":"01-02",
                "amount":3000
            },
            {
                "location":"01-03",
                "amount":1201
            }
    ];

    const columns = [
      {
        Header: "Location",
        accessor: "location"
      },
      {
        Header: "Amount",
        accessor: "amount",
        Cell: props => <span className='number'>{props.value}</span>
      }
    ];

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <ReactTable
          data={data}
          columns={columns}
          classsName='-striped -highlight'
        />
      </div>
    );
  }
}

export default App;

  1. npm start.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
rlking1985commented, Jan 25, 2019

I know this closed but wanted to point out that the original bug was just an issue with the code.

The original code had an incorrect name for className (three s’)

        <ReactTable
          data={data}
          columns={columns}
          classsName='-striped -highlight' // className not classsName
        />
1reaction
gary-menzelcommented, Dec 14, 2017

I am looking at the focus issue - and trying to find where that may have slipped in (previously, none of the ReactTable divs could accept focus)

Read more comments on GitHub >

github_iconTop Results From Across the Web

striped -highlight' not working with a fresh create-react-app ...
className ='-striped -highlight' not working with a fresh ... With create-react-app and default CSS, react-table v6.7.5 cannot see the effect ...
Read more >
Create-React-App: CSS custom classNames not loading ...
I'm using create-react-app to build a personal website and I'm having some issues with how CSS is being read in the deployed version...
Read more >
How To Create React Elements with JSX - DigitalOcean
In a new terminal tab or window, start the project using the Create React App start script. The browser will autorefresh on changes,...
Read more >
Row Styles - React Data Grid
The grid cannot depend on using CSS :hover selector as this will not highlight the entire row if Columns are pinned. Column Highlighting...
Read more >
Migrating React table from v6 to v7 | by Sagar Shrestha
In the above code for rendering, I am using the exact structure(including class names and markups) that react-table-6 is using. This will make...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found