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

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" 

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.

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>   </>    )  }}