React-Table, каждая ячейка переходит на новую строку, почему?

Я реализую ReactTable, первый пример из его документации, но каждая ячейка из таблицы переходит на новую строку:

ReactTable

Это мой компонент таблицы реакций:

import React, {PureComponent} from 'react';
import ReactTable from 'react-table';

export default class ExampleTable extends PureComponent {
    render() {
        const data = [{
            name: 'Tanner Linsley',
            age: 26,
            friend: {
                name: 'Jason Maurer',
                age: 23,
            }
        },{
            name: 'Bla bla',
            age: 29,
            friend: {
                name: 'RAra Ra',
                age: 98,
            }
        }]

        const columns = [{
            Header: 'Name',
            accessor: 'name' // String-based value accessors!
        }, {
            Header: 'Age',
            accessor: 'age',
            Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
        }, {
            id: 'friendName', // Required because our accessor is not a string
            Header: 'Friend Name',
            accessor: d => d.friend.name // Custom value accessors!
        }, {
            Header: props => <span>Friend Age</span>, // Custom header components!
            accessor: 'friend.age'
        }]

        return <ReactTable
            data={data}
            columns={columns}
        />
    }
}

И вот как я импортирую компонент:

import ExampleTable from './tables/example';
class TableView extends Component {

    getExample() {
        return (
            <ExampleTable/>
        )
    }


    render() {
        return (
            <div>
                {this.getExample()}
            </div>
        );
    }
}

Любая идея, почему каждая ячейка переходит на новую строку? Наверное, это какая-то глупость, я только начинаю с React.

Заранее спасибо.


person brb    schedule 09.05.2019    source источник


Ответы (1)


Нашел!

Это была какая-то глупость, я не импортировал CSS ReactTable:

import "react-table/react-table.css";
person brb    schedule 09.05.2019