React-Virtualized Table only showing one column

Question

I'm using react-virtualized's table and defined 4 columns for that table. For some reason it only displays the 1st column. I can not get the other columns to display. Not sure what I'm doing wrong. Below is a snippet of the code:

const BTable = ({bdata}) => { 
return(
    <AutoSizer disableHeight>
        {({ width }) => (
            <Table
                headerHeight={20}
                height={300}
                width={width}
                overscanRowCount={5}
                rowHeight={20}
                rowGetter={({index}) => (bdata[index])}
                rowCount={bdata.length}
                noRowsRenderer={() => (<div></div>)}>
                <Column
                    label='Id'
                    cellDataGetter={
                      ({ columnData, dataKey, rowData }) => (rowData[dataKey])
                    }
                    dataKey='id'
                    width={200}
                    />      
                <Column
                    label='Account'
                    cellDataGetter={
                      ({ columnData, dataKey, rowData }) => (rowData[dataKey])
                    }
                    dataKey='account'
                    width={200}
                    />      
                 ....
                 ....
         </Table>
     <AutoSizer>
)

Answer 1

我刚遇到这个问题，原来我忘了从react-virtualized导入CSS文件。import 'react-virtualized/styles.css' 在index.js中（或您想导入的任何地方）。