表格样式无法正常工作

时间:2018-03-09 23:06:12

标签: react-virtualized

我一直在对这个主题进行一些研究,现在我已经与Grid,List和MultiGrid一起使用了反应虚拟化并且让它们正常工作。我曾经在桌子上遇到过一些问题。尽管我没有遵循所有说明和文档,但我似乎无法正确地呈现表格列,尽管我还没有能够使其正常工作,但我们将非常感谢任何帮助。

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

0 个答案:

没有答案