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)
You can try to
install it via an npm package
and then use it in your component.To install run the command
And import it like
That should work for you
Also as the docs suggest, you should add the default stylesheet
dist/fixed-data-table.css