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

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

0 голосов
/ 09 мая 2019

Я реализую 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.

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

1 Ответ

1 голос
/ 09 мая 2019

Нашел!

Это было что-то глупое, я не импортировал ReactTable css: 

import "react-table/react-table.css";
...