0

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

Kevin Yao
  • 25
  • 5
  • Copy-pasting the code you provided into Code Sandbox and it works fine: https://codesandbox.io/s/ryol1rll9n. You really need to provide more information (like a runnable example that shows what's breaking for you). – bvaughn Mar 10 '18 at 00:59
  • Thanks for the help! I added an example of my current output for this below my code, which is the output it was giving. I wasn't sure if there was something wrong with the styles.css file that I'm giving it, or maybe the path is wrong? If there's any other information I can give that can clarify my problem, please let me know. – Kevin Yao Mar 12 '18 at 16:25
  • I would guess something's wrong with your Webpack config with CSS module loader. – bvaughn Mar 14 '18 at 15:50
  • Hmm, I think you're right, I ended up just shifting to just use the Grid, I'll try to figure out what's wrong with my webpack in the mean time, thanks for the all the help anyways! – Kevin Yao Mar 15 '18 at 16:21

0 Answers0