React table rendering in the form of a row - reactjs

Question

Kind of a React noobie here so please don't judge.
The react table is rendering in the form of a row.
My Component:
import React, { Component } from 'react';
import ReactTable from 'react-table';
// import 'react-table/react-table.css';
class Variants extends Component {
constructor(props) {
super(props);
}
render() {
const columns = [
{
Header: 'Gene',
accessor: 'gene'
},
{
Header: 'Nucleotide Change',
accessor: 'nucleotide_change'
},
{
Header: 'Protein Change',
accessor: 'protein_change'
},
{
Header: 'Other Mappings',
accessor: 'other_mappings'
},
{
Header: 'Alias',
accessor: 'alias'
},
{
Header: 'Transcripts',
accessor: 'transcripts'
},
{
Header: 'Region',
accessor: 'region'
},
{
Header: 'Reported Classification',
accessor: 'reported_classification'
},
{
Header: 'Inferred Classification',
accessor: 'inferred_classification'
},
{
Header: 'Source',
accessor: 'source'
},
{
Header: 'Last Evaluated',
accessor: 'last_evaluated'
},
{
Header: 'Last Updated',
accessor: 'last_updated'
},
{
Header: 'More Information',
accessor: 'url',
Cell: e => (
<a target="_blank" href={e.value}>
{' '}
{e.value}{' '}
</a>
)
},
{
Header: 'Submitter Comment',
accessor: 'submitter_comment'
}
];
if (this.props.variants && this.props.variants.length > 0) {
return (
<div>
<h2>
{' '}
There are {this.props.variants.length} variants of this gene!
</h2>
<div>
<ReactTable
data={this.props.variants}
columns={columns}
defaultPageSize={3}
pageSizeOptions={[3, 5, 10, 50, 100]}
/>
</div>
</div>
);
} else {
return [];
}
}
}
export default Variants;
It is rendering the whole table as a row for some weird reason. I have attached the image to show what is happening. Also, the pagination buttons are not nice. Can they be modified?
Has anyone come across a similar problem?

Answer 1

I got it working below. I simplified the data since you didn't provide an example data set but this should help you.
The only thing I can think you have wrong is either you need to uncomment import 'react-table/react-table.css'; or maybe you are passing in your props wrong in <Variants variants={variants}/>
Variants.js
import React, { Component } from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
class Variants extends Component {
render() {
const columns = [
{
Header: 'Gene',
accessor: 'gene'
},
{
Header: 'Nucleotide Change',
accessor: 'nucleotide_change'
},
{
Header: 'Protein Change',
accessor: 'protein_change'
}
];
if (this.props.variants && this.props.variants.length > 0) {
return (
<div>
<h2>
{' '}
There are {this.props.variants.length} variants of this gene!
</h2>
<div>
<ReactTable
data={this.props.variants}
columns={columns}
defaultPageSize={3}
pageSizeOptions={[3, 5, 10, 50, 100]}
/>
</div>
</div>
);
} else {
return [];
}
}
}
export default Variants;
App.js
import React from 'react';
import './App.css';
import Variants from "./Variants";
const variants = [
{
gene:'a',
nucleotide_change:'a',
protein_change:'a'
},
{
gene:'b',
nucleotide_change:'b',
protein_change:'b'
}
];
function App() {
return (
<div className="App">
<Variants variants={variants}/>
</div>
);
}
export default App;