Help using DataTables package

help
1

Can anyone spot an obvious error with this code:

import React from 'react';
import DataTable from 'react-data-components';

export default class ListTable extends React.Component {

    constructor(props) {
        super(props);
    }

    render(){
        var columns = [
            { title: 'Name', prop: 'name'  },
            { title: 'City', prop: 'city' },
            { title: 'Address', prop: 'address' },
            { title: 'Phone', prop: 'phone' }
        ];

        var data = [
            { name: 'name value', city: 'city value', address: 'address value', phone: 'phone value' }
        ];

        return(<DataTable className="table-format-1" keys={[ 'name', 'address' ]} columns={columns} initialData={data} initialPageLength={5} pageLengthOptions={[ 5, 20, 50 ]} />);
    }
};

I am getting the following error:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of ListTable.

2

The code sample in their docs says:

var DataTable = require('react-data-components').DataTable;

So you probably want:

import { DataTable } from 'react-data-components';

(Or, you can use the require syntax as well!)

1 Like
3

Well, that was embrassing - the curly brackets did it!

4

Yeah, for further clarification,

// These are the same
import X from 'y';
const X = require('y');

// These are the same
import { A } from 'b';
const { A } = require('b');
const A = require('b').A;
1 Like
5

Is this in the guide?

6

Hmm, the closest place is here: http://guide.meteor.com/structure.html#es2015-modules

That links to the docs here: https://docs.meteor.com/#/full/modules

We should probably make the link to the docs a lot more prominent.

1 Like
7

That would be very helpful. It would be ideal to have the docs in the same legible format as the guide and to have, for example, collapsible areas within the guide that provides links to examples and to the relevant documentation.

1 Like