React-Table, each cell goes to a new line, why? - reactjs

Question

I'm implementing ReactTable, the first example from its documentation, but each cell from the table goes to a new line:
ReactTable
This is my react table component:
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}
/>
}
}
And this is how I import the component:
import ExampleTable from './tables/example';
class TableView extends Component {
getExample() {
return (
<ExampleTable/>
)
}
render() {
return (
<div>
{this.getExample()}
</div>
);
}
}
Any idea why each cell is going to a new line?
Probably is something stupid I'm just starting with React.
Thanks in advance.

Answer 1

Found it!
It was something stupid, I wasn't importing the ReactTable css:
import "react-table/react-table.css";