React fixed-data-table: Uncaught ReferenceError: Table is not defined

Question

I'm using React together with a bootstrap template for front-end purposes. I intent to use fixed-data-table in a panel. Calling the function in a tag results in the below error in the browser:

Uncaught ReferenceError: Table is not defined
    at t.render (eval at n.run (babel.5.8.38.browser.min.js:3), <anonymous>:1059:13)
    at p._renderValidatedComponentWithoutOwnerOrContext (react.min.js:13)
    at p._renderValidatedComponent (react.min.js:13)
    at performInitialMount (react.min.js:13)
    at p.mountComponent (react.min.js:13)
    at Object.mountComponent (react.min.js:15)
    at h.mountChildren (react.min.js:14)
    at h._createInitialChildren (react.min.js:13)
    at h.mountComponent (react.min.js:13)
    at Object.mountComponent (react.min.js:15)

The fixed-data-table.js is in my index.html as

<script src="script/lib/fixed-data-table.min.js"></script>

while I have also added the .css files for it as well.

Here's the react class for the table creation:

var TestTable = React.createClass({
    getInitialState: function () {
        return {data :  {
            rows: [
                {
                    "street": "Road",
                    "number": "33",
                    "postalCode": "5000",
                    "city": "Town 3",
                    "country": "Country1"
                },
                {
                    "street": "Road",
                    "number": "333",
                    "postalcode": "5000",
                    "city": "Town 1",
                    "country": "Country 2"
                },
                {
                    "street": "Road",
                    "number": "31",
                    "postalCode": "5500",
                    "city": "Town 2",
                    "country": "Country 3"
                }]
        }};
    },


    render() {

        return <Table
            height={40 + ((this.state.data.rows.length + 1) * 30)}
            width={1150}
            rowsCount={this.state.data.rows.length}
            rowHeight={30}
            headerHeight={30}
            rowGetter={function (rowIndex) {
                return this.state.data.rows[rowIndex];
            }.bind(this)}>
            <Column dataKey="street" width={100} label="Address"/>
            <Column dataKey="number" width={100} label="Number"/>
            <Column dataKey="postalcode" width={100} label="Postal Code"/>
            <Column dataKey="city" width={400} label="City"/>
            <Column dataKey="country" width={50} label="Country"/>
        </Table>;

    },
});

I am calling it in a element as <TestTable /> which then produces the above error when called.

It seems like it doesn't take in the fixed-data-table.min.js even though it's defined and loaded in the index.html as other components?

Edit: I attempted to import directly before the function... The result is now: import {Table, Column, Cell} from "./script/lib/fixed-data-table.min.js";

Uncaught ReferenceError: require is not defined
    at eval (eval at n.run (babel.5.8.38.browser.min.js:3), <anonymous>:4:37)
    at Function.n.run (babel.5.8.38.browser.min.js:3)
    at l (babel.5.8.38.browser.min.js:3)
    at babel.5.8.38.browser.min.js:3
    at XMLHttpRequest.s.onreadystatechange (babel.5.8.38.browser.min.js:3)

score 2 · Accepted Answer · answered Dec 22 '16 at 14:06

2

You can try to install it via an npm package and then use it in your component.

To install run the command

npm install -S fixed-data-table

And import it like

import {Table, Column, Cell} from 'fixed-data-table';

That should work for you

Also as the docs suggest, you should add the default stylesheet dist/fixed-data-table.css

answered Dec 22 '16 at 14:06

Shubham Khatri

270,417
55
406
400

This is assuming I bundle it through webpack or similar tools, right? – cbll Dec 22 '16 at 14:08
Correct, I think that is method is better than importing the babel and react scripts – Shubham Khatri Dec 22 '16 at 14:09
I'm not that familiar with webpack, though. It seems like a complete mess to utilize properly. I don't understand why you make a bundle out of just one file --- doesn't appear that you can input, say, a whole bunch of third party libraries and then use it as a bundle to call functions from. But perhaps I am wrong. – cbll Dec 22 '16 at 14:19
1

Well webpack is not a mess and its not difficult to use, considering the fact that it provides you ease in minification for your code, as well as it supports hot-loading for development. Here are a few good link to set up webpack https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html, https://www.codementor.io/tamizhvendan/tutorials/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr – Shubham Khatri Dec 22 '16 at 14:22

React fixed-data-table: Uncaught ReferenceError: Table is not defined

1 Answers1