Module not found: Can't resolve 'react-table/react-table.css' - reactjs

Question

I have create the app using create-react-app. Then I installed the react-table package(using command npm install --save react-table). When I started my application I am getting Module not found: Can't resolve 'react-table/react-table.css' this error.
Any suggestion how to resolve this. Thanks in advance !

Answer 1

You should install react-table version-6.
$ npm install react-table-6
and then import these,
import ReactTable from "react-table-6";
import "react-table-6/react-table.css"

Answer 2

Sadly react-table v7 doesn't support react-table.css file.
If you want to reuse react-table.css, I recommend using v6.
Here goes my example:
https://codesandbox.io/s/react-table-custom-pagination-1onbd
We can easily create custom css for react-table and there is a lot of examples online.

Answer 3

The current version of react-table is 7.
React table 6th version supports the cs,
You should install react-table version-6.
$ npm install react-table-6
next import it in file
import ReactTable from "react-table-6";
import "react-table-6/react-table.css"
**Sample Code**
import React, {useState, useEffect,Component } from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import $ from 'jquery';
import './Markettable.css';
import 'datatables.net';
import 'datatables.net-dt/css/jquery.dataTables.css';
import axios from 'axios';
import ReactTable from "react-table-6";
import "react-table-6/react-table.css" ;
export default class Markettable extends Component {
constructor(props){
super(props)
this.state = {
market: [],
loading:true
}
}
async getMarketPrice(){
const res = await axios.get(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&sparkline=false&price_change_percentage=1h%2C24h%2C7d`)
console.log(res.data)
this.setState({loading:false, market: res.data})
}
componentDidMount(){
this.getMarketPrice()
}
render() {
const columns = [{
Header: 'ID',
accessor: 'name',
sortable: true,
}
,{
Header: 'Name',
accessor: 'precentage' ,
},
{
Header: 'Website',
accessor: 'market_cap',
}
]
return (
<>
<div className= "container-fluid">
<div className="header">
<h2 className= "page-header text-center text-uppercase">
<b> Marketing Prices </b>
</h2>
<ul className="breadcrumb ">
<li><a href="#" style={{color: 'black'}}>Home</a></li>
<li className="active" style={{color: ' #660000'}}>Marketing Price</li>
</ul>
</div>
<div className ="row">
<div className = "col-12">
<div className="card">
<div className="card-action">
<div className="marketprice">
<div className="row">
<div className ="col-12">
<div className ="card">
<div className="card-body">
<h2> <b> <u> MARKETING PRICE TABLE </u> </b> </h2>
</div>
<br/>
<div className="card-body--">
<ReactTable className ="text-center"
data={this.state.market}
columns={columns}
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}
}

Answer 4

import ReactTable from "react-table-6";
This one should be "react-table-v6"
import "react-table-v6/react-table.css"