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

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 !

Solution 1

Sadly react-table v7 doesn't support react-table.css file.

1. 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

2. We can easily create custom css for react-table and there is a lot of examples online.

Solution 2

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" 

Solution 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>

   </>
    )
  }
}

Solution 4

import ReactTable from "react-table-6";  

This one should be "react-table-v6"

import "react-table-v6/react-table.css" 

View more solutions