Table styles not working properly - react-virtualized

Question

I've been doing some research on this subject, and I've worked with both the Grid, List, and MultiGrid now with react-virtualized and have gotten those to work properly. I've been running into some issues with the table again though. I can't seem to get the table columns to render properly despite following all of the instructions and the docs, though I haven't been able to get it to work properly, any help would be much appreciated.
import React, { Component } from 'react';
import 'react-virtualized/styles.css';
import {Table, Column, AutoSizer} from 'react-virtualized';
const data = [
{rsid:'10001',gene:'BRCA1',chr_position:'1000000',allele:'C'},
{rsid:'10011',gene:'BRCA1',chr_position:'1000001',allele:'D'},
{rsid:'10021',gene:'BRCA1',chr_position:'1000002',allele:'C'},
{rsid:'10031',gene:'BRCA1',chr_position:'1000003',allele:'C'},
];
class ExpectoSnpTable extends Component{
constructor(props){
super(props);
}
render() {
return(
<div>
<Table
height={500}
rowGetter={({index}) => data[index]}
rowCount={data.length}
rowHeight={40}
width={500}
headerHeight={20}
>
<Column
dataKey='rsid'
width={100}
headerRenderer={({dataKey})=> 'rsid'}
/>
<Column
dataKey='gene'
width={100}
headerRenderer={({dataKey})=> 'gene'}
/>
<Column
dataKey='chr_position'
width={200}
headerRenderer={({dataKey})=> 'chr_position'}
/>
<Column
dataKey='allele'
width={100}
headerRenderer={({dataKey})=> 'allele'}
/>
</Table>
</div>
);
}
}
export default ExpectoSnpTable;
Example