Issue with react-table in rendering and css import

Question

I have component which I am rendering in parent component. But its not working and giving me an error

react.createelement type is invalid expected a string but got undefined

I have a data in state object which is a array of objects.

import React, { Component } from "react";
import ReactTable from "react-table";
//import "react-table/react-table.css";


class CustomerTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: this.props.Data,
    };
  }

  render() {
    console.log("this.state.tableData", this.state.tableData);
    const columns = [
      {
        Header: "Customer ID",
        accessor: "CUSTOMER_ID",
      },
      {
        Header: "Customer Name",
        accessor: "NAME",
      },
      {
        Header: "Customer Type",
        accessor: "TYPE",
      },
    ];
    return (
      <div>
        <ReactTable columns={columns} data={this.state.tableData}>
        </ReactTable>
      </div>
    );
  }
}

export default CustomerTable;

Another issue is that if I uncomment css import line I am getting an error

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

I checked in package.json and its verion is "react-table": "^7.0.4". But I cant see react-table.css file in node_module. What am I missing here.

kiranvj · Accepted Answer · 2020-04-27 14:18:10Z

3

React table 7x is entirely different from the previous version. Your code looks like react table version 6.

You need to install react-table-6

npm i react-table-6

or

yarn add react-table-6

After installing you need to import react table like this

import ReactTable from 'react-table-6';
import 'react-table-6/react-table.css';

After that your code should work. Try it.

Regarding your first issue, state might not have the data in the initial render.

try replacing

<ReactTable columns={columns} data={this.state.tableData}>

with

<ReactTable columns={columns} data={this.state.tableData || []}>

edited Apr 27, 2020 at 14:18

answered Apr 23, 2020 at 16:37

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nilesh Over a year ago

I also want to add one extra column which will have button for every row. How can I do that. Any help please.

kiranvj Over a year ago

@Nilesh Its possible using custom cell render - Check this codesandbox.io/s/github/tannerlinsley/react-table/tree/v6/… and other examples here github.com/tannerlinsley/react-table/tree/…

user3217883 Over a year ago

I had the same problem and tried this solution. Now I'm getting the following error: "Module not found: Can't resolve 'react-table-v6'" I took out the "v" in both references and now it is working.

kiranvj Over a year ago

@user3217883 Thanks for pointing out, v is not required. Answer updated.

Collectives™ on Stack Overflow

Issue with react-table in rendering and css import

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related